Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Merge pull request #1 from DmitryBaranovskiy/master

Raphaël educational changes
  • Loading branch information...
commit 615aa3cf5f81ee7a9d2ffafeb90c52aa4b3c7897 2 parents 34c7c1f + d88e907
Zack Grossbart authored
40 raphael_animation.js
... ... @@ -1,33 +1,31 @@
1   -jQuery(document).ready(function() {
2   - var paper = Raphael('raphaelAnimation', 200, 200);
3   -
4   - var back = paper.rect(10, 10, 180, 180);
5   - back.attr({
6   - 'fill': 'white',
7   - 'stroke': 'white'
8   - });
9   - back.click(function() {
10   - main.raphaelAnimationStopped = !main.raphaelAnimationStopped;
11   - });
  1 +Raphael('raphaelAnimation', 200, 200, function () {
  2 + var paper = this,
  3 + anim;
12 4
13   -
14   - var c = paper.ellipse(100, 100, 10, 10);
  5 + var c = paper.circle(100, 100, 10);
15 6 c.attr({
16   - 'fill': '#00aeef',
17   - 'stroke': '#00aeef'
  7 + fill: '#00aeef',
  8 + stroke: 'none'
18 9 });
19 10
20 11 var r = paper.rect(60, 60, 80, 80);
21 12 r.attr({
22 13 'stroke-width': 2,
23   - 'stroke': '#00aeef'
  14 + stroke: '#00aeef',
  15 + fill: "#000",
  16 + "fill-opacity": 0
  17 + });
  18 + r.click(function () {
  19 + if (anim) {
  20 + r.stop();
  21 + } else {
  22 + r.animate(a);
  23 + }
  24 + anim = !anim;
24 25 });
25 26
26 27 r.rotate(60);
27 28
28   - setInterval(function() {
29   - if (!main.raphaelAnimationStopped) {
30   - r.rotate(6);
31   - }
32   - }, 33);
  29 + var a = Raphael.animation({transform: "...r360"}, 3000).repeat(Infinity);
  30 +
33 31 });
12 raphael_circle.js
... ... @@ -1,8 +1,6 @@
1   -jQuery(document).ready(function() {
2   - var paper = Raphael('raphaelCircle', 200, 200);
3   - var c = paper.ellipse(100, 100, 10, 10);
4   - c.attr({
5   - 'fill': '#00aeef',
6   - 'stroke': '#00aeef'
  1 +Raphael('raphaelCircle', 200, 200, function () {
  2 + this.circle(100, 100, 10).attr({
  3 + fill: '#00aeef',
  4 + stroke: 'none'
7 5 });
8   -});
  6 +});
16 raphael_gears.html
@@ -7,21 +7,6 @@
7 7 <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
8 8 <script src="raphael_gears.js" type="text/javascript" charset="utf-8"></script>
9 9
10   - <script type="text/javascript" src="http://use.typekit.com/ran8aft.js"></script>
11   - <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
12   -
13   - <script type="text/javascript">
14   - var _gaq = _gaq || [];
15   - _gaq.push(['_setAccount', 'UA-26336682-1']);
16   - _gaq.push(['_trackPageview']);
17   -
18   - (function() {
19   - var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
20   - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
21   - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
22   - })();
23   - </script>
24   -
25 10 </head>
26 11 <body>
27 12 <div id="canvas" style="height: 650px; width: 960px; background-color: #ececec;"></div>
@@ -40,6 +25,5 @@
40 25 </p>
41 26 </div>
42 27
43   - <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>
44 28 </body>
45 29 </html>
63 raphael_gears.js
@@ -21,6 +21,7 @@ var scale = 15;
21 21 var toothSize = 28;
22 22 var clockwise = false;
23 23
  24 +
24 25 g = {
25 26 stopped: false,
26 27 create: function(/*Point*/ p, /*int*/ teeth, /*string*/ c, /*int*/ speed, /*boolean*/ clockwise) {
@@ -30,47 +31,49 @@ g = {
30 31
31 32 var d = teeth * scale;
32 33
33   - var outerCircle = g.paper.ellipse(p.x, p.y, d / 2, d / 2);
  34 + var outerCircle = g.paper.circle(p.x, p.y, d / 2);
34 35 outerCircle.attr({
35   - 'fill': c,
36   - 'stroke': c
  36 + fill: c,
  37 + stroke: c
37 38 });
38 39 outerCircle.click(function() {
39 40 g.stopped = !g.stopped;
40 41 });
41 42
42   - var innerCircle = g.paper.ellipse(p.x, p.y, d / 8, d / 8);
  43 + var innerCircle = g.paper.circle(p.x, p.y, d / 8);
43 44 innerCircle.attr({
44   - 'fill': 'white',
45   - 'stroke': 'white'
  45 + fill: 'white',
  46 + stroke: 'white'
46 47 });
47 48 innerCircle.click(function() {
48 49 g.stopped = !g.stopped;
49 50 });
50 51
51   - var st = g.drawTeeth((d / 2) - 5, d / scale, c, p);
  52 + var st = g.drawTeeth((d / 2) - 5, d / scale, c, p),
  53 + an = Raphael.animation({transform: "r360," + [p.x, p.y]}, 5000);
52 54
53   - setInterval(function() {
54   - if (!g.stopped) {
55   - st.rotate(6, 100, 100);
56   - }
57   - }, 66);
  55 + var path = "";
  56 + for (var i = 0, ii = st.length; i < ii; i++) {
  57 + path += Raphael.mapPath(st[i].attr("path"), st[i].matrix);
  58 + }
  59 + st.remove();
  60 + st = g.paper.path(path).attr({
  61 + stroke: "none",
  62 + fill: c
  63 + });
  64 +
  65 + st.animate(an.repeat(Infinity));
58 66 },
59 67
60 68 drawTeeth: function(/*int*/ d, /*int*/ plots, /*color*/ c, /*Point*/ p) {
61   - var increase = Math.PI * 2 / plots;
  69 + var increase = 360 / plots;
62 70 var angle = 0;
63 71
64 72 var st = g.paper.set();
65 73
66 74 for (var i = 0; i < plots; i++) {
67   - var t = 2 * Math.PI * i / plots;
68   - var x = Math.round((d + (toothSize / 2)) * Math.cos(t));
69   - var y = Math.round((d + (toothSize / 2)) * Math.sin(t));
70   -
71 75 var tooth = g.createTooth(c);
72   - tooth.translate(p.x + x, p.y + y);
73   - tooth.rotate(((180 / Math.PI) * angle) + 90);
  76 + tooth.transform("t" + [p.x, p.y - (d + (toothSize / 2))] + "R" + [angle, p.x, p.y]);
74 77 st.push(tooth);
75 78 angle += increase;
76 79 }
@@ -79,19 +82,19 @@ g = {
79 82 },
80 83
81 84 createTooth: function(/*color*/ c) {
82   -
83   - var path = 'M ' + (-(toothSize / 4) + 2) + ' ' + (-(toothSize / 2)) + // upper left
84   - 'L ' + ((toothSize / 4) - 6) + ' ' + (-(toothSize / 2)) + // upper right
85   - 'L ' + (toothSize / 4) + ' ' + (-(toothSize / 2) + 8) + // upper right bump
86   - 'L ' + (toothSize / 2) + ' ' + (toothSize / 2) + // bottom right
87   - 'L ' + (-(toothSize / 2)) + ' ' + (toothSize / 2) + // bottom left
88   - 'L ' + (-(toothSize / 2) + 4) + ' ' + (-(toothSize / 2) + 8); // upper left bump
  85 + var t2 = toothSize / 2;
  86 + var path = 'M ' + (-t2 / 2 + 2) + ' ' + (-t2) + // upper left
  87 + 'L ' + (t2 / 2 - 6) + ' ' + (-t2) + // upper right
  88 + 'L ' + (t2 / 2) + ' ' + (-t2 + 8) + // upper right bump
  89 + 'L ' + t2 + ' ' + t2 + // bottom right
  90 + 'L ' + (-t2) + ' ' + t2 + // bottom left
  91 + 'L ' + (-t2 + 4) + ' ' + (-t2 + 8); // upper left bump
89 92 path += ' z';
90 93
91 94 return g.paper.path(path).attr({
92 95 fill: c,
93   - 'stroke': c,
94   - 'stroke-width': 1});
  96 + stroke: "none"
  97 + });
95 98 }
96 99 };
97 100
@@ -100,8 +103,8 @@ window.onload = function () {
100 103
101 104 var back = g.paper.rect(0, 0, 960, 650);
102 105 back.attr({
103   - 'fill': '#ececec',
104   - 'stroke': '#ececec'
  106 + fill: '#ececec',
  107 + stroke: 'none'
105 108 });
106 109
107 110 back.click(function() {

0 comments on commit 615aa3c

Please sign in to comment.
Something went wrong with that request. Please try again.