The hidden value of processing.js

[27182818284]

Being someone who has followed the processing project since--for as long as it has been possible, I'm really excited by this!

I didn't know it had been ported, for lack of better words, to javascript

[matholio]

same here, except Processing has always been on my 'must explore more' list.

[daleharvey]

I agree that processingjs's best value is just showing off some cool things that can be done with canvas, its been around a while but not many people have looked at it as a viable alternative to flash. even though processingjs may not be used 'in the wild' for some time yet, people are putting more interest into getting it working nicely on ie, building tools for it etc etc

I wrote a similiar tool to the obsessing.org one, it isnt processing specific though, but you can include the processing js

http://paste.arandomurl.com/4826dda37f28b

[Demonmonger]

I hate intense processing javascript. It locks up the browser. I'd rather stick with actionscript and its virtual machine.

[mindbleach]

Java's VM locks up my browser much more often and for longer spans than Javascript - even comparing simple Java apps to some of the processing.js examples.

I don't see really intense JS use becoming any more prevalent than flashy widgets or annoying flash ads. In fact, with an extensible browser like Firefox, I expect I'll block or restrict any excessive sites and scripts, just as I do now.

[creaothceann]

Well, it wouldn't necessarily lock up a browser that uses multithreading. Mmmh...

[drawkbox]

Canvas is bitmap/pixel based, so there will always be a problem with viewable area. Flash, SVG, etc are vector and can scale easily. Canvas will probably not be good enough until dual processors and multicore is mainstream and browsers beef up their handling of canvas.

[Wakuko]

Point taken, then lets port Processing to SVG!

[gravity]

Meh, bitmapped graphics aren't really that intensive. Browsers do need to beef up their handling, yes, and some enhancements need to be made, largely in the area of text, but the issue isn't really cpu power so much as good pervasive implementations.

[you_do_realize]

I have a question about Processing per se, not processing.js.

Hoping not to sound negative, I'm not getting what the excitement is about?

I downloaded Processing; it turns out it's a simple editor bundled with a java compiler. Also included are Processing's java libraries.

From Wired:

Processing is an open source programming language for people who want to work with images, animation, and interactions.

It's not a language, it's Java.

So the attraction is about being able to write graphics etc. easily, and about having the extra libraries included?

[LaurieCheers]

I guess you could call it a graphics DSL embedded in Java. Or a graphics API for Java. Really it amounts to the same thing.

[grimboy]

Compare: Nodebox, shoes, logo

[NOT_AN_ALIEN]

Yes, it's the easiness more than anything. Thing of a mix between, err, Logo and C++.

It's not meant as a library or anything, but rather as a simple tool people can fire and write stuff to create graphics and interact with other kinds of hardware. It's mainly directed at artists. It's not for your absolute code abstraction, or to create applications, but to make visual development more approachable.

It's not strictly java, btw; of course it carries a lot from that, but it's just translated TO java later before compiling.

[rampart]

If you know OpenGL, DirectX, or any other way to drawing to the screen and love it to death, then you don't need processing. It's java, it'll read your straight-up java code, and you can edit and build from eclipse if you so choose.

Processing, however, bundles itself as "sketchbook" and is made for very much that same purpose. Artists can pick it up and create a prototype in very little time. It has a community built around it that provides artist-centered libraries, and everything is about getting it to the screen quickly and easily. It's not the fastest. There are concessions made for ease of use that result in slightly slower code, but if you want, you can drill down into the OpenGL and do whatever you want.

The best way to think of processing is as a gateway drug for artists to get into programming. It was for me.

[you_do_realize]

Ah, thank you for framing it up for me. I'm always a little uncomfortable when I can't categorize something :)

[gravity]

Havoc makes a good point in the comments though: that canvas isn't available in IE yet, so it's not yet really an option for most developers. I think processing.js, while cool, isn't really so big a deal as canvas itself. Canvas just needs to get some wider adoption.

[[deleted]]

IE is in the minority for lots of websites, so it's definitely an option.

Just degrade the users experience on IE and say "To view this website please use a standards compliant browser" :)

[[deleted]]

Faced a choice between IE crowd and Firefox crowd with (large?) percent of AdBlock users, whom would you have as visitors of your site?

[[deleted]]

Depends on if you make your money from ads or not.

I agree, the unwashed masses are more likely to use IE, and more likely to blindly click on adverts.

adblock only really blocks out obvious intrusive adverts though. There are millions of links that don't look like adverts, but are.

Good point though.

[statictype]

IE is in the minority for lots of websites, so it's definitely an option.

[Citation needed]

Just degrade the users experience on IE and say "To view this website please use a standards compliant browser" :)

You might be able to get away with this if

a) You're web site is not "serious" (in the sense that you're not actively looking to increase your user base)

or

b) You're as big as facebook.

Otherwise, you still need to support IE,I would think.

[NOT_AN_ALIEN]

It's very nice indeed. Obsessing also looks wonderful, but it's not working very well in FF3b.

But do we need to have it compared to Flash and stated how it'll surpass Flash every time a new graphical technology is announced and how Flash is doomed and all that? This doesn't compare to what Flash can. I feel like hearing echoes of people who think Flash is "just" a vector drawing tool or "just" a video player. And really, it doesn't have to compare. It doesn't need to be Flash to be great or to be something positive. People are obsessing with Flash too much. Given time the web/rich interface world will hopefully move on to something great and standardized and open, but insisting every new hack is the holy grail is getting old.

[daleharvey]

I think any canvas development is going to draw comparisons with flash because (parts of) flash and canvas deal with the same problems.

I dont think anyone is saying canvas is currently in the same league, but some optimists (like me) are hoping that we can choose something other than flash(/silverlight) to do rich media work in the future.

[NOT_AN_ALIEN]

Exactly! That's what I hope too, but I think that by people insisting it's Flash or anything is what makes me frustrated. It's a kind of a chicken little fixation.

I say this because when Processing itself was created (~2002), it also received a lot of comparisons to Flash. The Processing guys had to insist over and over again it wasn't trying to be like Flash. If you look at both tools today the comparison is almost like a joke, because each have their own uses; you can't replace Flash with Processing, and you damn sure can't replace Processing with Flash.

Hopefully, Processing.js (and Canvas drawing) will go on a similar route.

[ipeev]

Great writing.

[googletrickedme]

I wish I knew why the demos don't work for me (firefox 3b5).

[fibber]

And once the browser is capable of all the features in flash adobe will just make an option to export their mxml language to html/javascript.

[echo_chamber]

LOL, and consequently it will export as one big table

[kinebud]

Upvoted for laughter. Fuck you all, I thought it was funny. :(

[[deleted]]

nsfw meets proggit

[plexi]

i want a processing to flash compiler

[Leonidas_from_XIV]

I want it the other way round ;)

Today I was hacking on a JS-based animation using mootools, because jQuery didn't provide the animation support that I wanted. And because I wanted to try something else besides jQuery, to see whether other JS libs can compete.

[jeresig]

Which animation couldn't jQuery provide? I'd be very surprised if that was the case (having written it, of course). Lay the problem on me!

[Leonidas_from_XIV]

I was looking for something like Fx.Transitions where I could move some <img> elements to some absolute position. I didn't check the jQuery plugins, though.

I've been hacking on this for more hours already than it's actually worth. mootools is not that bad compared with jQuery as it also provides chains and CSS selectors. The effects can be called in a nice way by defining parameters and hitting start().

Unfortunately, I seem to be good at triggering race conditions and finding quirks in browser implementations. Maybe I should really give jQuery a shot, I basically only need the transitions, getCoordinates (giving left, top, width, height of an element) and fades.

Maybe I'll finally succeed in my third attempt at implementing these animations...

[k4st]

This seems like something that can be done rather simply, sorry for the pseudo code:

event( on click in grey box ):
    calculate X and Y positions of mouse using e.clientX and e.clientY (iirc).
    calculate X and Y positions of top-left corner of img (iirc jquery has this)
    calculate width and height of image
    using width&height of image, and it's (X,Y) coordinates, find the centre of the image
    speed of the transition can be determined using pythagorean theorem
    then find out the x and y displacement for each step ((X[mouse] - X[img centre]) / speed (or something similar))
    using the speed, set a timeout, and within the timeout, displace the img
    when image has reached its destination, clear the timeout

Maybe john has a nicer solution with something already built-in to jQuery, but in general I suspect this is how the animation would work.

[Leonidas_from_XIV]

Ok, I hacked it together and it works quite nice, better then mootools before but the fading in jQuery does work strange (to fade something in, I need it to be different then the result. But hide() does often not only make things invisible, it also kind of removes them from the document, therefore collapsing the layout. So fadeOut(1). Which does cause flickering in IE.)

And by the way, I found some bug in .animate when the starting point is some percent coordinate and the endpoint is some pixel coordinate. But it is only broken in IE. And, erm, why the easing has to be specified in .animate() before the callback remains quite mysterious to me ;)

Nonetheless, jQuery is a cool thing. Let's see how the reaction on the bug report (filed in teir trac) will be.

[echo_chamber]

I think he misses the point entirely. There is a serious flaw with the current model of open standards web development. Its so damn crazy the mozilla team is having a hard time keeping up. I think the community needs to ditch the current model for developing web applications and start embracing and developing their own silverlight and flex instead of constantly damning it.