Language: EN
LuisLlamas Logo
Search
⏲️ ~ 3 minutes Beginner
javascript-p5js

Using Processing on the Web with P5.js

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 geared towards the 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 create interactive applications easily, responding to user events like clicks and scrolling.
  • 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 site, explore the complete documentation, and access the GitHub repository to view 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 using a <script> tag:

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

If we are using a development environment that supports npm, we can also install it using 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().

Creating 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>

Drawing 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
}

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';
}

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

Creating Animations

p5.js makes it easy to create animations using 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;
  }
}

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

On this page