Mouse events?

Question

How do I use mouse events to affect a rectangle using the canvas fillRect function? I want to be able to click on a rectangle on the canvas and cause it to change (grow in size, change speed, movement direction, etc). I want the mouse event to affect the rectangle only and not the entire canvas. How do I connect it in such a way?

Answer 1

Simple hard coded solution: you check if the position of the cursor is within the limits of your shape during mousePressed().
BETTER SOLUTION
Callbacks
object.mousePressed(functionToExecute);
here is a nice tutorial for p5js
https://m.youtube.com/watch?v=NcCEzzd9BGE

Answer 2

No, Callbacks are a JavaScript concept.
That tutorial is just so awesome: exactly what you need.

Answer 3

Ok I'll be sure to check those out. Thanks again!

Answer 4

Thanks again seamiki! I love the coding train videos. The callbacks only work in p5 though, right?

Answer 5

Ok sweet. Yeah I agree, he's very engaging and good at explaining concepts. Also, is there anything on implementing the event listener? I'm not really sure how to deal with the object. I do understand the boundaries and callbacks stuff though now

Answer 6

all the p5js DOM playlist is very comprehensive with examples for any type of user input/events.