p5.js, covered in this site’s other beginner tutorial, is a JavaScript port designed to bring creative coding into the browser with nothing to install. Processing is the original it was ported from: a standalone desktop environment, written in and generating Java, that’s been the field’s reference teaching tool since the early 2000s and is still actively maintained by the Processing Foundation. If you’ve only ever heard of it as “the thing p5.js came from,” this is the one you’ve been missing.
Install the IDE, not a library
Unlike p5.js, there’s nothing to add to a web page. You download the Processing IDE directly from processing.org, and it opens to a blank sketch with the same setup()/draw() structure p5.js inherited from it — if you’ve used p5.js, the mental model transfers immediately. The difference that matters is underneath: a Processing sketch compiles to and runs as actual Java, not JavaScript interpreted in a browser tab.
Why that difference is still worth knowing
Three practical reasons a project still reaches for Processing over p5.js:
- Raw performance on heavy sketches. Java sketches with large particle systems, dense 3D geometry, or sustained high frame rates generally have more headroom than the same logic running in a browser’s JavaScript engine.
- Export as a standalone application. Processing can package a sketch as a double-clickable app for Windows, macOS, or Linux — useful for gallery installations and kiosk pieces where you don’t want a browser window, bookmarks bar, or address bar visible at all.
- Direct access to the Java ecosystem and serial/hardware libraries. Talking to Arduino boards, MIDI devices, or using a mature Java library for something niche is often more direct in Processing than finding or writing a browser-compatible equivalent.
Against that: p5.js wins on shareability (a link, not an installer), has no desktop install step for a workshop full of beginners, and its JavaScript syntax is more transferable to web development generally. Neither replaced the other — they serve different endpoints for the same underlying ideas.
Your first sketch
The vocabulary is the same as p5.js’s: setup() runs once, draw() loops continuously, shape functions (ellipse(), rect(), line()) take coordinates in pixels with y increasing downward, and fill()/stroke()/background() set color. Start exactly the same way: animate one shape, then make it respond to mouseX/mouseY. Everything you already know from p5.js (or any other creative-coding environment this site has covered) carries over almost one-to-one — you’re mostly learning where things live in a different IDE, not relearning how to think about a sketch.