0

What possible web technology Google might have used for this Gideon Sundback doodle (see video)

http://www.youtube.com/watch?v=utijBRRmAJo&feature=relmfu

I am really curious. in a web browser, can we really do this much? I guess it is not flash, else i would not wonder. Any source code or similar samples available?

Guess it shows off how much we can extend in web technologies now.

WinW
  • 679
  • 2
  • 9
  • 20

1 Answers1

2

A Canvas element <canvas> is used. All modern browsers supports HTML5 now - Firefox, chrome and Opera. Yes it is possible to do these with the browsers of today!

The zipper teeth are drawn onto the canvas from a png sprite file. The zipper slider also resides in that png image. The whole interactive animation is coded in the Javascript. The zipper peel effect is done using the arc() method of the context object, context being 2d in this case.

As soon as you click on the slider, it hides all the Dom elements - buttons and text input and all what you see is the canvas drawing. Since using the javascript code that is used, can't alone recreate the effect on the local html file. I think some external libraries are used. I am not sure how the google.listen() method works as its not defined. Check out the javascript here, in this thread, which is beautified javascript code, using the jsbeautifier.org

Community
  • 1
  • 1
Eshwar
  • 104
  • 10
  • 1
    I have recreated it finally, and its working fine on my blog [link](http://www.knolpad.com/gideon-sundback-zipper-doodle-recreated-for-fun-and-learning-experience/). The code is untouched, I will work on in my spare time to simply it and make it readable. Thanks. – Eshwar Apr 29 '12 at 01:26