The new p5js web editor is here!
Getting started with coding graphics in the browser is now easier than ever!
Wait, what is p5js?
p5js is a Javascript library made by Lauren McCarthy. It is heavily inspired by Processing, and is designed to get started with creative coding, by making access to graphics in the browser easy. A great place to start for beginning coders.

The web editor
So, the library is great for getting started coding, but setting up a project, including an html file, linking to the library and Javascript sketch might scare the uninitiated away.

But thanks to the hard work of Cassie Tarakajian, the web editor is now available! This means that you can type your code directly into the browser, and try it immediately by pressing the play button! The sketch will run in the right of the screen. See her introduction here.
Getting started
If you already know Processing, p5js should seem familiar: There’s two main functions:
- setup, which is run at the start of the sketch, and is typically used to set up a canvas to draw on. In the starter code, a 400 by 400 pixel canvas is set up
- draw is than called every frame afterwards, usually making some kind of graphics in the canvas. In the starter code, the background color is set to a light gray (220 brightness out of 255). But there’s many more possibilities, like lines, ellipses, and so on.
For learning more, you can consult the documentation in the p5 reference. Or better yet, follow the new beginner’s video series on the Coding Train, the first of which will air later today.
As I wrote this, I was crushed to hear about the passing of online friend and Coding Train co-passenger Merijn den Houting. I know it’s not much, but I humbly dedicate this blog to his life and memory.

