Added the ability to rotate counter clockwise

texel · Aug 7, 2009 · 8da67c1 · 8da67c1
1 parent 890ec13
commit 8da67c1
Showing 1 changed file with 62 additions and 60 deletions.
diff --git a/circle.js b/circle.js
@@ -4,59 +4,59 @@
 // Copyright (c) 2009 Leigh Caplan (lcaplan@onehub.com, http://www.github.com/texel, http://onehub.com)
 
 Point = function(x, y) {
-	this.x = x;
-	this.y = y;
+  this.x = x;
+  this.y = y;
 };
 
 var Circle = Class.create();
 Object.extend(Circle.prototype, Object);
 
 Circle.prototype = {
-	initialize: function(startX, startY, centerX, centerY) {
-		this.startPoint  = new Point(startX, startY);	
-		this.centerPoint = new Point(centerX, centerY);
+  initialize: function(startX, startY, centerX, centerY) {
+    this.startPoint  = new Point(startX, startY); 
+    this.centerPoint = new Point(centerX, centerY);
 
-		this.dx = startX - centerX;
-		this.dy = startY - centerY;
+    this.dx = startX - centerX;
+    this.dy = startY - centerY;
 
-		this.radius = Math.sqrt(Math.pow(this.dx, 2) + Math.pow(this.dy, 2));
-		this.diameter = this.radius * 2;
-		this.circumfrence = 2 * Math.PI * this.radius;
-	},
-	
-	pointForPosition: function(position) {		
-		var originalAngle = Math.atan2(this.dy, this.dx);
-		
-		// Get theta in radians
-		var theta = originalAngle + 2 * Math.PI * position;
-		
-		// Calculate dx
-		var x = Math.cos(theta) * this.radius;
-		
-		// Calculate dy
-		var y = Math.sin(theta) * this.radius;
-		
-		return new Point(this.centerPoint.x + x, this.centerPoint.y + y);
-	},
-	
-	// Trace the path of the circle, marking the start point and the center point.
-	// This is very useful for debugging purposes.
-	trace: function() {
-		var steps = $R(1, 100).collect(function(i) { return i / 100.0; });
-		steps.each(function(step) {
-			var point = this.pointForPosition(step);
-			this.tracePoint(point.x, point.y, "#FF0000");
-		}.bind(this));
-		
-		// Clearly show the start point
-		this.tracePoint(this.startPoint.x, this.startPoint.y, "#00FF00");
-		this.tracePoint(this.centerPoint.x, this.centerPoint.y, "#00FF00");
-	},
-	
-	tracePoint: function(x, y, color) {
-		var div = new Element('div', {style: "position: absolute; left: " + x + "px; top: " + y + "px; width: 1px; height: 1px; background-color: " + color + "; z-index: 9999;"});
-		document.body.insert(div);
-	}
+    this.radius = Math.sqrt(Math.pow(this.dx, 2) + Math.pow(this.dy, 2));
+    this.diameter = this.radius * 2;
+    this.circumfrence = 2 * Math.PI * this.radius;
+  },
+  
+  pointForPosition: function(position) {    
+    var originalAngle = Math.atan2(this.dy, this.dx);
+    
+    // Get theta in radians
+    var theta = originalAngle + 2 * Math.PI * position;
+    
+    // Calculate dx
+    var x = Math.cos(theta) * this.radius;
+    
+    // Calculate dy
+    var y = Math.sin(theta) * this.radius;
+    
+    return new Point(this.centerPoint.x + x, this.centerPoint.y + y);
+  },
+  
+  // Trace the path of the circle, marking the start point and the center point.
+  // This is very useful for debugging purposes.
+  trace: function() {
+    var steps = $R(1, 100).collect(function(i) { return i / 100.0; });
+    steps.each(function(step) {
+      var point = this.pointForPosition(step);
+      this.tracePoint(point.x, point.y, "#FF0000");
+    }.bind(this));
+    
+    // Clearly show the start point
+    this.tracePoint(this.startPoint.x, this.startPoint.y, "#00FF00");
+    this.tracePoint(this.centerPoint.x, this.centerPoint.y, "#00FF00");
+  },
+  
+  tracePoint: function(x, y, color) {
+    var div = new Element('div', {style: "position: absolute; left: " + x + "px; top: " + y + "px; width: 1px; height: 1px; background-color: " + color + "; z-index: 9999;"});
+    document.body.insert(div);
+  }
 };
 
 Effect.Circle = Class.create(Effect.Base, {
@@ -67,7 +67,8 @@ Effect.Circle = Class.create(Effect.Base, {
       x:    0,
       y:    0,
       mode: 'relative',
-			transition: Effect.Transitions.linear
+      direction: 'clockwise',
+      transition: Effect.Transitions.linear
     }, arguments[1] || { });
     this.start(options);
   },
@@ -79,23 +80,24 @@ Effect.Circle = Class.create(Effect.Base, {
       this.options.x = this.options.x + this.originalLeft;
       this.options.y = this.options.y + this.originalTop;
     }
-		this.circle = new Circle(this.originalLeft, this.originalTop, this.options.x, this.options.y);
-		
-		if (this.options.trace) {
-			this.circle.trace();
-		};
+    this.circle = new Circle(this.originalLeft, this.originalTop, this.options.x, this.options.y);
+    
+    if (this.options.trace) {
+      this.circle.trace();
+    };
   },
   update: function(position) {
-		position = position * (this.options.rotations || 1);
-		var point = this.circle.pointForPosition(position);
-
-		if (this.options.trace) {
-			this.circle.tracePoint(point.x, point.y, "#FFFFFF");
-		};
-
+    var direction = this.options.direction == 'clockwise' ? 1 : -1;
+    var position = position * (this.options.rotations || 1) * direction;
+    var point = this.circle.pointForPosition(position);
+
+    if (this.options.trace) {
+      this.circle.tracePoint(point.x, point.y, "#FFFFFF");
+    };
+
     this.element.setStyle({
-			left: point.x.round() + 'px',
-			top: point.y.round() + 'px'
+      left: point.x.round() + 'px',
+      top: point.y.round() + 'px'
     });
   }
 });