p5.js carries Processing's accessibility goal to the browser as a visual-first creative-coding environment

p5.js is a JavaScript library that carries forward the original goal of Processing — making coding accessible to artists, designers, educators, and beginners — but targets the browser instead of Java on the desktop. It is oriented toward visual output: drawing shapes, colors, and animations on a canvas that runs across desktops, laptops, tablets, and phones. It inherits Processing’s model: a setup()/draw() loop, the coordinate canvas, and a suite of drawing primitives. Because code produces immediate visible output, it makes abstract programming fundamentals — variables, conditionals, iteration, functions, objects — concrete, which is why it is often the first environment creative coders learn. The p5.js web editor (editor.p5js.org) runs in the browser with no installation, lowering the barrier to a first sketch, and the p5.sound addon extends it to browser-based audio-reactive and generative work.

Examples

function setup() { createCanvas(400, 400); }
function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50); // a circle follows the mouse
}

The same setup()/draw() structure would run as Processing/Java on the desktop; here it runs in a browser tab with no install.

Assessment

Explain what makes p5.js suited to teaching programming fundamentals to beginners, referencing its immediate visual output and no-install browser editor, and name three fundamentals such a course covers. Describe the setup()/draw() model and why it suits interactive visual work, and state what p5.js inherits from Processing versus what it changes.