Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(302)

Side by Side Diff: experimental/SkV8Example/compare/gears.js

Issue 122373003: Add the gears.js demo and all the code changes needed to get it working, including (Closed) Base URL: https://skia.googlesource.com/skia.git@gl
Patch Set: rename Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « experimental/SkV8Example/compare/gears.html ('k') | experimental/SkV8Example/gears.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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
OLDNEW
« no previous file with comments | « experimental/SkV8Example/compare/gears.html ('k') | experimental/SkV8Example/gears.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698