We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hello all, Im looking for some help on what should be a very simple problem. I have an application which looks great in the desktop version of processing using size(320, 460, "processing.core.PGraphicsRetina2D")
When I move it to processing.js it looks very fuzzy. I've been and looked all over the web and read all about pixel ratios and webkitbackingstore, and the solution seems very simple. scale the canvas up and let CSS scale it back down again.
Sites like this were very useful, however they do tend to assume you can translate the advice they are giving into your own HTML and CSS.
Heres the rub. Processing was supposed to be developed to help among others artists etc without needing to learn a massive amount of other stuff about programming.
I only want to program in processing. I have seen enough people doing stuff with
So my question is, is there any kindly and knowledgable person out there who can take a look at my simple index.html and put the right code in there so it will look nice on a retina display? It would be a helpful resource for others in the future.
<!DOCTYPE html manifest="cache.appcache"> <!We may need to add AddType text/cache-manifest .appcache to apache server config or .htaccess>
Hi - I've the same problem - did you find a solution?
Processing.JS is very old and much probably doesn't have any Mac Retina renderer and such! (~~)
There is a newer version now -> 1.4.7. It's worth a try, don't you think? >-)
If I read that correctly, this isn't a CSS issue — there's no way to tell the browser to do this automatically. You need to render the pjs sketch at double size (probably drawing to a PGraphics) then scale that down to fit your sketch size. This is the same technique that's used for rendering images bigger than your screen in "classic" Processing. The stuff with devicePixelRatio and backingStoreRatio in the HTML5Rocks article is just to check when you need to do so, to avoid wasting resources.