Hi. I would be grateful for your thoughts as to why my code fails to print “mouse is over graphic” when I move the mouse over the image “pg.” (However, if I set it up as createCanvas rather than createGraphics, it works.) Thanks in advance!
let pg;
function setup() {
createCanvas(400, 400);
background(0);
pg = createGraphics(200, 200);
pg.clear();
pg.mouseOver(over);
}
function draw() {
//bottom layer;
fill(0,0,200);
rect(300,300,100,100);
//top layer
pg.fill(0,255,0);
pg.rect(0,0,200,200);
image(pg, 0, 0);
}
function over(){
print("mouse is over graphic");
}
well inside the canvas usually make our own OVER function as https://p5js.org/reference/#group-Events
not have that.
using the pix position of rects…
so i was thinking you want that, sorry
Either b/c they’re not appended to the browser’s DOM at all; such is the case of the p5.Image instance created by createImage() & loadImage(): p5js.org/reference/#/p5.Image
As long as an element is invisible, it’s gonna ignore all user interaction events over it.
If you really wanna make your p5.Graphics instances created by p5::createGraphics() respond to user interaction events, you’re gonna have to make them visible 1st by invoking their method p5.Element::show(): p5js.org/reference/#/p5.Element/show