1cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgvar IS_SKV8 = typeof document == "undefined"; 2f679d1bf38a9e319c2b38fa53852f05b7f246e8ecommit-bot@chromium.orgvar HAS_PATH = typeof Path2D != "undefined"; 3cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.orgvar HAS_DISPLAY_LIST = typeof DisplayList != "undefined"; 4cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org 5d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.orgvar NumTeeth = 24; 6d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.orgvar NumGears = 60; 7d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.orgvar DeltaTheta = Math.PI/90; 8d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.orgvar FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"]; 9d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.orgvar SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"]; 10d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 11cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgfunction makeGear(pathLike, r) { 12d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org var dT = Math.PI*2/NumTeeth; 13d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org var dTq = dT/4; 14cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org var outer = r; 15cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org var inner = 0.7 * r; 16cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org pathLike.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer); 17d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org for (var i=0; i<NumTeeth; i+=2) { 18cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org pathLike.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer); 19cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org pathLike.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner); 20cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org pathLike.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner); 21cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org pathLike.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer); 22cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } 23cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org} 24cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org 25cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgfunction gearPath(r) { 26cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org if (HAS_PATH) { 27f679d1bf38a9e319c2b38fa53852f05b7f246e8ecommit-bot@chromium.org p = new Path2D(); 28cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org makeGear(p, r) 29cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org p.closePath(); 30cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org return p; 31cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } else { 32cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org return null; 33cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } 34cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org} 35cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org 36cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.orgfunction gearDisplayListStroke(r, color) { 37cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org if (HAS_DISPLAY_LIST) { 38cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org p = new Path2D(); 39cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org makeGear(p, r) 40cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org p.closePath(); 41cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org var dl = new DisplayList(); 42cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org dl.strokeStyle = color; 43cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org dl.stroke(p); 44cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org dl.finalize() 45cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org return dl; 46cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } else { 47cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org return null; 48cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } 49cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org} 50cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org 51cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.orgfunction gearDisplayListFill(r, color) { 52cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org if (HAS_DISPLAY_LIST) { 53cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org p = new Path2D(); 54cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org makeGear(p, r) 55cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org p.closePath(); 56cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org var dl = new DisplayList(); 57cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org dl.fillStyle = color; 58cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org dl.fill(p); 59cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org dl.finalize() 60cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org return dl; 61cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } else { 62cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org return null; 63cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } 64cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org} 65cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org 66cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgfunction strokeGear(ctx, gear) { 67cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org if (HAS_PATH) { 68cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.stroke(gear.path); 69cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } else { 70cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.beginPath(); 71cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org makeGear(ctx, gear.r); 72cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.closePath(); 73cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.stroke(); 74cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } 75cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org} 76cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org 77cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgfunction fillGear(ctx) { 78cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org if (HAS_PATH) { 79cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.fill(gear.path); 80cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } else { 81cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.beginPath(); 82cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org makeGear(ctx, gear.r); 83cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.closePath(); 84cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.fill(); 85d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org } 86d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org} 87d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 88cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgfunction draw3DGear(ctx, angle, gear) { 89cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.strokeStyle = gear.sideColor; 90cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.fillStyle = gear.faceColor; 91d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.rotate(angle); 92cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org strokeGear(ctx, gear); 93d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org for (var i=0; i < 20; i++) { 94d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.rotate(-angle); 95d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.translate(0.707, 0.707); 96d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.rotate(angle); 97cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org if (HAS_DISPLAY_LIST) { 98cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org ctx.draw(gear.gearStroke); 99cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } else { 100cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org strokeGear(ctx, gear); 101cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } 102cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } 103cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org if (HAS_DISPLAY_LIST) { 104cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org ctx.draw(gear.gearFill); 105cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org } else { 106cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org fillGear(ctx, gear); 107d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org } 108d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.rotate(-angle); 109d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org} 110d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 111cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgfunction draw3DGearAt(ctx, angle, gear) { 112d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.save(); 113cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org ctx.translate(gear.x, gear.y); 114cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org draw3DGear(ctx, angle, gear); 115d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.restore(); 116d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org} 117d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 118d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.orgvar onDraw = function() { 119d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org var ticks=0; 120d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org var rotation = 0; 121d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org var gears = []; 122d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 123d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org for (var i=0; i<NumGears; i++) { 124d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org color = Math.floor(Math.random()*FaceColors.length); 125cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org r = Math.random()*100+5; 126d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org gears.push({ 127d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org x: Math.random()*500, 128d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org y: Math.random()*500, 129cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org path: gearPath(r), 130cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org gearFill: gearDisplayListFill(r, FaceColors[color]), 131cb336874e468d5a2cb9e6287a3388fdd7a66dc1fcommit-bot@chromium.org gearStroke: gearDisplayListStroke(r, SideColors[color]), 132cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org r: r, 133d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org faceColor: FaceColors[color], 134d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org sideColor: SideColors[color] 135d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org }); 136d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org } 137d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 138d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org function draw(ctx) { 139d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ctx.resetTransform(); 140d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 14158c0fa37bafc220074dfe993a6faab039035e6e6commit-bot@chromium.org ctx.fillStyle = "#FFFFFF"; 14258c0fa37bafc220074dfe993a6faab039035e6e6commit-bot@chromium.org ctx.fillRect(0, 0, 499, 499); 14358c0fa37bafc220074dfe993a6faab039035e6e6commit-bot@chromium.org 144d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org rotation += DeltaTheta; 145d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org if (rotation >= Math.PI*2) { 146d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org rotation = 0; 147d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org } 148d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 149d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org for (var i=0; i < gears.length; i++) { 150cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org gear = gears[i]; 151cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org draw3DGearAt(ctx, rotation, gear); 152d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org } 153d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 154d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ticks++; 155cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org if (IS_SKV8) { 156cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org inval(); 157cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } 158d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org }; 159d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 160d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org function fps() { 161cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org console.log(ticks); 162d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org ticks = 0; 163d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org setTimeout(fps, 1000); 164d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org }; 165d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 166d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org setTimeout(fps, 1000); 167d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org 168d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org return draw; 169d7841047e2a9360eedf077fa7a47c7b800692632commit-bot@chromium.org}(); 170cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org 171cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.orgif (!IS_SKV8) { 172cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org window.onload = function(){ 173cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org var canvas = document.getElementById("gears"); 174cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org var ctx = canvas.getContext("2d"); 175cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org function drawCallback() { 176cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org onDraw(ctx); 177cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org setTimeout(drawCallback, 1); 178cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } 179cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org setTimeout(drawCallback, 1); 180cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org } 181cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org} 182cd110186256cee6acb0d503ab4af4b7ea7dc48a1commit-bot@chromium.org 183c896f4de12a8bb5c2404f03e5be9089fe3f2c7bdcommit-bot@chromium.orgconsole.log("HAS_PATH: " + HAS_PATH); 184