Raphaël educational changes

doubleotoo · Feb 23, 2012 · b2eabe2 · b2eabe2
1 parent 34c7c1f
commit b2eabe2
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 74 deletions.
diff --git a/raphael_animation.js b/raphael_animation.js
@@ -1,33 +1,31 @@
-jQuery(document).ready(function() {
-    var paper = Raphael('raphaelAnimation', 200, 200);
-
-    var back = paper.rect(10, 10, 180, 180);
-    back.attr({
-        'fill': 'white',
-        'stroke': 'white'
-    });
-    back.click(function() {
-        main.raphaelAnimationStopped = !main.raphaelAnimationStopped;
-    });
+Raphael('raphaelAnimation', 200, 200, function () {
+    var paper = this,
+        anim;
 
-
-    var c = paper.ellipse(100, 100, 10, 10);
+    var c = paper.circle(100, 100, 10);
     c.attr({
-        'fill': '#00aeef',
-        'stroke': '#00aeef'
+        fill: '#00aeef',
+        stroke: 'none'
     });
 
     var r = paper.rect(60, 60, 80, 80);
     r.attr({
         'stroke-width': 2,
-        'stroke': '#00aeef'
+        stroke: '#00aeef',
+        fill: "#000",
+        "fill-opacity": 0
+    });
+    r.click(function () {
+        if (anim) {
+            r.stop();
+        } else {
+            r.animate(a);
+        }
+        anim = !anim;
     });
 
     r.rotate(60);
 
-    setInterval(function() {
-        if (!main.raphaelAnimationStopped) {
-            r.rotate(6);
-        }
-    }, 33);
+    var a = Raphael.animation({transform: "...r360"}, 3000).repeat(Infinity);
+
 });
diff --git a/raphael_circle.js b/raphael_circle.js
@@ -1,8 +1,6 @@
-jQuery(document).ready(function() {
-    var paper = Raphael('raphaelCircle', 200, 200);
-    var c = paper.ellipse(100, 100, 10, 10);
-    c.attr({
-        'fill': '#00aeef',
-        'stroke': '#00aeef'
+Raphael('raphaelCircle', 200, 200, function () {
+    this.circle(100, 100, 10).attr({
+        fill: '#00aeef',
+        stroke: 'none'
     });
-});
+});
diff --git a/raphael_gears.html b/raphael_gears.html
@@ -7,21 +7,6 @@
         <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
         <script src="raphael_gears.js" type="text/javascript" charset="utf-8"></script>
 
-        <script type="text/javascript" src="http://use.typekit.com/ran8aft.js"></script>
-        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-
-        <script type="text/javascript">
-            var _gaq = _gaq || [];
-            _gaq.push(['_setAccount', 'UA-26336682-1']);
-            _gaq.push(['_trackPageview']);
-
-            (function() {
-                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-            })();
-        </script>
-
     </head> 
     <body>
         <div id="canvas" style="height: 650px; width: 960px; background-color: #ececec;"></div>
@@ -40,6 +25,5 @@
             </p>
         </div>
 
-        <a href="https://github.com/zgrossbart/3gears" id="forkme"><img style="position: absolute; top: 8px; left: 819px; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
     </body>
 </html>
diff --git a/raphael_gears.js b/raphael_gears.js
@@ -21,6 +21,7 @@ var scale = 15;
 var toothSize = 28;
 var clockwise = false;
 
+
 g = {
     stopped: false,
     create: function(/*Point*/ p, /*int*/ teeth, /*string*/ c, /*int*/ speed, /*boolean*/ clockwise) {
@@ -30,47 +31,39 @@ g = {
 
         var d = teeth * scale;
 
-        var outerCircle = g.paper.ellipse(p.x, p.y, d / 2, d / 2);
+        var outerCircle = g.paper.circle(p.x, p.y, d / 2);
         outerCircle.attr({
-            'fill': c,
-            'stroke': c
+            fill: c,
+            stroke: c
         });
         outerCircle.click(function() {
             g.stopped = !g.stopped;
         });
 
-        var innerCircle = g.paper.ellipse(p.x, p.y, d / 8, d / 8);
+        var innerCircle = g.paper.circle(p.x, p.y, d / 8);
         innerCircle.attr({
-            'fill': 'white',
-            'stroke': 'white'
+            fill: 'white',
+            stroke: 'white'
         });
         innerCircle.click(function() {
             g.stopped = !g.stopped;
         });
 
-        var st = g.drawTeeth((d / 2) - 5, d / scale, c, p);
+        var st = g.drawTeeth((d / 2) - 5, d / scale, c, p),
+            an = Raphael.animation({transform: "...R360," + [p.x, p.y]}, 6000);
 
-        setInterval(function() {
-            if (!g.stopped) {
-                st.rotate(6, 100, 100);
-            }
-        }, 66);
+        st.animate(an.repeat(Infinity));
     },
 
     drawTeeth: function(/*int*/ d, /*int*/ plots, /*color*/ c, /*Point*/ p) {
-        var increase = Math.PI * 2 / plots;
+        var increase = 360 / plots;
         var angle = 0;
 
         var st = g.paper.set();
 
         for (var i = 0; i < plots; i++) {
-            var t = 2 * Math.PI * i / plots;
-            var x = Math.round((d + (toothSize / 2)) * Math.cos(t));
-            var y = Math.round((d + (toothSize / 2)) * Math.sin(t));
-
             var tooth = g.createTooth(c);
-            tooth.translate(p.x + x, p.y + y);
-            tooth.rotate(((180 / Math.PI) * angle) + 90);
+            tooth.transform("t" + [p.x, p.y - (d + (toothSize / 2))] + "R" + [angle, p.x, p.y]);
             st.push(tooth);
             angle += increase;
         }
@@ -79,19 +72,19 @@ g = {
     },
 
     createTooth: function(/*color*/ c) {
-         
-        var path = 'M ' + (-(toothSize / 4) + 2) + ' ' + (-(toothSize / 2)) +   // upper left
-            'L ' + ((toothSize / 4) - 6) + ' ' + (-(toothSize / 2)) +           // upper right
-            'L ' + (toothSize / 4) + ' ' + (-(toothSize / 2) + 8) +             // upper right bump
-            'L ' + (toothSize / 2) + ' ' + (toothSize / 2) +                    // bottom right
-            'L ' + (-(toothSize / 2)) + ' ' + (toothSize / 2) +                 // bottom left
-            'L ' + (-(toothSize / 2) + 4) + ' ' + (-(toothSize / 2) + 8);       // upper left bump
+        var t2 = toothSize / 2;
+        var path = 'M ' + (-t2 / 2 + 2) + ' ' + (-t2) +   // upper left
+            'L ' + (t2 / 2 - 6) + ' ' + (-t2) +           // upper right
+            'L ' + (t2 / 2) + ' ' + (-t2 + 8) +             // upper right bump
+            'L ' + t2 + ' ' + t2 +                    // bottom right
+            'L ' + (-t2) + ' ' + t2 +                 // bottom left
+            'L ' + (-t2 + 4) + ' ' + (-t2 + 8);       // upper left bump
         path += ' z';
 
         return g.paper.path(path).attr({
             fill: c, 
-            'stroke': c, 
-            'stroke-width': 1});
+            stroke: "none"
+        });
     }
 };
 
@@ -100,8 +93,8 @@ window.onload = function () {
 
     var back = g.paper.rect(0, 0, 960, 650);
     back.attr({
-        'fill': '#ececec',
-        'stroke': '#ececec'
+        fill: '#ececec',
+        stroke: 'none'
     });
 
     back.click(function() {