3fd4efa60d556ad26c7c3096469c181adedb850e
[WebKit-https.git] / PerformanceTests / Animometer / tests / master / resources / canvas-tests.js
1 (function() {
2
3 // === PAINT OBJECTS ===
4
5 CanvasLineSegment = Utilities.createClass(
6     function(stage)
7     {
8         var circle = Stage.randomInt(0, 2);
9         this._color = ["#e01040", "#10c030", "#e05010"][circle];
10         this._lineWidth = Math.pow(Pseudo.random(), 12) * 20 + 3;
11         this._omega = Pseudo.random() * 3 + 0.2;
12         var theta = Stage.randomAngle();
13         this._cosTheta = Math.cos(theta);
14         this._sinTheta = Math.sin(theta);
15         this._startX = stage.circleRadius * this._cosTheta + stage.circleX[circle];
16         this._startY = stage.circleRadius * this._sinTheta + stage.circleY[circle];
17         this._length = Math.pow(Pseudo.random(), 8) * stage.lineLengthMaximum + stage.lineMinimum;
18         this._segmentDirection = Pseudo.random() > 0.5 ? -1 : 1;
19     }, {
20
21     draw: function(context)
22     {
23         context.strokeStyle = this._color;
24         context.lineWidth = this._lineWidth;
25
26         this._length += Math.sin(Stage.dateCounterValue(100) * this._omega);
27
28         context.beginPath();
29         context.moveTo(this._startX, this._startY);
30         context.lineTo(this._startX + this._segmentDirection * this._length * this._cosTheta,
31                        this._startY + this._segmentDirection * this._length * this._sinTheta);
32         context.stroke();
33     }
34 });
35
36 CanvasArc = Utilities.createClass(
37     function(stage)
38     {
39         var maxX = 6, maxY = 3;
40         var distanceX = stage.size.x / maxX;
41         var distanceY = stage.size.y / (maxY + 1);
42         var randY = Stage.randomInt(0, maxY);
43         var randX = Stage.randomInt(0, maxX - 1 * (randY % 2));
44
45         this._point = new Point(distanceX * (randX + (randY % 2) / 2), distanceY * (randY + .5));
46
47         this._radius = 20 + Math.pow(Pseudo.random(), 5) * (Math.min(distanceX, distanceY) / 1.8);
48         this._startAngle = Stage.randomAngle();
49         this._endAngle = Stage.randomAngle();
50         this._omega = (Pseudo.random() - 0.5) * 0.3;
51         this._counterclockwise = Stage.randomBool();
52         var colors = ["#101010", "#808080", "#c0c0c0"];
53         colors.push(["#e01040", "#10c030", "#e05010"][(randX + Math.ceil(randY / 2)) % 3]);
54         this._color = colors[Math.floor(Pseudo.random() * colors.length)];
55         this._lineWidth = 1 + Math.pow(Pseudo.random(), 5) * 30;
56         this._doStroke = Stage.randomInt(0, 3) != 0;
57     }, {
58
59     draw: function(context)
60     {
61         this._startAngle += this._omega;
62         this._endAngle += this._omega / 2;
63
64         if (this._doStroke) {
65             context.strokeStyle = this._color;
66             context.lineWidth = this._lineWidth;
67             context.beginPath();
68             context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
69             context.stroke();
70         } else {
71             context.fillStyle = this._color;
72             context.beginPath();
73             context.lineTo(this._point.x, this._point.y);
74             context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
75             context.lineTo(this._point.x, this._point.y);
76             context.fill();
77         }
78     }
79 });
80
81 // CanvasLinePoint contains no draw() method since it is either moveTo or
82 // lineTo depending on its index.
83 CanvasLinePoint = Utilities.createClass(
84     function(stage, coordinateMaximum)
85     {
86         var X_LOOPS = 40;
87         var Y_LOOPS = 20;
88
89         var offsets = [[-2, -1], [2, 1], [-1, 0], [1, 0], [-1, 2], [1, -2]];
90         var offset = offsets[Math.floor(Pseudo.random() * offsets.length)];
91
92         this.coordinate = new Point(X_LOOPS/2, Y_LOOPS/2);
93         if (stage.objects.length) {
94             var head = stage.objects[stage.objects.length - 1].coordinate;
95             this.coordinate.x = head.x;
96             this.coordinate.y = head.y;
97         }
98
99         var nextCoordinate = this.coordinate.x + offset[0];
100         if (nextCoordinate < 0 || nextCoordinate > X_LOOPS)
101             this.coordinate.x -= offset[0];
102         else
103             this.coordinate.x = nextCoordinate;
104         nextCoordinate = this.coordinate.y + offset[1];
105         if (nextCoordinate < 0 || nextCoordinate > Y_LOOPS)
106             this.coordinate.y -= offset[1];
107         else
108             this.coordinate.y = nextCoordinate;
109
110         var xOff = .25 * (this.coordinate.y % 2);
111         var randX = (xOff + this.coordinate.x) * stage.size.x / X_LOOPS;
112         var randY = this.coordinate.y * stage.size.y / Y_LOOPS;
113         var colors = ["#101010", "#808080", "#c0c0c0", "#101010", "#808080", "#c0c0c0", "#e01040"];
114         this.color = colors[Math.floor(Pseudo.random() * colors.length)];
115
116         this.width = Math.pow(Pseudo.random(), 5) * 20 + 1;
117         this.isSplit = Pseudo.random() > 0.9;
118         this.point = new Point(randX, randY);
119     }
120 );
121
122 // === STAGES ===
123
124 CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
125     function()
126     {
127         SimpleCanvasStage.call(this, CanvasLineSegment);
128     }, {
129
130     initialize: function(benchmark, options)
131     {
132         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
133         this.context.lineCap = options["lineCap"] || "butt";
134         this.lineMinimum = 20;
135         this.lineLengthMaximum = 40;
136         this.circleRadius = this.size.x / 3 / 2 - .8 * (this.lineMinimum + this.lineLengthMaximum);
137         this.circleX = [
138             .55 / 3 * this.size.x,
139             1.5 / 3 * this.size.x,
140             2.45 / 3 * this.size.x
141         ];
142         this.circleY = [
143             .6 * this.size.y,
144             .4 * this.size.y,
145             .6 * this.size.y
146         ];
147     },
148
149     animate: function()
150     {
151         var context = this.context;
152
153         context.clearRect(0, 0, this.size.x, this.size.y);
154         context.lineWidth = 30;
155         for(var i = 0; i < 3; i++) {
156             context.strokeStyle = ["#e01040", "#10c030", "#e05010"][i];
157             context.fillStyle = ["#70051d", "#016112", "#702701"][i];
158             context.beginPath();
159                 context.arc(this.circleX[i], this.circleY[i], this.circleRadius, 0, Math.PI*2);
160             context.stroke();
161             context.fill();
162         }
163
164         for (var i = this.offsetIndex, length = this.objects.length; i < length; ++i)
165             this.objects[i].draw(context);
166     }
167 });
168
169 CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasStage,
170     function()
171     {
172         SimpleCanvasStage.call(this, CanvasLinePoint);
173     }, {
174
175     initialize: function(benchmark, options)
176     {
177         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
178         this.context.lineJoin = options["lineJoin"] || "bevel";
179         this.context.lineCap = options["lineCap"] || "butt";
180     },
181
182     animate: function() {
183         var context = this.context;
184
185         context.clearRect(0, 0, this.size.x, this.size.y);
186         context.beginPath();
187         for (var i = this.offsetIndex, length = this.objects.length; i < length; ++i) {
188             var object = this.objects[i];
189             if (i == this.offsetIndex) {
190                 context.lineWidth = object.width;
191                 context.strokeStyle = object.color;
192                 context.moveTo(object.point.x, object.point.y);
193             } else {
194                 if (object.isSplit) {
195                     context.stroke();
196
197                     context.lineWidth = object.width;
198                     context.strokeStyle = object.color;
199                     context.beginPath();
200                 }
201
202                 context.lineTo(object.point.x, object.point.y);
203
204                 if (Pseudo.random() > 0.999)
205                     object.isSplit = !object.isSplit;
206             }
207         }
208         context.stroke();
209     }
210 });
211
212 // === BENCHMARK ===
213
214 CanvasPathBenchmark = Utilities.createSubclass(Benchmark,
215     function(options)
216     {
217         var stage;
218         switch (options["pathType"]) {
219         case "line":
220             stage = new CanvasLineSegmentStage();
221             break;
222         case "linePath":
223             stage = new CanvasLinePathStage();
224             break;
225         case "arcs":
226             stage = new SimpleCanvasStage(CanvasArc);
227             break;
228         }
229
230         Benchmark.call(this, stage, options);
231     }
232 );
233
234 window.benchmarkClass = CanvasPathBenchmark;
235
236 })();