This is an old revision of the document!
p5js: making interactive sketches
We talked about using mouseX and mouseY in this lesson:
https://renickbell.net/doku.php?id=p5js-week-02
Let's go deeper on making our sketches interactive.
Think about what data the mouse can give you:
- X position
- Y position
- button clicks
- button releases
- double-clicks
p5js also has some functions that deal with mouse position relative to the previous frame, including detecting mouse movement, mouse dragging, and whether the left button is pressed. There's also a function for mouse wheel, but mouse wheels are not always implemented on mice or may be implemented in different ways.
tracking the mouse
In the following example, we make a box follow the mouse.
making mouse clicks do something
On my laptop, mouseButton == CENTER seems buggy in this example: https://p5js.org/reference/#/p5/mouseButton