

Recreating Google's Bouncing Balls Logo In HTML5 Canvas - mikecane
http://rawkes.com/blog/2010/09/07/recreating-googles-bouncing-balls-logo-in-html5-canvas

======
jlongster
I was shocked to see that effect on Google's homepage; I have had that effect
on my website for months! I wrote it in HTML5 as well. You can see my original
effect here:

<http://jlongster.com/>

They did the whole 3d thing which is cool. All I would have to do is increase
the ball size as it's moving around.

I'm laughing because I submitted my effect to several websites, but nobody
seemed to care... and then google comes along... :)

~~~
aidenn0
There are more differences than just the 3d thing. One other example is that
the cursor only repels the balls when they are moving in their version. This
allows the logo to return regardless of where you leave the mouse cursor.

More importantly, theirs works great in IE. I loaded your page up in IE and
only got the "Think this is cool? Hire me!" message, which made me think, nope
it's pretty lame since it doesn't work in the most popular web browser, I'm
not going to hire him.

~~~
jlongster
There are many minor differences, of course. But the idea is the same.

But yes, IE support is the big one. I don't worry about it because I don't
really market the page or anything. The point is to be experimental and
innovative.

------
points
>> "Pretty impressive, but for some reason they decided against using HTML5
canvas."

I'm not quite sure why the 'div' hate and canvas love here...

With the div approach, you can just modify the position of a div, and leave
the rest to the browser to update the display. The browser will only redraw
what is absolutely necessary. It's pretty well optimized in dealing with that
stuff.

With the canvas version, you're redrawing _everything_ each time.

This version redraws the entire set of balls once every 30ms. From scratch.
Even if nothing has moved. Expect some CPU usage, and potentially on slower
machines, some flicker/lack of smoothness or other issues.

That said, good fun :)

~~~
ergo98
The DIV version is still pretty intensive on Firefox and IE. So much so that I
really question whether the inmates are in charge of the asylum over at
Google: They have been taking some big risks putting these tech demos on a
homepage heralded for its simplicity.

If they're trying to use this as a way of saying "Oh really? Resource
intensive? We didn't realize because we're using Chrome and there's no problem
there", that's a very dangerous way of promoting a browser.

Having said that, agree with your core point overwhelmingly: There is an
irrational love of Canvas that simply isn't merited.

SVG is absolutely _made_ for this sort of task (a number of elements that you
are transforming in size and place, etc). Again, as you mentioned, it leaves
the primitives up to the browser where they might be hardware rendered and
optimized as the client sees fit, instead of treating it as a dumb raster
canvas.

~~~
points
I love the fact that Google is using it's biggest property/asset to show off
fun browser features. Pushing the boundaries of browsers, and the expectations
people have of what they should be able to do on the web.

FWIW, I really don't think it's a case of Google trying to get everyone to use
Chrome, it's about getting people to do more on the web - which will benefit
them.

It also shows that they're still at heart a 'hacker' company where they try
hacky stuff out which is fun/irritating/cool. It's done it's job - gets people
talking about Google.

Plus, if you just show someone a static google holiday image, that's had its
day now. It's a bit dull. People want interactivity. They want awesome, not a
static picture.

~~~
ergo98
_"I love the fact that Google is using it's biggest property/asset to show off
fun browser features."_

99.9% of users of google.com simply _do not care_. In fact, not only do they
not care, they've seen this stuff in Flash going back to the 90s.

"Oh some animated balls...that's nice. DIVs [or canvas or SVG], you say? Who
cares!"

I think it's neat because this is my field. Yet, for the sake of Google, I
also think it should remain on a "cool browser features" page, and should be
kept from destroying Google's goodwill.

And it _is_ destroying Google's goodwill. The buckyball completely clogged a
core of a modern PC on the dominant browsers. Fine (aside from the measurable
power consumption) if you're on a multi-core, but a lot of people aren't, and
it left a sour taste in their mouth. Suddenly being on Google.com starts to
represent a risk that it never did.

"Hrmmm...PC is clogging up...did I keep the browser open on Google.com?"

Google got big precisely because they represented utilitarian, trustworthy
simplicity. Excite@Home showed us what was capable in a browser, and that's
why they died an ignoble death.

 _"It also shows that they're still at heart a 'hacker' company where they try
hacky stuff out which is fun/irritating/cool. It's done it's job - gets people
talking about Google."_

I've seen this rationalization quite a few times and I find it pretty
extraordinary.

 _Everyone_ is aware of Google. They know about the search engine. They aren't
hearing "Oh some upstart Google has a core-clogging buckyball...I better check
that new search engine out".

It is Google's position to lose, and they gain little by such stunts.

Google has let the hacker's run free, and it is poised to destroy the company.
From Chrome using a single shared profile on a multi-user PC to Wave auto-
following to Earth-destroying buckyballs (irony), Google plows ahead with
things that I would not expect a micro-startup to do, much less a hundred
billion dollar company. They need some adult supervision.

~~~
points
You sound like you have a case of the 'mondays'.

~~~
ergo98
How very redditesque.

 _"You sound like you have a case of the 'mondays'."_

Because I have a rational business sense, and an ability to empathize with
users (the ones who really _don't care_ that you're duplicating basic
functionality of Flash from 15 years ago, only less efficiently)?

I appreciate that this site is Hacker News, and that we all love cool tech
demos, but I would hope at least some of the readers here have some ability to
see things rationally, and to have some degree of business sense.

Instead it seems to be veering towards the typical insulated-from-the-world,
to borrow from Redditesque, circle-jerk.

~~~
btilly
Based on informal anecdotes, non-techie users seemed to have liked it. They
don't care what the technology can do, or what technology is used. They just
found it fun.

------
kierank
I like the way the Google one using divs uses less than 10% cpu whereas the
HTML5 one uses nearly 20%.

~~~
ronaldj
The canvas code could be optimized to make it just as efficient.

~~~
robhawkes
Oh definitely. I put it together in a couple of hours, without any major
performance testing. It's just a bit of fun really, nothing hardcore.

------
nostrademons
"Pretty impressive, but for some reason they decided against using HTML5
canvas."

IIRC, it was because of browser incompatibilities. IE8 removed the VRML
necessary for excanvas.js to work and yet doesn't have full canvas support, so
they were in the odd situation where it worked on IE6, IE7, and standards-
compliant browsers, but not on IE8. Googling, I've found that excanvas.js has
since been updated to work on IE8, but maybe it didn't support the specific
functionality they needed.

There're also pretty strict latency constraints on the homepage, so including
excanvas.js and its canvas emulation is quite a few bytes that just aren't
necessary if you use divs.

------
herf
This one is sub-pixel accurate, and the Google one _snaps to pixels_ , which
looks bad when particles are moving slowly. Canvas version looks a TON better
to me.

