fieldkit/lib/client/sketch.js

Basic building blocks for computational design projects. Written in CoffeeScript for browser and server environments.

// Generated by CoffeeScript 1.6.3
(function() {
  var Color, Sketch, Vec2;

  Color = require('../color').Color;

  Vec2 = require('../math/vector').Vec2;

  /*
  
    FIELDKIT SKETCH CLASS
  */


  Sketch = (function() {
    var TWO_PI, computeStyle, isFillEnabled, isStrokeEnabled;

    Sketch.prototype.width = -1;

    Sketch.prototype.height = -1;

    Sketch.prototype.canvasId = "sketch";

    Sketch.prototype.domObjectId = "container";

    Sketch.prototype.g = null;

    Sketch.prototype.mouseX = 0;

    Sketch.prototype.mouseY = 0;

    function Sketch(options) {
      var canvas, domObject,
        _this = this;
      domObject = document.getElementById(this.domObjectId);
      if (this.width === -1) {
        this.width = domObject.offsetWidth;
      }
      if (this.height === -1) {
        this.height = domObject.offsetHeight;
      }
      canvas = document.createElement("canvas");
      canvas.id = this.canvasId;
      canvas.width = this.width;
      canvas.height = this.height;
      domObject.appendChild(canvas);
      this.g = canvas.getContext("2d");
      this.setup();
      this.start();
      domObject.onmousemove = function(e) {
        _this.mouseX = e.x;
        return _this.mouseY = e.y;
      };
      domObject.onmousedown = function(e) {
        return _this.mouseDown();
      };
      domObject.onmouseup = function(e) {
        return _this.mouseUp();
      };
    }

    Sketch.prototype.isRunning = false;

    Sketch.prototype.isFinishedCallback = null;

    Sketch.prototype.start = function() {
      var render, requestId,
        _this = this;
      this.isRunning = true;
      requestId = null;
      render = function() {
        _this.draw();
        if (_this.isRunning) {
          return requestId = window.requestAnimationFrame(render);
        } else {
          window.cancelAnimationFrame(requestId);
          if (_this.isFinishedCallback != null) {
            return _this.isFinishedCallback();
          }
        }
      };
      return requestId = window.requestAnimationFrame(render);
    };

    Sketch.prototype.stop = function(callback) {
      this.isRunning = false;
      return this.isFinishedCallback = callback;
    };

    Sketch.prototype.toString = function() {
      return "Sketch";
    };

    /*
      Sketch API
    */


    Sketch.prototype.setup = function() {};

    Sketch.prototype.draw = function() {};

    Sketch.prototype.mouseDown = function() {};

    Sketch.prototype.mouseUp = function() {};

    /*
      2D Drawing API
    */


    isFillEnabled = true;

    isStrokeEnabled = false;

    TWO_PI = Math.PI * 2;

    computeStyle = function(args) {
      var arg, grey;
      switch (args.length) {
        case 1:
          arg = args[0];
          if (typeof arg === "string") {
            return arg;
          } else if (arg instanceof Color) {
            return arg.toCSS();
          } else {
            return "rgba(" + arg + ", " + arg + ", " + arg + ", 1)";
          }
          break;
        case 2:
          grey = args[0];
          return "rgba(" + grey + ", " + grey + ", " + grey + ", " + args[1] + ")";
        case 3:
          return "rgba(" + args[0] + ", " + args[1] + ", " + args[2] + ", 1)";
        case 4:
          return "rgba(" + args[0] + ", " + args[1] + ", " + args[2] + ", " + args[3] + ")";
        default:
          return "#FF0000";
      }
    };

    Sketch.prototype.color = function() {
      return computeStyle(arguments);
    };

    Sketch.prototype.background = function() {
      var style;
      this.g.clearRect(0, 0, this.width, this.height);
      style = this.g.fillStyle;
      this.g.fillStyle = computeStyle(arguments);
      this.g.fillRect(0, 0, this.width, this.height);
      return this.g.fillStyle = style;
    };

    Sketch.prototype.fill = function() {
      isFillEnabled = true;
      return this.g.fillStyle = computeStyle(arguments);
    };

    Sketch.prototype.stroke = function() {
      isStrokeEnabled = true;
      return this.g.strokeStyle = computeStyle(arguments);
    };

    Sketch.prototype.lineWidth = function(width) {
      return this.g.lineWidth = width;
    };

    Sketch.prototype.noFill = function() {
      return isFillEnabled = false;
    };

    Sketch.prototype.noStroke = function() {
      return isStrokeEnabled = false;
    };

    Sketch.prototype.rect = function(x, y, w, h) {
      if (isFillEnabled) {
        this.g.fillRect(x, y, w, h);
      }
      if (isStrokeEnabled) {
        return this.g.strokeRect(x, y, w, h);
      }
    };

    Sketch.prototype.circle = function(x, y, r) {
      this.g.beginPath();
      this.g.arc(x, y, r, 0, TWO_PI, false);
      if (isFillEnabled) {
        this.g.fill();
      }
      if (isStrokeEnabled) {
        this.g.stroke();
      }
      return this.g.closePath();
    };

    Sketch.prototype.line = function(x1, y1, x2, y2) {
      this.g.beginPath();
      if (x1 instanceof Vec2) {
        this.g.moveTo(x1.x, x1.y);
        this.g.lineTo(y1.x, y1.y);
      } else {
        this.g.moveTo(x1, y1);
        this.g.lineTo(x2, y2);
      }
      this.g.stroke();
      return this.g.closePath();
    };

    Sketch.prototype.polygon = function(points) {
      var p, _i, _len, _ref;
      this.g.beginPath();
      this.g.moveTo(points[0].x, points[0].y);
      _ref = points.slice(1);
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        p = _ref[_i];
        this.g.lineTo(p.x, p.y);
      }
      if (isFillEnabled) {
        this.g.fill();
      }
      if (isStrokeEnabled) {
        this.g.stroke();
      }
      return this.g.closePath();
    };

    Sketch.prototype.createImage = function(width, height) {
      var imageData;
      imageData = this.g.createImageData(width, height);
      imageData.setPixel = function(x, y, r, g, b, a) {
        var index;
        if (a == null) {
          a = 255;
        }
        index = (x + y * this.width) * 4;
        this.data[index + 0] = r;
        this.data[index + 1] = g;
        this.data[index + 2] = b;
        return this.data[index + 3] = a;
      };
      return imageData;
    };

    Sketch.prototype.drawImage = function(imageData, x, y) {
      return this.g.putImageData(imageData, x, y);
    };

    return Sketch;

  })();

  module.exports = {
    Sketch: Sketch
  };

}).call(this);