How to animate in p5.js?

@edmond_brakus 

To animate in p5.js, you can use the draw() function, which is continuously called by p5.js at a specified frame rate. Here is a simple example of how to create a basic animation in p5.js:

1. Create a new sketch in the p5.js web editor or set up p5.js in your local development environment.
2. Inside the sketch, define the setup() function, where you can set up the canvas size and any initial variables.
3. Define the draw() function, where you will put the code for your animation.
4. Inside the draw() function, use shapes, colors, and other graphics functions to create the elements of your animation.
5. To animate elements, update their positions, sizes, or colors within the draw() function. You can use variables to store changing values and increment them each frame to create movement.
6. Remember to use the background() function at the beginning of the draw() function to clear the canvas each frame and prevent objects from leaving trails.
7. You can also control the frame rate of the animation using the frameRate() function.
8. Experiment with different p5.js functions and variables to create complex animations with user interactions, physics simulations, and more.

Here is an example code snippet for a simple animation in p5.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

function setup() {
  createCanvas(400, 400);
}

let x = 0;

function draw() {
  background(220);
  
  // Draw a moving rectangle
  fill(0, 0, 255);
  rect(x, 200, 50, 50);
  
  x = (x + 1) % width; // Move the rectangle horizontally
  
  // Add a delay to make the animation smoother
  frameRate(30);
}

This code creates a moving blue rectangle that moves horizontally across the canvas. You can modify and expand upon this example to create more complex and visually appealing animations in p5.js.