var c = document.getElementById("smiley");
var canvas = c.getContext("2d");
var phase = Math.random()*Math.PI*2;
console.log(phase)
var color = '#dbbc41';
var color2 = '#000';
var displayWidth = c.width;
var displayHeight = c.height;

var centerX = displayWidth / 2;
var centerY = displayHeight / 2;
var minRad = (centerX / 2) - 13;
var maxRad = centerX / 2;

drawCircle(centerX, centerY, minRad, maxRad, phase, color, color);
drawCircle(centerX, centerY, minRad + 10, maxRad + 10, phase, 'transparent', color2);

drawFace(centerX, centerY);

function drawFace(x, y) {
  
  
//   drawCircle(x - 100, y + 100, 47, 50, phase, '#000', 'transparent');
//   drawCircle(x + 100, y + 100, 47, 50, phase, '#000', 'transparent');
  
  
  // smiley lips
  canvas.beginPath();
  canvas.bezierCurveTo(x - 150, y - 100, 
                       x - 150  + 150, y - 100 - 120, 
                       x - 150  + 300, y - 100);
  canvas.strokeStyle = '#000';
  canvas.lineWidth = 5;
  canvas.stroke();
  
  canvas.beginPath();
  canvas.bezierCurveTo(x - 150, y - 100, 
                       x - 150  + 150, y - 100 - 110, 
                       x - 150  + 300, y - 100);
  canvas.strokeStyle = '#000';
  canvas.lineWidth = 5;
  canvas.stroke();
  
  canvas.beginPath();
  canvas.ellipse(x - 149, y - 70 - 30, 5, 20, 130 * Math.PI/180, 0, 2 * Math.PI);
  canvas.moveTo(x + 250 - 90, y - 100 - 10);
  canvas.ellipse(x + 250 - 100, y - 70 - 30, 5, 20, 40 * Math.PI/180, 0, 2 * Math.PI);
  // canvas.moveTo(x - 150 - 18, y - 100 - 20);
  // canvas.lineTo(x - 150 + 15, y - 100 + 20);
  // canvas.moveTo(x + 250 - 90, y - 100 - 20);
  // canvas.lineTo(x + 250 - 115, y - 100 + 20);
  canvas.strokeStyle = '#000';
  canvas.fillStyle = '#000';
  canvas.fill();
  canvas.lineWidth = 5;
  canvas.stroke();
  
  // smiley eyes
  canvas.beginPath();
  canvas.ellipse(x - 70, y + 70, 30, 63, 175 * Math.PI/180, 0, 2 * Math.PI);
  canvas.ellipse(x + 70, y + 65, 30, 65, 12 * Math.PI/180, 0, 2 * Math.PI);
  canvas.fillStyle = '#000';
  canvas.fill();
  
}


/*
credits for the imperfect circle:
https://codepen.io/RectangleWorld/full/murei?editors=0010
*/
function drawCircle(centerX, centerY, minRad, maxRad, phase, fillcolor, strokcolor) {
  var point;
  var rad, theta;
  var twoPi = 2*Math.PI;
  var x0,y0;

  //generate the random function that will be used to vary the radius, 9 iterations of subdivision
  var pointList = setLinePoints(9);

  canvas.strokeStyle = strokcolor;
  canvas.lineWidth = 10.01;
  canvas.fillStyle = fillcolor;
  canvas.beginPath();
  point = pointList.first;
  theta = phase;
  rad = minRad + point.y*(maxRad - minRad);
  x0 = centerX + rad*Math.cos(theta);
  y0 = centerY + rad*Math.sin(theta);
  canvas.lineTo(x0, y0);
  while (point.next != null) {
    point = point.next;
    theta = twoPi*point.x + phase;
    rad = minRad + point.y*(maxRad - minRad);
    x0 = centerX + rad*Math.cos(theta);
    y0 = centerY + rad*Math.sin(theta);
    canvas.lineTo(x0, y0);
  }
  canvas.stroke();
  canvas.fill();		
}

function setLinePoints(iterations) {
  var pointList = {};
  pointList.first = {x:0, y:1};
  var lastPoint = {x:1, y:1}
  var minY = 1;
  var maxY = 1;
  var point;
  var nextPoint;
  var dx, newX, newY;

  pointList.first.next = lastPoint;
  for (var i = 0; i < iterations; i++) {
    point = pointList.first;
    while (point.next != null) {
      nextPoint = point.next;

      dx = nextPoint.x - point.x;
      newX = 0.5*(point.x + nextPoint.x);
      newY = 0.5*(point.y + nextPoint.y);
      newY += dx*(Math.random()*2 - 1);

      var newPoint = {x:newX, y:newY};

      //min, max
      if (newY < minY) {
        minY = newY;
      }
      else if (newY > maxY) {
        maxY = newY;
      }

      //put between points
      newPoint.next = nextPoint;
      point.next = newPoint;

      point = nextPoint;
    }
  }

  //normalize to values between 0 and 1
  if (maxY != minY) {
    var normalizeRate = 1/(maxY - minY);
    point = pointList.first;
    while (point != null) {
      point.y = normalizeRate*(point.y - minY);
      point = point.next;
    }
  }
  //unlikely that max = min, but could happen if using zero iterations. In this case, set all points equal to 1.
  else {
    point = pointList.first;
    while (point != null) {
      point.y = 1;
      point = point.next;
    }
  }

  return pointList;		
}