diff options
Diffstat (limited to 'third_party/webkit/PerformanceTests/MotionMark/tests/master/resources/canvas-tests.js')
| -rw-r--r-- | third_party/webkit/PerformanceTests/MotionMark/tests/master/resources/canvas-tests.js | 311 |
1 files changed, 311 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/MotionMark/tests/master/resources/canvas-tests.js b/third_party/webkit/PerformanceTests/MotionMark/tests/master/resources/canvas-tests.js new file mode 100644 index 0000000000..79fc867082 --- /dev/null +++ b/third_party/webkit/PerformanceTests/MotionMark/tests/master/resources/canvas-tests.js @@ -0,0 +1,311 @@ +(function() { + +// === PAINT OBJECTS === + +CanvasLineSegment = Utilities.createClass( + function(stage) + { + var circle = Stage.randomInt(0, 3); + this._color = ["#e01040", "#10c030", "#744CBA", "#e05010"][circle]; + this._lineWidth = Math.pow(Pseudo.random(), 12) * 20 + 3; + this._omega = Pseudo.random() * 3 + 0.2; + var theta = Stage.randomAngle(); + this._cosTheta = Math.cos(theta); + this._sinTheta = Math.sin(theta); + this._startX = stage.circleRadius * this._cosTheta + stage.circleX[circle]; + this._startY = stage.circleRadius * this._sinTheta + stage.circleY[circle]; + this._length = Math.pow(Pseudo.random(), 8) * stage.lineLengthMaximum + stage.lineMinimum; + this._segmentDirection = Pseudo.random() > 0.5 ? -1 : 1; + }, { + + draw: function(context) + { + context.strokeStyle = this._color; + context.lineWidth = this._lineWidth; + + this._length += Math.sin(Stage.dateCounterValue(100) * this._omega); + + context.beginPath(); + context.moveTo(this._startX, this._startY); + context.lineTo(this._startX + this._segmentDirection * this._length * this._cosTheta, + this._startY + this._segmentDirection * this._length * this._sinTheta); + context.stroke(); + } +}); + +CanvasArc = Utilities.createClass( + function(stage) + { + var maxX = 6, maxY = 3; + var distanceX = stage.size.x / maxX; + var distanceY = stage.size.y / (maxY + 1); + var randY = Stage.randomInt(0, maxY); + var randX = Stage.randomInt(0, maxX - 1 * (randY % 2)); + + this._point = new Point(distanceX * (randX + (randY % 2) / 2), distanceY * (randY + .5)); + + this._radius = 20 + Math.pow(Pseudo.random(), 5) * (Math.min(distanceX, distanceY) / 1.8); + this._startAngle = Stage.randomAngle(); + this._endAngle = Stage.randomAngle(); + this._omega = (Pseudo.random() - 0.5) * 0.3; + this._counterclockwise = Stage.randomBool(); + var colors = ["#101010", "#808080", "#c0c0c0"]; + colors.push(["#e01040", "#10c030", "#e05010"][(randX + Math.ceil(randY / 2)) % 3]); + this._color = colors[Math.floor(Pseudo.random() * colors.length)]; + this._lineWidth = 1 + Math.pow(Pseudo.random(), 5) * 30; + this._doStroke = Stage.randomInt(0, 3) != 0; + }, { + + draw: function(context) + { + this._startAngle += this._omega; + this._endAngle += this._omega / 2; + + if (this._doStroke) { + context.strokeStyle = this._color; + context.lineWidth = this._lineWidth; + context.beginPath(); + context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise); + context.stroke(); + } else { + context.fillStyle = this._color; + context.beginPath(); + context.lineTo(this._point.x, this._point.y); + context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise); + context.lineTo(this._point.x, this._point.y); + context.fill(); + } + } +}); + +// CanvasLinePoint contains no draw() method since it is either moveTo or +// lineTo depending on its index. +CanvasLinePoint = Utilities.createClass( + function(stage) + { + var colors = ["#101010", "#808080", "#c0c0c0", "#101010", "#808080", "#c0c0c0", "#e01040"]; + this.color = Stage.randomElementInArray(colors); + this.width = Math.pow(Pseudo.random(), 5) * 20 + 1; + this.isSplit = Pseudo.random() > 0.95; + + var nextPoint; + if (stage.objects.length) + nextPoint = this.randomPoint(stage, stage.objects[stage.objects.length - 1].coordinate); + else + nextPoint = this.randomPoint(stage, this.gridSize.center); + this.point = nextPoint.point; + this.coordinate = nextPoint.coordinate; + }, { + + gridSize: new Point(80, 40), + offsets: [ + new Point(-4, 0), + new Point(2, 0), + new Point(1, -2), + new Point(1, 2), + ], + + randomPoint: function(stage, startCoordinate) + { + var coordinate = startCoordinate; + if (stage.objects.length) { + var offset = Stage.randomElementInArray(this.offsets); + + coordinate = coordinate.add(offset); + if (coordinate.x < 0 || coordinate.x > this.gridSize.width) + coordinate.x -= offset.x * 2; + if (coordinate.y < 0 || coordinate.y > this.gridSize.height) + coordinate.y -= offset.y * 2; + } + + var x = (coordinate.x + .5) * stage.size.x / (this.gridSize.width + 1); + var y = (coordinate.y + .5) * stage.size.y / (this.gridSize.height + 1); + return { + point: new Point(x, y), + coordinate: coordinate + }; + }, + + draw: function(context) + { + context.lineTo(this.point.x, this.point.y); + } +}); + +CanvasQuadraticSegment = Utilities.createSubclass(CanvasLinePoint, + function(stage) + { + CanvasLinePoint.call(this, stage); + // The chosen point is instead the control point. + this._point2 = this.point; + + // Get another random point for the actual end point of the segment. + var nextPoint = this.randomPoint(stage, this.coordinate); + this.point = nextPoint.point; + this.coordinate = nextPoint.coordinate; + }, { + + draw: function(context) + { + context.quadraticCurveTo(this._point2.x, this._point2.y, this.point.x, this.point.y); + } +}); + +CanvasBezierSegment = Utilities.createSubclass(CanvasLinePoint, + function(stage) + { + CanvasLinePoint.call(this, stage); + // The chosen point is instead the first control point. + this._point2 = this.point; + var nextPoint = this.randomPoint(stage, this.coordinate); + this._point3 = nextPoint.point; + + nextPoint = this.randomPoint(stage, nextPoint.coordinate); + this.point = nextPoint.point; + this.coordinate = nextPoint.coordinate; + }, { + + draw: function(context, off) + { + context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this.point.x, this.point.y); + } +}); + +// === STAGES === + +CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage, + function() + { + SimpleCanvasStage.call(this, CanvasLineSegment); + }, { + + initialize: function(benchmark, options) + { + SimpleCanvasStage.prototype.initialize.call(this, benchmark, options); + this.context.lineCap = options["lineCap"] || "butt"; + this.lineMinimum = 20; + this.lineLengthMaximum = 40; + this.circleRadius = this.size.x / 8 - .4 * (this.lineMinimum + this.lineLengthMaximum); + this.circleX = [ + 5.5 / 32 * this.size.x, + 12.5 / 32 * this.size.x, + 19.5 / 32 * this.size.x, + 26.5 / 32 * this.size.x, + ]; + this.circleY = [ + 2.1 / 3 * this.size.y, + 0.9 / 3 * this.size.y, + 2.1 / 3 * this.size.y, + 0.9 / 3 * this.size.y + ]; + this.halfSize = this.size.multiply(.5); + this.twoFifthsSizeX = this.size.x * .4; + }, + + animate: function() + { + var context = this.context; + context.clearRect(0, 0, this.size.x, this.size.y); + + var angle = Stage.dateFractionalValue(3000) * Math.PI * 2; + var dx = this.twoFifthsSizeX * Math.cos(angle); + var dy = this.twoFifthsSizeX * Math.sin(angle); + + var gradient = context.createLinearGradient(this.halfSize.x + dx, this.halfSize.y + dy, this.halfSize.x - dx, this.halfSize.y - dy); + var gradientStep = 0.5 + 0.5 * Math.sin(Stage.dateFractionalValue(5000) * Math.PI * 2); + var colorStopStep = Utilities.lerp(gradientStep, -.1, .1); + var brightnessStep = Math.round(Utilities.lerp(gradientStep, 32, 64)); + var color1Step = "rgba(" + brightnessStep + "," + brightnessStep + "," + (brightnessStep << 1) + ",.4)"; + var color2Step = "rgba(" + (brightnessStep << 1) + "," + (brightnessStep << 1) + "," + brightnessStep + ",.4)"; + gradient.addColorStop(0, color1Step); + gradient.addColorStop(.2 + colorStopStep, color1Step); + gradient.addColorStop(.8 - colorStopStep, color2Step); + gradient.addColorStop(1, color2Step); + + context.lineWidth = 15; + for(var i = 0; i < 4; i++) { + context.strokeStyle = ["#e01040", "#10c030", "#744CBA", "#e05010"][i]; + context.fillStyle = ["#70051d", "#016112", "#2F0C6E", "#702701"][i]; + context.beginPath(); + context.arc(this.circleX[i], this.circleY[i], this.circleRadius, 0, Math.PI*2); + context.stroke(); + context.fill(); + context.fillStyle = gradient; + context.fill(); + } + + for (var i = this.offsetIndex, length = this.objects.length; i < length; ++i) + this.objects[i].draw(context); + } +}); + +CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasStage, + function() + { + SimpleCanvasStage.call(this, [CanvasLinePoint, CanvasLinePoint, CanvasQuadraticSegment, CanvasBezierSegment]); + }, { + + initialize: function(benchmark, options) + { + SimpleCanvasStage.prototype.initialize.call(this, benchmark, options); + this.context.lineJoin = options["lineJoin"] || "bevel"; + this.context.lineCap = options["lineCap"] || "butt"; + }, + + animate: function() { + var context = this.context; + + context.clearRect(0, 0, this.size.x, this.size.y); + context.beginPath(); + for (var i = this.offsetIndex, length = this.objects.length; i < length; ++i) { + var object = this.objects[i]; + if (i == this.offsetIndex) { + context.lineWidth = object.width; + context.strokeStyle = object.color; + context.beginPath(); + context.moveTo(object.point.x, object.point.y); + } else { + object.draw(context); + + if (object.isSplit) { + context.stroke(); + + context.lineWidth = object.width; + context.strokeStyle = object.color; + context.beginPath(); + context.moveTo(object.point.x, object.point.y); + } + + if (Pseudo.random() > 0.995) + object.isSplit = !object.isSplit; + } + } + context.stroke(); + } +}); + +// === BENCHMARK === + +CanvasPathBenchmark = Utilities.createSubclass(Benchmark, + function(options) + { + var stage; + switch (options["pathType"]) { + case "line": + stage = new CanvasLineSegmentStage(); + break; + case "linePath": + stage = new CanvasLinePathStage(); + break; + case "arcs": + stage = new SimpleCanvasStage(CanvasArc); + break; + } + + Benchmark.call(this, stage, options); + } +); + +window.benchmarkClass = CanvasPathBenchmark; + +})();
\ No newline at end of file |