Creative Coding with p5.js: A Classroom Guide

p5.js is a JavaScript library created by Lauren McCarthy that brings the Processing creative coding environment to the web browser. It is designed to make creative expression through code accessible to people who have never programmed — and it is free, open source and requires no installation. For students who are not motivated by typical "coding" activities, making visual art that responds to mouse and keyboard interaction opens an entirely different door into computing.

What Is Creative Coding and Why Does It Matter?

Creative coding uses programming not to solve a computational problem but to produce an aesthetic experience — interactive animation, generative art, music visualisation, data art or playful simulations. It matters for education because it connects computing to subjects students already care about: visual arts, music, design and storytelling. Students who cannot see themselves as "coders" often discover genuine enthusiasm when code produces something beautiful.

p5.js is used in art schools, design programmes and general computer science curricula at secondary and university level globally. The Processing Foundation maintains excellent free teaching resources and a vibrant online community.

Getting Started with the p5.js Web Editor

Open editor.p5js.org in any browser. You will see a two-panel interface: code on the left, live preview on the right. Click the Play button and the sketch runs immediately. The default sketch draws a grey canvas and does nothing — that is your blank page. No installation, no account required for basic use (create a free account to save your work).

The two essential functions in every p5.js sketch are setup() — which runs once when the sketch loads — and draw() — which runs 60 times per second in a loop. Everything you put in draw() is redrawn every frame, enabling animation.

First Projects: Drawing, Colour and Animation

A typical first p5.js lesson draws a circle that follows the mouse cursor: place ellipse(mouseX, mouseY, 50, 50) inside the draw() function. Students see immediate, satisfying results and naturally experiment — changing the 50s to other numbers, adding fill() with colour values, adding a background() call to clear each frame (making the circle move) or removing it (leaving a trail). Each experiment is a learning loop without explicit instruction.

Within two hours, most students can create a sketch with multiple shapes, colours that change based on mouse position and basic animation. The speed of progress relative to traditional text-based programming is dramatically higher for beginners.

Connecting p5.js to the Wider Curriculum

Mathematics: trigonometric functions (sin and cos) produce wave animations and circular motion — students understand periodic functions viscerally when they see them animate. Physics: gravity and velocity simulations model Newtonian mechanics. Music: p5.sound library enables audio visualisation and simple synthesis. Social data: load an external CSV and visualise it as an animated chart.

The cross-curricular connections make p5.js particularly valuable in interdisciplinary project-based learning contexts — a student can create a data art piece for geography, a generative musical instrument for music class and a physics simulation for science using the same tool and the same codebase skills.

Assessment and Sharing Student Work

Students share p5.js sketches as links from the web editor or by publishing to OpenProcessing.org, a community gallery specifically for Processing and p5.js work. OpenProcessing allows public comments from the global creative coding community — an authentic audience that extends well beyond the classroom. For portfolio use, embed the sketch iframe on a personal website using Google Sites or Carrd.