OLD | NEW |
| 1 var IS_SKV8 = typeof document == "undefined"; |
| 2 var HAS_PATH = typeof Path != "undefined"; |
| 3 |
1 var NumTeeth = 24; | 4 var NumTeeth = 24; |
2 var NumGears = 60; | 5 var NumGears = 60; |
3 var DeltaTheta = Math.PI/90; | 6 var DeltaTheta = Math.PI/90; |
4 var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"]; | 7 var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"]; |
5 var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"]; | 8 var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"]; |
6 | 9 |
7 function gearPath(r) { | 10 function makeGear(pathLike, r) { |
| 11 var dT = Math.PI*2/NumTeeth; |
| 12 var dTq = dT/4; |
8 var outer = r; | 13 var outer = r; |
9 var inner = 0.7 * r; | 14 var inner = 0.7 * r; |
10 var dT = Math.PI*2/NumTeeth; | 15 pathLike.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer); |
11 var dTq = dT/4; | |
12 p = new Path(); | |
13 p.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer); | |
14 for (var i=0; i<NumTeeth; i+=2) { | 16 for (var i=0; i<NumTeeth; i+=2) { |
15 p.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer); | 17 pathLike.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer); |
16 p.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner); | 18 pathLike.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner); |
17 p.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner); | 19 pathLike.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner); |
18 p.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer); | 20 pathLike.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer); |
19 } | 21 } |
20 p.close(); | |
21 return p; | |
22 } | 22 } |
23 | 23 |
24 function draw3DGear(ctx, angle, faceColor, sideColor, path) { | 24 function gearPath(r) { |
25 ctx.strokeStyle = sideColor; | 25 if (HAS_PATH) { |
26 ctx.fillStyle = faceColor; | 26 p = new Path(); |
| 27 makeGear(p, r) |
| 28 p.closePath(); |
| 29 return p; |
| 30 } else { |
| 31 return null; |
| 32 } |
| 33 } |
| 34 |
| 35 function strokeGear(ctx, gear) { |
| 36 if (HAS_PATH) { |
| 37 ctx.stroke(gear.path); |
| 38 } else { |
| 39 ctx.beginPath(); |
| 40 makeGear(ctx, gear.r); |
| 41 ctx.closePath(); |
| 42 ctx.stroke(); |
| 43 } |
| 44 } |
| 45 |
| 46 function fillGear(ctx) { |
| 47 if (HAS_PATH) { |
| 48 ctx.fill(gear.path); |
| 49 } else { |
| 50 ctx.beginPath(); |
| 51 makeGear(ctx, gear.r); |
| 52 ctx.closePath(); |
| 53 ctx.fill(); |
| 54 } |
| 55 } |
| 56 |
| 57 function draw3DGear(ctx, angle, gear) { |
| 58 ctx.strokeStyle = gear.sideColor; |
| 59 ctx.fillStyle = gear.faceColor; |
27 ctx.rotate(angle); | 60 ctx.rotate(angle); |
28 ctx.stroke(path); | 61 strokeGear(ctx, gear); |
29 for (var i=0; i < 20; i++) { | 62 for (var i=0; i < 20; i++) { |
30 ctx.rotate(-angle); | 63 ctx.rotate(-angle); |
31 ctx.translate(0.707, 0.707); | 64 ctx.translate(0.707, 0.707); |
32 ctx.rotate(angle); | 65 ctx.rotate(angle); |
33 ctx.stroke(path); | 66 strokeGear(ctx, gear); |
34 } | 67 } |
35 ctx.fill(path) | 68 fillGear(ctx, gear); |
36 ctx.rotate(-angle); | 69 ctx.rotate(-angle); |
37 } | 70 } |
38 | 71 |
39 function draw3DGearAt(ctx, x, y, angle, path, faceColor, sideColor) { | 72 function draw3DGearAt(ctx, angle, gear) { |
40 ctx.save(); | 73 ctx.save(); |
41 ctx.translate(x, y); | 74 ctx.translate(gear.x, gear.y); |
42 draw3DGear(ctx, angle, faceColor, sideColor, path); | 75 draw3DGear(ctx, angle, gear); |
43 ctx.restore(); | 76 ctx.restore(); |
44 } | 77 } |
45 | 78 |
46 var onDraw = function() { | 79 var onDraw = function() { |
47 var ticks=0; | 80 var ticks=0; |
48 var rotation = 0; | 81 var rotation = 0; |
49 var gears = []; | 82 var gears = []; |
50 | 83 |
51 for (var i=0; i<NumGears; i++) { | 84 for (var i=0; i<NumGears; i++) { |
52 color = Math.floor(Math.random()*FaceColors.length); | 85 color = Math.floor(Math.random()*FaceColors.length); |
| 86 r = Math.random()*100+5; |
53 gears.push({ | 87 gears.push({ |
54 x: Math.random()*500, | 88 x: Math.random()*500, |
55 y: Math.random()*500, | 89 y: Math.random()*500, |
56 path: gearPath(Math.random()*100+5), | 90 path: gearPath(r), |
| 91 r: r, |
57 faceColor: FaceColors[color], | 92 faceColor: FaceColors[color], |
58 sideColor: SideColors[color] | 93 sideColor: SideColors[color] |
59 }); | 94 }); |
60 } | 95 } |
61 | 96 |
62 function draw(ctx) { | 97 function draw(ctx) { |
63 ctx.resetTransform(); | 98 ctx.resetTransform(); |
64 | 99 |
65 rotation += DeltaTheta; | 100 rotation += DeltaTheta; |
66 if (rotation >= Math.PI*2) { | 101 if (rotation >= Math.PI*2) { |
67 rotation = 0; | 102 rotation = 0; |
68 } | 103 } |
69 | 104 |
70 for (var i=0; i < gears.length; i++) { | 105 for (var i=0; i < gears.length; i++) { |
71 draw3DGearAt(ctx, gears[i].x, gears[i].y, rotation, gears[i].path, | 106 gear = gears[i]; |
72 gears[i].faceColor, gears[i].sideColor); | 107 draw3DGearAt(ctx, rotation, gear); |
73 } | 108 } |
74 | 109 |
75 ticks++; | 110 ticks++; |
76 inval(); | 111 if (IS_SKV8) { |
| 112 inval(); |
| 113 } |
77 }; | 114 }; |
78 | 115 |
79 function fps() { | 116 function fps() { |
80 print(ticks); | 117 console.log(ticks); |
81 ticks = 0; | 118 ticks = 0; |
82 setTimeout(fps, 1000); | 119 setTimeout(fps, 1000); |
83 }; | 120 }; |
84 | 121 |
85 setTimeout(fps, 1000); | 122 setTimeout(fps, 1000); |
86 | 123 |
87 return draw; | 124 return draw; |
88 }(); | 125 }(); |
| 126 |
| 127 if (!IS_SKV8) { |
| 128 window.onload = function(){ |
| 129 var canvas = document.getElementById("gears"); |
| 130 var ctx = canvas.getContext("2d"); |
| 131 function drawCallback() { |
| 132 onDraw(ctx); |
| 133 setTimeout(drawCallback, 1); |
| 134 } |
| 135 setTimeout(drawCallback, 1); |
| 136 } |
| 137 } |
| 138 |
OLD | NEW |