88c1e883831f521b6a1d1dd10dd0482cf956f1ab
[WebKit-https.git] / PerformanceTests / Animometer / tests / simple / resources / simple-canvas-paths.js
1 (function() {
2
3 // === PAINT OBJECTS ===
4
5 CanvasLineSegment = Utilities.createClass(
6     function(stage) {
7         var radius = Stage.randomInt(10, 100);
8         var center = Stage.randomPosition(stage.size);
9         var delta = Point.pointOnCircle(Stage.randomAngle(), radius/2);
10
11         this._point1 = center.add(delta);
12         this._point2 = center.subtract(delta);
13         this._color = Stage.randomColor();
14         this._lineWidth = Stage.randomInt(1, 100);
15     }, {
16
17     draw: function(context) {
18         context.strokeStyle = this._color;
19         context.lineWidth = this._lineWidth;
20         context.beginPath();
21         context.moveTo(this._point1.x, this._point1.y);
22         context.lineTo(this._point2.x, this._point2.y);
23         context.stroke();
24     }
25 });
26
27 CanvasLinePoint = Utilities.createClass(
28     function(stage, coordinateMaximumFactor) {
29         var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y));
30         this._point = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
31     }, {
32
33     draw: function(context) {
34         context.lineTo(this._point.x, this._point.y);
35     }
36 })
37
38 CanvasQuadraticSegment = Utilities.createClass(
39     function(stage) {
40         var maxSize = Stage.randomInt(20, 200);
41         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
42
43         this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
44         this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
45         this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
46         this._color = Stage.randomColor();
47         this._lineWidth = Stage.randomInt(1, 50);
48     }, {
49
50     draw: function(context) {
51         context.strokeStyle = this._color;
52         context.lineWidth = this._lineWidth;
53         context.beginPath();
54         context.moveTo(this._point1.x, this._point1.y);
55         context.quadraticCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y);
56         context.stroke();
57     }
58 });
59
60 CanvasQuadraticPoint = Utilities.createClass(
61     function(stage, coordinateMaximumFactor) {
62         var pointMaximum = Stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y)));
63         this._point1 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
64         this._point2 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
65     }, {
66
67     draw: function(context) {
68         context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
69     }
70 });
71
72 CanvasBezierSegment = Utilities.createClass(
73     function(stage) {
74         var maxSize = Stage.randomInt(20, 200);
75         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
76
77         this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
78         this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
79         this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
80         this._point4 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
81         this._color = Stage.randomColor();
82         this._lineWidth = Stage.randomInt(1, 50);
83     }, {
84
85     draw: function(context) {
86         context.strokeStyle = this._color;
87         context.lineWidth = this._lineWidth;
88         context.beginPath();
89         context.moveTo(this._point1.x, this._point1.y);
90         context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._point4.x, this._point4.y);
91         context.stroke();
92     }
93 });
94
95 CanvasBezierPoint = Utilities.createClass(
96     function(stage, coordinateMaximumFactor) {
97         var pointMaximum = Stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y)));
98         this._point1 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
99         this._point2 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
100         this._point3 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
101     }, {
102
103     draw: function(context) {
104         context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
105     }
106 });
107
108 CanvasArcToSegment = Utilities.createClass(
109     function(stage) {
110         var maxSize = Stage.randomInt(20, 200);
111         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
112
113         this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
114         this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
115         this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
116         this._radius = Stage.randomInt(20, 200);
117         this._color = Stage.randomColor();
118         this._lineWidth = Stage.randomInt(1, 50);
119     }, {
120
121     draw: function(context) {
122         context.strokeStyle = this._color;
123         context.lineWidth = this._lineWidth;
124         context.beginPath();
125         context.moveTo(this._point1.x, this._point1.y);
126         context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
127         context.stroke();
128     }
129 });
130
131 CanvasArcToSegmentFill = Utilities.createClass(
132     function(stage) {
133         CanvasArcToSegment.call(this, stage);
134     }, {
135
136     draw: function(context) {
137         context.fillStyle = this._color;
138         context.beginPath();
139         context.moveTo(this._point1.x, this._point1.y);
140         context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
141         context.fill();
142     }
143 });
144
145 CanvasArcSegment = Utilities.createClass(
146     function(stage) {
147         var maxSize = Stage.randomInt(20, 200);
148         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
149
150         this._point = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
151         this._radius = Stage.randomInt(20, 200);
152         this._startAngle = Stage.randomAngle();
153         this._endAngle = Stage.randomAngle();
154         this._counterclockwise = Stage.randomBool();
155         this._color = Stage.randomColor();
156         this._lineWidth = Stage.randomInt(1, 50);
157     }, {
158
159     draw: function(context) {
160         context.strokeStyle = this._color;
161         context.lineWidth = this._lineWidth;
162         context.beginPath();
163         context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
164         context.stroke();
165     }
166 });
167
168 CanvasArcSegmentFill = Utilities.createClass(
169     function(stage) {
170         CanvasArcSegment.call(this, stage);
171     }, {
172
173     draw: function(context) {
174         context.fillStyle = this._color;
175         context.beginPath();
176         context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
177         context.fill();
178     }
179 });
180
181 CanvasRect = Utilities.createClass(
182     function(stage) {
183         this._width = Stage.randomInt(20, 200);
184         this._height = Stage.randomInt(20, 200);
185         this._point = Stage.randomPosition(stage.size).subtract(new Point(this._width/2, this._height/2));
186         this._color = Stage.randomColor();
187         this._lineWidth = Stage.randomInt(1, 20);
188     }, {
189
190     draw: function(context) {
191         context.strokeStyle = this._color;
192         context.lineWidth = this._lineWidth;
193         context.beginPath();
194         context.rect(this._point.x, this._point.y, this._width, this._height);
195         context.stroke();
196     }
197 });
198
199 CanvasRectFill = Utilities.createClass(
200     function(stage) {
201         CanvasRect.call(this, stage);
202     }, {
203
204     draw: function(context) {
205         context.fillStyle = this._color;
206         context.beginPath();
207         context.rect(this._point.x, this._point.y, this._width, this._height);
208         context.fill();
209     }
210 });
211
212 // === STAGES ===
213
214 SimpleCanvasPathStrokeStage = Utilities.createSubclass(SimpleCanvasStage,
215     function(canvasObject) {
216         SimpleCanvasStage.call(this, canvasObject);
217     }, {
218
219     animate: function()
220     {
221         var context = this.context;
222         context.clearRect(0, 0, this.size.x, this.size.y);
223         context.lineWidth = Stage.randomInt(1, 20);
224         context.strokeStyle = Stage.rotatingColor();
225         context.beginPath();
226         context.moveTo(this.size.x / 2, this.size.y / 2);
227         this.objects.forEach(function(object) {
228             object.draw(context);
229         });
230         context.stroke();
231     }
232 });
233
234 SimpleCanvasPathFillStage = Utilities.createSubclass(SimpleCanvasStage,
235     function(canvasObject) {
236         SimpleCanvasStage.call(this, canvasObject);
237     }, {
238
239     animate: function()
240     {
241         var context = this.context;
242         context.clearRect(0, 0, this.size.x, this.size.y);
243         context.fillStyle = Stage.rotatingColor();
244         context.beginPath();
245         context.moveTo(this.size.x / 2, this.size.y / 2);
246         this.objects.forEach(function(object) {
247             object.draw(context);
248         });
249         context.fill();
250     }
251 });
252
253 CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
254     function()
255     {
256         SimpleCanvasStage.call(this, CanvasLineSegment);
257     }, {
258
259     initialize: function(benchmark, options)
260     {
261         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
262         this.context.lineCap = options["lineCap"] || "butt";
263     }
264 });
265
266 CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasPathStrokeStage,
267     function()
268     {
269         SimpleCanvasPathStrokeStage.call(this, CanvasLinePoint);
270     }, {
271
272     initialize: function(benchmark, options)
273     {
274         SimpleCanvasPathStrokeStage.prototype.initialize.call(this, benchmark, options);
275         this.context.lineJoin = options["lineJoin"] || "bevel";
276     }
277 });
278
279 CanvasLineDashStage = Utilities.createSubclass(SimpleCanvasStage,
280     function()
281     {
282         SimpleCanvasStage.call(this, CanvasLinePoint);
283         this._step = 0;
284     }, {
285
286     initialize: function(benchmark, options)
287     {
288         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
289         this.context.setLineDash([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
290         this.context.lineWidth = 1;
291         this.context.strokeStyle = "#000";
292     },
293
294     animate: function()
295     {
296         var context = this.context;
297         context.clearRect(0, 0, this.size.x, this.size.y);
298         context.lineDashOffset = this._step++;
299         context.beginPath();
300         context.moveTo(this.size.x / 2, this.size.y / 2);
301         this.objects.forEach(function(object) {
302             object.draw(context);
303         });
304         context.stroke();
305     }
306 });
307
308 // === BENCHMARK ===
309
310 CanvasPathBenchmark = Utilities.createSubclass(Benchmark,
311     function(options)
312     {
313         var stage;
314         switch (options["pathType"]) {
315         case "line":
316             stage = new CanvasLineSegmentStage();
317             break;
318         case "linePath": {
319             if ("lineJoin" in options)
320                 stage = new CanvasLinePathStage();
321             if ("lineDash" in options)
322                 stage = new CanvasLineDashStage();
323             break;
324         }
325         case "quadratic":
326             stage = new SimpleCanvasStage(CanvasQuadraticSegment);
327             break;
328         case "quadraticPath":
329             stage = new SimpleCanvasPathStrokeStage(CanvasQuadraticPoint);
330             break;
331         case "bezier":
332             stage = new SimpleCanvasStage(CanvasBezierSegment);
333             break;
334         case "bezierPath":
335             stage = new SimpleCanvasPathStrokeStage(CanvasBezierPoint);
336             break;
337         case "arcTo":
338             stage = new SimpleCanvasStage(CanvasArcToSegment);
339             break;
340         case "arc":
341             stage = new SimpleCanvasStage(CanvasArcSegment);
342             break;
343         case "rect":
344             stage = new SimpleCanvasStage(CanvasRect);
345             break;
346         case "lineFill":
347             stage = new SimpleCanvasPathFillStage(CanvasLinePoint);
348             break;
349         case "quadraticFill":
350             stage = new SimpleCanvasPathFillStage(CanvasQuadraticPoint);
351             break;
352         case "bezierFill":
353             stage = new SimpleCanvasPathFillStage(CanvasBezierPoint);
354             break;
355         case "arcToFill":
356             stage = new SimpleCanvasStage(CanvasArcToSegmentFill);
357             break;
358         case "arcFill":
359             stage = new SimpleCanvasStage(CanvasArcSegmentFill);
360             break;
361         case "rectFill":
362             stage = new SimpleCanvasStage(CanvasRectFill);
363             break;
364         }
365
366         Benchmark.call(this, stage, options);
367     }
368 );
369
370 window.benchmarkClass = CanvasPathBenchmark;
371
372 })();