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

Side by Side Diff: experimental/SkV8Example/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.js ('k') | experimental/SkV8Example/path.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 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 }();
OLDNEW
« no previous file with comments | « experimental/SkV8Example/compare/gears.js ('k') | experimental/SkV8Example/path.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698