var polar = {
  fromPolar: function(polar) {
    return {
      x: polar.r * Math.cos(polar.phi),
      y: polar.r * Math.sin(polar.phi)
    };
  },
  fromCarth: function(carth) {
    return {
      r: Math.sqrt(carth.x*carth.x + carth.y*carth.y),
      phi: Math.atan2(carth.y, carth.x)
    };
  }
};
var random = function(min, max) {
  var b = (max === 0 || max) ? max : 1;
  var a = min || 0;

  return a + (b - a)*Math.random();
};

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var clicked = false;

document.body.style.margin = 0;
document.body.style.overflow = 'hidden';
document.body.style.background = 'black';
document.title = 'mviz';

var HEIGHT, WIDTH;

document.body.appendChild(canvas);

function setSize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  canvas.setAttribute('height', HEIGHT);
  canvas.setAttribute('width', WIDTH);
}

function guides() {
  ctx.strokeStyle = 'red';
  ctx.beginPath();
  ctx.moveTo(WIDTH/2, HEIGHT);
  ctx.lineTo(WIDTH/2, 0);
  ctx.moveTo(0, HEIGHT/2);
  ctx.lineTo(WIDTH, HEIGHT/2);
  ctx.stroke();
}

function jaggedCircle(color, radius, spikes) {
  ctx.strokeStyle = color;
  var step = (2*Math.PI) / (spikes - 1);

  var begin = polar.fromPolar({
    r: radius,
    phi: 0
  });

  ctx.beginPath();
  ctx.moveTo(begin.x, begin.y);

  var spike, end;
  function render(start, c) {
    spike = polar.fromPolar({
      phi: (c+random(0.25, 0.5))*step,
      r: radius*(random(0, 0.15)*(Math.random() > 0.5 ? -1 : 1) + 1)
    });

    end = polar.fromPolar({
      phi: (c+1)*step,
      r: radius * random(0.95, 1)
    });


    if(c < spikes - 2) {
      ctx.quadraticCurveTo(spike.x, spike.y, end.x, end.y);
      ctx.stroke();
      render(end, c+1);
    } else {
      ctx.quadraticCurveTo(spike.x, spike.y, begin.x, begin.y);
      ctx.stroke();
      ctx.closePath();
    }
  }

  render(begin, 0);
}

var circles;

function init() {
  setSize();
  ctx.fillRect(0,0, WIDTH, HEIGHT);
  ctx.translate(WIDTH/2, HEIGHT/2);
  circles = [new Circle(randColor())];
  draw();
  // guides();
}

function randColor() {
  var r = Math.floor(random(0, 255));
  var g = Math.floor(random(0, 255));
  var b = Math.floor(random(0, 255));

  return 'rgb('+r+','+g+','+b+')';
}

function Circle(c) {
  this.color = c;
  this.radius = WIDTH / 2;
  this.spikes = random(100, 200);

  this.draw = function() {
    jaggedCircle(this.color, this.radius, this.spikes);
  };

  this.scale = function () {
    var nR = this.radius*0.99;
    if(nR < 25) { nR = WIDTH; }
    this.radius = nR;
  };
}

function draw() {
  var counter = 0;

  function loop() {
    counter = counter + 1;
    ctx.fillRect(-WIDTH/2,-HEIGHT/2, WIDTH, HEIGHT);
    for (var i = 0; i < circles.length; i++) {
      circles[i].scale();
      circles[i].draw();
    }

    if(counter % 33 === 0 && circles.length < 12) {
      circles.push(new Circle(randColor()));
    }

    if(clicked) {
      return;
    }

    window.requestAnimationFrame(loop);
  }

  loop();
}

document.addEventListener('click', function() {
  if(!clicked) {
    clicked = true;
  } else {
    clicked = false;
    draw();
  }
});

init();