edfbc6fccda06cc2565f4896a7118df4502cf73b
[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(Math.random(), 12) * 20 + 3;
11         this._omega = Math.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 + (0.5 + circle) / 3 * stage.size.x;
16         this._startY = stage.circleRadius * this._sinTheta + stage.size.y / 2;
17         this._length = Math.pow(Math.random(), 8) * 40 + 20;
18         this._segmentDirection = Math.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(Math.random(), 5) * (Math.min(distanceX, distanceY) / 1.8);
48         this._startAngle = Stage.randomAngle();
49         this._endAngle = Stage.randomAngle();
50         this._omega = (Math.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(Math.random() * colors.length)];
55         this._lineWidth = 1 + Math.pow(Math.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(Math.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(Math.random() * colors.length)];
115
116         this.width = Math.pow(Math.random(), 5) * 20 + 1;
117         this.isSplit = Math.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.circleRadius = this.size.x / 3 / 2 - 20;
135     },
136
137     animate: function()
138     {
139         var context = this.context;
140         var stage = this;
141
142         context.clearRect(0, 0, this.size.x, this.size.y);
143         context.lineWidth = 30;
144         for(var i = 0; i < 3; i++) {
145             context.strokeStyle = ["#e01040", "#10c030", "#e05010"][i];
146             context.fillStyle = ["#70051d", "#016112", "#702701"][i];
147             context.beginPath();
148                 context.arc((0.5 + i) / 3 * stage.size.x, stage.size.y/2, stage.circleRadius, 0, Math.PI*2);
149             context.stroke();
150             context.fill();
151         }
152
153         this.objects.forEach(function(object) {
154             object.draw(context);
155         });
156     }
157 });
158
159 CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasStage,
160     function()
161     {
162         SimpleCanvasStage.call(this, CanvasLinePoint);
163     }, {
164
165     initialize: function(benchmark, options)
166     {
167         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
168         this.context.lineJoin = options["lineJoin"] || "bevel";
169         this.context.lineCap = options["lineCap"] || "butt";
170     },
171
172     animate: function() {
173         var context = this.context;
174         var stage = this;
175
176         context.clearRect(0, 0, this.size.x, this.size.y);
177         context.beginPath();
178         this.objects.forEach(function(object, index) {
179             if (index == 0) {
180                 context.lineWidth = object.width;
181                 context.strokeStyle = object.color;
182                 context.moveTo(object.point.x, object.point.y);
183             } else {
184                 if (object.isSplit) {
185                     context.stroke();
186
187                     context.lineWidth = object.width;
188                     context.strokeStyle = object.color;
189                     context.beginPath();
190                 }
191
192                 context.lineTo(object.point.x, object.point.y);
193
194                 if (Math.random() > 0.999)
195                     object.isSplit = !object.isSplit;
196             }
197         });
198         context.stroke();
199     }
200 });
201
202 // === BENCHMARK ===
203
204 CanvasPathBenchmark = Utilities.createSubclass(Benchmark,
205     function(options)
206     {
207         var stage;
208         switch (options["pathType"]) {
209         case "line":
210             stage = new CanvasLineSegmentStage();
211             break;
212         case "linePath":
213             stage = new CanvasLinePathStage();
214             break;
215         case "arcs":
216             stage = new SimpleCanvasStage(CanvasArc);
217             break;
218         }
219
220         Benchmark.call(this, stage, options);
221     }
222 );
223
224 window.benchmarkClass = CanvasPathBenchmark;
225
226 })();