var config = {
  radius: 350, // The radius from the center of the canvas to the point where our spiral begins  Try making this kinda small ( < 100 or so) for some cool "inverse" blooming effects.
  increment: 3.7 / 5.5, // Play with the numerator and denominator of this fraction.  This is multiplied by Math.PI, hence you should think of it as a ratio of PI.  Prime numbers seem to be the most interesting.  Maybe someone more mathematically inclined can tell me why.
  cycles: 100, // the (max) number of cycles in the spiral
  initialAngle: -Math.PI / 2, // the initial point where the spiral begins
  dR: 0, // the initial change in the line segment length after each vertex.  Mainly just affects the starting point of the animation.
  dRR: 0.019, // the rate of change in the dR variable *each frame*.  This is responsible for the cool animation.  If you set this too high, the animation will be ridiculously fast.
  min_dR: -15, // reverse the animation when the line segment length is this low
  max_dR: 15, // reverse the animation when the line segment length is this large
  color: 'rgba(30, 180, 180, 1)', // line color
  // shadowBlur: 5,
  // shadowColor: 'green',
  requestsPerFrame: 1, // how many requestAnimationFrame()'s are made before we actually draw a frame.  Hacky framerate control :)
  lineWidth: 2
};

var canvas, cxt, width, height, animationFrame, animationFrameCount = 0, animateForward = false;
var mouseX, mouseY;

function initialize() {
  canvas = document.getElementById("canvas");
  cxt = canvas.getContext("2d");
  window.addEventListener("resize", resize, false);
  window.addEventListener('mousemove', mouseMove, false);
  animateForward = "true";
  setup();
}

function setup() {
  width = window.innerWidth;
  height = window.innerHeight;

  canvas.width = width;
  canvas.height = height;

  draw();
}

function draw() {
  
  animationFrameCount++;
  if (animationFrameCount % config.requestsPerFrame === 0) {
    var mouseBasedIncrement = setIncrement();
    var increment = isNaN(mouseBasedIncrement) ? config.increment : mouseBasedIncrement;
    animationFrameCount = 0;
    cxt.clearRect(0, 0, width, height);
    var points = [];
    radius = config.radius;
    if (animateForward) {
      config.dR += config.dRR;
    } else {
      config.dR -= config.dRR;
    }
    for (
      var angle = config.initialAngle;
      angle <= config.cycles * 2 * Math.PI && radius > 0;
      angle += increment * Math.PI
    ) {
      var x = width / 2 + radius * Math.cos(angle);
      var y = height / 2 + radius * Math.sin(angle);
      points.push({ x, y });
      radius -= config.dR;
    }
    cxt.beginPath();
    cxt.strokeStyle = config.color;
    cxt.lineWidth = config.lineWidth;
    cxt.lineCap = 'round';
    //cxt.shadowBlur = config.shadowBlur;
    //cxt.shadowColor = config.shadowColor;
    for (var i = 0; i < points.length - 1; i++) {
      cxt.moveTo(points[i].x, points[i].y);
      cxt.lineTo(points[i + 1].x, points[i + 1].y);
    }
    cxt.stroke();
    cxt.closePath();

    if (config.dR <= config.min_dR) {
      animateForward = true;
    } else if (config.dR >= config.max_dR) {
      animateForward = false;
    }
    // console.log(config.dR);
  }
  animationFrame = requestAnimationFrame(draw);
}

function resize() {
  if (animationFrame !== undefined) {
    cancelAnimationFrame(animationFrame);
  }
  setup();
}

function mouseMove(event) {
  mouseX = event.pageX;
  mouseY = event.pageY;
}

function setIncrement() {
  var x = 100 * mouseX / width;
  var y = 100 * mouseY / height;
  return x/y;
}

initialize();