var canvasWidth = 960;
var canvasHeight = 500;
var sliders = [];
var faceSelector;
var table;
var table1;
var table1_index = 0;

var mapping1 = [
  {"index": 1, "range": [0.3, 0.8]},
  {"index": 2, "range": [0.1, 0.5]},
  0.7,
  {"index": 3, "range": [0.2, 1.0]},
  1.0,
  0.3,
  {"index": 4, "range": [0.2, 0.8]},
  {"index": 5, "range": [0.5, 5.0]},
  0.5,
  0.5,
  0.5,
  0.5,
  0.6,
  {"index": 6, "range": [0.2, 0.8]},
  0.5,
  0.5,
  0.5,
  0.5
];
var min1_all = [0,  70, 29,  6, 18,  48,  198];
var max1_all = [0, 320, 62, 15, 37, 134, 1350];
var min1_40  = [0,  70, 40,  6, 21,  48,  260];
var max1_40  = [0, 210, 55, 15, 37,  95,  675];

function preload() {
  table = loadTable("table1.csv", "csv", "header");
}

function setup () {
  table1 = table.getArray();
  // print(table.getRowCount() + " total rows in table");
  // print(table.getColumnCount() + " total columns in table");

  // print(table.getColumn("ID"));

  // //cycle through the table
  // for (var r = 0; r < table.getRowCount(); r++) {
  //   for (var c = 0; c < table.getColumnCount(); c++) {
  //     print(table.getString(r, c));
  //   }
  // }

  // create the drawing canvas, save the canvas element
  var main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  // create sliders
  for(i=1; i<=18; i++) {
    var slider = createSlider(0, 100, 50);
    var parentStr = 'slider' + i + 'Container';
    slider.parent(parentStr);
    sliders.push(slider);
  }

  randButton = createButton('randomize');
  randButton.mousePressed(changeSliders);
  randButton.parent('selector1Container');

  // rotation in degrees
  angleMode(DEGREES);
}

function changeSliders() {
  print("Using entry " + table1_index + " which is ");
  print(table1[table1_index]);
  var target_array = [];
  for(var i=0; i<18; i++) {
    var entry = mapping1[i];
    var target = 0;
    if(entry !== null && typeof entry === 'object') {
      var map_index = entry['index'];
      var cur_value = Number(table1[table1_index][map_index]);
      var low = min1_all[map_index];
      var high = max1_all[map_index];
      var range_low = entry['range'][0];
      var range_high = entry['range'][1];
      var target = map(cur_value, low, high, range_low, range_high);
      print("Mapped ", i, "=", cur_value, "[", low, ",", high, "] to ", target);
    }
    else {
      target = entry;
    }
    target_array.push(target);
    var slider_value = Math.floor(map(target, 0, 1, 0, 100));
    sliders[i].value(slider_value);
  }
  print("Target: ");
  print(target_array);

  table1_index = (table1_index + 1) % (table1.length);


  // for(var i=0; i<18; i++) {
  //   sliders[i].value(Math.floor(focusedRandom(0, 100)))
  // }
}

// global variables for colors
var bg_color = [200, 200, 200];

var fg_color = [255, 255, 255];

var stroke_color = [0, 0, 0];

function drawLabeledPoint(x, y, label) {
  ellipse(x, y, 10, 10);
  text(label, x+5, y-5);
}

// https://stackoverflow.com/q/4103405/1010653
function centerFromPoints(x1, y1, x2, y2, x3, y3) {
  var yDelta_a = y2 - y1;
  var xDelta_a = x2 - x1;
  var yDelta_b = y3 - y2;
  var xDelta_b = x3 - x2;

  var aSlope = yDelta_a/xDelta_a;
  var bSlope = yDelta_b/xDelta_b;  
  var center_x = (aSlope*bSlope*(y1 - y3) + bSlope*(x1 + x2)
      - aSlope*(x2+x3) )/(2* (bSlope-aSlope) );
  var center_y = -1*(center_x - (x1+x2)/2)/aSlope +  (y1+y2)/2;

  return [center_x, center_y];
}

function CalculateCircleCenter(A,B,C) {
    var yDelta_a = B.y - A.y;
    var xDelta_a = B.x - A.x;
    var yDelta_b = C.y - B.y;
    var xDelta_b = C.x - B.x;

    var center = [];

    var aSlope = yDelta_a / xDelta_a;
    var bSlope = yDelta_b / xDelta_b;

    center.x = (aSlope*bSlope*(A.y - C.y) + bSlope*(A.x + B.x) - aSlope*(B.x+C.x) )/(2* (bSlope-aSlope) );
    center.y = -1*(center.x - (A.x+B.x)/2)/aSlope +  (A.y+B.y)/2;
    return center;
}

function drawFace(x, y, w, h, params) {
  push();
  translate(x, y);
  // scale(1, -1, 0);

  /* for now assume all params are 0-100
    x1 = (x1+.1)
    x3 = 1.9*(x3-.5)
    x4 = (x4+.25)
    x5 = (x5+.2)
    x6 = .3*(x6+.01)
    x8 = 5*(x8+.001)
    x11 /= 5
    x12 = 2*(x12-.5)
    x13 += .05
    x14 += .1
    x15 = .5*(x15-.5)
    x16 = .25*x16
    x17 = .5*(x17-.5)
    x18 = .5*(x18+.1)
  */
  var x1 = map(params[0], 0, 100, 0.0, 1.0);
  var x2 = map(params[1], 0, 100, 0.0, 1.0);
  var x3 = map(params[2], 0, 100, 0.0, 1.0);
  var x4 = map(params[3], 0, 100, 0.0, 1.0);
  var x5 = map(params[4], 0, 100, 0.0, 1.0);
  var x6 = map(params[5], 0, 100, 0.0, 1.0);
  var x7 = map(params[6], 0, 100, 0.0, 1.0);
  var x8 = map(params[7], 0, 100, 0.0, 1.0);
  var x9 = map(params[8], 0, 100, 0.0, 1.0);
  var x10 = map(params[9], 0, 100, 0.0, 1.0);
  var x11 = map(params[10], 0, 100, 0.0, 1.0);
  var x12 = map(params[11], 0, 100, 0.0, 1.0);
  var x13 = map(params[12], 0, 100, 0.0, 1.0);
  var x14 = map(params[13], 0, 100, 0.0, 1.0);
  var x15 = map(params[14], 0, 100, 0.0, 1.0);
  var x16 = map(params[15], 0, 100, 0.0, 1.0);
  var x17 = map(params[16], 0, 100, 0.0, 1.0);
  var x18 = map(params[17], 0, 100, 0.0, 1.0);

  // x1 = (x1+.1)
  // x3 = 1.9*(x3-.5)
  // x4 = (x4+.25)
  x5 = (x5+.2)
  x6 = .3*(x6+.01)
  x8 = 5*(x8+.001)
  x11 /= 5
  x12 = 2*(x12-.5)
  x13 += .05
  x14 += .1
  x15 = .5*(x15-.5)
  x16 = 0.2 + .25*x16
  x17 = .5*(x17-.5)
  x18 = .5*(x18+.1)

  fill(0);
  drawLabeledPoint(0, 0, "O");
  var xd = x1 * Math.cos(x2);
  var yd = x1 * Math.sin(x2);
  var xds = w * xd;
  var yds = -1 * h * yd;
  drawLabeledPoint(xds, yds, "P");
  drawLabeledPoint(-xds, yds, "P'");
  drawLabeledPoint(0, -x3*h, "U");
  drawLabeledPoint(0, x3*h, "L");

  noStroke();
  fill(255, 0, 0, 128);
  var threePoints = [{x:-xd, y: yd},{x:0, y: x3},{x:xd, y: yd} ]
  c = CalculateCircleCenter(threePoints[0],threePoints[1],threePoints[2])  
  // var center = centerFromPoints(-xd, yd, 0, -x3, xd, yd);
  // print(c.x, c.y)
  drawLabeledPoint(0, -h*c.y, "R");
  var radius = (x3 - c.y)
  // print(radius)
  ellipse(0, -h*c.y, w*radius*2, h*radius*2);
  
  // https://answers.yahoo.com/question/index?qid=20100409192158AAuOiLB
  // var scaleX = 1.0 / Math.sqrt(1.0 - (x4 * x4))
  // var scaleX = 1.0 / (1.0 - x4);
  var scaleX = (1.0+x4);
  var revScaleX = 1.0 / scaleX;
  fill(0, 255, 0, 128);
  var threePoints = [{x:-xd*revScaleX, y: yd},{x:0, y: x3},{x:xd*revScaleX, y: yd} ]
  c = CalculateCircleCenter(threePoints[0],threePoints[1],threePoints[2])  
  drawLabeledPoint(0, -h*c.y, "R2");
  var radius = (x3 - c.y)
  // print(radius)
  ellipse(0, -h*c.y, scaleX*w*radius*2, h*radius*2);


  fill(0, 0, 255, 128);
  var threePoints = [{x:-xd, y: yd},{x:0, y: -x3},{x:xd, y: yd} ]
  c = CalculateCircleCenter(threePoints[0],threePoints[1],threePoints[2])  
  // var center = centerFromPoints(-xd, yd, 0, -x3, xd, yd);
  // print(c.x, c.y)
  drawLabeledPoint(0, -h*c.y, "R");
  var radius = (-x3 - c.y)
  // print(radius)
  ellipse(0, -h*c.y, w*radius*2, h*radius*2);

  // cheatCenterY = lerp(c.y, x3, x4);
  // cheatCenterY = c.y;
  // targetY = lerp(c.y, x3, 0.5);
  // cheatCenterY = lerp(c.y, targetY, x4);
  // cheatScaleY = lerp(1, 0.75, x4);
  // cheatScaleX = lerp(1, 4, x4);
  // // cheatScaleY = cheatScaleY * cheatScaleY;
  // print(x4)
  // drawLabeledPoint(0, -h*cheatCenterY, "R2");
  // ellipse(0, -h*cheatCenterY, cheatScaleX*w*radius*2, cheatScaleY*h*radius*2);

  // ellipse(0, -1*h*(x1+x3)/2, w*2*x4, -1*h*(x1-x3));

  // var extent = 0;
  // if(h < w) {
  //   extent = h / 2;
  // }
  // else {
  //   extent = w / 2;
  // }
  // var to_scale = extent / 220.0;
  // scale(extent);
  // print(x, y, w, h, extent);

  // thicker lines
  strokeWeight(2);

  // fill(fg_color);
  // // ellipse(0, 0, w, h);
  // stroke(stroke_color);
  // // top of face, in box with l=-x4, r=x4, t=x1, b=x3
  // ellipse(0, h*(x1+x3)/2, w*2*x4, h*(x1-x3));
  // // bottom of face, in box with l=-x5, r=x5, b=-x1, t=x2+x3
  // ellipse(0, h*(-x1+x2+x3)/2, w*2*x5, h*(x1+x2+x3));

  // cover overlaps
  // noStroke();
  // fill(255, 0, 0, 128);
  // ellipse(0, h*(x1+x3)/2, w*2*x4, h*(x1-x3));
  // fill(0, 0, 255, 128);
  // ellipse(0, h*(-x1+x2+x3)/2, w*2*x5, h*(x1+x2+x3));

  // nose
  // stroke(stroke_color);
  // line(0, h*-x6/2, 0, h*x6/2);

  // // mouth
  // noFill();
  // theta1=270-180/PI*Math.atan(x8*x9)
  // theta2=270+180/PI*Math.atan(x8*x9)
  // arc(0,h*(-x7+.5/x8), w*1/x8, h*1/x8, theta1, theta2)

  // // eyes (with rotation)
  // push();
  // translate(w*(-x11-x14/2), h*x10);
  // rotate(-180/PI*x12)
  // ellipse(0, 0, w*x14, h*x13*x14);
  // // eyebrow
  // line(w*(-x14/2))
  // pop();

  // push();
  // translate(w*(x11+x14/2), h*x10);
  // rotate(180/PI*x12)
  // ellipse(0, 0, w*x14, h*x13*x14);
  // pop();

  // // pupils
  // noStroke();
  // fill(stroke_color);
  // ellipse(w*(-x11-x14/2-x15*x14/2), h*x10, w*0.1, h*0.1);
  // ellipse(w*(x11+x14/2-x15*x14/2), h*x10, w*0.1, h*0.1);
    
  // stroke(stroke_color);
  // noFill();
  // // eyebrows
  // var y1 = h*(x10+x13*x14*(x16+x17));
  // var y2 = h*(x10+x13*x14*(x16-x17));
  // line(w*(-x11-x14/2-x14*x18/2), y1, w*(-x11-x14/2+x14*x18/2), y2)
  // line(w*(x11+x14/2+x14*x18/2), y1, w*(x11+x14/2-x14*x18/2), y2);
  // // ax.plot([-x11-x14/2-x14*x18/2,-x11-x14/2+x14*x18/2],[x10+x13*x14*(x16+x17),x10+x13*x14*(x16-x17)],'k')
  // // ax.plot([x11+x14/2+x14*x18/2,x11+x14/2-x14*x18/2],[x10+x13*x14*(x16+x17),x10+x13*x14*(x16-x17)],'k')

  // pop();
}

function draw () {
  background(bg_color);

  var params = [];
  for(var i=0; i<18; i++) {
    params.push(sliders[i].value());
  }

  // use same size / y_pos for all faces
  var face_w = canvasWidth / 4;
  var face_h = face_w;
  var face_y = height / 2;
  var face_x = width / 2;

  // draw 2nd face
  drawFace(face_x, face_y, face_w, face_h, params)
}

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