// Circular Painting 4
// October 21, 2017
// John Clavin

var colorArray = [];
var circles = [];
var motionCount = 4.7124;

function setup() {
  createCanvas(800, 800);
  frameRate(60);
  background(232);
  strokeWeight(1);
  createColors(12);
  for (var i = 0; i < 12; i++) {
    var cat = new Circle(i);
    circles[i] = cat;
  }
}

function draw() {
  background(232);
  var sine = 1 + sin(motionCount);
  motionCount = motionCount + 0.03;
  var sMapped = map(sine, 0, 2, -42, 136);
  var rAdd = 0;
  for (var i = 0; i < circles.length; i++) {
    circles[i].calcMotion(rAdd);
    rAdd = rAdd * 0.60 + sMapped;
    circles[i].updateColor(i);
    circles[i].cDraw();

  }
}

function Circle(rn) {
  rn = 780 - rn * 40;
  this.rNeutral = rn;

  this.calcMotion = function(rs) {
    this.rSubtrahend = rs;
    var rCalc = this.rNeutral - this.rSubtrahend;
    this.motionDiameter = rCalc;
  }

  this.updateColor = function(cIndex) {
    fill(colorArray[cIndex]);
  }

  this.cDraw = function() {
    var mx = this.motionDiameter;
    var my = this.motionDiameter;
    ellipse(width / 2, height / 2, mx, my);
  }
}

function createColors(number) {
  var color2 = random(140, 254);
  for (var i = 0; i < number; i++) {
    var color1 = map(i, 0, (number - 1), 154, 254);
    var color3 = map(i, 0, (number - 1), 200, 0);
    colorArray[i] = color(color1, color2, color3);
  }
}