DailyJS

p5.js

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

graphics processing

p5.js

Posted by Alex R. Young on .
Featured

graphics processing

p5.js

Posted by Alex R. Young on .

p5.js

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) {
    fill(0);
  } else {
    fill(255);
  }
  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!