The JavaScript blog.


graphics processing


Posted on .


I'm a big fan of Processing, and I've made lots of my own weird and wonderful graphical sketches over the years. p5.js (GitHub: lmccart/p5.js, License: GPL) by Lauren McCarthy is an entirely new library that's inspired by Processing. It doesn't currently have an integrated IDE, but the authors are working on it. The documentation shows how to use Sublime Text for p5.js development.

Sketches made with p5.js have setup and draw functions. There are globally available methods that provide handy drawing commands:

function setup() {  
  createCanvas(640, 480);

function draw() {  
  if (mouseIsPressed) {
  } else {
  ellipse(mouseX, mouseY, 80, 80);

If you've ever seen Processing before then this should be familiar. In fact, there's a Processing transition article for people with Processing experience.

There are some p5 libraries, like p5.dom for HTML5 manipulation and p5.sound for audio.

The advantage of p5.js over Processing.js is your scripts can use native JavaScript. However, because it uses global methods and special variables (like ellipse() and mouseIsPressed) then it feels more like a domain specific language than a reusable JavaScript library that's safe to drop into an existing project.

For people that love JavaScript and Processing it's definitely worth trying out, and I hope people will create more libraries for it. Also, if you're trying to learn Processing or p5.js then check out The Nature of Code!


benchmarks webgl processing

Processing 1.2, Canvas and WebGL Benchmarks, What is WebGL?

Posted on .

Processing.js 1.2

Processing.js 1.2 has been released. This version improves
WebGL performance, and there's now a guide that shows how Canvas and
WebGL relate to Processing's rendering modes: Understanding Rendering
Modes in

There's a full changelog in the blog post. And, the image above comes
from Spring and

Canvas and WebGL Benchmarks

Ilmari Heikkinen posted some interesting jsPerf Canvas and WebGL

to his blog, which includes a text

Running the benchmarks will show a comparison against other browsers
using Browserscope.

What is WebGL?

What is WebGL? was a talk by Neil Trevett given at the WebGL Meetup
. It's fairly
high-level, but Neil does a good job of explaining how the stack of
technologies required for WebGL come together to make it all possible.

It also mentions a project by Google called
ANGLE which attempts to translate OpenGL ES 2.0 API calls to DirectX 9 for Windows machines that
don't have OpenGL 2.0 drivers. Interesting stuff!