Creative Coding with P5.js
Introduction to p5.js
Your Digital Sketchbook
p5.js is a JavaScript library that makes coding accessible for artists, designers, and beginners. Think of it as a sketchbook for writing code that creates visuals. Instead of drawing with a pencil, you write instructions to draw shapes, respond to mouse movements, and create animations.
Devoted to visual design and teaching non-programmers? P5.js is your answer.
It's built on the core ideas of a project called Processing, which was designed to help people who weren't programmers start making visual art with code. p5.js brings that same spirit to the web. You can create anything from simple interactive drawings to complex data visualizations, all running right in a web browser.
The Web Editor
The easiest way to start with p5.js is by using its free online editor. You don't need to install any software. Just open the editor in your browser, and you have a complete environment for writing and running your code.
The editor has a simple layout. On the left is the text area where you'll write your code. On the right is a preview area where you'll see the visual output of your code. At the top, you'll find a "Play" button to run your sketch and a "Stop" button to end it.
This setup lets you experiment quickly. You can change a line of code, press Play, and instantly see the result.
The Structure of a Sketch
Every p5.js program, called a "sketch," has the same fundamental structure. It's built around two special functions: setup() and draw().
// This function runs once when the sketch starts.
function setup() {
// Initialization code goes here
}
// This function runs repeatedly in a loop.
function draw() {
// Drawing code goes here
}
The setup() function runs just one time, right at the beginning. This is where you prepare your canvas, like setting its size. Think of it as getting your paper and pencils ready before you start drawing.
The draw() function runs after setup() is finished. But unlike setup(), it runs over and over again in a continuous loop. By default, it runs about 60 times per second. This is the heart of your sketch and where you'll put the code that creates animations and responds to interaction.
Your First Drawing
Let's draw a simple circle. In the p5.js editor, you'll see some default code. Replace it with this:
function setup() {
// Create a canvas 400 pixels wide and 400 pixels tall.
createCanvas(400, 400);
}
function draw() {
// Set the background color to a light gray.
background(220);
// Draw an ellipse at position (200, 200)
// with a width and height of 50 pixels.
ellipse(200, 200, 50, 50);
}
Now, press the Play button. You should see a gray square with a small circle in the center.
Let's break down the new commands:
createCanvas(400, 400): This creates your drawing area. The first number is the width and the second is the height, both in pixels.background(220): This fills the canvas with a color. The number 220 represents a light gray on a grayscale scale from 0 (black) to 255 (white).ellipse(200, 200, 50, 50): This draws an ellipse. The first two numbers are the x and y coordinates for its center. The third and fourth numbers are its width and height. Since the width and height are the same, we get a perfect circle.
In p5.js, the coordinate system starts from the top-left corner. The point (0, 0) is the very top-left pixel. The x-values increase as you move to the right, and the y-values increase as you move down.
Try changing the numbers in the ellipse() function and running the sketch again. See if you can move the circle to a different spot or change its size. This is the core of creative coding: writing simple instructions, seeing the result, and experimenting.
What is the primary purpose of the p5.js library?
In a p5.js sketch, the setup() function runs repeatedly, while the draw() function runs only once at the beginning.
You now have the basic tools to start creating with p5.js. You know how to set up a sketch and draw a simple shape.