Is it reasonable to use John Resig's Processing.js?

Question

I am thinking about making a website with some fairly intense JavaScript/canvas usage and I have been looking at Processing.js and it seems to me that it would make manipulating the canvas significantly easier. Does anyone know any reasons why I shouldn't use Processing.js? I understand that older browsers won't be able to use it, but for now that's ok.

Answer 1

As mentioned, IE is not supported by Processing.js (including IE8 beta). I've also found processing.js to be a bit slow in terms of performance, compared to just using canvas (especially if you're parsing a string with Processing language, instead of using the javascript API).

I personally prefer the canvas API over the processing wrapper, because it gives more me control. For example:

The processing line() function is implemented like this (roughly):

function line (x1, y1, x2, y2) {
  context.beginPath();
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.closePath();
  context.stroke();
};

And you'd use it like this (assuming you're using the javascript-exposed API):

var p = Processing("canvas")
p.stroke(255)

////Draw lines...///
p.line(0,0,10,10)
p.line(10,10,20,10)
//...and so on
p.line(100,100,200,200)
////End lines////

Notice that every line() call has to open and close a new path, whereas with the canvas API you can draw all the lines within a single beginPath/endPath block, improving performance significantly:

context.strokeStyle = "#fff";
context.beginPath();

////Draw lines...///
context.moveTo(0, 0);
context.lineTo(10, 10);
context.lineTo(20, 10);
//...so on
context.lineTo(200, 200);
////End lines...///

context.closePath();
context.stroke();

Answer 2

If you're OK with it not working in IE7, then go for it. I've had it working in Firefox 3. It's a slick way to bring Silverlight/Flash effects to your page.

My hunch is that libraries like Processing.js will change or be upgraded on a fast track path, so get ready to run when they do and keep up with the new features.

Answer 3

It doesn't simplify drawing on your canvas. What it does do is simplify the task of animation if you are using canvas. If you are doing animation and you don't care about full browser support then use Processing.js. If you are not doing animation (if you are doing charting or rounded corners for example) then don't add the overhead of Processing.js.

Either way, I recommend that you learn how to use the canvas API directly. Understanding the canvas api, especially transformations, will greatly help you even if you are using Processing.js.

Answer 4

I'd say use Flash instead. More browsers have Flash installed, than the number of browsers that work with processing.js. In addition, you'll get much better performance from Flash versus using JavaScript (at least for now, though there are projects in the works to speed up JS a lot, but it's still a little ways off)

Answer 5

Try the new javascript implementation p5js p5js.org

Oh and in response to Leo's answer, you actually don't have to use the line function in processing or p5js, there are separate beingShape and beingPath functions similar to the canvas api.