| OLD | NEW |
| (Empty) |
| 1 var NumTeeth = 24; | |
| 2 var Delta = Math.PI/90; | |
| 3 var NumGears = 60; | |
| 4 var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"]; | |
| 5 var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"]; | |
| 6 | |
| 7 | |
| 8 function drawGear(ctx, r) { | |
| 9 var dT = Math.PI*2/NumTeeth; | |
| 10 var dTq = dT/4; | |
| 11 var outer = r; | |
| 12 var inner = 0.7 * r; | |
| 13 ctx.beginPath(); | |
| 14 for (var i=0; i<NumTeeth; i+=2) { | |
| 15 ctx.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer); | |
| 16 ctx.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner); | |
| 17 ctx.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner); | |
| 18 ctx.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer); | |
| 19 } | |
| 20 ctx.closePath(); | |
| 21 ctx.stroke(); | |
| 22 }; | |
| 23 | |
| 24 function draw3DGear(ctx, angle, faceColor, sideColor, r) { | |
| 25 ctx.fillStyle = faceColor; | |
| 26 ctx.strokeStyle = sideColor; | |
| 27 ctx.rotate(angle); | |
| 28 drawGear(ctx, r); | |
| 29 for (var i=0; i < 20; i++) { | |
| 30 ctx.rotate(-angle); | |
| 31 ctx.translate(0.707, 0.707); | |
| 32 ctx.rotate(angle); | |
| 33 drawGear(ctx, r); | |
| 34 } | |
| 35 ctx.fill() | |
| 36 ctx.rotate(-angle); | |
| 37 } | |
| 38 | |
| 39 function draw3DGearAt(ctx, x, y, r, angle, faceColor, sideColor) { | |
| 40 ctx.save(); | |
| 41 ctx.translate(x, y); | |
| 42 draw3DGear(ctx, angle, faceColor, sideColor, r); | |
| 43 ctx.restore(); | |
| 44 } | |
| 45 | |
| 46 var anim = function() { | |
| 47 var canvas = document.getElementById('gears'); | |
| 48 var ctx = canvas.getContext("2d"); | |
| 49 var ticks=0; | |
| 50 var rotation = 0; | |
| 51 var gears = []; | |
| 52 | |
| 53 for (var i=0; i<NumGears; i++) { | |
| 54 color = Math.floor(Math.random()*FaceColors.length); | |
| 55 gears.push({ | |
| 56 x: Math.random()*500, | |
| 57 y: Math.random()*500, | |
| 58 r: Math.random()*100+5, | |
| 59 faceColor: FaceColors[color], | |
| 60 sideColor: SideColors[color] | |
| 61 }); | |
| 62 } | |
| 63 | |
| 64 function draw() { | |
| 65 ctx.resetTransform(); | |
| 66 ctx.fillStyle = 'white'; | |
| 67 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); | |
| 68 | |
| 69 rotation += Delta; | |
| 70 if (rotation >= Math.PI*2) { | |
| 71 rotation = 0; | |
| 72 } | |
| 73 | |
| 74 for (var i=0; i < gears.length; i++) { | |
| 75 draw3DGearAt(ctx, gears[i].x, gears[i].y, gears[i].r, rotation, | |
| 76 gears[i].faceColor, gears[i].sideColor); } | |
| 77 | |
| 78 ticks++; | |
| 79 requestAnimationFrame(draw); | |
| 80 } | |
| 81 | |
| 82 requestAnimationFrame(draw); | |
| 83 | |
| 84 | |
| 85 function fps() { | |
| 86 console.log(ticks); | |
| 87 ticks = 0; | |
| 88 } | |
| 89 | |
| 90 setInterval(fps, 1000); | |
| 91 }(); | |
| 92 | |
| 93 | |
| OLD | NEW |