​

​

const numAgents = 12;

const numCircleSections = 100;

let anims = [];

let circ;

​

const cerp = (y1, y2, mu) => 

{

  let mu2;

​

  mu2 =  (1.0 - cos(mu*PI) ) / 2.0;

  let val = (y1 * (1.0 - mu2) + y2 * mu2); 

  return val;

}

​

const lierp = (y1, y2, mu) => {

  return y1*(1-mu) + y2*mu;

}

​

const shuffleArray = (array) => {

  var currentIndex = array.length, temporaryValue, randomIndex;

​

  // While there remain elements to shuffle...

  while (0 !== currentIndex) {

​

    // Pick a remaining element...

    randomIndex = floor(random() * currentIndex);

    currentIndex -= 1;

​

    // And swap it with the current element.

    temporaryValue = array[currentIndex];

    array[currentIndex] = array[randomIndex];

    array[randomIndex] = temporaryValue;

  }

​

  return array;

}

​

class Actor {

  constructor(x, y, id) {

    this.pos = {x:x, y:y};

    this.size = 2.0;

    this.duration = 0;

    this.id = id;

  }

  update(dt) {

  }

  sync(duration) {

    this.duration = duration;

  }

  render() {

    let t = millis() / 1000;

    let f = 0.25 /  this.duration;

    rectMode(CENTER);

    let size = this.size;

    push();

    translate(this.pos.x, this.pos.y);

    //rotate(TWO_PI * f * t);

    fill(0);

    noStroke();

    rect(0,0, size, size );

    pop();

  }

}

​

class Animate {

  constructor(actor, startPos, endPos, duration) {

    this.actor = actor;

    this.startPos = startPos;

    this.endPos = endPos;

    this.duration = duration;

    this.state = 'idle';

    this.timer = 0;

  }

  start() {

    if(this.state == 'idle') {

      this.state = 'animating';

      this.actor.pos.x = this.startPos.x;

      this.actor.pos.y = this.startPos.y;

      this.timer = 0;

    }

  }

  resetPoints(start, end) {

    if(this.state == 'idle') {

      this.startPos = start;

      this.endPos = end;

    }

  }

  cancel() {

    this.state = 'idle';

    this.timer = 0;

    this.actor.pos.x = this.startPos.x;

    this.actor.pos.y = this.startPos.y;

  }

  revert() {

    let temp_x = this.startPos.x;

    let temp_y = this.startPos.y;

    this.startPos.x = this.endPos.x;

    this.startPos.y = this.endPos.y;

    this.endPos.x = temp_x;

    this.endPos.y = temp_y;

    this.timer = this.duration - this.timer;

  }

  update(dt) {

    if (this.state === 'animating') {

      let mu = this.timer / this.duration;

      let new_x = cerp(this.startPos.x, this.endPos.x, mu);

      let new_y = cerp(this.startPos.y, this.endPos.y, mu);;

      this.actor.pos.x = new_x;

      this.actor.pos.y = new_y;

      this.actor.sync(this.duration);

      this.timer += dt;

    }

    if ( this.timer > this.duration ) {

        this.state = 'idle';

      //circ = shuffleArray(circ);

      let randomIdx =floor( random(0, numCircleSections - 1) );

      let start = this.endPos;

      let end = circ[randomIdx];

      this.resetPoints(start, end);

      this.start();

    }

  }

}

​

​

const circleShape = (center, radius, vertexCount) => {

  let shape = [];

  for (let i = 0; i < vertexCount; i++) {

    let angle = map(i, 0, vertexCount, -PI, PI);

    let x = cos(angle) * (radius) + center.x;

    let y = sin(angle) * (radius) + center.y;

    shape.push({x:x, y:y});

  }

  return shape;

}

​

​

​

function setup() {

  createCanvas(windowWidth, windowHeight, P2D);

  let radius = min(height/3, width/3);

  circ = circleShape({x:width/2, y:height/2},radius, numCircleSections);

  circ = shuffleArray(circ);

  for (let i =0; i < numAgents; i++) {

    let agent = new Actor(width/2.0, height/2.0, i);

    let duration = random(6,10);

    anims.push(new Animate(agent, {x:width/2, y:height/2}, circ[agent.id], duration) );

    anims[i].start();

  }

}

​

function reset() {

//  numAgents = 12;

  anims = [];

  circ;

  setup();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  reset();

}

​

const regionalColors = (x,y,w,h) => {

  let cols = [];

  loadPixels();

  for(let i = y; i<h+y; i++){

    for(let j = x; j<w+x; j++){

      cols = cols.concat(get(i,j));

    }

  }

  return  cols;

}

​

function draw() {

  //background(20);

  //background('rgba(255,255,255, 0.05)');

  let dt = deltaTime / 1000.0;

  anims.map((animation) => {

    animation.update(dt);

    animation.actor.render();

  });

  if (frameCount % 60 == 0) {

    let reg_size = 40;

    let reg_x = (width/3) - (reg_size/2) ;

    let reg_y = (height/2) - (reg_size/2) ;

    let cols = regionalColors(reg_x, reg_y, reg_size, reg_size);

    let total = cols.reduce((accumulator, currentValue) => accumulator + currentValue);

    let avg = total/(reg_size*reg_size);

    if(avg > 140) reset();

  }

}