Index: experimental/SkV8Example/gears.js |
diff --git a/experimental/SkV8Example/gears.js b/experimental/SkV8Example/gears.js |
index 89547a278dd2aee8448a37b7e6a09815e1c2f6c9..7eb4c5b198e06eede15b5de1b8a31732455fdff3 100644 |
--- a/experimental/SkV8Example/gears.js |
+++ b/experimental/SkV8Example/gears.js |
@@ -1,45 +1,78 @@ |
+var IS_SKV8 = typeof document == "undefined"; |
+var HAS_PATH = typeof Path != "undefined"; |
+ |
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; |
+function makeGear(pathLike, 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); |
+ var outer = r; |
+ var inner = 0.7 * r; |
+ pathLike.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); |
+ pathLike.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer); |
+ pathLike.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner); |
+ pathLike.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner); |
+ pathLike.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer); |
+ } |
+} |
+ |
+function gearPath(r) { |
+ if (HAS_PATH) { |
+ p = new Path(); |
+ makeGear(p, r) |
+ p.closePath(); |
+ return p; |
+ } else { |
+ return null; |
+ } |
+} |
+ |
+function strokeGear(ctx, gear) { |
+ if (HAS_PATH) { |
+ ctx.stroke(gear.path); |
+ } else { |
+ ctx.beginPath(); |
+ makeGear(ctx, gear.r); |
+ ctx.closePath(); |
+ ctx.stroke(); |
+ } |
+} |
+ |
+function fillGear(ctx) { |
+ if (HAS_PATH) { |
+ ctx.fill(gear.path); |
+ } else { |
+ ctx.beginPath(); |
+ makeGear(ctx, gear.r); |
+ ctx.closePath(); |
+ ctx.fill(); |
} |
- p.close(); |
- return p; |
} |
-function draw3DGear(ctx, angle, faceColor, sideColor, path) { |
- ctx.strokeStyle = sideColor; |
- ctx.fillStyle = faceColor; |
+function draw3DGear(ctx, angle, gear) { |
+ ctx.strokeStyle = gear.sideColor; |
+ ctx.fillStyle = gear.faceColor; |
ctx.rotate(angle); |
- ctx.stroke(path); |
+ strokeGear(ctx, gear); |
for (var i=0; i < 20; i++) { |
ctx.rotate(-angle); |
ctx.translate(0.707, 0.707); |
ctx.rotate(angle); |
- ctx.stroke(path); |
+ strokeGear(ctx, gear); |
} |
- ctx.fill(path) |
+ fillGear(ctx, gear); |
ctx.rotate(-angle); |
} |
-function draw3DGearAt(ctx, x, y, angle, path, faceColor, sideColor) { |
+function draw3DGearAt(ctx, angle, gear) { |
ctx.save(); |
- ctx.translate(x, y); |
- draw3DGear(ctx, angle, faceColor, sideColor, path); |
+ ctx.translate(gear.x, gear.y); |
+ draw3DGear(ctx, angle, gear); |
ctx.restore(); |
} |
@@ -50,10 +83,12 @@ var onDraw = function() { |
for (var i=0; i<NumGears; i++) { |
color = Math.floor(Math.random()*FaceColors.length); |
+ r = Math.random()*100+5; |
gears.push({ |
x: Math.random()*500, |
y: Math.random()*500, |
- path: gearPath(Math.random()*100+5), |
+ path: gearPath(r), |
+ r: r, |
faceColor: FaceColors[color], |
sideColor: SideColors[color] |
}); |
@@ -68,16 +103,18 @@ var onDraw = function() { |
} |
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); |
+ gear = gears[i]; |
+ draw3DGearAt(ctx, rotation, gear); |
} |
ticks++; |
- inval(); |
+ if (IS_SKV8) { |
+ inval(); |
+ } |
}; |
function fps() { |
- print(ticks); |
+ console.log(ticks); |
ticks = 0; |
setTimeout(fps, 1000); |
}; |
@@ -86,3 +123,16 @@ var onDraw = function() { |
return draw; |
}(); |
+ |
+if (!IS_SKV8) { |
+ window.onload = function(){ |
+ var canvas = document.getElementById("gears"); |
+ var ctx = canvas.getContext("2d"); |
+ function drawCallback() { |
+ onDraw(ctx); |
+ setTimeout(drawCallback, 1); |
+ } |
+ setTimeout(drawCallback, 1); |
+ } |
+} |
+ |