const TILE_SIZE = 7;

const FLOCK_SIZE = 100;

let cvWidth, cvHeight;

​

class Creature {

  constructor(pos) {

    this.pos = pos;

    let ang = random(0, 2 * PI);

    this.dir = createVector(cos(ang), sin(ang));

  }

  move() {

    this.pos.add(p5.Vector.mult(this.dir, 2.0));

    if (mouseIsPressed) {

      let mv = p5.Vector.sub(createVector(mouseX, mouseY), this.pos);

      mv.setMag(0.05);

      this.dir.add(mv);

      this.dir.normalize();

    }

    if (this.pos.x < 0) this.pos.x = cvWidth;

    if (this.pos.x > cvWidth) this.pos.x = 0;

    if (this.pos.y < 0) this.pos.y = cvHeight;

    if (this.pos.y > cvHeight) this.pos.y = 0;

    this.dir.rotate(random(-0.05, 0.05))

  }

  draw() {

    let num_tiles = { x : cvWidth / TILE_SIZE, y : cvHeight / TILE_SIZE };

    //fill(255, 0, 0);

    //circle(this.pos.x, this.pos.y, 10);

    let c = random(0, 1);

    fill(map(c, 0, 1, 79, 159), map(c, 0, 1, 11, 29), map(c, 0, 1, 91, 183));

    rect(Math.floor(this.pos.x / cvWidth * num_tiles.x) * TILE_SIZE, Math.floor(this.pos.y / cvHeight * num_tiles.y) * TILE_SIZE, TILE_SIZE, TILE_SIZE);

  }

}

​

let flock = [];

​

function setup() {

  cvWidth = windowWidth; cvHeight = windowHeight;

  createCanvas(cvWidth, cvHeight);

  for (let i = 0; i < FLOCK_SIZE; i++) 

    flock.push(new Creature(createVector(random(0, cvWidth), random(0, cvHeight))));

  noStroke();

}

​

function draw() {

  background(0);

  flock.forEach(c => c.draw());

  flock.forEach(c => c.move());

}