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 barCount = 50;

function drawBars() {
  console.log('drawing');
  barHeight = height / barCount;
  offset = Math.floor(Math.random() * 360)
  for (var i = 0; i <= barCount; i++) {
    processing.fill((i * 15 + offset) % 360, 100, 100);
    processing.rect(0 , Math.floor(i * barHeight), width, Math.floor(i * barHeight + barHeight));
  }
}

processing.setup = function() {
  processing.noStroke();
  processing.colorMode(processing.HSB, 360, 100, 100);
  drawBars();
};

processing.draw = function() {
};

processing.keyPressed = function() {
  console.log(processing.key);
  drawBars();
};

processing.mousePressed = function() {

};

processing.mouseReleased = function() {

};

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