Offscreen PGraphics handled strangely in processing.js compared to processing
in
Processing with Other Languages
•
28 days ago
So I when I was testing out using an offscreen buffer with processing.js I found something pretty weird...
- PGraphics pick;
- void setup() {
- size(200,200,P3D);
- pick = createGraphics(200,200,P3D);
- }
- void draw() {
- background(0);
- fill(255);
- noStroke();
- pushMatrix();
- translate(width/2,height/2);
- sphere(50);
- popMatrix();
- pick.beginDraw();
- pick.background(255,0,0);
- pick.fill(50,0,0);
- pick.noStroke();
- pick.pushMatrix();
- pick.translate(0,0);
- pick.sphere(50);
- pick.popMatrix();
- pick.endDraw();
- }
- void mouseClicked() {
- println(red(pick.get(mouseX,mouseY)));
- }
So the above code draws an unseen PGraphics and returns the red value of where you clicked on that unseen PGraphics, where if you clicked on the background in it it would return 255 and if you clicked on the sphere drawn it would return 50.
Now I did this exact code in processing and as you can imagine with the sphere on the unseen PGraphics drawn at a translation of 0,0 it should just be drawn at the top left corner so if you click in that area it will return 50. If you translated to 0,50 the sphere would be drawn 50 pixels down from there.
In processing.js however it doesn't do this, it draws the sphere at the bottom left corner of the screen and if you translated to 0,50 the sphere would be drawn 50 pixels up from there. So in processing.js an offscreen PGraphics seems to be on a standard Quadrant 1 cartesian graph where 0,0 is the bottom left corner and y increasing as you go up. This is pretty obscure when computer graphics and processing is drawn with 0,0 at the top left corner and y increasing as you go down.
Is it supposed to be like this? It seems not only weird to do this in the first place, but also the fact that it's backwards from how processing does it.
1