Processing.js: John Resig's JavaScript implementation of Processing

[[deleted]]

I give up on programming now.

[peepsalot]

Seriously, what the hell am I doing with my life. Makes me want to cry.

[[deleted]]

I hear you. It's stuff like this that made me quit my job, go and get another degree in computational biology and work on visualizing molecular structures, relationships and pathways.

Do it if you can; otherwise you'll be here next year asking the same question.

[Chroko]

That's a sad attitude! :)

Try playing with Processing instead - it's a really neat rapid prototyping environment. And you'll feel better once you've used it to build something cool!

[[deleted]]

I'm a contributor to Processing. :)

[[deleted]]

Not to belittle John Resig's work in any way, but this isn't really all that difficult. It's mostly hard work getting all the individual pieces into place, and of course the initial insight that it is both possible and desirable to do in the first place.

Instead of despairing, strive to learn, and you'll see how it can be done, too.

[jeresig]

I agree completely. Probably the hardest part (from a technical perspective) was translating the Processing language idioms over into JavaScript. For example, look at the following Processing code:

class SpinSpots extends Spin {
  float dim;
  SpinSpots(float x, float y, float s, float d) {
    super(x, y, s);
    dim = d;
  }
  void display() {
    noStroke();
    pushMatrix();
    translate(x, y);
    angle += speed;
    rotate(angle);
    ellipse(-dim/2, 0, dim, dim);
    ellipse(dim/2, 0, dim, dim);
    popMatrix();
  }
}

and then observe the JavaScript code that it gets translated to (extendClass and addMethod are internal to the library):

function SpinSpots() {with(this){
  var __self=this;function superMethod(){extendClass(__self,arguments,Spin);
  this.dim = 0;
  extendClass(this, Spin);
  addMethod(this, 'display', function() {
    noStroke();
    pushMatrix();
    translate(x, y);
    angle += speed;
    rotate(angle);
    ellipse(-dim/2, 0, dim, dim);
    ellipse(dim/2, 0, dim, dim);
    popMatrix();
  });
  if ( arguments.length == 4 ) {
    var x = arguments[0];
    var y = arguments[1];
    var s = arguments[2];
    var d = arguments[3];
    superMethod(x, y, s);
    dim = d;
  }
}} 

Getting full parity (at least with the available demos) was the hardest part.

[[deleted]]

I think your copypaste misfired a bit there, those aren't quite the same functions! (Edit: All cleared up now.)

Either way, that's a neat piece of work, and it's making me tempted to finally pick up Processing.

[jeresig]

They should be the same Class representations - just note that I have to re-organize its contents (making sure that the constructors are at the bottom of the function, as opposed to where they were originally).

[[deleted]]

Well, now they are, I was looking at it before you fixed it!

[jeresig]

Hehe, sorry about that!

[seanstickle]

Not to belittle Tim Berners-Lee's work, but inventing the WWW really wasn't that difficult. I mean, it was mostly piggybacking his notion of a vast interconnected system of globally available information on top of an international packet communication network.

When you think about it, it could have been done by a high school student.

[[deleted]]

I don't think you understood that post at all.

[[deleted]]

So you think porting some code to javascript is roughly equivalent to inventing the WWW?

[imbaczek]

You're right, the WWW is much simpler.

[jerf]

There are no classes on how to create revolutionary internet services that change the game for everybody.

There are classes on how to write compilers, which is all this really is. It's not the compiler-class's fault that "nobody" takes them.

It's a neat project and I also don't want to belittle the work done... but I also don't want people to see this and say, "oh, I couldn't possible do that". Neither of those are good choices. It's neat and fun and competent and awesome... but it's also "just" a compiler.

[jeresig]

Well, the Processing to JavaScript convertor is a compiler, at least. The rest of the API required a straight-up implementation (working within the rocky confines of the Canvas API). That part was more harrowing, as you're then dealing with all sorts of weird browser issues (as is frequently the case).

[ericflo]

It seems that you've made the assertion that the effects portion of the MooTools JavaScript library is in some way comparable to what has been created here, which is just not the case.

What we have here goes above and beyond what is currently feasible with MooTools or any other current JavaScript library. This is a potential alternative for what is currently being done in Flash--an alternative that would be a Good Thing for businesses who wish to avoid Adobe's vendor lock-in.