let creatures = [];  

function setup() {
  createCanvas(windowWidth, windowHeight);
    noStroke();
  for (let i=0; i<5; i++) {
    creatures.push(new Creature(createVector(random(100, width-100), random(100, height-100)), random(20, 80)));
  }
}

function draw() {
  background(0, 80);
  for (let i = 0; i < creatures.length; i++) {
    for (let j = i+1; j < creatures.length; j++) {
      creatures[i].detect_collision(creatures[j]);
    }
    if (i == 0) {
      creatures[i].update(createVector(mouseX, mouseY));
    } else {
      creatures[i].update(createVector(creatures[i-1].pos.x, creatures[i-1].pos.y));
    }
    creatures[i].render();
  }
}

function mousePressed() {
  shuffle(creatures, true);
  for (let i = 0; i < creatures.length; i++) {
    creatures[i].kick();
  }
}

class Creature {
  constructor(pos, size) {
    this.size = size;
    this.pos = pos;
    this.target = pos;
    this.movement = createVector(random(-5, 5), random(-5, 5));
    this.col_r = random(102, 255);
    this.col_g = random(102, 255);
    this.col_b = random(102, 255);
  }
  
  update(target) {
    let force = target.sub(this.pos);
    force.limit(map(this.size, 20, 80, 10, 6));
    this.movement.add(force);
    this.movement.limit(this.size);
    this.pos.add(this.movement);
  }
  
  render() {
    fill(this.col_r, this.col_g, this.col_b);
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.movement.heading());
    ellipse(0, 0, this.size * map(this.movement.mag(), 0, 20, 1, 2.4), this.size / map(this.movement.mag(), 0, 20, 1, 1.4));
    pop();
  }
  
  detect_collision(other) {
    if (this.pos.dist(other.pos) <= (0.6 * (this.size + other.size))) {
      this.movement.setMag(5*this.movement.mag());
      other.movement.setMag(5*other.movement.mag());      
    }
  }
  
  kick() {
     this.movement.setMag(10*this.movement.mag());
     this.movement.rotate(PI);
  }
  
}