Event handling

As mentioned there are two ways to handle interaction: variables and event handling.

Variables work best when the draw() function is automatically called 60 frames per second.

However, certain applications may not require the canvas to be redrawn 60 frames per second, which can be expensive CPU usage, particular for battery-powered devices.

For event handling applications we can switch off the 60 fps calls to the draw() function by calling the noLoop() function. It is best to call noLoop() in the setup() function before the draw() function is called.

If noLoop() is called there are two ways to draw to the screen. One is to called the redraw() function which will result in the draw() function being called once to update the screen. Alternatively the loop() function can be called which starts the 60 fps calls to the draw() function to start it animating again.

Mouse Event Handling Functions

p5.js makes event handling simpler than when using JavaScript and HTML. There are a number of functions that you can implement that will be invoked when an event occurs:

• mouseMoved()
• mouseDragged()
• mousePressed()
• mouseReleased()
• mouseClicked()
• mouseWheel()

Next: Workshop 3