Recreating Google's Bouncing Balls Logo In HTML5 Canvas | Hacker News Reader

Recreating Google's Bouncing Balls Logo In HTML5 Canvas

rawkes.com

60 pointsmikecane23 comments

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... :)

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.

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.

>> "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 :)

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.

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.

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

I can see where you're coming from, but I thought both the buckyball and today's logo were interactive and fun. Both ran great on multiple machines I've used so I had a good experience (and I like that sort of stuff anyway). Just throwing another opinion in here.

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

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.

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.

I agree with you. Reminds me of those Geocities pages from the 1990s that were loaded up with animated gifs. Not as garish, but just as gratuitous.

Amazing that apparently the next revolutionary big thing in technology that everyone's excited about is ... a bog-standard 2D raster drawing API.

It is hilarious that we haven't managed to pull this off in a non-proprietary, slow, bloated way until now. The web derailed with IE and Flash. It was set back 10 years. Now we're on track again.

The div version was a bit slow in my Chrome browser; the canvas works very smooth.

That said, I think the source code of the HTML5 version is quite pretty and worth having a look at: http://github.com/robhawkes/google-bouncing-balls/blob/maste...

Here's my source code for this effect, in case anybody's interested:

http://jlongster.com/media/js/fluid.js

You can check it out at http://jlongster.com.

>>>Expect some CPU usage, and potentially on slower machines, some flicker/lack of smoothness or other issues.

OK, as I've stated before, I'm stuck right now with a crap PC: 1.6GHz, >1Gb RAM (can't go above that!).

I've seen people complain that last week's Google Buckyball demo chewed up their CPU. Now there's this warning.

I switched to Opera a few weeks ago and neither of these logo animations chewed up the CPU or froze the browser.

So, I'm beginning to suspect many of these problems are not necessarily inadequate hardware -- but a browser issue. Opera is doing something different, at least on my machine.

The canvas version does seem noticeably more smooth in Opera. Perhaps that's just because the balls don't zoom out as much.

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

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

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.

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

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.

Reply on news.ycombinator.com