LuisLlamas Logo
javascript-p5js

Using Processing on the Web with P5.js

  • 4 min

P5.js is a JavaScript library inspired by the Processing programming language, designed to facilitate the creation of interactive graphics, visual art, and multimedia experiences.

Processing is a programming language and development environment oriented towards visual arts. Processing has had a significant impact on the programming community. P5.js is, in many ways, its direct descendant adapted for the web.

P5.js stands out for several reasons:

  • Ease of use: Its syntax is accessible for beginners and its approach is suitable for both artists and developers.
  • Flexibility: It provides a wide range of tools for creating 2D and 3D graphics, animations, and visual effects.
  • Interactivity: It allows us to easily create interactive applications, responding to user events like clicks and movements.
  • Documentation and Community: It offers extensive documentation and an active community that facilitates learning and problem-solving.

For more information about p5.js, you can check the official p5.js website, explore the complete documentation, and access the GitHub repository to see the source code and contribute to the community.

Installing P5.js

To start using p5.js in our projects, we have several options. We can include p5.js directly in our HTML via a <script> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
Copied!

If we are using a development environment that supports npm, we can also install it with the following command:

npm install p5

How to use p5.js

Let’s see how we can start using p5.js with some practical examples. p5.js uses two main functions for most of its projects: setup() and draw().

Create a canvas

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>
Copied!

Draw basic shapes

The following example sets up a canvas and draws a circle and a rectangle.

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

function draw() {
  fill(255, 0, 0); // Red color
  ellipse(200, 200, 100, 100); // Draws a circle

  fill(0, 0, 255); // Blue color
  rect(100, 100, 150, 75); // Draws a rectangle
}
Copied!

Interactivity with the User

p5.js also allows us to interact with the user. We can add events like mouse clicks to change the color of objects on the canvas.

let color = 'blue';

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

function draw() {
  fill(color);
  ellipse(mouseX, mouseY, 100, 100);
}

function mousePressed() {
  color = (color === 'blue') ? 'red' : 'blue';
}
Copied!

In this example, we change the circle’s color when we click on the canvas.

Create Animations

p5.js makes it easy to create animations via the draw() function, which is called continuously.

let x = 0;
let speed = 2;

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

function draw() {
  background(220);
  fill(255, 0, 0);
  ellipse(x, height / 2, 50, 50);
  
  x += speed;
  if (x > width || x < 0) {
    speed *= -1;
  }
}
Copied!

In this code, the circle moves horizontally and bounces off the edges of the canvas.

On this page