var main_canvas;

var canvasWidth = 960;
var canvasHeight = 500;

var canvasWidth = 960;
var canvasHeight = 500;

function setup () {
  // create the drawing canvas, save the canvas element
  main_canvas = createCanvas(canvasWidth, canvasHeight);

  // rotation in degrees (more slider friendly)
  angleMode(DEGREES);

  curRandomSeed = int(focusedRandom(0, 1000));

  // position each element on the page
  main_canvas.parent('canvasContainer');
}

function changeRandomSeed() {
  curRandomSeed = curRandomSeed + 1;
}

var colorFront = [151, 102, 52];
var colorBack = [225, 206, 187];

function drawFace(x, y, w, h, tilt_value, eye_value, mouth_value) {
  resetMatrix();
  translate(x, y);
  rotate(tilt_value);

  var extent = 0;
  if(h < w) {
    extent = h / 2;
  }
  else {
    extent = w / 2;
  }
  var scale = extent / 220.0;

  fill(colorFront);
  ellipse(0, 0, 300 * scale, 400 * scale);

  // eyes
  if (eye_value === 1 || eye_value == 3) {
    fill(colorBack);
    ellipse( 0, -80 * scale, 50 * scale, 30 * scale);
    fill(colorFront);
    ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
  }

  if (eye_value >= 2) {
    fill(colorBack);
    ellipse(-50 * scale, -80 * scale, 50 * scale, 30 * scale);
    ellipse( 50 * scale, -80 * scale, 50 * scale, 30 * scale);

    fill(colorFront);
    ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
    ellipse( 40 * scale, -80 * scale, 20 * scale, 20 * scale);
  }

  // mouth
  fill(colorBack);
  ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
}

function getRandomNumberOfEyes() {
  random_result = focusedRandom(0, 100);
  if(random_result < 8) {
    return 1;
  }
  else if(random_result > 96) {
    return 3;
  }
  else {
    return 2;
  }
}

var lastSwapTime = 0;
var millisPerSwap = 2000;

function draw () {
  var millisNow = millis();
  if(millisNow > lastSwapTime + millisPerSwap) {
    changeRandomSeed();
    lastSwapTime = millisNow;
  }

  background(colorBack);
  fill(colorFront);
  stroke(95, 52, 8)

  resetFocusedRandom(curRandomSeed);

  var w = canvasWidth / 5;
  var h = canvasHeight / 3;
  for(var i=0; i<3; i++) {
    for(var j=0; j<5; j++) {
      var y = h/2 + h*i;
      var x = w/2 + w*j;
      tilt_value = focusedRandom(-70, 90, 12);
      eye_value = getRandomNumberOfEyes();
      mouth_value = focusedRandom(0, 50, 4, 1);
      drawFace(x, y, w, h, tilt_value, eye_value, mouth_value);
    }
  }
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}