Processing + Javascript = Flash Killer(processingjs.org)
processingjs.org
Processing + Javascript = Flash Killer
http://processingjs.org/exhibition
51 comments
The limitations with the tower defense game are the result of programmer laziness rather than some limitation with JavaScript itself. If the game was reworked to use sprites instead of drawing using basic geometric shapes, it would appear much more polished. The major limitations with JavaScript versus Flash revolve around dealing with media (we had to use a Flash tool to implement conceptual sound support for PTD, http://github.com/rictic/processing-tower-defense/tree/maste...), but I think these are generally being resolved with HTML 5.
To respond to your questions:
1. With some minor effort we were able to get PTD running on Firefox, Safari and IE. (Chrome didn't exist at that point.) The performance on IE 6 and (I think) 7 were prohibitively bad though, so it wasn't actually playable. Thanks to projects like excanvas, even browsers without native canvas support don't pose a big problem.
2. I don't have Flash experience, but PTD is just a collection of static files. I never felt deployment was a problem.
To respond to your questions:
1. With some minor effort we were able to get PTD running on Firefox, Safari and IE. (Chrome didn't exist at that point.) The performance on IE 6 and (I think) 7 were prohibitively bad though, so it wasn't actually playable. Thanks to projects like excanvas, even browsers without native canvas support don't pose a big problem.
2. I don't have Flash experience, but PTD is just a collection of static files. I never felt deployment was a problem.
It's neat, but it ain't killing Flash for a long, long, long time, even in theory.
1. Timing loops are absolutely useless in most browsers. Stable 30fps is all but impossible, and forget about 60fps.
2. GC pauses are abysmal and very frequent in FF.
3. Even with putImageData, you can't currently blit more than about 100x100 on a core2duo.
4. For most people, a large use of Flash is as an embedded video codec, which canvas isn't going to be able to touch.
Of course, these could eventually be fixed, but I think Adobe's smart enough to make sure that Flash doesn't stand still.
1. Timing loops are absolutely useless in most browsers. Stable 30fps is all but impossible, and forget about 60fps.
2. GC pauses are abysmal and very frequent in FF.
3. Even with putImageData, you can't currently blit more than about 100x100 on a core2duo.
4. For most people, a large use of Flash is as an embedded video codec, which canvas isn't going to be able to touch.
Of course, these could eventually be fixed, but I think Adobe's smart enough to make sure that Flash doesn't stand still.
Of course, these could eventually be fixed, but I think Adobe's smart enough to make sure that Flash doesn't stand still.
Flash has the same problem as IE -- nobody upgrades it, so you can't use new features unless you have something very cool to offer. (YouTube may convince people to upgrade Flash, but your advertisement sure isn't going to.)
Anyway, Flash's big advantage is its IDE. A non-programmer can produce simple animations... and I don't think that's possible yet with Processing + JS.
The performance issue is not too worrying -- the new JavaScript VMs should make this problem go away.
It would also be possible for browsers to support most video formats natively, and allow JavaScript to control the playback.
Flash has the same problem as IE -- nobody upgrades it, so you can't use new features unless you have something very cool to offer. (YouTube may convince people to upgrade Flash, but your advertisement sure isn't going to.)
Anyway, Flash's big advantage is its IDE. A non-programmer can produce simple animations... and I don't think that's possible yet with Processing + JS.
The performance issue is not too worrying -- the new JavaScript VMs should make this problem go away.
It would also be possible for browsers to support most video formats natively, and allow JavaScript to control the playback.
Flash has the same problem as IE -- nobody upgrades it
I know someone else replied to this, but just had to add my 2 cents here. This is in fact flash's biggest advantage: how quickly they are able to push new versions out to 98% install penetration. The only cross-platform development environment in the world which has the luxury to consistently push out new features on a yearly basis. As long as there are new features to be pushed flash will have a space. Though that is a question, what is left? They are running out. Perhaps hardware accelerated 3d.
I know someone else replied to this, but just had to add my 2 cents here. This is in fact flash's biggest advantage: how quickly they are able to push new versions out to 98% install penetration. The only cross-platform development environment in the world which has the luxury to consistently push out new features on a yearly basis. As long as there are new features to be pushed flash will have a space. Though that is a question, what is left? They are running out. Perhaps hardware accelerated 3d.
Flash has the same problem as IE -- nobody upgrades it, so you can't use new features unless you have something very cool to offer.
Adobe's census claims that Flash Player 10 reached over 70% penetration just five months after its release (last November):
http://www.adobe.com/products/player_census/flashplayer/vers...
Adobe's census claims that Flash Player 10 reached over 70% penetration just five months after its release (last November):
http://www.adobe.com/products/player_census/flashplayer/vers...
Also the "Express Install" feature makes it very simple to upgrade now:
http://www.adobe.com/devnet/flashplayer/articles/express_ins...
http://www.adobe.com/devnet/flashplayer/articles/express_ins...
For someone like myself that hates working with flash but likes JavaScript i'm glad things like this are being made.
This is one of the ares which will really pay off from the new wave of browsers competing to create the best JavaScript engine.
This is one of the ares which will really pay off from the new wave of browsers competing to create the best JavaScript engine.
I'm on the other side: I can't stand apps made with flash.
I believe that Youtube's player is the only good thing ever created using flash. Everything else is just cheesy all-flash websites and apps which break basic functionality of the browser.
I believe that Youtube's player is the only good thing ever created using flash. Everything else is just cheesy all-flash websites and apps which break basic functionality of the browser.
Why do you hate working with flash?
Here's at least why I hate working with flash:
1) I have to use their lame tool
2) Flash UI feels super cheesy (imagine gmail in flash)
3) The workflow is very tedious
1) I have to use their lame tool
2) Flash UI feels super cheesy (imagine gmail in flash)
3) The workflow is very tedious
If by 'working with flash' you actually mean, 'producing a SWF to run in the Flash Player'...
1) I've been using Vim for years to produce SWFs. I hate their tool too - that's why I don't use it. You can use any text editor you want.
2) The 'Flash UI' is very skinnable (not as skinnable in Flex3 as in the upcoming Flex4, see: http://www.mikechambers.com/blog/2008/08/27/everything-there... )
3) I'm not sure what you mean by tedious. You might be referring to the Flash editor's use of the timeline. If that's the case then you'll want to look into the Flex SDK I mentioned. I haven't used a timeline for over 5 years.
1) I've been using Vim for years to produce SWFs. I hate their tool too - that's why I don't use it. You can use any text editor you want.
2) The 'Flash UI' is very skinnable (not as skinnable in Flex3 as in the upcoming Flex4, see: http://www.mikechambers.com/blog/2008/08/27/everything-there... )
3) I'm not sure what you mean by tedious. You might be referring to the Flash editor's use of the timeline. If that's the case then you'll want to look into the Flex SDK I mentioned. I haven't used a timeline for over 5 years.
"1) I've been using Vim for years to produce SWFs. I hate their tool too - that's why I don't use it. You can use any text editor you want."
This makes no sense at all to me. Are you coding Flex? How do you design the interfaces for your apps? Pardon my ignorance.
This makes no sense at all to me. Are you coding Flex? How do you design the interfaces for your apps? Pardon my ignorance.
As a programmer my design skills are mostly implementable with the graphics class. But when I do work with flash designers, I have them create assets in the Flash IDE and publish a .swc which I import into flex builder. This gives me nice intellisense access to all the graphic elements.
I very rarely open up the IDE, usually it's to rename an asset which the designer had forgot or incorrectly named.
I very rarely open up the IDE, usually it's to rename an asset which the designer had forgot or incorrectly named.
1) So use use the Flex SDK and your favorite editor. Or, if on Windows, flashdevelop. Or, if you like Eclipse and have some cash to spare, Flex Builder.
2) Your opinion. Assuming it was done well, a Flash/Flex based mail client could rock. As an added bonus, done right, it could also be a client side mail client (using AIR).
Also, if you're using Flex controls, reskinning isn't that hard.
3) Again, your opinion. Without knowing what you mean, I can only assume you mean the whole Flash Authoring Tool (damn Adobe for overloading Flash to mean the IDE, the VM, the framework, and the technology)/time line thing, you don't need to use it. There are loads of options. See #1, above.
2) Your opinion. Assuming it was done well, a Flash/Flex based mail client could rock. As an added bonus, done right, it could also be a client side mail client (using AIR).
Also, if you're using Flex controls, reskinning isn't that hard.
3) Again, your opinion. Without knowing what you mean, I can only assume you mean the whole Flash Authoring Tool (damn Adobe for overloading Flash to mean the IDE, the VM, the framework, and the technology)/time line thing, you don't need to use it. There are loads of options. See #1, above.
I am surprised you haven't gotten -28 points for this response. HN used to be better than this. The death of Flash is critical to survival of the web as we know it.
The flash poses so many threats that I don't even know where to begin: it is closed, i.e. not controlled by the community, is binary and not text-based, puts new hardware platform manufacturers at Adobe's mercy, it violates nearly all common software "behavioral standards" on all platforms it attempts to run, i.e. configuration/control of basic things like scrolling, zooming, printing, font rendering, security, keyboard handling, etc. Flash ignores ALL settings in your browser with an exception of proxy configuration, just like their PDF plug-in.
Platform control is dangerous: we just beginning to escape from Microsoft hell, and the last thing I want is to depend on Adobe: imagine starting a new portable hardware platform business: you'll have to beg Adobe to release their fucking plugin for your new awesome phone, and hope it won't drain your battery in an hour, or annoy your users with "Time to Upgrade!" popups.
I am surprised that people from Mozilla, Apple, Opera and Microsoft STILL haven't gotten together and pushed out an emergency release of their browsers with an awesome built-in support for <video> and <audio> tags.
I, however, am certain that Flash will disappear. Eventually browsers will become good enough, that whatever else Adobe will come up with won't be enough to convince developers to steer away from HTML. Besides, Adobe doesn't have any engineering muscle, I'm sorry if this sounds too personal, but they just can't code and ultimately they don't stand a chance competing with Mozilla/WebKit or Microsoft's Silverlight - they're in another league.
The flash poses so many threats that I don't even know where to begin: it is closed, i.e. not controlled by the community, is binary and not text-based, puts new hardware platform manufacturers at Adobe's mercy, it violates nearly all common software "behavioral standards" on all platforms it attempts to run, i.e. configuration/control of basic things like scrolling, zooming, printing, font rendering, security, keyboard handling, etc. Flash ignores ALL settings in your browser with an exception of proxy configuration, just like their PDF plug-in.
Platform control is dangerous: we just beginning to escape from Microsoft hell, and the last thing I want is to depend on Adobe: imagine starting a new portable hardware platform business: you'll have to beg Adobe to release their fucking plugin for your new awesome phone, and hope it won't drain your battery in an hour, or annoy your users with "Time to Upgrade!" popups.
I am surprised that people from Mozilla, Apple, Opera and Microsoft STILL haven't gotten together and pushed out an emergency release of their browsers with an awesome built-in support for <video> and <audio> tags.
I, however, am certain that Flash will disappear. Eventually browsers will become good enough, that whatever else Adobe will come up with won't be enough to convince developers to steer away from HTML. Besides, Adobe doesn't have any engineering muscle, I'm sorry if this sounds too personal, but they just can't code and ultimately they don't stand a chance competing with Mozilla/WebKit or Microsoft's Silverlight - they're in another league.
I am surprised you haven't gotten -28 points for this response. HN used to be better than this. The death of Flash is critical to survival of the web as we know it.
I don't know why but reading this made me laugh out loud.
I don't know why but reading this made me laugh out loud.
MTASC or haXe from Motion Twin are also good alternate .swf development compilers that you can integrate with your favorite development environment. I've played around with haXe with MinGW build tools on Win32 and was pleased with the results.
(1)You can build complete Flash applications using freely available Flex SDK & command line compiler. You dont have to stick on to Adobe Flash IDE or Adobe Flex Builder.
(2)'Cheesyness' depends a lot on how you implement fonts and how how much of a professional designer you are. Its is a function of your imagination and professionalism. See kontain.com
(3) Just like any other language, workflow tediousness depends on the kind of IDE you use. If you are of the developer kind and tries to use Flash IDE's timeline based designer workflow, it will be a disastrous experience.
Having said that , i wish Adobe open-sourced the Player.
(2)'Cheesyness' depends a lot on how you implement fonts and how how much of a professional designer you are. Its is a function of your imagination and professionalism. See kontain.com
(3) Just like any other language, workflow tediousness depends on the kind of IDE you use. If you are of the developer kind and tries to use Flash IDE's timeline based designer workflow, it will be a disastrous experience.
Having said that , i wish Adobe open-sourced the Player.
Why would you use flash for something like kontain.com? It feels so weird. Nearly everything you see there could easily be done with html. Doing it in Flash only means that you are going to create a lot of inconsistencies with the way everything normally works. Strange context menus. Strange selection colors. Strange click behaviours. And so on.
Why would you want that? That’s crazy. Flash should be used as a last ressort. Video. Games. That sort of stuff. Use friggin’ html for the rest and do not confuse your users.
Why would you want that? That’s crazy. Flash should be used as a last ressort. Video. Games. That sort of stuff. Use friggin’ html for the rest and do not confuse your users.
Yikes. Whoever created kontain.com did not know what they were doing. Not only does it break some basic browser functionality, like opening a link in new tab, but because it is all flash it is also painfully slow. It takes 9 seconds to display the first page (which is very simple and would render in under 2 seconds if it was done in HTML) and 14 seconds for every photo page. I bet it also doesn't play well with mobile browsers.
Using this site as an example of "professionalism" is just wrong.
Using this site as an example of "professionalism" is just wrong.
Flash is only as good or as bad (in terms of UX) as the developer(s) make it.
Contain seems slower than javascript based sites. Any idea why? If you leave the flash UI framework and do it all yourself is there a big performance hit?
A possible (and most common) reason for slowness is that the developers might have coded it such that all UI graphical assets required sitewide (buttons,icons and other graphical assets) are preloaded before the actual content starts rendering (rather than loading graphical assets on an, as-it-is-required basis).
Using generic flash frameworks and components definitely increase the file size as they usually come with a lot of functionality (thus code) and legacy code that you might never really use.So if time allows,building your own components is highly recommended to keep file sizes low.
It is possible to build real fast sites with Flash. As an example, if a page contains 20 small thumbnail images (means 20 separate http calls in an html environment), it is possible to load a single zip file with all 20 thumbs into flash and unzip and render it at runtime.Thus reducing the number of http calls from 20 to 1.
As lowdown commented above, the performance of a Flash app depends on how the developer approaches the problem.
As many other commenters pointed out, a 100% Flash based environment is definitely not a great choice for a social network site like Kontain. But the site's neat design and rendering is a great example to show that Flash sites neednt always be cheesy or flashy or flexy.
Using generic flash frameworks and components definitely increase the file size as they usually come with a lot of functionality (thus code) and legacy code that you might never really use.So if time allows,building your own components is highly recommended to keep file sizes low.
It is possible to build real fast sites with Flash. As an example, if a page contains 20 small thumbnail images (means 20 separate http calls in an html environment), it is possible to load a single zip file with all 20 thumbs into flash and unzip and render it at runtime.Thus reducing the number of http calls from 20 to 1.
As lowdown commented above, the performance of a Flash app depends on how the developer approaches the problem.
As many other commenters pointed out, a 100% Flash based environment is definitely not a great choice for a social network site like Kontain. But the site's neat design and rendering is a great example to show that Flash sites neednt always be cheesy or flashy or flexy.
What exactly is kontain.com? I'm on Linux, and they don't support my OS since there's no Flash v9 for Linux.
It's a flash site cleverly rendered to look like an HTML site. To what end I don't know.
I'm running flash player 10 on Ubuntu BTW. You can get it here http://get.adobe.com/flashplayer/
I'm running flash player 10 on Ubuntu BTW. You can get it here http://get.adobe.com/flashplayer/
1.) mxmlc Main.as -> main.swf
2.) iilwy.com
3.) mxmlc main.as -> scp main.swf www.mysite.com/main.swf
How many browsers out there support Canvas? And how is this compared to Flash - performance wise?
Firefox, Safari, Chrome, Opera. IE, but only with a special canvas plugin - not quite as fast.
Comparing performance is always difficult, and specific to a particular application.
Comparing performance is always difficult, and specific to a particular application.
FWIW, Firefox + X11 uses about 80% of two CPUs to render the demos. (I assume it is trying to use as much CPU as possible to keep the framerate up, but it is only one thread. X is using the second CPU.)
I have not had Flash installed for many years, but I never remember it using much CPU to produce smooth animations.
I think this is a problem, as nobody wants their browser using much CPU. (Using the CPU isn't a problem unless you are running on battery power. The problem is that the framerate will become unacceptable when offlineimap or whatever kicks in in the background.)
I have not had Flash installed for many years, but I never remember it using much CPU to produce smooth animations.
I think this is a problem, as nobody wants their browser using much CPU. (Using the CPU isn't a problem unless you are running on battery power. The problem is that the framerate will become unacceptable when offlineimap or whatever kicks in in the background.)
XUL + X11 is so lame.
the obvious problem is that it's going to take a generation of browsers before everyone has native <canvas> support along with a respectable Javascript engine.
IE6 market share is still 17% with IE7 at ~25% (source: http://www.w3schools.com/browsers/browsers_stats.asp)
I can't imagine advanced Processing/JS is going to run well without native canvas and SpiderMonkey/V8/Squirrelfish
IE6 market share is still 17% with IE7 at ~25% (source: http://www.w3schools.com/browsers/browsers_stats.asp)
I can't imagine advanced Processing/JS is going to run well without native canvas and SpiderMonkey/V8/Squirrelfish
Since those are the stats for w3schools.com itself, I assume they are biased quite strongly towards web developers. For a more inclusive picture, try this:
http://gs.statcounter.com/#browser_version-ww-daily-20080701...
I particularly like how uniform the IE6 line is, suggesting a large percentage of the users are office-bound.
Also, have a look at Excanvas, which takes advantage of IE6's reasonable VML support to emulate the <canvas> tag. Quite impressive for such an old browser.
http://gs.statcounter.com/#browser_version-ww-daily-20080701...
I particularly like how uniform the IE6 line is, suggesting a large percentage of the users are office-bound.
Also, have a look at Excanvas, which takes advantage of IE6's reasonable VML support to emulate the <canvas> tag. Quite impressive for such an old browser.
Yes, IE6 (60%) and 7 (20%) make up 80%(!) of the browsers in business (Forrester research, April 30th 2009, http://www.eweek.com/c/a/Web-Services-Web-20-and-SOA/Microso...)
But the JavaScript voodoo to "upgrade" IE6 is getting better and better.
But the JavaScript voodoo to "upgrade" IE6 is getting better and better.
Also note the periodicity of the Firefox and IE curves -- looks like a lot of people use IE6 during the week and Firefox during the weekend.
Great point, this is still very much a "the future is here, but not widely distributed yet" moment, but such great geek eye candy.
Here's something to look at in Processing.js: http://hascanvas.com/Disco
HTML5 includes video support, which is being worked into teh canvas at the moment. By the time it's finished it will be fast enough to watch real-time video and apply image filters to the output at decent resolutions.
I agree, it's no "threat" to Flash, but it's a great alternative for a client-base that use modern browsers. The big thin to watch for is what Internet Explorer do re: the canvas, they could change the whole game VERY quickly.
Also check this canvas character animation out: http://hyper-metrix.com/burst/development/doc/demos/js/GitHu...
HTML5 includes video support, which is being worked into teh canvas at the moment. By the time it's finished it will be fast enough to watch real-time video and apply image filters to the output at decent resolutions.
I agree, it's no "threat" to Flash, but it's a great alternative for a client-base that use modern browsers. The big thin to watch for is what Internet Explorer do re: the canvas, they could change the whole game VERY quickly.
Also check this canvas character animation out: http://hyper-metrix.com/burst/development/doc/demos/js/GitHu...
The Processing.JS port is amazing in and of itself, but also check out the portfolio of the guy who designed the site, Alistair MacDonald. You can see an index of his Processing experiments here:http://www.hyper-metrix.com/#Processing. You can also follow him on Twitter @F1LT3R. Very interesting work.
I predict the future to be "AJAX + JS + Processing", if we just add AJAX that makes calls to PHP or PERL then it'll be more powerful and flexible than Flash or Silverlight.
Next step: We need (the open source community) to create a very solid framework for this to work and also to build powerful tools that make it easy to create a user interface.
Next step: We need (the open source community) to create a very solid framework for this to work and also to build powerful tools that make it easy to create a user interface.
I have to admit, these demos are quite impressive for such a small amount of javascript. I was also surprised with how smoothly they ran. However, there is one thing that has been itching in the back of my mind every time I see an article on processing: it doesn't look like it is at all object oriented. Am I missing something?
it's not object oriented at a rendering level - you blitz the screen each frame. the language itself in its original incarnation is pretty much just java though.
i think a better headline would be "canvas + javascript .." - processing.js is a framework between the two. another framework could give you the kind of object oriented (maybe 'scene graph orient' is a better term) rendering i think you're looking for.
i think a better headline would be "canvas + javascript .." - processing.js is a framework between the two. another framework could give you the kind of object oriented (maybe 'scene graph orient' is a better term) rendering i think you're looking for.
Personally, I'd prefer to be able to use JS instead of Flash for everything in a RIA, including games. There's just the one thing, though. Sockets. I can't push to clients using JS, which sucks. Polling just feels wasteful to me.
Oh, I know there's comet, but that just feels like an ugly hack compared to the real thing.
Oh, I know there's comet, but that just feels like an ugly hack compared to the real thing.
That was zen-like. The perfect 5 minute mind relaxer - like an interactive version of Eno's Oblique Strategies.
Now kill flash with Microphone & webcam support
This is cool and a good foundation for what we need, but it poses no significant threat to Flash right now. I'm on a Core 2 Duo E6600 and using Firefox 3.5 nightlies and all of the real demos peg my processor between 50%-100%. This isn't a brand new machine, but it's much better than what most people have, and even TraceMonkey can't handle it smoothly (granted, I'm running at 1920x1080 resolution). There is no hope that something like this will see larger deployments than small animations anytime soon; it's just not accessible enough, and most computers will choke to an awful death on it.
I am desperately anticipating a legitimate replacement for Flash, but _everyone's_ JavaScript VM is just so slow. There's no way it's practical to see significant deployments of this anytime in the near future.
I am desperately anticipating a legitimate replacement for Flash, but _everyone's_ JavaScript VM is just so slow. There's no way it's practical to see significant deployments of this anytime in the near future.
Just to add another sample, I have a Phenom II X4 940 (not OCed right now) and the most taxing one I found was http://www.mattryall.net/demo/atlassian-vis/activity/, which put one core around 70% on average while not touching the others.
When the fuck did "killer" replace "competitor" in the English language?
Good point, It is a parallel to the arms race between colas and EXTREME energy drinks. Every description needs to be turned to "11".
I disagree, it should be a "killer" because flash uses a closed source for-profit runtime from adobe. The javascript standard is free to use and implement and doesn't require me to have any browser plugins to view great looking websites.
Absolutely beautiful.
Kudos to everybody involved in Processing.
Kudos to everybody involved in Processing.
Btw, how is memory consumption compared to silicon-melter flash?
Take games, for example. The Tower Defense game is nice enough, but no where near the quality of the Flash based versions. And this is a very, very simple game compared to, say, Fancy Pants Adventures or the like. Can processing.js. I mean, the missiles don't even point at their target, for crying out loud.
This is on the level of C64/PET character based graphics, more or less.
Again, I know nothing about processing.js at this point, so, perhaps it's possible to do much more.
Two other questions come to mind, though:
1. Flash already has its issues vis a vie cross-browser and cross-platform performance. It's not at all bad, and, because of the developer base, pretty well defined, but certainly not perfect. How does this technology compare, especially given the widely disparate support for native canvas and decent JavaScript engines?
2. What about packaging and distribution? .swfs can be self contained, making distribution to, say, portals nice and easy. A whole infrastructure for add supported apps has grown up in the Flash world, as well.