Creative coding with p5.js

By Saber Khan. Posted

p5.js code. Image credit: Saber Khan

Saber Khan introduces p5.js, a JavaScript library for visual arts from the Processing Foundation, as a welcoming way to start text-based programming

The transition from block-based programming, on platforms like Scratch, to text-based coding can be challenging for students and teachers. Often, learners are asked to dive deep into arcane terminology and engage in projects that are uninspiring. Instead, prioritising accessibility and creativity, as Scratch does with its ‘low floor, high ceiling’ philosophy, can create an easy pathway to the powerful world of text-based coding.

p5.js and its older cousin Processing, a Java library and editor, share that spirit with Scratch and other block-based platforms. They seek to level the playing field of coding by bringing artists, students, educators, novices, and amateurs into the fold. Processing was created by Ben Fry and Casey Reas in 2001 at MIT Media Lab, and p5.js was created by Lauren McCarthy in 2013. Both are open-source projects and under continual development from a community of contributors. p5.js offers an accessible avenue for students to learn the basics of coding via creativity, self-expression and art. It comes with an online editor, a growing body of curricula, and an inclusive community.

As a JavaScript library, p5.js adds extra functions, making it easier to create shapes, colours and animation. It creates a canvas on a webpage where the coder can quickly see the result of what they have coded. This quick and easy response helps students become engaged with the mechanics of how the code works. Each p5.js sketch or project starts with two pre-existing functions: setup() and draw(). The setup() function, which runs once at the start of the sketch, is a good place to put in commands like createCanvas(400, 400). The numbers in between the parentheses, called arguments, are often used with functions to specify how a command should be run. Here, ‘400, 400’ is creating a canvas that is 400 by 400 pixels wide.

In contrast, in the draw() function, all the commands are looped endlessly from top to bottom. In there, you will see background(200), which puts a colour on top of the canvas. With this knowledge in mind, it would be a good moment to head over to the online editor, which works on all major browsers, and try some coding for yourself. You don’t need to have an account to use the editor. Please keep in mind that p5.js will work in projects outside of the editor; you just to link to the p5.js library online in your HTML file.

Try this for your first program in the p5.js editor:

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

function draw(){
background(200);
ellipse(200, 200, 50);
}

Let’s make a painting program

You can read more about ellipses, other shapes, and more on the p5.js reference page: p5js.org/reference. There is information on other functions and variables built into p5.js, including fill(), mouseX, and mouseY. The fill() command lets the program put in a colour for the shapes using colour names, RGB numbers, or HSB number. And mouseX and mouseY variables let the program know the x and y position of the mouse, respectively. Let’s use them with the ellipse command.

fill('blue');
ellipse(mouseX, mouseY, 50);

The ellipse is drawn wherever the mouse goes. We can take this idea to build our first program, a painting application. The first question you have to solve is how to preserve the old circles. My hint: draw() is a loop from top to the bottom. Once you have figured that out, try to make a palette that lets users pick the colour for the paint. This will probably require using conditional statements, if-then statements, or creating functions.

A simple painting program:

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

function draw(){
fill('blue');
if(mouseIsPressed){
ellipse(mouseX, mouseY, 50,
50);
}
	
}
Web editor p5.js. Image credit: Saber Khan

There are many different directions to go in, and online guides available as support. There are various paths available for you and your students, depending on what modality you prefer.

The New York City Department of Education has been collaborating with the Processing Foundation to bring creative coding to their students via p5.js. They have made the curriculum publicly available. I can’t fit everything into my classes, so I often use it as a guide or borrow ideas from it. Another option is to follow Dan Shiffman’s Coding Train videos on YouTube. Dan’s energy and joy are infectious. He provides an accessible playlist of beginner videos. For intermediate or advanced lessons, his videos include topics on machine learning, game development, and more. Beyond these two essential resources, he shares tutorials on Medium, Twitter, and GitHub regularly.

There are a number of artists and coders in the United Kingdom, or close by, who can provide further inspiration, such as Phoenix Perry, Dave Wythe, and Saskia Freke. As the Processing Foundation Education Community Director, I’m committed to helping students and educators get started with p5.js or Processing. Please get in touch if I can help – you can send me an email at saber@processing.edu.


Educator

Free

If you’re a UK-based teacher, volunteer, librarian or something in between, we'll send each issue free to your door.

Digital

Free

Just want to read the free PDF? Get each new issue delivered straight to your inbox. No fuss and no spam.

Buy

From £6

If you are UK-based but not involved in education, you can get hard copies by buying back issues or subscribing via our partner service.