// Changeable stuff

// how wide & tall the circle should be
var circDimension = 300;

// How many dots should appear at start
var initialDots = 500;

// Create an instance of Two.js
// two.js.org
var elem = document.getElementById('two');
var two = new Two({ width: circDimension, height: circDimension }).appendTo(elem);

var outerRadius = 90;
var innerRadius = 70;
var xc = two.width/2;
var yc = two.height/2; 

// Determine if outside of canvas
function isOutside(x1, y1) {
  return x1 < 0 || x1 > two.width || y1 < 0 || y1 > two.height;
}

// Is the point inside of an invisible set of two circles?
function insideRing(x1, y1) {
  return (Math.pow(x1 - xc, 2) + Math.pow(y1 - yc, 2) < Math.pow(outerRadius, 2)) && (Math.pow(x1 - xc, 2) + Math.pow(y1 - yc, 2) > Math.pow(innerRadius, 2));
}

// Return a random integer between min and max, inclusive
function randBetween(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Input: an integer between 1 and 4, corresponding to the 4
//   out-of-bounds areas
// Output: a (constrained) random point out-of-bounds of the box
// This is where the circles will originate
function genCoords(region) {
  if (region == 1) { // West
    return [-10, randBetween(two.height * .2, two.height * .8)];
  } else if (region == 2) { // North
    return [randBetween(two.width * .2, two.width * .8), -10]
  } else if (region == 3) { // East
    return [two.width + 10, randBetween(two.height * .2, two.height * .8)];
  } else { // South
    return [randBetween(two.width * .2, two.width * .8), two.height + 10];
  }
}

// Input the region used to generate the starting coords
// Output the return of genCoords for some region besides that one
// This will be the circles will be moving to
function genTarget(region) {
  let regions = [1, 2, 3, 4];
  regions.splice(region - 1, 1);
  return genCoords(regions[randBetween(0, 2)]);
}

// Circle constructor
function Circ() {

  // Determine the circle's origin and destination
  this.makeCoords = () => {
    this.region = randBetween(1, 4);
    this.coords = genCoords(this.region);
    this.targetCoords = genTarget(this.region);
    this.x = this.coords[0];
    this.y = this.coords[1];
    this.target = {
      x: this.targetCoords[0],
      y: this.targetCoords[1]
    };
  }

  // Make it pretty
  this.colorize = () => {
    this.c.fill = randBetween(1, 10) == 1 ? '#AAA' : "rgb("+randBetween(150, 255)+","+0+","+randBetween(150, 255)+")";
  }

  // Make it exist!
  this.setup = () => {
    // Make it exist somewhere!
    this.makeCoords();
    // Make the circle svg! (It has eight vertices!!!) Third param = radius.
    this.c = two.makeCircle(this.x, this.y, 1.5);
    this.c.noStroke();
    // Make it pretty!
    this.colorize();
    this.vel = .0025;
    // This will be used later to determine whether to remove it
    this.beenInside = false;
  }

  this.setup();

  this.realign = () => {
    this.makeCoords();
    this.c.translation.set(this.x, this.y);
    this.colorize();
    this.beenInside = false;
  }
}

// Array for use in the animation bits
var circs = [];

// Add a bunch of circles
for (var i = 0; i<= initialDots; i++) {
  circs.push(new Circ());
}

//var outerCirc = two.makeCircle(150, 150, outerRadius);
//outerCirc.noFill();
//var innerCirc = two.makeCircle(150, 150, innerRadius);
//innerCirc.noFill();

two.bind('update', function(frameCount, timeDelta) {
  var ct = circs.length;

  // See if should slow down
  for (var i = 0, l = circs.length; i < l; i++) {
    let cir = circs[i];
    if (insideRing(cir.c.translation.x, cir.c.translation.y)) {
      cir.insideRing = true;
      cir.oldVel = cir.vel;
      cir.vel = .0005;
    } else {
      cir.insideRing = false;
      cir.vel = .005;
    }
  }
    

  for (var i = 0, l = circs.length; i < l; i++) {
    // Move each circle a bit to the left/right and up/down
    let cir = circs[i];
    let xDelt = cir.vel * (cir.target.x - cir.x);
    let yDelt = cir.vel * (cir.target.y - cir.y);
    //if (i == 0) {
    xDelt += (randBetween(-5, 5) / 50);
    yDelt += (randBetween(-5, 5) / 50);
    //}
    cir.c.translation.set(cir.c.translation.x + xDelt,  cir.c.translation.y + yDelt);
  }    
 
  for (var i = 0, l = circs.length; i < l; i++) {
    // If the circle hasn't been inside and currently is,
    // Mark it as having been inside 
    let cir = circs[i]; 
    if (!cir.beenInside && isOutside(cir.c.translation.x, cir.c.translation.y) == false) {
      cir.beenInside = true;
    }
  }
  // If the circle has been inside and no longer is...
  for (var i = 0, l = circs.length; i < l; i++) {
    let cir = circs[i];
    if (cir.beenInside && isOutside(cir.c.translation.x, cir.c.translation.y)) {
      // ... then move the circle to a new starting position.
      cir.realign();
    }
  }
}).play();