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 by p5.js Contributors and the Processing Foundation is licensed under CC BY-NC-SA 4.0.
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.