Created
December 23, 2010 10:45
-
-
Save uiteoi/752824 to your computer and use it in GitHub Desktop.
Animated Yanug in JavaScript/Raphaël
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="chrome=1"/> | |
| <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> | |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| <title>Raphael Yanug</title> | |
| <style type="text/css"> | |
| body { | |
| media: "screen"; | |
| margin: 0; | |
| margin-bottom: 25px; | |
| padding: 0; | |
| background-color: #fff; | |
| font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana"; | |
| font-size: 14px; | |
| color: #222; | |
| } | |
| .graphContainer { | |
| width: 968px; | |
| margin: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| background-color: inherit; | |
| } | |
| </style> | |
| <script src="raphael.js" type="text/javascript" charset="utf-8"></script> | |
| </head> | |
| <body> | |
| <div class="graphContainer"> | |
| <div id="yanug"></div> | |
| </div> | |
| <script type="text/javascript"> | |
| window.onload = function () { | |
| var diameter = 300; | |
| var stroke_width = diameter / 100; | |
| var eye_diameter = diameter / 7; | |
| var mouth_width = diameter * 2 / 5; | |
| var color = "#ff8c00"; // "orange"; | |
| var gradiant_color = "#ffb000"; | |
| var size = diameter + stroke_width + 1; | |
| var radius = diameter / 2; | |
| var center = radius + stroke_width / 2; | |
| var paper = Raphael( "yanug", size, size ); | |
| // Draw head | |
| var head = paper.circle( center, center, radius ); | |
| head.attr( { | |
| stroke : color, | |
| "stroke-width": stroke_width, | |
| fill : "white" | |
| } ); | |
| // Draw split fill | |
| var extent = radius * 2 / 3; | |
| var split = paper.path( | |
| "M" + stroke_width / 2 + " " + center | |
| + "C" + stroke_width / 2 + " " + ( center - extent ) | |
| + " " + center + " " + ( center - extent ) | |
| + " " + center + " " + center | |
| + "C" + center + " " + ( center + extent ) | |
| + " " + ( center + radius ) + " " + ( center + extent ) | |
| + " " + ( center + radius ) + " " + center | |
| + "C" + ( center + radius * 0.94 ) + " -" + extent / 2 | |
| + " " + ( center - radius * 0.94 ) + " -" + extent / 2 | |
| + " " + stroke_width / 2 + " " + center | |
| ); | |
| split.attr( { | |
| stroke: "none" | |
| , fill: color | |
| } ); | |
| // Draw radian | |
| var gradient = paper.ellipse( | |
| center + radius / 4 | |
| , center - radius * 0.57 | |
| , radius * 0.45 | |
| , radius * 0.35 | |
| ); | |
| gradient.attr( { | |
| rotation: 25 // reset to zero by set animation | |
| , stroke: "none" | |
| , fill : "r(.5,.4)" + gradiant_color + "-" + color | |
| } ); | |
| // Draw right (from yanug standpoint) eye | |
| var right_eye = paper.ellipse( center / 2, center, eye_diameter / 2, eye_diameter / 2 ); | |
| var open_right_eye_attributes = { | |
| rx : eye_diameter / 2, | |
| ry : eye_diameter / 2, | |
| stroke: color, | |
| fill : color // "r(.5,.5)white-" + color | |
| }; | |
| right_eye.attr( open_right_eye_attributes ); | |
| // Draw left (from yanug standpoint) eye | |
| var left_eye = paper.circle( center * 3 / 2, center, eye_diameter / 2 ); | |
| left_eye.attr( { | |
| stroke: "none", | |
| fill: "white" | |
| } ); | |
| // Draw mouth | |
| var mouth = paper.path( | |
| "M " + ( center - mouth_width / 2 ) + " " + ( center + radius * 3 / 5 ) | |
| + " s " + mouth_width / 2 + " " + mouth_width / 3 + " " + mouth_width + " 0" | |
| + "m0 0" | |
| + " s-" + mouth_width / 2 + " " + mouth_width / 2 + "-" + mouth_width + " 0" | |
| ); | |
| mouth.attr( { | |
| stroke: color, | |
| fill: color, | |
| "stroke-width": stroke_width | |
| } ); | |
| var yanug = paper.set(); | |
| yanug.push( head, split, gradient, left_eye, right_eye, mouth ); | |
| // Blink right eye (from yanug standpoint) | |
| var timeout; | |
| var effect_duration = 1000; | |
| var to_color; | |
| var to_white = function() { | |
| right_eye.animate( { fill: "white", ry: eye_diameter / 16 }, effect_duration ); | |
| timeout = setTimeout( to_color, effect_duration * 2 ); | |
| } | |
| to_color = function() { | |
| right_eye.animate( open_right_eye_attributes, effect_duration ); | |
| timeout = setTimeout( to_white, effect_duration * 2 ); | |
| } | |
| var previous_angle = 0; | |
| var rotate_yanug = function( angle, then ) { | |
| clearTimeout( timeout ); | |
| yanug.stop(); | |
| right_eye.stop(); | |
| right_eye.attr( open_right_eye_attributes ); | |
| timeout = 2000 * Math.abs( angle - previous_angle ) / 360; | |
| previous_angle = angle; | |
| yanug.animate( { | |
| rotation: "" + angle + " " + center + " " + center | |
| }, timeout, ">" | |
| ); | |
| if ( then ) { | |
| timeout = setTimeout( then, timeout ); | |
| } | |
| } | |
| // Start eye blinking | |
| timeout = setTimeout( function(){ to_white() }, 1000 ); | |
| // In 20 seconds, rotate yanug almost 2 turns, so that he leans his head by 20 degrees | |
| // Then resume blicking | |
| setTimeout( function() { rotate_yanug( 700, to_white ) }, 20000 ); | |
| yanug.click( function( e ) { | |
| rotate_yanug( previous_angle? 0 : 360 + Math.random() * 720, to_white ); | |
| } ); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment