Teaching coding with JavaScript and p5.js - Eli Bendersky's website

Why JavaScript and p5.js Are a Great First Combo

When someone asks which language to start with—especially a kid—the practical answer is often JavaScript. The payoff is immediate: code that draws to the screen without any installation overhead. One library in particular, p5.js, was built for exactly this educational purpose and has proven itself in practice.

Consider a trivial demo: circles moving across a canvas, with clicks adding more. Simple as it is, it already contains the core ingredients of a game—colorful rendering, motion driven by basic physics, and user interactivity. The full implementation with p5.js is remarkably compact:

let circles = [];

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

    for (let i = 0; i < 5; i++) {
        circles.push(randomCircleAtPos(
            width / 2 + random(-100, 100),
            height / 2 + random(-100, 100)));
    }
}

function draw() {
    background(240);

    for (let c of circles) {
        c.x += c.xSpeed;
        c.y += c.ySpeed;

        // Bounce off the walls
        if (c.x + c.size / 2 > width || c.x - c.size / 2 < 0) {
            c.xSpeed *= -1;
        }
        if (c.y + c.size / 2 > height || c.y - c.size / 2 < 0) {
            c.ySpeed *= -1;
        }
        fill(c.color);
        circle(c.x, c.y, c.size);
    }
}

function mousePressed() {
    circles.push(randomCircleAtPos(mouseX, mouseY));
}

function randomCircleAtPos(x, y) {
    return {
        x: x,
        y: y,
        size: random(20, 80),
        color: color(random(255), random(255), random(255)),
        xSpeed: random(-2, 2),
        ySpeed: random(-2, 2)
    };
}

The library handles a lot of the boilerplate:

• No HTML needed—createCanvas sets up the canvas, and all drawing happens on it.
• setup is a special function invoked once at startup.
• draw runs automatically every animation frame, with p5.js managing the requestAnimationFrame calls.
• Drawing helpers like background, fill, and circle remove the need to touch canvas contexts or paths.
• mousePressed is another magic callback for canvas clicks; mouseX and mouseY are global mouse coordinates without offset headaches.
• Utilities like color, random, vectors, noise, and range mapping are tuned for simulations and games.

A plain-JavaScript version of the same animation—using raw canvas APIs—is available for comparison on GitHub.

From Processing to p5.js

The lineage starts with Processing, a 25-year-old Java library meant to teach coding through animation and games. In 2007, John Resig created Processing.js, a JavaScript port that Khan Academy adopted for its programming curriculum. p5.js itself arrived in 2013, created by Lauren Lee McCarthy as a web-native interpretation of Processing. The project's own history notes that it draws inspiration from Processing while allowing room to deviate and grow, sustained by community contributors with support from the Processing Foundation.

Processing.js has since been archived, with new users directed to p5.js. Although p5.js feels very similar to the original Java library, the latter is not worth the setup hassle today—the browser is all you need.

Learning Resources

Khan Academy's Computer Programming course still uses Processing.js from unit 4 onward, but it's close enough to p5.js that the difference is ignorable—still a strong resource. The Coding Train is another excellent option, teaching beginners directly with p5.js in an approachable style; the same author's book Nature of Code covers more advanced material. p5.js also ships with an online editor that lets you create multiple projects with live previews right in the browser.

Is p5.js for Professionals?

For seasoned developers, the recommendation leans against p5.js for production work. Its API is wide but shallow; the convenience it offers is small compared to what an experienced JS programmer already knows. Eventually, you'll hit a point where p5.js's abstraction fights your needs, and the raw canvas API isn't that intimidating once you're comfortable with the DOM. The library's biggest selling points diminish quickly.

That said, for a quick game prototype or a fun simulation, p5.js can be a legitimate shortcut. Just weigh the benefit against the dependency cost first.