var width = window.innerWidth;
var height = $('body').height() - 3;
var halfWidth = width / 2;
var halfHeight = height / 2;

function drawerSketch(processing) {
  // set size
  processing.size(width, height);

  var multiplier = 1;
var theta = processing.radians(5);
var dist = 5;

processing.background(255, 255, 255);
processing.stroke(255, 255, 255, 0);
processing.colorMode(processing.HSB, 360, 100, 100);

processing.setup = function() {

};

processing.draw = function() {
  // debugger;
  console.log(processing.frameCount % 360, dist, multiplier);
  processing.fill(processing.frameCount % 360, 100, 100);
  processing.pushMatrix();
  processing.rotate(theta);
  processing.translate(dist, dist);
  processing.rect(0,0,50,50);
  processing.popMatrix();
  dist = (Math.abs(dist) + (0.1 * multiplier));
  theta = (Math.abs(theta) + processing.radians(4) * multiplier);

};

processing.keyPressed = function() {
  multiplier = -multiplier;
};

processing.mousePressed = function() {

};

processing.mouseReleased = function() {
  processing.colorMode(processing.RGB, 255);
  processing.background(255);
  processing.colorMode(processing.HSB, 360, 100, 100);
};

}
// attach the sketch function to the canvas
var processingInstance = new Processing(document.getElementById('sketch'), drawerSketch);