Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added the ability to rotate counter clockwise

  • Loading branch information...
commit 8da67c1e85417d1818d0171a7c636671528ac33d 1 parent 890ec13
@texel authored
Showing with 62 additions and 60 deletions.
  1. +62 −60 circle.js
View
122 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'
});
}
});
Please sign in to comment.
Something went wrong with that request. Please try again.