Browse files

Raphaël educational changes

  • Loading branch information...
1 parent 34c7c1f commit b2eabe2604a601875dda2b5dfa0a2fbdd3038006 @DmitryBaranovskiy DmitryBaranovskiy committed Feb 23, 2012
Showing with 47 additions and 74 deletions.
  1. +19 −21 raphael_animation.js
  2. +5 −7 raphael_circle.js
  3. +0 −16 raphael_gears.html
  4. +23 −30 raphael_gears.js
View
40 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);
+
});
View
12 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'
});
-});
+});
View
16 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>
View
53 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() {

0 comments on commit b2eabe2

Please sign in to comment.