Using the above code I tested functionality with multiple keys at the same time and found that while shift is held down keyPressed events won't trigger (though keyReleased events will). This kind of seems odd considering how shift is usually a modifier key, so is there any way I can know when someone presses SHIFT + W and etc?
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.
The above code produces "Uncaught TypeError: Type error" but it runs fine if the renderer is set to P2D rather than P3D, does this mean that I can't use PGraphics using 2D renderers with 3D renderers?
Also, if I use P2D for the main renderer and use P3D on a PGraphics it works fine, so would I be able to do the below instead?
PGraphics game;
PGraphics hud;
void setup() {
size(200,200,P2D);
game = createGraphics(200,200,P3D);
hud = createGraphics(200,200,P2D);
}
void draw() {
image(game, 0, 0);
image(hud, 0, 0);
}
Really I'm just looking for a way to use a 2D PGraphics on top of a 3D sketch.
So basically I want a box to be drawn right under the mouse and to be on the edge of a sphere. I've been trying to do this for a bit now and just can't get it right, I'd love it if someone could work this out for me.
This is the furthest I've gotten on it and it's close, but the box is still not directly under the mouse. I believe this is because when the z is pushed forward to accommodate the x and y it is no longer drawn under the mouse because of how the camera sees it in 3D space. I'm just not sure how to compensate for this.
I've probably just got my math wrong or something, but in this sketch boxX is always zero and I don't know why. If the first translation's z is ≥ 0 it works, but if it's negative boxX is always zero.
I print out how boxX is calculated but the equation doesn't equal zero, yet boxX is set to zero somehow. Why does boxX equal zero for every mouseX?
So I'm using the OPENGL renderer and my stuff is starting to disappear when they're pushed back on the Z plane, so I'm guessing I'm hitting some kind of maximum Z coordinate. So what's the maximum Z coordinate? More importantly, how can I go past it?
As a side-note I'm using processing.js on an HTML5 canvas if that makes a difference.
I'm using processing.js in an HTML5 canvas on a web page and basically the canvas/sketch size will be variable, changing on page resize. With 2D I've been able to do this easily by placing size(setWidth,setHeight); in draw() where setWidth and setHeight hold the size of the web page.
With 3D however it's a bit different.
float rotx = -PI/10;
float roty = PI/10;
void draw() {
size(setWidth, setHeight, OPENGL);
background(0);
pushMatrix();
translate(width/2,height/2);
rotateX(rotx);
rotateY(roty);
box(50);
popMatrix();
}
The above code throws the error Uncaught TypeError: Object #<Object> has no method 'rotateX' and the sketch seems to execute draw() only once and the box is never drawn. If size(setWidth, setHeight, OPENGL); is taken out of draw and used in setup everything works fine, but since size is only executed once it's not fluid like I need.
I also tried putting size(setWidth, setHeight, OPENGL); in both setup() and draw() but this throws the error Uncaught Multiple calls to size() for 3D renders are not allowed.
So my real question is how can I get the sketch size to change to a variable within draw() using a 3D render?
If I use the below code to draw a border, I get a diagonal line in the top right corner with the same color as the background. How do I make that little line go away?
When I use fill(x); where x = "#FF0000" it doesn't fill, but if I use fill(#FF0000); then it works fine. How can I get fill to work with a variable hex code?
Map is declared in javascript as an array of arrays with data in it, and prepared doesn't equal one for five seconds which gives the array plenty of time to get data inserted in all the elements. If I use "map[x]" rather than "map[x][y]" it works fine, so I'm thinking it's something with processing.js not being able to work with an array of arrays from javascript like I think if at all.
When I run a sketch containing this the sketch freezes, forcing me to use task manager to close it. What I don't get is I'm not even clicking the mouse, so why would the script freeze the sketch if it hasn't even been ran yet?
void mousePressed() { //-This causes the problem, if taken out the sketch runs fine- while(loopvar == 1) { lx = mouseX; ly = mouseY; }//------------------------------------------------------------------------------------- }
I also get the below error in the console after terminating the sketch's process
Could not run the sketch (Target VM failed to initialize). For more information, read revisions.txt and Help ? Troubleshooting.
I have found that even in a blank script with only the problem part of the script and declarations for loopvar, lx, and ly that it does the same thing, so I'm almost sure the rest of the script isn't causing this.
So basically when I draw a circle in the Processing IDE it comes out really bad, practically a square, especially compared to drawing a simple circle myself in paint with the same dimensions. Is there some way to draw the circle that paint can draw with the circle tool instead of the squarish one I get? It gets better if the circle is bigger, but if I go smaller than this (which is what I need) the bottom and right edges of the circle are completely flat lines like a square.