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

   1 // === PAINT OBJECTS ===
   2
   3 function CanvasLineSegment(stage) {
   4     var radius = stage.randomInt(10, 100);
   5     var center = stage.randomPosition(stage.size);
   6     var delta = Point.pointOnCircle(stage.randomAngle(), radius/2);
   7
   8     this._point1 = center.add(delta);
   9     this._point2 = center.subtract(delta);
  10     this._color = stage.randomColor();
  11     this._lineWidth = stage.randomInt(1, 100);
  12 }
  13 CanvasLineSegment.prototype.draw = function(context) {
  14     context.strokeStyle = this._color;
  15     context.lineWidth = this._lineWidth;
  16     context.beginPath();
  17     context.moveTo(this._point1.x, this._point1.y);
  18     context.lineTo(this._point2.x, this._point2.y);
  19     context.stroke();
  20 };
  21
  22 function CanvasLinePoint(stage, coordinateMaximum) {
  23     this._point = stage.randomPosition(new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum)));
  24 }
  25 CanvasLinePoint.prototype.draw = function(context) {
  26     context.lineTo(this._point.x, this._point.y);
  27 };
  28
  29 function CanvasQuadraticSegment(stage) {
  30     var maxSize = stage.randomInt(20, 200);
  31     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
  32
  33     this._point1 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  34     this._point2 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  35     this._point3 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  36     this._color = stage.randomColor();
  37     this._lineWidth = stage.randomInt(1, 50);
  38 };
  39 CanvasQuadraticSegment.prototype.draw = function(context) {
  40     context.strokeStyle = this._color;
  41     context.lineWidth = this._lineWidth;
  42     context.beginPath();
  43     context.moveTo(this._point1.x, this._point1.y);
  44     context.quadraticCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y);
  45     context.stroke();
  46 };
  47
  48 function CanvasQuadraticPoint(stage, coordinateMaximum) {
  49     var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
  50     this._point1 = stage.randomPosition(pointMaximum);
  51     this._point2 = stage.randomPosition(pointMaximum);
  52 };
  53 CanvasQuadraticPoint.prototype.draw = function(context) {
  54     context.quadraticCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y);
  55 };
  56
  57 function CanvasBezierSegment(stage) {
  58     var maxSize = stage.randomInt(20, 200);
  59     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
  60
  61     this._point1 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  62     this._point2 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  63     this._point3 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  64     this._point4 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  65     this._color = stage.randomColor();
  66     this._lineWidth = stage.randomInt(1, 50);
  67 };
  68 CanvasBezierSegment.prototype.draw = function(context) {
  69     context.strokeStyle = this._color;
  70     context.lineWidth = this._lineWidth;
  71     context.beginPath();
  72     context.moveTo(this._point1.x, this._point1.y);
  73     context.bezierCurveTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._point4.x, this._point4.y);
  74     context.stroke();
  75 };
  76
  77 function CanvasBezierPoint(stage, coordinateMaximum) {
  78     var pointMaximum = new Point(Math.min(stage.size.x, coordinateMaximum), Math.min(stage.size.y, coordinateMaximum));
  79     this._point1 = stage.randomPosition(pointMaximum);
  80     this._point2 = stage.randomPosition(pointMaximum);
  81     this._point3 = stage.randomPosition(pointMaximum);
  82 };
  83 CanvasBezierPoint.prototype.draw = function(context) {
  84     context.bezierCurveTo(this._point1.x, this._point1.y, this._point2.x, this._point2.y, this._point3.x, this._point3.y);
  85 };
  86
  87 function CanvasArcToSegment(stage) {
  88     var maxSize = stage.randomInt(20, 200);
  89     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
  90
  91     this._point1 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  92     this._point2 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  93     this._point3 = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
  94     this._radius = stage.randomInt(20, 200);
  95     this._color = stage.randomColor();
  96     this._lineWidth = stage.randomInt(1, 50);
  97 };
  98 CanvasArcToSegment.prototype.draw = function(context) {
  99     context.strokeStyle = this._color;
 100     context.lineWidth = this._lineWidth;
 101     context.beginPath();
 102     context.moveTo(this._point1.x, this._point1.y);
 103     context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
 104     context.stroke();
 105 };
 106
 107 function CanvasArcToSegmentFill(stage) {
 108     CanvasArcToSegment.call(this, stage);
 109 };
 110 CanvasArcToSegmentFill.prototype.draw = function(context) {
 111     context.fillStyle = this._color;
 112     context.beginPath();
 113     context.moveTo(this._point1.x, this._point1.y);
 114     context.arcTo(this._point2.x, this._point2.y, this._point3.x, this._point3.y, this._radius);
 115     context.fill();
 116 };
 117
 118 function CanvasArcSegment(stage) {
 119     var maxSize = stage.randomInt(20, 200);
 120     var toCenter = stage.randomPosition(stage.size).subtract(new Point(maxSize/2, maxSize/2));
 121
 122     this._point = stage.randomPosition(new Point(maxSize, maxSize)).add(toCenter);
 123     this._radius = stage.randomInt(20, 200);
 124     this._startAngle = stage.randomAngle();
 125     this._endAngle = stage.randomAngle();
 126     this._counterclockwise = stage.randomBool();
 127     this._color = stage.randomColor();
 128     this._lineWidth = stage.randomInt(1, 50);
 129 };
 130 CanvasArcSegment.prototype.draw = function(context) {
 131     context.strokeStyle = this._color;
 132     context.lineWidth = this._lineWidth;
 133     context.beginPath();
 134     context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
 135     context.stroke();
 136 };
 137
 138 function CanvasArcSegmentFill(stage) {
 139     CanvasArcSegment.call(this, stage);
 140 };
 141 CanvasArcSegmentFill.prototype.draw = function(context) {
 142     context.fillStyle = this._color;
 143     context.beginPath();
 144     context.arc(this._point.x, this._point.y, this._radius, this._startAngle, this._endAngle, this._counterclockwise);
 145     context.fill();
 146 };
 147
 148 function CanvasRect(stage) {
 149     this._width = stage.randomInt(20, 200);
 150     this._height = stage.randomInt(20, 200);
 151     this._point = stage.randomPosition(stage.size).subtract(new Point(this._width/2, this._height/2));
 152     this._color = stage.randomColor();
 153     this._lineWidth = stage.randomInt(1, 20);
 154 }
 155 CanvasRect.prototype.draw = function(context) {
 156     context.strokeStyle = this._color;
 157     context.lineWidth = this._lineWidth;
 158     context.beginPath();
 159     context.rect(this._point.x, this._point.y, this._width, this._height);
 160     context.stroke();
 161 };
 162
 163 function CanvasRectFill(stage) {
 164     CanvasRect.call(this, stage);
 165 }
 166 CanvasRectFill.prototype.draw = function(context) {
 167     context.fillStyle = this._color;
 168     context.beginPath();
 169     context.rect(this._point.x, this._point.y, this._width, this._height);
 170     context.fill();
 171 };
 172
 173 // === STAGES ===
 174
 175 function SimpleCanvasPathStrokeStage(element, options, canvasObject) {
 176     SimpleCanvasStage.call(this, element, options, canvasObject);
 177 }
 178 SimpleCanvasPathStrokeStage.prototype = Object.create(SimpleCanvasStage.prototype);
 179 SimpleCanvasPathStrokeStage.prototype.constructor = SimpleCanvasPathStrokeStage;
 180 SimpleCanvasPathStrokeStage.prototype.animate = function() {
 181     var context = this.context;
 182     context.lineWidth = this.randomInt(1, 20);
 183     context.strokeStyle = this.randomColor();
 184     context.beginPath();
 185     context.moveTo(0,0);
 186     this._objects.forEach(function(object) {
 187         object.draw(context);
 188     });
 189     context.stroke();
 190 }
 191
 192 function SimpleCanvasPathFillStage(element, options, canvasObject) {
 193     SimpleCanvasStage.call(this, element, options, canvasObject);
 194 }
 195 SimpleCanvasPathFillStage.prototype = Object.create(SimpleCanvasStage.prototype);
 196 SimpleCanvasPathFillStage.prototype.constructor = SimpleCanvasPathFillStage;
 197 SimpleCanvasPathFillStage.prototype.animate = function() {
 198     var context = this.context;
 199     context.fillStyle = this.randomColor();
 200     context.beginPath();
 201     context.moveTo(0,0);
 202     this._objects.forEach(function(object) {
 203         object.draw(context);
 204     });
 205     context.fill();
 206 }
 207
 208 function CanvasLineSegmentStage(element, options)
 209 {
 210     SimpleCanvasStage.call(this, element, options, CanvasLineSegment);
 211     this.context.lineCap = options["lineCap"] || "butt";
 212 }
 213 CanvasLineSegmentStage.prototype = Object.create(SimpleCanvasStage.prototype);
 214 CanvasLineSegmentStage.prototype.constructor = CanvasLineSegmentStage;
 215
 216 function CanvasLinePathStage(element, options)
 217 {
 218     SimpleCanvasPathStrokeStage.call(this, element, options, CanvasLinePoint);
 219     this.context.lineJoin = options["lineJoin"] || "bevel";
 220 }
 221 CanvasLinePathStage.prototype = Object.create(SimpleCanvasPathStrokeStage.prototype);
 222 CanvasLinePathStage.prototype.constructor = CanvasLinePathStage;
 223
 224 // === BENCHMARK ===
 225
 226 function CanvasPathBenchmark(suite, test, options, recordTable, progressBar) {
 227     SimpleCanvasBenchmark.call(this, suite, test, options, recordTable, progressBar);
 228 }
 229 CanvasPathBenchmark.prototype = Object.create(SimpleCanvasBenchmark.prototype);
 230 CanvasPathBenchmark.prototype.constructor = CanvasPathBenchmark;
 231 CanvasPathBenchmark.prototype.createStage = function(element)
 232 {
 233     switch (this._options["pathType"]) {
 234     case "line":
 235         return new CanvasLineSegmentStage(element, this._options);
 236     case "linePath": {
 237         if ("lineJoin" in this._options)
 238             return new CanvasLinePathStage(element, this._options);
 239         break;
 240     }
 241     case "quadratic":
 242         return new SimpleCanvasStage(element, this._options, CanvasQuadraticSegment);
 243     case "quadraticPath":
 244         return new SimpleCanvasPathStrokeStage(element, this._options, CanvasQuadraticPoint);
 245     case "bezier":
 246         return new SimpleCanvasStage(element, this._options, CanvasBezierSegment);
 247     case "bezierPath":
 248         return new SimpleCanvasPathStrokeStage(element, this._options, CanvasBezierPoint);
 249     case "arcTo":
 250         return new SimpleCanvasStage(element, this._options, CanvasArcToSegment);
 251     case "arc":
 252         return new SimpleCanvasStage(element, this._options, CanvasArcSegment);
 253     case "rect":
 254         return new SimpleCanvasStage(element, this._options, CanvasRect);
 255     case "lineFill":
 256         return new SimpleCanvasPathFillStage(element, this._options, CanvasLinePoint);
 257     case "quadraticFill":
 258         return new SimpleCanvasPathFillStage(element, this._options, CanvasQuadraticPoint);
 259     case "bezierFill":
 260         return new SimpleCanvasPathFillStage(element, this._options, CanvasBezierPoint);
 261     case "arcToFill":
 262         return new SimpleCanvasStage(element, this._options, CanvasArcToSegmentFill);
 263     case "arcFill":
 264         return new SimpleCanvasStage(element, this._options, CanvasArcSegmentFill);
 265     case "rectFill":
 266         return new SimpleCanvasStage(element, this._options, CanvasRectFill);
 267     }
 268 }
 269
 270 window.benchmarkClient.create = function(suite, test, options, recordTable, progressBar) {
 271     return new CanvasPathBenchmark(suite, test, options, recordTable, progressBar);
 272 }