| 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 |