mouseOver created object does not trigger function in p5

p5.js Coding Questions
1

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");
}
1 Like
2

-a- please format your code using the </> code button from forum editor menu

-b- start p5.js from
https://p5js.org/reference/
and examples like
https://editor.p5js.org/p5/sketches/Input:_Mouse_Functions

-c- where you got that

.mouseOver(over);

from , looks like jquery?

1 Like
3

Thanks for your reply. I’ll format the code appropriately in the future.

Re: the use of mouseOver, I’ve drawn from two p5-using examples:

one which uses the canvas as the element

another which uses text as the element

Both of these respond to the mouseOver function. But when I try something similar using a graphic as an element, the mouseOver does not function.

1 Like
4

right,
https://p5js.org/reference/#/p5.Element
does say
https://p5js.org/reference/#/p5/createGraphics
is a DOM element

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

5

These 3 p5 methods below:

  1. loadImage() -> p5js.org/reference/#/p5/loadImage
  2. createImage() -> p5js.org/reference/#/p5/createImage
  3. createGraphics() -> p5js.org/reference/#/p5/createGraphics

They all create a <canvas> element:

However, they’re mainly meant to be rendered to the sketch’s main
p5.Renderer <canvas>:
p5js.org/reference/#/p5.Renderer

Via these 3 p5 methods below:

  1. image() -> p5js.org/reference/#/p5/image
  2. set() -> p5js.org/reference/#/p5/set
  3. background() -> p5js.org/reference/#/p5/background

B/c of that, they are created INVISIBLE!

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

Or in the case of the p5.Graphics instance created by createGraphics():
p5js.org/reference/#/p5.Graphics

They’re indeed appended:

However, they’re explicitly made invisible:

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

3 Likes
6

We can edit our own posts. So you can format your post here in the present. :wink:

Beautifier.io

1 Like
7

My thanks to both kil and GoToLooP for your replies. GoToLoop’s advice to insert the show() function did the trick. :+1: