createCanvas(1920, 1080);

  cols = ["#e9d985","#b2bd7e","#749c75","#6a5d7b","#5d4a66","#ed6a5a","#f4f1bb","#9bc1bc","#5ca4a9","#e6ebe0"];

  boids = [];

  maxd = sqrt((sq(width) + sq(height)));

  cushion = 150;

  count = 50;

  bg = color("#96D1CF")

  bg.setAlpha(10);

  for(i = 0; i < count; i++){

    boids[i] = new Boid(random(width), random(height), boids.length);

  }

  strokeWeight(5);

}

​

function draw() {

  background(255, 6);

  for(a = 0; a < boids.length; a++){

    boids[a].update();

  }

}

​

class Boid {

  constructor(x, y, index){

    this.pos = createVector(x, y);

    this.vel = createVector(2, 0);

    this.vel.setHeading(random(TWO_PI));

    this.dist = createVector(0, 0);

    this.index = index;

    this.l = createVector(0, 0);

    this.r = createVector(0, 0);

    this.u = createVector(0, 0);

    this.d = createVector(0, 0);

    this.col = color(cols[this.index % cols.length]);

    this.ls = createVector(25, 0);

    this.rs = createVector(25, 0);

    this.f = createVector(40, 0);

  }

  update(){

    this.ls = createVector(25, 0);

    this.rs = createVector(25, 0);

    this.f = createVector(40, 0);

    stroke(this.col);

    this.ls.setHeading(this.vel.heading() + HALF_PI);

    this.rs.setHeading(this.vel.heading() - HALF_PI);

    this.f.setHeading(this.vel.heading());

    strokeWeight(2);

    noFill();

    triangle(this.pos.x + this.ls.x, this.pos.y + this.ls.y, this.pos.x + this.rs.x, this.pos.y + this.rs.y, this.pos.x + this.f.x, this.pos.y + this.f.y);

    this.ls.add(this.f);

    this.rs.add(this.f);

    strokeWeight(7);

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

    //get steering info from others

    for(i = 0; i < boids.length; i++){

      if(i !== this.index){ 

        this.dist = p5.Vector.sub(boids[i].pos, this.pos);

        if(this.index % cols.length == boids[i].index % cols.length){

​

          if(this.dist.mag() < 200){

            if(abs(this.vel.angleBetween(boids[i].vel)) > 0.1 && abs(this.vel.angleBetween(boids[i].vel)) < HALF_PI){

              this.vel.slerp(boids[i].vel, map(this.dist.mag(), 0, 200, 0.005, 0));

            }

            if(abs(this.vel.angleBetween(boids[i].vel)) < 0.1){

              this.vel.slerp(boids[i].vel, map(this.dist.mag(), 0, 100, 0.001, 0));

            }

            if(abs(this.vel.angleBetween(boids[i].vel)) > HALF_PI){

              this.vel.slerp(boids[i].vel, map(this.dist.mag(), 0, 100, 0.0025, 0));

            }

          } 

​

          if(this.dist.mag() > 10){

            this.vel.slerp(this.dist, map(this.dist.mag(), 10, maxd, 0.0003, 0.0001))

​

          }

        }

        if(this.dist.mag() < 75){

          this.dist = p5.Vector.sub(this.pos, boids[i].pos);

          this.vel.slerp(this.dist, map(this.dist.mag(), 0, 75, 0.1, 0))

        }

      }

    }

    //avoid walls

    this.l = createVector(0, this.pos.y);

    this.r = createVector(width, this.pos.y);

    this.u = createVector(this.pos.x, 0);

    this.d = createVector(this.pos.x, height);

    this.dist = p5.Vector.sub(this.pos, this.l);

    if(this.dist.mag() < cushion){

      // this.dist.normalize();

      this.vel.slerp(this.dist, map(this.dist.mag(), 0, cushion, 0.05, 0));

    }

    this.dist = p5.Vector.sub(this.pos, this.r);

    if(this.dist.mag() < cushion){

      // this.dist.normalize();

      this.vel.slerp(this.dist, map(this.dist.mag(), 0, cushion, 0.05, 0));

    }

    this.dist = p5.Vector.sub(this.pos, this.u);

    if(this.dist.mag() < cushion){

      // this.dist.normalize();

      this.vel.slerp(this.dist, map(this.dist.mag(), 0, cushion, 0.05, 0));

    }

    this.dist = p5.Vector.sub(this.pos, this.d);

    if(this.dist.mag() < cushion){

      // this.dist.normalize();

      this.vel.slerp(this.dist, map(this.dist.mag(), 0, cushion, 0.05, 0));

    }

    if(this.vel.mag() < 1){

      this.vel.setMag(1);

    }

    if(this.vel.mag() > 5){

      this.vel.setMag(5);

    }

    this.vel.setHeading(this.vel.heading() + map(sin((frameCount + this.index) / 15), -1, 1, -0.05, 0.05));

    this.pos.add(this.vel);

  }

}