Test page for rendering throughput for canvas arcs

tools/perf/page_sets/tough_canvas_cases/rendering_throughput/canvas_arcs.js

+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.

[Justin Novosad, 2016/05/20 18:06:09]

Add a reference to say this code is based on or heavily inspired from http://...

[sebastienlc, 2016/05/20 18:43:52]

Done.

+
+function CanvasArc() {
+  var x;
+  var y;
+  var radius;
+  var width;
+  var start_angle;
+  var end_angle;
+  var arc_speed;
+  var counterclockwise;
+  var color;
+  var is_stroke;
+
+  this.init = function(arc_speed, max_width, max_height) {
+    // initialize parameters randomly
+
+
+    num_positions_x = 7;
+    position_incr_x = Math.floor(max_width / num_positions_x);
+    this.x = Math.floor(Math.random() * num_positions_x) * position_incr_x;
+
+    num_positions_y = 7;
+    position_incr_y = Math.floor(max_height / num_positions_y);
+    this.y = Math.floor(Math.random() * num_positions_y) * position_incr_y;
+
+    var max_radius = max_height / 10;
+    // radius is in [0.5*max_radius, max_radius)
+    this.radius = ((Math.random() + 1) / 2) * max_radius;
+
+    this.width = 1 + Math.pow(Math.random(), 4) * 30;
+
+    var colors = ["#101010", "#808080", "#c0c0c0",
+                  "#e01040", "#10c030", "#e05010"];
+    this.color = colors[Math.floor(Math.random() * colors.length)];
+
+    this.is_stroke = (Math.floor(Math.random() * 3) == 0);
+
+    this.counterclockwise = (Math.floor(Math.random() * 2) == 0);
+
+    this.arc_speed = (Math.random() - 0.5) * Math.PI / 10;
+    this.start_angle = Math.random() * 2 * Math.PI;
+    this.end_angle = Math.random() * 2 * Math.PI;
+  }
+
+  this.draw = function(context) {
+    this.start_angle += this.arc_speed;
+    this.end_angle += this.arc_speed / 2;
+
+    // draw the canvas arc on the given context
+    if (this.is_stroke) {
+      context.strokeStyle = this.color;
+      context.lineWidth = this.width;
+      context.beginPath();
+      context.arc(this.x, this.y, this.radius,
+                  this.start_angle, this.end_angle, this.counterclockwise);
+      context.stroke();
+
+    } else {
+      context.fillStyle = this.color;
+      context.beginPath();
+      context.lineTo(this.x, this,y);
+      context.arc(this.x, this.y, this.radius, this.start_angle,
+                  this.end_angle, this.couterclockwise);
+      context.lineTo(this.x, this.y);
+      context.fill();
+
+    }
+  }
+}
+
+var arcs = (function() {
+  var initialized_arcs;
+  var width;
+  var height;
+
+  var arcs = {};
+
+  arcs.init = function(number_arcs, arc_speed, canvas_width, canvas_height) {
+    // initialize arcs and store variables
+    initialized_arcs = [];
+    for(var i = 0; i < number_arcs; i++) {
+      var new_arc = new CanvasArc();
+      new_arc.init(arc_speed, canvas_width, canvas_height);
+      initialized_arcs.push(new_arc)
+    }
+
+  };
+
+  arcs.draw = function(context) {
+    // draw all initialized_arcs on the context
+    for(var i = 0; i < initialized_arcs.length; i++) {
+      initialized_arcs[i].draw(context);
+    }
+  };
+
+  return arcs;
+})();
+
+