Index: experimental/SkV8Example/gears.js |
diff --git a/experimental/SkV8Example/gears.js b/experimental/SkV8Example/gears.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..89547a278dd2aee8448a37b7e6a09815e1c2f6c9 |
--- /dev/null |
+++ b/experimental/SkV8Example/gears.js |
@@ -0,0 +1,88 @@ |
+var NumTeeth = 24; |
+var NumGears = 60; |
+var DeltaTheta = Math.PI/90; |
+var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"]; |
+var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"]; |
+ |
+function gearPath(r) { |
+ var outer = r; |
+ var inner = 0.7 * r; |
+ var dT = Math.PI*2/NumTeeth; |
+ var dTq = dT/4; |
+ p = new Path(); |
+ p.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer); |
+ for (var i=0; i<NumTeeth; i+=2) { |
+ p.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer); |
+ p.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner); |
+ p.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner); |
+ p.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer); |
+ } |
+ p.close(); |
+ return p; |
+} |
+ |
+function draw3DGear(ctx, angle, faceColor, sideColor, path) { |
+ ctx.strokeStyle = sideColor; |
+ ctx.fillStyle = faceColor; |
+ ctx.rotate(angle); |
+ ctx.stroke(path); |
+ for (var i=0; i < 20; i++) { |
+ ctx.rotate(-angle); |
+ ctx.translate(0.707, 0.707); |
+ ctx.rotate(angle); |
+ ctx.stroke(path); |
+ } |
+ ctx.fill(path) |
+ ctx.rotate(-angle); |
+} |
+ |
+function draw3DGearAt(ctx, x, y, angle, path, faceColor, sideColor) { |
+ ctx.save(); |
+ ctx.translate(x, y); |
+ draw3DGear(ctx, angle, faceColor, sideColor, path); |
+ ctx.restore(); |
+} |
+ |
+var onDraw = function() { |
+ var ticks=0; |
+ var rotation = 0; |
+ var gears = []; |
+ |
+ for (var i=0; i<NumGears; i++) { |
+ color = Math.floor(Math.random()*FaceColors.length); |
+ gears.push({ |
+ x: Math.random()*500, |
+ y: Math.random()*500, |
+ path: gearPath(Math.random()*100+5), |
+ faceColor: FaceColors[color], |
+ sideColor: SideColors[color] |
+ }); |
+ } |
+ |
+ function draw(ctx) { |
+ ctx.resetTransform(); |
+ |
+ rotation += DeltaTheta; |
+ if (rotation >= Math.PI*2) { |
+ rotation = 0; |
+ } |
+ |
+ for (var i=0; i < gears.length; i++) { |
+ draw3DGearAt(ctx, gears[i].x, gears[i].y, rotation, gears[i].path, |
+ gears[i].faceColor, gears[i].sideColor); |
+ } |
+ |
+ ticks++; |
+ inval(); |
+ }; |
+ |
+ function fps() { |
+ print(ticks); |
+ ticks = 0; |
+ setTimeout(fps, 1000); |
+ }; |
+ |
+ setTimeout(fps, 1000); |
+ |
+ return draw; |
+}(); |