Mouse events? | Sololearn: Learn to code for FREE!

+3

Mouse events?

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?

3/2/2017 6:14:43 PM

Noah Wise

6 Answers

New Answer

+3

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

+3

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

+3

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

+2

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

+2

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

+2

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