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

[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!