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