Update gradientLine.html

Math.PI > magic number

gradientBall.html

@@ -19,7 +19,7 @@
 	var ctx = c.getContext("2d");
 	var width = 320;
 	var height = 200;
-	var rotate = 1;
+	var rotate = 0;
 	var h = -1;
 	var s = -1;
 	var l = -1;
@@ -74,7 +74,8 @@
 		if (h == -1 || s == -1 || l == -1) {
 			[h, s, l] = hexToHSL(fg);
 		}
-		// Reset canvas
+		// Reset canvas transform and clear
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
 		ctx.fillStyle = bg;
 		ctx.fillRect(0, 0, width, height);
 
@@ -84,8 +85,8 @@
 			y: (height / 2) - distance
 		};
 
-		// Increment rotation
+		// Increment rotation (wrap at full revolution)
-		rotate += speed
+		rotate = (rotate + speed * 0.001) % (2 * Math.PI);
 
 		// Define gradient for ball
 		var grd = ctx.createRadialGradient(midPoint.x, midPoint.y, 0, midPoint.x, midPoint.y, radius);
@@ -100,7 +101,7 @@
 		ctx.beginPath();
 		// Rotate canvas around the ball
 		ctx.translate(midPoint.x, midPoint.y + distance);
-		ctx.rotate(0.001 * rotate);
+		ctx.rotate(rotate);
 		ctx.translate(-midPoint.x, -midPoint.y - distance);
 		// Draw Ball
 		ctx.arc(midPoint.x, midPoint.y, radius, 0, Math.PI * 2, false);

gradientLine.html

@@ -18,7 +18,7 @@
 	var ctx = c.getContext("2d");
 	var width = 320;
 	var height = 200;
-	var rotate = 1;
+	var rotate = 0;
 	var h = -1;
 	var s = -1;
 	var l = -1;
@@ -73,12 +73,13 @@
 		if (h == -1 || s == -1 || l == -1) {
 			[h, s, l] = hexToHSL(fg);
 		}
-		// Reset canvas
+		// Reset canvas transform and clear
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
 		ctx.fillStyle = bg;
 		ctx.fillRect(0, 0, width, height);
 
-		// Update rotation of line
+		// Update rotation of line (wrap at full revolution)
-		rotate += speed;
+		rotate = (rotate + speed * 0.001) % (2 * Math.PI);
 
 		// Calculate useful anchor points
 		startPoint = {
@@ -113,7 +114,7 @@
 		// Draw rectangle
 		ctx.beginPath();
 		ctx.translate(midPoint.x, startPoint.y);
-		ctx.rotate(0.001 * rotate);
+		ctx.rotate(rotate);
 		ctx.translate(-midPoint.x, -startPoint.y);
 		ctx.rect(startPoint.x, startPoint.y, distance, height);
 		ctx.fillStyle = grd;