processing js, bad graphics resolution on mobile

rojele

Hi, all. I'm working in a project that implies the use of processing graphics within an html doc. Everything went fine until I set the viewport meta-tag for mobile uses on the html header Since this very moment, the quality of graphics has worsened. It's like a misunderstanding of the resolution output or whatever. The fact is graphics are very pixelated now in the mobile version (android and apple (working fine on iPad))

on setup(processing): size(w, h, P2D);

where: (on previous javascript tag) var h = window.innerHeight; var w = window.innerWidth;

Does anyone have experimented this problem before? I'd be very grateful for any advise you could give to me.

(Ups: I forgot to say that smooth is present on setup)

koogs

you could print the values out and see if they look right.

rojele

Hi, @koogs, as I can see when I output the resolution values with an alert, they indicate the half of the value of the screen specs of my mobile. I imagine that processing is generating graphics at the half of the resolution and then the viewport tag is zooming them. Is there any way of deactivating the viewport tag influence only for the canvas? Any idea? Lot of thanks in advance.

GoToLoop

https://forum.Processing.org/two/discussions/tagged/screenwidth

rojele

The problem persists with whatever dimensions of screen are detected (screenwidth, innerwidth, etc..) because graphics are being zoomed by default when the viewport meta-tag is present. Any idea on how to deactivate it for the canvas?

GoToLoop

I don't think the old Pjs library got any support for "retina" high-density displays.
I'm afraid you're gonna need to learn JS in order to use p5.js library: :-<

1. http://p5js.org/reference/#/p5/displayDensity
2. http://p5js.org/reference/#/p5/pixelDensity

rojele

Thanks for the advise, @GoToLoop. The problem sure it's in the high-density issue. I think it would be the best to start working directly with js, too.

GoToLoop

Since you already know Java, your 1st stop in order to transition to JS is to look up classes in JS:
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

This Processing to p5.js transition tutorial is very helpful too:
https://GitHub.com/processing/p5.js/wiki/Processing-transition

And of course, a general reference for JS language: O:-)
https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference

rojele

Lot of thanks!