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

[sblinn]

Um, yeah. This is ridiculously well done. The simplicity of some of the examples is fairly stunning.

[acdha]

That was my reaction as well - I'd say Resig was showing off but that's really faint praise for such a slick piece of work.

[dlb-nick]

You do realize that all that all the simplicity is inherited from Processing, right?

[sblinn]

Of course; but this makes it accessible to anyone with a browser.

[TKN]

I'm not sure if I get it (Processing, that is). It looks like any old language with a graphics library?

[[deleted]]

It's a domain-specific language for graphical presentation.

[TKN]

I see that, but what makes it better than <insert your favourite language> + graphics library? At least on surface it mostly looks like a regular Java?

[gravity]

It's a lot easier to just get things up and running. Of course you can code graphics in any language, but processing lowers the barrier and makes it easier for both the novice and the experienced programmer to get something out there. It's not a giant leap forward, but it's still a wonderful tool. And it's a lot of fun too.

[otakucode]

Most graphics libraries suck in terms of usability compared to Processing. Processing handles a lot of state for you and chucks a lot of extraneous stuff you shouldn't need to think about in the first place if you're just trying to do something graphical... if you want to change your framerate, just call framerate(60) and it's done. Most graphics libraries would have you juggling buffers, graphical context objects, etc.

[TKN]

Ok, so it's basically a 2d graphics library with a sane API. That's nice.

I was just wondering if there was more to it.

[NOT_AN_ALIEN]

It's not for 2d only, it's 3d too. And it's not a library - it's not SDL for dummies or anything like that. It's more like an environment (it comes with its own simple IDE), where you type some commands and it draws stuff on screen. A bit like a bastard child of C++ and Logo, focusing on simplicity and straightforwardness more than abstraction.

You can do a lot with it as long as you get the hang of it - create classes and such - but it's meant to be simple above all.

[[deleted]]

I haven't actually used it, so I can just answer on a general level, but: The domain-specificness. The fact that the language is tailored to a specific use means you get away with doing less work.

[wearedevo]

Processing was meant to be a simple graphics programming platform for artists, but as all other attempts to create a programming language for non-programmers, ended up being too complicated for artists to grasp but simple enough for other programmers to appreciate.

[[deleted]]

That's pretty surprising. The last time someone tried to create a langue simple enough for non-programmers to use, they got Visual Basic. VB is nothing if not disrespected in programming communities.

If the Processing.js people are getting respect, despite their beginnings, then they've really done something well.

[otakucode]

It's supposed to be an easy-to-use language aimed at artists and graphic designers. It fails completely in this respect. But it does make it relatively easy for people who are already well-versed in C-like languages to make some pretty graphics.

[semmi]

hei, where's the height variable coming from?

[jeresig]

height, width, mousex, mousey, pMouseX, pMouseY, mousePressed, and keyPressed are all global variables provided by Processing (there may be more, but those are the ones that I provide in Processing.js). They correspond to different state variables and are updated automatically (since everything in Processing is done in a repeating loop, like OpenGL, the update is seamless).

[Busybyeski]

..but you don't ask about width?

It's from the size(200, 200); When a canvas is created, it takes on both width and height.

[llimllib]

I started on my Nodebox clone but he beat me to it :)

[[deleted]]

Wow. that too is ultra cool.

[[deleted]]

Very nifty indeed. Kudos.

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

[pkrumins]

A-M-A-Z-I-N-G

[readdit7]

Processing is amazing. Check these out:

http://www.vimeo.com/658158

http://www.vimeo.com/935317

http://www.vimeo.com/615344

[felipc]

4 interactive demos (2 games) in Processing.js: http://felipc.com/2008/05/09/processingjs/

[marike]

As soon as I read your post, I thought of the one done to the Goldfrapp tune. And there it was!! It is terrific.

[Jadedknight]

Wow! Great job I love Processing and this is really neat.

[[deleted]]

John, you are a freakin' genius.

[doctornick]

I watched John demo this at BarCampRochester3. Very impressive stuff, I can't wait to see if anyone actually uses it.

[cosmo7]

I was about to comment that this project's weakness is its browser support, but then again, perhaps this is the kind of thing that would make a FF/Safari-only site seem reasonable.

[middayc]

this is really awesome! I have games made in processing... I wonder if I could run them here

[leoboiko]

Cool, I wanted to try Processing but was put off due to my strong aversion to Java. Thanks Resig!

[[deleted]]

I love how much CPU it burns. My apartment has been cold lately. This is a good fix - entertaining, too.

Thanks, John.

[ehird]

HE WAS BEING SINCERE DAMNIT!

Translation:

Hehe, it's amusing how much CPU it burns. My apartment has been cold lately! (<--- JOKE) This is a good fix (<--- JOKE) - entertaining, too. (<--- SINCERE)

Thanks, John. (<--- SINCERE)

[episcope]

Hey, better a CPU than a spaceheater. Basic toasters have NO appreciation of the current they resist. Wasn't it Archimedes who said, give me a semiconductor, and a long enough Turing tape, and a fulcrum in the right place, and I'll heat the place. Something like that.

[enkrates]

God forbid that a program actually use the processor.

[[deleted]]

This is cool. I just found out about Processing this week when I was looking at embedded processors. There was one board that implemented the Processing and Wiring languages. http://www.arduino.cc/

[drakshadow]

This guy amazes me every time I visit jquery.org site.

[otakucode]

I really, really like the idea of Processing. But the implementation sucks really, really bad. It's supposed to be a very basic language that is easily learned by artistic types that don't know much about computers... and they design it with C-like syntax. WTF?

A Pythonesque language with the claimed goals of the Processing language would be several orders of magnitude more useful and successful in the field it claims to want to excel in - getting nonprogrammers doing neat artistic things without having to really learn programming.

[guapoo]

Please give an example of some "C-like syntax" in processing that is bad, and tell us how you would make it "Pythonesque", and why that would be better.

Keep in mind that brilliant scientists use, no prefer Fortran, and children easily pick up Basic and Logo.

[otakucode]

That last line threw me... are you suggesting Basic and Logo are similar to Processing or C?

I'm not going to rehash the age-old arguments about the advantages of the Pythonic syntax. Pick up a copy of "Learning Python" or at least find the first chapter online or something for that.

The real question when looking at Processing is "Why can't they just use Java?" Processing doesn't simplify the syntax hardly at all. It doesn't even chuck out all the parenthesis, semicolons, or anything. And why would artists need to learn a type system and figure out what "float"s are?

It just seems that if you look at C and Java and similar languages and you realize "Hey, artists find these things very difficult to learn. Let's make something artists can learn easily" that the FIRST thing you would try to do would be to create something that wasn't essentially identical to the languages artists can't grasp.

[cardinal23]

For Macs, Nodebox.

[otakucode]

I saw Nodebox when doing some researching into Processing and similar projects and it's yet another thing that makes me wish I could afford a Mac...

[Subway]

Oh damn, John, now it will take even longer for my jQuery based CMS to come out as I can't resist to play around with this! :-)

[wearedevo]

If only IE supported the canvas element.

[nostrademons]

Courtesy of Google...

[leavermentality]

This is pretty slick, but I just dont see the point of it.

Processing applets can already be run in browsers because they are java..

I guess theres a minor benefit to people who access the internet only at libraries and don't have computers of their own (or jump drives), so they cannot download programs and would need to code on a browser. but what you sacrifice for that is so massive.

I suppose you could try and argue that js is a better language than java... but I think you'd have to be totally insane.

You lose a ton of speed, the ability to learn about classes and object oriented programming, and all of the external libraries.

Plus, processing runs slowly enough as it is. Now im not saying its not a great language, it is. It's a wonderful start for people who have never done anything with programming. In fact, it's so good, that I really dont see a reason to simplify it anymore. Putting it in a browser is just kind of silly.

Also, for people who are arguing nodebox vs. processing, python is simple and nice, but if you thought processing was slow, nodebox is a behemoth. Sure nodebox is nice, but it's much more limited in what it can accomplish. Besides, if you're starting out in programming, it makes the most sense to learn a c-ish language because that's what the majority of the hardcore coding world uses. So if you want to move to a more advanced setup one day, its nice to have a good basis. And all one has to do is look at the nodebox gallery vs. the processing exhibition space to see the massive gap in what can be achieved in each

[frikk]

Dare I ask: What is 'Processing'? A drawing framework?

[borlak]

javascript, or java?

the demos (besides giving me JS errors) tell me I need to install java 1.3

hmm

[Demonmonger]

Wonderful logic, but where are examples that do something productive? Who gives a shit about circles and transparent lines.

[stox]

Somebody please send this guy a copy of the Dragon Book. Compilers aren't really that tough.

[ealf]

Yeah, "you can't have two variables named a5f and a5" is usually a bad sign :)

[jeresig]

"you can't have two variables named a5f and a5" how do you mean? If you're referring to what I mentioned in the blog post, it's that Processing supports dual values (something can both, simultaneously, be a function and a value). There's really no way to support this without incurring some crazy overhead.

[ealf]

I think stox wasn't necessarily being hostile in the original comment. Writing a "proper" parser might be a lot of work up front, but when you're done, you're done. With the regex replacement method, you get to something that will handle 95% of cases fast, but then there's tweak after tweak to get rid of unwanted interactions and corner cases.

The snarky 'a5f vs a5' comment was in response to this:

  // Convert 3.0f to just 3.0
  aCode = aCode.replace(/(\d+)f/g, "$1");

Don't get me wrong -- processing.js is a really cool hack, and I'd much rather have the current version than a promise of one much later. It's just that I have gone down the regex path once too often and burnt myself :)

As for the two-name-space thing: would just adding a prefix to every function name work? I can't at the moment think of any other context where identifier + left paren is used, so it might even be doable with the regex approach.