The new p5js web editor is here!

Getting started with coding graphics in the browser is now easier than ever!

Kristian Wichmann
Aug 31, 2018 · 2 min read

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.

Time to create!!!

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.

The editor interface.

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.

Rest in peace. You will be missed :-(

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade