var canvas = document.createElement('canvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
document.body.appendChild(canvas);
var socketData = {};

var socket = new WebSocket('ws://literature.uncontext.com');

socket.onmessage = function (event) {
  var tempData = JSON.parse(event.data);
  if (tempData.a !== socketData.a) {
    socketData = tempData;
    circles.push(new Circle());
  } else {
    socketData = tempData;
  }
  
};

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

function Circle() {
  this.x = canvas.width / 2;
  this.y = canvas.height / 2;
  this.socketData = socketData;
  this.radius = Math.random() * 300;
  this.radius += 20;
  this.color = '255, 255, 255';
  this.size = Math.round(socketData.b/20.33 * 10) + 5;
  this.theta = socketData.e.f / socketData.e.g * 2 * Math.PI;
  this.offset = (socketData.d + socketData.a) / 39 * 2 * Math.PI;
  this.dtheta = 1;
  this.doffset = socketData.d/14/20;
  this.time = 0;
  this.alpha = 1;
}
Circle.prototype.update = function() {
  this.offset += this.doffset;
  this.time += 1;
  this.alpha = this.time/100;
  if (this.time > 1000) {
    this.alpha = (1100 - this.time) / 100;
  }
  if (this.time > 1200) {
    this.remove();
  }
};
Circle.prototype.render = function() {
  ctx.save();
  ctx.strokeStyle = 'rgba(' + this.color + ', ' + this.alpha + ')';
  ctx.lineWidth = this.size;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, this.offset, this.offset + this.theta, false);
  ctx.stroke();
  ctx.restore();
};
Circle.prototype.remove = function() {
  circles.splice(0, 1);
}

var circles = [];

requestAnimationFrame(demo = function() {
  ctx.save();
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.restore();
  circles.forEach(function(circle) {
    circle.update();
    circle.render();
  })
  requestAnimationFrame(demo);
});