The ever wonderful John Resig finally posted his totally awesome processing.js code to the web. If you haven’t seen it, you should go take a look. The Wired Compiler blog said “…this might be the most impressive thing we’ve ever seen.” And I agree, but probably not for the same reasons that they cite.
For a long time we’ve seen a niche on the web being filled by proprietary solutions. So-called rich internet graphics have long been the domain of Flash, before that Java (with limited success), ActiveX and now Microsoft is trying to jam Silverlight onto the world. However, each of these technologies suffers from one fatal flaw: they are, as a friend often described, deeply opaque. If you’re a developer for one of these technologies you’re on your own. You have to engage in a huge amount of training, the tools are often expensive or are difficult to use and then you are locked into a very specific platform. The bar for entry as a creator is very high. I think that Brendan would not mind me using his words to describe these technologies: Ivory Towers.
But the web is different. I’ve recently taken to describe the web as the world’s largest open source project because of its inherent transparency. Someone else doing something really interesting? Take a look at the source and copy it. Improve on it. Share it with others. As a developer for the web you aren’t alone. You have the work of thousands of others to draw upon. And the bar for entry is still about as low as you can get: a text editor. The web is smothered with information on how to develop for the web from the simplest HTML to advanced AJAX including everything from the front end to back end server work. It’s a highly democratized process, one that anyone can invest in and learn with no barriers for entry.
So back to processing.js. What John has done (in his spare time!) is to start to expose the capabilities of what we’ve been slowly adding to the platform of the web and give people a way to start to explore what we can really do. Canvas is here and it works. Video and audio have already landed in a couple of other browsers and we’ll have it soon enough. And each of them is exposed in the lingua franca of the web: transparent declarative markup connected by simple interactive scripts that are distributed as source.
We’re already starting to see the results. John released his code on Thursday. By Friday, someone had already duplicated the processing.js environment as a XUL program and someone else already created an editor where you can try out processing scripts directly on the web. That’s in one day after the code was posted on the web.
Just imagine for a second if those sites let people share and display neat little graphical widgets with source where people can try out different objects and learn from each other’s source code. Easy to drop in graphical interactive elements into other sites with the same transparency and zero-barrier to learning we’ve seen from the rest of the web. Think about how fast that stuff might spread on the web, how we might end up with people sharing and learning together and how much better the experience on the web might be in the end. That iterative process is one that needs starting points and what John has done is give us a great starting point.
So the world is changing. And changing quickly. The web is going to win, filling the market niche where Flash and other similar technologies found their hold. And John’s little project can hopefully act as a great catalyst to take us there. Thanks, John!
-
I absolutely couldn’t agree with you more.
-
Thanks for the obsessing.org link. That’s slightly easier to get folks rolling and experimenting than the XUL app.
-
I know I keep saying this in-person, but for a wider audience ;-)
I think canvas won’t get wide adoption until the same API is available in IE also. The Google Gears approach of doing every API for Firefox, Safari, and IE all at once is a horrible, messy, pain-fest for the Gears developers, and nobody wants to have to deal with the scary abstraction layers and test matrix, but it’s what’s needed to compete with Flash. Flash solves the browser portability problem and that’s a big part of its appeal.
If Canvas were in Gears (or done in the same cross-browser way), then people could use it immediately; for now, on most sites where IE has to work, developers can’t use it.
Even if IE adds a canvas, it will probably be annoyingly not-quite-the-same as other implementations, even if the IE devs make a good-faith effort to be compatible. Compatibility is hard.
But Flash is always the same on all browsers.
In some ways doing new web platform extensions for only one browser is kind of like writing new open source apps only for Linux. Mozilla has done a great job of showing the power of making an app that works for everyone, but they aren’t making the platform extensions work for everyone!
(I realize there are lots of complexities and that some platform extensions are pretty tightly bound up with the browser itself. But I just think Adobe has a huge competitive advantage – on top of overwhelming existing market share – because they are cross-browser. And this makes it a steep vertical cliff-climb for open alternatives.)
(Maybe there are ways to solve it other than the Gears cross-browser approach, but surely some solution is needed.)
-
@Havoc: No need for gears, there’s already a JS library to provide Canvas support in IE. And it works. It works really well, and it’s going to get even better. As with any obstacle in its path, the web simply adapted – it didn’t need to wait around for Microsoft to have the “oh, maybe globally adopted standards are a good idea after all” epiphany (not that I have the slightest confidence they’ll ever pay it more than lip service as they simply don’t get standards), people just made it happen.
-
Fingers crossed you’re right, Chris. @Guy: I agree, and this is the very reason that I’m worried about some of the developments in ES4. They aren’t showstoppers, but they will make it harder for the web to adapt and re-route around lethargic platform developers.
-
If you’ve followed the news, you’ll know that Flash has been an open standard since the first of May. This move means that Flash is going to retain its niche areas for years to come; qualms anyone had about the platform before are now mostly reduced to that of an underdeveloped open-source codebase…one that is swiftly catching up.
Use of Javascript/Canvas, on the other hand, is still mostly speculative. It’s been open for much longer; but the implementations available now are still doing much less than Flash does, and no comparable tool set is available, commercial or otherwise.
-
There are also tools like http://www.effectgenerator.com/ where people can create graphical widgets for Flash, but the source code is always available by right-clicking and going to ‘View Source’.
-
@James: It’s great that Adobe is opening up Flash, but it misses the point a little. By the time you address all of the openness problems that Flash currently suffers, you end up with a web browser! What are the problems with openness? No source distribution of code, no bookmarkability, no hackability (think Greasemonkey), no ‘remixing’ (e.g. Google’s cached page mechanism inserts a message at the top of docs — simple in html, very hard in Flash), mostly opaque to searches, etc.
Setting aside the politics, if we develop the HTML+Javascript stack properly, Flash becomes redundant. (The vice versa is also true — only one of the technologies need survive.)
@Ed: Unfortunately, that site exhibits one of the problems with Flash. Can you ‘View Source’ any page on the effectgenerator.com site?
-
Link to the canvas JS library that Guy F. talks about.
http://excanvas.sourceforge.net/ -
Hmm. Tried the demos and it seems you need a computer from say 2012 to run anything remotely advanced smoothly (latest FF3 beta).
-
Which demo? Except for a short lag at the beginning when calculating Mandelbrot, it runs smoothly here using
Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.9pre) Gecko/2008051011 Minefield/3.0pre ID:2008051011
AMD Athlon 64 Processor 3800+ 2.39GHz
3.18GB RAM
ATI Radeon Xpress 200 Sereis (built into motherboard)
-
Don’t forget about CAKE: http://glimr.rubyforge.org/cake/canvas.html#EditableCurve
“CAKE is a scenegraph library for the canvas tag. You could say that it’s like SVG sans the XML and not be too far off. This page is a showcase of CAKE feature tests.”
-
@James
SWF as a format has been opened, not Flash. That’s a huge difference. You can’t look under the hood of Flash or improve the code.Canvas obviously is going to have an impact, simply because we soon will have uses for it that rock. For free. It could have been SVG, but surprisingly enough it’s Canvas that was ported to IE (excanvas). Open Source is taking over. Man, what interesting times!
-
You guys should checkout my project at pliantcode.com
I might use processing.js to drive the client from the server.
-
Pingback from Molecular Voices » Resig’s Processing.js on May 12, 2008 at 10:01 am
-
Pingback from The Code of Co-rendered Conduct « Co-render.com on May 12, 2008 at 11:00 am
-
“You can’t look under the hood of Flash or improve the code.”
Flash Player’s virtual machine is open source.
-
Parts of flash happen to be out under an open source license. But it’s not consumable to the point where you can make reasonable fixes and distribute those fixes to other people.
-
@Josh: “Flash Player’s virtual machine is open source.” That is true only to the extent that you limit “virtual machine” to “script engine only”. The virtual machine that interprets the rest of SWF — meaning the parts implementing the graphical capabilities to which people are comparing Processing.js — is closed like a closed-thing. Maybe not forever, but certainly for today.
-
Pingback from John Resig - Processing.js Aftermath on May 14, 2008 at 1:07 am
-
and it has just begun
http://blog.lilyapp.org/2008/05/processing_js_1.html
Processing.js has been added to Lily, the Firefox add-on that allows users to create rich, complex applications in a web browser. Users create Lily applications graphically by connecting functional modules called “externals” in a program document called a “patch”.There are over 180 externals objects built into Lily: web service modules for APIs like Twitter, Amazon, Flickr, Wikipedia, Yahoo; UI modules that wrap web components from YUI, Scriptaculous, JQuery and Google Maps as well as the browser’s built-in UI elements; modules that offer access to the network, SQLite storage, TCP sockets or the file system; modules to interact with the browser; modules to send and receive Open Sound Control messages or talk to the Arduino physical computing board; graphics modules that encapsulate the browser’s SVG functionality and multimedia modules for playing sound and video.
-
It’s an interesting subject. Most of the ‘non-web-developers’ I have met, never turn off JavaScript. This is mainly for two reasons, 1) They wouldn’t know how to do it 2) they wouldn’t like what they saw if they did. But a good percentage of these people do not like downloading or using Flash. However, I do not know of anyone who refuses to download Flash, because Flash is very good at what it does and we rely on it for a decent amount of tasks.
Processing.js is great. I think it is more suitable to cover general visualisations than Flash. It’s lightweight, the codebase is well documented and future browser technology is headed in a direction which could make the Processing.js applet useless. (3D Canvas, Audio & File capabilities)
I have been playing around with Processing.js for a couple of months and I’m hooked. If you are interested in seeing my experiments, go to:
http://hyper-metrix.com/processing/docs/ -
processing.js is great for a number of reasons, it means you can run processing sketches in a browser on the iphone, it means escaping all the limitations of having an applet stuck in a page: the inability to lay any other page element over it, slow load time, redraw ‘flickering’ when you scroll, and the general ‘boxing in’ you’re stuck with whenever you have to stoop to add flash or java to a page.
I hope development continues, and honestly, if John Resig started taking donations for the project I would contribute. I think it’s important.
-
Beautifully written article. You are saying the things I am trying to say in a much more elegant way. Nice to see people out there who really get the web!
Become a Friend of Gnome!
Watch as I Grow
interesting stuff
- Flumotion manual December 28, 2009
- So you want to stream a conference? -- wingolog December 28, 2009
- UniversVideo Plugin December 5, 2009
- ITheora - Home December 3, 2009
- Ogg.class.php December 3, 2009
28 comments
Comments feed for this article
Trackback link: http://www.0xdeadbeef.com/weblog/2008/05/the-hidden-value-of-processingjs/trackback/