This example demonstrates the use of loop() and noLoop() to pause and resume the animation.
Clicking the mouse toggles the animation loop. If the animation loop is stopped, the user can press any key to advance one frame. Note: the user must click to set the focus on the canvas for key presses to be registered.
Advancing a single frame is accomplished by calling the redraw() function, which results in a single call to the draw() function.
Animation with Events: Revised by Darren Kessner. Edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.
You can find the code history of these examples here: 2023 code, pre-2023 code. You can suggest improvements by contributing to the current website!
Related Examples
A squiggly rainbow line on a black background.
Drawing Lines
Draw with the mouse.
A small green circle on a black background.
Animation with Events
Pause and resume animation.
White circles on a black background, with varying degrees of transparency.
Mobile Device Movement
Animate based on device motion.
A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background.
Conditions
Use if and else statements to make decisions while your sketch runs.