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(Date.now()/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 })();