4 ms·

Recreating Google's Bouncing Balls Logo In HTML5 Canvas

60 points by mikecane 16y ago

nostrademons 16y ago
"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.
points 16y ago
>> "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 16y ago
  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 16y ago
    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 16y ago
      "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.
- metachris 16y ago
  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/master/js/main.js http://github.com/robhawkes/google-bouncing-balls/blob/maste...
  - jlongster 16y ago
    Here's my source code for this effect, in case anybody's interested: http://jlongster.com/media/js/fluid.js http://jlongster.com/media/js/fluid.js You can check it out at http://jlongster.com http://jlongster.com.
- mikecane 16y ago
  >>>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.
  - jamesgeck0 16y ago
    The canvas version does seem noticeably more smooth in Opera. Perhaps that's just because the balls don't zoom out as much.
jlongster 16y ago
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/ 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 16y ago
  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 16y ago
    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.
kierank 16y ago
I like the way the Google one using divs uses less than 10% cpu whereas the HTML5 one uses nearly 20%.
- ronaldj 16y ago
  The canvas code could be optimized to make it just as efficient.
  - robhawkes 16y ago
    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.
herf 16y ago
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.

60 points by mikecane 16y ago

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

points 16y ago

>> "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 16y ago
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 16y ago
  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 16y ago
    "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.
metachris 16y ago
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/master/js/main.js http://github.com/robhawkes/google-bouncing-balls/blob/maste...
- jlongster 16y ago
  Here's my source code for this effect, in case anybody's interested: http://jlongster.com/media/js/fluid.js http://jlongster.com/media/js/fluid.js You can check it out at http://jlongster.com http://jlongster.com.
mikecane 16y ago
>>>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.
- jamesgeck0 16y ago
  The canvas version does seem noticeably more smooth in Opera. Perhaps that's just because the balls don't zoom out as much.

jlongster 16y ago

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/ 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 16y ago
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 16y ago
  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.

kierank 16y ago

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

ronaldj 16y ago
The canvas code could be optimized to make it just as efficient.
- robhawkes 16y ago
  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.

herf 16y ago

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.