Shared History
Processing was created in 2001 by Casey Reas and Ben Fry at MIT Media Lab with an explicit goal: make programming accessible to artists and designers. p5.js, created by Lauren McCarthy in 2013, is a reinterpretation of Processing for the web: JavaScript instead of Java, browser instead of application.
| Aspect | Processing | p5.js |
|---|---|---|
| Language | Java | JavaScript |
| Environment | Desktop app | Browser |
| Installation | Required | None (online editor) |
| Sharing | JAR / app export | Direct URL |
Getting Started with p5.js: Recommended Path
Step 1: Go to editor.p5js.org. No installation needed.
function setup() { createCanvas(400, 400); }
function draw() {
background(11, 15, 20);
fill(55, 227, 195);
ellipse(mouseX, mouseY, 40, 40);
}
Step 2: Understand the setup/draw cycle. setup() runs once. draw() loops ~60 times per second.
Step 3: Learn the coordinate system. Origin (0,0) is top-left. Y axis goes downward.
Step 4: Essential drawing functions — ellipse(), rect(), line(), fill(), stroke(), translate(), rotate(), push(), pop().
Key Resources
- editor.p5js.org: official online editor
- p5js.org/reference/: complete reference
- The Coding Train: video tutorials
- Free workshops on this site: all tutorials →