Permalink
Browse files

Separated the different Raphael examples into separate scripts.

  • Loading branch information...
1 parent 6c813cd commit f26bd4b98c6d6ffba7271749c15acd391443f5e1 @zgrossbart committed Nov 29, 2011
Showing with 74 additions and 83 deletions.
  1. +7 −4 index.html
  2. +33 −0 raphael_animation.js
  3. +9 −0 raphael_circle.js
  4. +25 −0 raphael_interaction.js
  5. +0 −79 raphael_shapes.js
View
@@ -4,10 +4,13 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Paper vs. Processing vs. Rapha&euml;l</title>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="paper.js" type="text/javascript" charset="utf-8"></script>
<script src="processing.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
- <script src="raphael_shapes.js" type="text/javascript"></script>
+ <script src="raphael_circle.js" type="text/javascript"></script>
+ <script src="raphael_animation.js" type="text/javascript"></script>
+ <script src="raphael_interaction.js" type="text/javascript"></script>
<script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script>
<script type="text/paperscript" canvas="paperAnimation" src="paper_animation.pjs" id="script"></script>
@@ -90,13 +93,13 @@
<div id="raphael">
<h2><a href="http://raphaeljs.com/">Rapha&euml;l</a></h2>
<div id="raphaelCircle" class="canvas"></div>
- <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_circle.js" class="sourceLink">view source</a>
<div id="raphaelAnimation" class="canvas"></div>
- <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_animation.js" class="sourceLink">view source</a>
<div id="raphaelInteraction" class="canvas"></div>
- <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_shapes.js" class="sourceLink">view source</a>
+ <a href="https://github.com/zgrossbart/3gears/blob/master/raphael_interaction.js" class="sourceLink">view source</a>
<a href="raphael_gears.html" id="raphaelGears" class="canvas"> </a>
</div>
View
@@ -0,0 +1,33 @@
+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;
+ });
+
+
+ var c = paper.ellipse(100, 100, 10, 10);
+ c.attr({
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
+ });
+
+ var r = paper.rect(60, 60, 80, 80);
+ r.attr({
+ 'stroke-width': 2,
+ 'stroke': '#00aeef'
+ });
+
+ r.rotate(60);
+
+ setInterval(function() {
+ if (!main.raphaelAnimationStopped) {
+ r.rotate(6);
+ }
+ }, 33);
+});
View
@@ -0,0 +1,9 @@
+jQuery(document).ready(function() {
+ var paper = Raphael('raphaelCircle', 200, 200);
+ console.log('paper: ' + paper);
+ var c = paper.ellipse(100, 100, 10, 10);
+ c.attr({
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
+ });
+});
View
@@ -0,0 +1,25 @@
+jQuery(document).ready(function() {
+ var paper = Raphael('raphaelInteraction', 200, 200);
+ var r = paper.rect(60, 60, 80, 80);
+ r.attr({
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
+ });
+
+ var clicked = false;
+
+ r.click(function() {
+ if (clicked) {
+ r.attr({
+ 'fill': '#00aeef',
+ 'stroke': '#00aeef'
+ });
+ } else {
+ r.attr({
+ 'fill': '#f00ff0',
+ 'stroke': '#f00ff0'
+ });
+ }
+ clicked = !clicked;
+ });
+});
View
@@ -1,79 +0,0 @@
-shapes = {
- createCircle: function() {
- var paper = Raphael('raphaelCircle', 200, 200);
- var c = paper.ellipse(100, 100, 10, 10);
- c.attr({
- 'fill': '#00aeef',
- 'stroke': '#00aeef'
- });
-
- },
-
- createAnimation: 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;
- });
-
-
- var c = paper.ellipse(100, 100, 10, 10);
- c.attr({
- 'fill': '#00aeef',
- 'stroke': '#00aeef'
- });
-
- var r = paper.rect(60, 60, 80, 80);
- r.attr({
- 'stroke-width': 2,
- 'stroke': '#00aeef'
- });
-
- r.rotate(60);
-
- setInterval(function() {
- if (!main.raphaelAnimationStopped) {
- r.rotate(6);
- }
- }, 33);
- },
-
- createInteraction: function() {
- var paper = Raphael('raphaelInteraction', 200, 200);
- var r = paper.rect(60, 60, 80, 80);
- r.attr({
- 'fill': '#00aeef',
- 'stroke': '#00aeef'
- });
-
- var clicked = false;
-
- r.click(function() {
- if (clicked) {
- r.attr({
- 'fill': '#00aeef',
- 'stroke': '#00aeef'
- });
- } else {
- r.attr({
- 'fill': '#f00ff0',
- 'stroke': '#f00ff0'
- });
- }
- clicked = !clicked;
- });
-
- },
-};
-
-window.onload = function () {
- shapes.createCircle();
- shapes.createAnimation();
- shapes.createInteraction();
-};
-

0 comments on commit f26bd4b

Please sign in to comment.