p5.js — It's Great

Are you a front-end web developer? Do you hate HTML canvas? Then you should try p5.js, my go-to graphics library for JavaScript. I used it for Maze Notepad, for this 3D loading bar (), for a desktop GUI video game level editor (), and more. Needless to say, I think it’s great and I’ll show you a few of the many cool features it has to offer.

Keyboard and Mouse Handling (mouseX, keyIsDown(), and More)

Boilerplate code sucks, and p5 removes the need for much of it. No more event listeners and offset calculations to handle keyboard and mouse states — you can skip right to the fun parts. Let’s write the code to draw a circle around the pointer if Ctrl is pressed. 

// Draw a circle around the pointer if CTRL is pressed.
if (keyIsDown(CONTROL)) {
  ellipse(mouseX, mouseY, 60, 60);
}

How easy is that?

DOM Objects

I guess you can add DOM objects to HTML canvas, but its ugly and, at best, a hack. Want to create a slider with p5? 

// Create a slider with min=0, max=100, default=50 at (10, 10).
const slider = createSlider(0, 100, 50);
slider.position(10, 10);

That’s it. Beautiful and elegant.

Vectors from Math (p5.Vector)

Linear algebra hacks?? Well, p5.Vector is quite limited (no matrices and 2D and 3D vectors only). However, it’s easy to use and it’s got your basic operations like magnitude, dot product, etc. — it’s all you need usually. Better yet, there’s no need for transformation matrices since they can be handled with built-in functions.

Actually Good Documentation

Most importantly (in my opinion), p5’s documentation is great. It’s covers the whole library; it’s well organized; and it’s got example code. You can find just about everything you need there, and it’s a great place to discover p5’s more obscure features.

Well, that’s it for today. p5 has many more features, including 3D rendering, audio and video support, spreadsheet features, and much, much more. I hope you give it a try some time.

Comments