

Processing + Javascript = Flash Killer - replicatorblog
http://processingjs.org/exhibition

======
Sindisil
While I'll definitely need to check this out further and keep a close eye on
it (especially given V8, SquirrelFish and SpiderMonkey), I'm not sold on this
being a "Flash Killer". Not yet, anyway.

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.

~~~
lethain
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...](http://github.com/rictic/processing-tower-
defense/tree/master)), 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.

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

~~~
jrockway
_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.

~~~
pavlov
_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...](http://www.adobe.com/products/player_census/flashplayer/version_penetration.html)

~~~
kierank
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_install/express_install_experience.html)

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

~~~
edw519
Why do you hate working with flash?

~~~
jcapote
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

~~~
Mgreen
(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.

~~~
arrrg
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.

~~~
nimbix
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.

------
vladimiroane
How many browsers out there support Canvas? And how is this compared to Flash
- performance wise?

~~~
ggrot
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.

~~~
jrockway
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.)

~~~
est
XUL + X11 is so lame.

------
adatta02
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

~~~
DougBTX
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...](http://gs.statcounter.com/#browser_version-ww-
daily-20080701-20090503)

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.

~~~
Jakob
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...](http://www.eweek.com/c/a/Web-Services-Web-20-and-
SOA/Microsoft-IE-Tops-in-Enterprise-Firefox-and-Chrome-Gaining-
Forrester-490377/))

But the JavaScript voodoo to "upgrade" IE6 is getting better and better.

------
f1lt3r
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...](http://hyper-
metrix.com/burst/development/doc/demos/js/GitHub%27s-Octocat.htm)

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

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

------
Nycto
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?

~~~
jeremyawon
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.

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

------
dnewcome
That was zen-like. The perfect 5 minute mind relaxer - like an interactive
version of Eno's Oblique Strategies.

------
est
Now kill flash with Microphone & webcam support

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

~~~
endtime
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.

------
octane
When the fuck did "killer" replace "competitor" in the English language?

~~~
replicatorblog
Good point, It is a parallel to the arms race between colas and EXTREME energy
drinks. Every description needs to be turned to "11".

------
TweedHeads
Absolutely beautiful.

Kudos to everybody involved in Processing.

------
TweedHeads
Btw, how is memory consumption compared to silicon-melter flash?

