PerformanceTests/Animometer/tests/simple/resources/simple-canvas-paths.js

   1 (function() {
   2
   3 // === PAINT OBJECTS ===
   4
   5 CanvasLineSegment = Utilities.createClass(
   6     function(stage) {
   7         var radius = Stage.randomInt(10, 100);
   8         var center = Stage.randomPosition(stage.size);
   9         var delta = Point.pointOnCircle(Stage.randomAngle(), radius/2);
  10
  11         this._point1 = center.add(delta);
  12         this._point2 = center.subtract(delta);
  13         this._color = Stage.randomColor();
  14         this._lineWidth = Stage.randomInt(1, 100);
  15     }, {
  16
  17     draw: function(context) {
  18         context.strokeStyle = this._color;
  19         context.lineWidth = this._lineWidth;
  20         context.beginPath();
  21         context.moveTo(this._point1.x, this._point1.y);
  22         context.lineTo(this._point2.x, this._point2.y);
  23         context.stroke();
  24     }
  25 });
  26
  27 CanvasLinePoint = Utilities.createClass(
  28     function(stage, coordinateMaximumFactor) {
  29         var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y));
  30         this._point = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
  31     }, {
  32
  33     draw: function(context) {
  34         context.lineTo(this._point.x, this._point.y);
  35     }
  36 })
  37
  38 CanvasQuadraticSegment = Utilities.createClass(
  39     function(stage) {
  40         var maxSize = Stage.randomInt(20, 200);
  41         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
  42
  43         this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  44         this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  45         this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  46         this._color = Stage.randomColor();
  47         this._lineWidth = Stage.randomInt(1, 50);
  48     }, {
  49
  50     draw: function(context) {
  51         context.strokeStyle = this._color;
  52         context.lineWidth = this._lineWidth;
  53         context.beginPath();
  54         context.moveTo(this._point1.x, this._point1.y);
  55         context.quadraticCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y);
  56         context.stroke();
  57     }
  58 });
  59
  60 CanvasQuadraticPoint = Utilities.createClass(
  61     function(stage, coordinateMaximumFactor) {
  62         var pointMaximum = Stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y)));
  63         this._point1 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
  64         this._point2 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
  65     }, {
  66
  67     draw: function(context) {
  68         context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
  69     }
  70 });
  71
  72 CanvasBezierSegment = Utilities.createClass(
  73     function(stage) {
  74         var maxSize = Stage.randomInt(20, 200);
  75         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
  76
  77         this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  78         this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  79         this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  80         this._point4 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  81         this._color = Stage.randomColor();
  82         this._lineWidth = Stage.randomInt(1, 50);
  83     }, {
  84
  85     draw: function(context) {
  86         context.strokeStyle = this._color;
  87         context.lineWidth = this._lineWidth;
  88         context.beginPath();
  89         context.moveTo(this._point1.x, this._point1.y);
  90         context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._point4.x, this._point4.y);
  91         context.stroke();
  92     }
  93 });
  94
  95 CanvasBezierPoint = Utilities.createClass(
  96     function(stage, coordinateMaximumFactor) {
  97         var pointMaximum = Stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximumFactor * stage.size.x), Math.min(stage.size.y, coordinateMaximumFactor * stage.size.y)));
  98         this._point1 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
  99         this._point2 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
 100         this._point3 = Stage.randomPosition(pointMaximum).add(new Point((stage.size.x - pointMaximum.x) / 2, (stage.size.y - pointMaximum.y) / 2));
 101     }, {
 102
 103     draw: function(context) {
 104         context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
 105     }
 106 });
 107
 108 CanvasArcToSegment = Utilities.createClass(
 109     function(stage) {
 110         var maxSize = Stage.randomInt(20, 200);
 111         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
 112
 113         this._point1 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
 114         this._point2 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
 115         this._point3 = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
 116         this._radius = Stage.randomInt(20, 200);
 117         this._color = Stage.randomColor();
 118         this._lineWidth = Stage.randomInt(1, 50);
 119     }, {
 120
 121     draw: function(context) {
 122         context.strokeStyle = this._color;
 123         context.lineWidth = this._lineWidth;
 124         context.beginPath();
 125         context.moveTo(this._point1.x, this._point1.y);
 126         context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
 127         context.stroke();
 128     }
 129 });
 130
 131 CanvasArcToSegmentFill = Utilities.createClass(
 132     function(stage) {
 133         CanvasArcToSegment.call(this, stage);
 134     }, {
 135
 136     draw: function(context) {
 137         context.fillStyle = this._color;
 138         context.beginPath();
 139         context.moveTo(this._point1.x, this._point1.y);
 140         context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
 141         context.fill();
 142     }
 143 });
 144
 145 CanvasArcSegment = Utilities.createClass(
 146     function(stage) {
 147         var maxSize = Stage.randomInt(20, 200);
 148         var toCenter = Stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
 149
 150         this._point = Stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
 151         this._radius = Stage.randomInt(20, 200);
 152         this._startAngle = Stage.randomAngle();
 153         this._endAngle = Stage.randomAngle();
 154         this._counterclockwise = Stage.randomBool();
 155         this._color = Stage.randomColor();
 156         this._lineWidth = Stage.randomInt(1, 50);
 157     }, {
 158
 159     draw: function(context) {
 160         context.strokeStyle = this._color;
 161         context.lineWidth = this._lineWidth;
 162         context.beginPath();
 163         context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
 164         context.stroke();
 165     }
 166 });
 167
 168 CanvasArcSegmentFill = Utilities.createClass(
 169     function(stage) {
 170         CanvasArcSegment.call(this, stage);
 171     }, {
 172
 173     draw: function(context) {
 174         context.fillStyle = this._color;
 175         context.beginPath();
 176         context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
 177         context.fill();
 178     }
 179 });
 180
 181 CanvasRect = Utilities.createClass(
 182     function(stage) {
 183         this._width = Stage.randomInt(20, 200);
 184         this._height = Stage.randomInt(20, 200);
 185         this._point = Stage.randomPosition(stage.size).subtract(new Point(this._width/2, this._height/2));
 186         this._color = Stage.randomColor();
 187         this._lineWidth = Stage.randomInt(1, 20);
 188     }, {
 189
 190     draw: function(context) {
 191         context.strokeStyle = this._color;
 192         context.lineWidth = this._lineWidth;
 193         context.beginPath();
 194         context.rect(this._point.x, this._point.y, this._width, this._height);
 195         context.stroke();
 196     }
 197 });
 198
 199 CanvasRectFill = Utilities.createClass(
 200     function(stage) {
 201         CanvasRect.call(this, stage);
 202     }, {
 203
 204     draw: function(context) {
 205         context.fillStyle = this._color;
 206         context.beginPath();
 207         context.rect(this._point.x, this._point.y, this._width, this._height);
 208         context.fill();
 209     }
 210 });
 211
 212 // === STAGES ===
 213
 214 SimpleCanvasPathStrokeStage = Utilities.createSubclass(SimpleCanvasStage,
 215     function(canvasObject) {
 216         SimpleCanvasStage.call(this, canvasObject);
 217     }, {
 218
 219     animate: function()
 220     {
 221         var context = this.context;
 222         context.clearRect(0, 0, this.size.x, this.size.y);
 223         context.lineWidth = Stage.randomInt(1, 20);
 224         context.strokeStyle = Stage.rotatingColor();
 225         context.beginPath();
 226         context.moveTo(this.size.x / 2, this.size.y / 2);
 227         this.objects.forEach(function(object) {
 228             object.draw(context);
 229         });
 230         context.stroke();
 231     }
 232 });
 233
 234 SimpleCanvasPathFillStage = Utilities.createSubclass(SimpleCanvasStage,
 235     function(canvasObject) {
 236         SimpleCanvasStage.call(this, canvasObject);
 237     }, {
 238
 239     animate: function()
 240     {
 241         var context = this.context;
 242         context.clearRect(0, 0, this.size.x, this.size.y);
 243         context.fillStyle = Stage.rotatingColor();
 244         context.beginPath();
 245         context.moveTo(this.size.x / 2, this.size.y / 2);
 246         this.objects.forEach(function(object) {
 247             object.draw(context);
 248         });
 249         context.fill();
 250     }
 251 });
 252
 253 CanvasLineSegmentStage = Utilities.createSubclass(SimpleCanvasStage,
 254     function()
 255     {
 256         SimpleCanvasStage.call(this, CanvasLineSegment);
 257     }, {
 258
 259     initialize: function(benchmark, options)
 260     {
 261         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
 262         this.context.lineCap = options["lineCap"] || "butt";
 263     }
 264 });
 265
 266 CanvasLinePathStage = Utilities.createSubclass(SimpleCanvasPathStrokeStage,
 267     function()
 268     {
 269         SimpleCanvasPathStrokeStage.call(this, CanvasLinePoint);
 270     }, {
 271
 272     initialize: function(benchmark, options)
 273     {
 274         SimpleCanvasPathStrokeStage.prototype.initialize.call(this, benchmark, options);
 275         this.context.lineJoin = options["lineJoin"] || "bevel";
 276     }
 277 });
 278
 279 CanvasLineDashStage = Utilities.createSubclass(SimpleCanvasStage,
 280     function()
 281     {
 282         SimpleCanvasStage.call(this, CanvasLinePoint);
 283         this._step = 0;
 284     }, {
 285
 286     initialize: function(benchmark, options)
 287     {
 288         SimpleCanvasStage.prototype.initialize.call(this, benchmark, options);
 289         this.context.setLineDash([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 290         this.context.lineWidth = 1;
 291         this.context.strokeStyle = "#000";
 292     },
 293
 294     animate: function()
 295     {
 296         var context = this.context;
 297         context.clearRect(0, 0, this.size.x, this.size.y);
 298         context.lineDashOffset = this._step++;
 299         context.beginPath();
 300         context.moveTo(this.size.x / 2, this.size.y / 2);
 301         this.objects.forEach(function(object) {
 302             object.draw(context);
 303         });
 304         context.stroke();
 305     }
 306 });
 307
 308 // === BENCHMARK ===
 309
 310 CanvasPathBenchmark = Utilities.createSubclass(Benchmark,
 311     function(options)
 312     {
 313         var stage;
 314         switch (options["pathType"]) {
 315         case "line":
 316             stage = new CanvasLineSegmentStage();
 317             break;
 318         case "linePath": {
 319             if ("lineJoin" in options)
 320                 stage = new CanvasLinePathStage();
 321             if ("lineDash" in options)
 322                 stage = new CanvasLineDashStage();
 323             break;
 324         }
 325         case "quadratic":
 326             stage = new SimpleCanvasStage(CanvasQuadraticSegment);
 327             break;
 328         case "quadraticPath":
 329             stage = new SimpleCanvasPathStrokeStage(CanvasQuadraticPoint);
 330             break;
 331         case "bezier":
 332             stage = new SimpleCanvasStage(CanvasBezierSegment);
 333             break;
 334         case "bezierPath":
 335             stage = new SimpleCanvasPathStrokeStage(CanvasBezierPoint);
 336             break;
 337         case "arcTo":
 338             stage = new SimpleCanvasStage(CanvasArcToSegment);
 339             break;
 340         case "arc":
 341             stage = new SimpleCanvasStage(CanvasArcSegment);
 342             break;
 343         case "rect":
 344             stage = new SimpleCanvasStage(CanvasRect);
 345             break;
 346         case "lineFill":
 347             stage = new SimpleCanvasPathFillStage(CanvasLinePoint);
 348             break;
 349         case "quadraticFill":
 350             stage = new SimpleCanvasPathFillStage(CanvasQuadraticPoint);
 351             break;
 352         case "bezierFill":
 353             stage = new SimpleCanvasPathFillStage(CanvasBezierPoint);
 354             break;
 355         case "arcToFill":
 356             stage = new SimpleCanvasStage(CanvasArcToSegmentFill);
 357             break;
 358         case "arcFill":
 359             stage = new SimpleCanvasStage(CanvasArcSegmentFill);
 360             break;
 361         case "rectFill":
 362             stage = new SimpleCanvasStage(CanvasRectFill);
 363             break;
 364         }
 365
 366         Benchmark.call(this, stage, options);
 367     }
 368 );
 369
 370 window.benchmarkClass = CanvasPathBenchmark;
 371
 372 })();