08/11/2024, 14:16 Learn p5.

js: Animation Cheatsheet | Codecademy

Cheatsheets / Learn p5.js

Animation

The draw() Function

The draw() function is automatically called after the function setup(){

setup() function, which runs once at the program’s
// Runs once at the start of the
start. The draw() loop infinitely runs the code block
inside the function from top to bottom. program
}
function draw(){
// Loops infinitely after setup() is
run
}

Incrementing Values

A value is incremented by writing the following function draw(){

expression:
ellipse(xPos, 100, 100, 100);
x = x + 1 // Increment x position by 5 every draw
loop
xPos += 5;
}
Above can be rewritten as:

x++;

or

x += 1;

In all three expressions, the x variable is taking its own

value and adding 1 to it. The value 1 can be changed to
any other number.

https://www.codecademy.com/learn/learn-p5js/modules/p5js-animation/cheatsheet 1/5
08/11/2024, 14:16 Learn p5.js: Animation Cheatsheet | Codecademy

The random() Function

The random() function returns a random decimal function draw(){

value between 0 and 1.
// Generate a random value between 0
When one numeric argument is given to the random()
function, it returns a random decimal value between 0 and width
and the value of the given argument. let randomX = random(width);
When two numeric values are given as arguments, the
// Generate a random value between 15
function returns a random decimal value between the
first argument and the second argument. and 100
let randomSize = random(15, 100);

circle(randomX, height / 2,
randomSize);
}

FPS

Frames Per Second (FPS) specifies the number of

frames displayed every second. p5.js automatically runs
the program at 60 frames per second. This means that
the draw() function runs repeatedly 60 times per
second.

The frameCount Variable

To keep track of the number of frames rendered, p5.js function draw() {

provides a built-in variable called frameCount . This
// Animate ellipse's x position
variable stores the number of frames that have been
displayed since the program started. to move from left to right as the
The value of the frameCount variable updates with frameCount variable increases
every frame. The first time the draw() loop runs, the
ellipse(frameCount, height / 2, 100,
frameCount variable’s value is one; the second time,
the frameCount is two; and so forth.
100);
}

https://www.codecademy.com/learn/learn-p5js/modules/p5js-animation/cheatsheet 2/5
08/11/2024, 14:16 Learn p5.js: Animation Cheatsheet | Codecademy

The frameRate() function

p5.js will automatically run your code at 60 frames per function setup() {
second. However, you can manipulate the FPS value by
createCanvas(400, 400);
using the frameRate() function, which will change the
number of frames shown per second. The maximum // Set frame rate to 24 FPS, which will
number of frames that can be drawn is 60 FPS. make the sketch run at a slower rate than
the default 60 FPS
frameRate(24);
}

Decrementing Values

A value is decremented by writing the following function draw(){

expression:
ellipse(100, yPos, 100, 100);
x = x - 1 // Decrement y position by 5 every draw
loop
yPos -= 5;
}
Above can be rewritten as:

x--;

or

x -= 1;

In all three expressions, the x variable is taking its own

value and subtracting 1 from it. The value 1 can be
changed to any other number.

https://www.codecademy.com/learn/learn-p5js/modules/p5js-animation/cheatsheet 3/5
08/11/2024, 14:16 Learn p5.js: Animation Cheatsheet | Codecademy

The noise() Function

The noise() function returns a random decimal value

between 0 and 1, based on Perlin noise.
Since the noise() function generates a naturally
ordered sequence of random numbers, this function is
useful for creating more natural random movements.

User-defined Functions

User-defined functions can be called inside the let xpos, ypos;

draw() and setup() function. If a user-defined
function containing p5.js functions is called outside of
the draw() or setup() function, they may not run as function setup(){
intended. // Call init() custom function inside
setup()
init();
}

function draw() {
// Call display() custom function
inside draw()
display();
}

// Define custom functions outside of the

setup() and draw() functions
function init(){
xpos = width / 2;
ypos = height / 2;
}

function display() {
fill(255);
ellipse(x, y, 50, 50);
}

https://www.codecademy.com/learn/learn-p5js/modules/p5js-animation/cheatsheet 4/5
08/11/2024, 14:16 Learn p5.js: Animation Cheatsheet | Codecademy

Function Parameters

Parameters are a way to introduce variations into your function draw() {

functions. Variables in the draw() function can be
// 0 and 5 are passed in as arguments
passed into the user-defined functions as arguments.
// Circle is drawn at (0, 5) coordinate
makeCircle(0, 5);

// 10 and 15 are passed in as arguments

// Circle is drawn at (10, 5)
coordinate
makeCircle(10, 15);
}

// Custom function with parameters for x

and y positions
function makeCircke(x, y) {
circle(x, y, 20);
}

Print Share

https://www.codecademy.com/learn/learn-p5js/modules/p5js-animation/cheatsheet 5/5