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 PMNoah Wise
6 AnswersNew Answer
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
Ok I'll be sure to check those out. Thanks again!
Thanks again seamiki! I love the coding train videos. The callbacks only work in p5 though, right?
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
all the p5js DOM playlist is very comprehensive with examples for any type of user input/events.