OLD | NEW |
(Empty) | |
| 1 var NumTeeth = 24; |
| 2 var NumGears = 60; |
| 3 var DeltaTheta = Math.PI/90; |
| 4 var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"]; |
| 5 var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"]; |
| 6 |
| 7 function gearPath(r) { |
| 8 var outer = r; |
| 9 var inner = 0.7 * r; |
| 10 var dT = Math.PI*2/NumTeeth; |
| 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) { |
| 15 p.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); |
| 17 p.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); |
| 19 } |
| 20 p.close(); |
| 21 return p; |
| 22 } |
| 23 |
| 24 function draw3DGear(ctx, angle, faceColor, sideColor, path) { |
| 25 ctx.strokeStyle = sideColor; |
| 26 ctx.fillStyle = faceColor; |
| 27 ctx.rotate(angle); |
| 28 ctx.stroke(path); |
| 29 for (var i=0; i < 20; i++) { |
| 30 ctx.rotate(-angle); |
| 31 ctx.translate(0.707, 0.707); |
| 32 ctx.rotate(angle); |
| 33 ctx.stroke(path); |
| 34 } |
| 35 ctx.fill(path) |
| 36 ctx.rotate(-angle); |
| 37 } |
| 38 |
| 39 function draw3DGearAt(ctx, x, y, angle, path, faceColor, sideColor) { |
| 40 ctx.save(); |
| 41 ctx.translate(x, y); |
| 42 draw3DGear(ctx, angle, faceColor, sideColor, path); |
| 43 ctx.restore(); |
| 44 } |
| 45 |
| 46 var onDraw = function() { |
| 47 var ticks=0; |
| 48 var rotation = 0; |
| 49 var gears = []; |
| 50 |
| 51 for (var i=0; i<NumGears; i++) { |
| 52 color = Math.floor(Math.random()*FaceColors.length); |
| 53 gears.push({ |
| 54 x: Math.random()*500, |
| 55 y: Math.random()*500, |
| 56 path: gearPath(Math.random()*100+5), |
| 57 faceColor: FaceColors[color], |
| 58 sideColor: SideColors[color] |
| 59 }); |
| 60 } |
| 61 |
| 62 function draw(ctx) { |
| 63 ctx.resetTransform(); |
| 64 |
| 65 rotation += DeltaTheta; |
| 66 if (rotation >= Math.PI*2) { |
| 67 rotation = 0; |
| 68 } |
| 69 |
| 70 for (var i=0; i < gears.length; i++) { |
| 71 draw3DGearAt(ctx, gears[i].x, gears[i].y, rotation, gears[i].path, |
| 72 gears[i].faceColor, gears[i].sideColor); |
| 73 } |
| 74 |
| 75 ticks++; |
| 76 inval(); |
| 77 }; |
| 78 |
| 79 function fps() { |
| 80 print(ticks); |
| 81 ticks = 0; |
| 82 setTimeout(fps, 1000); |
| 83 }; |
| 84 |
| 85 setTimeout(fps, 1000); |
| 86 |
| 87 return draw; |
| 88 }(); |
OLD | NEW |