Made by Sébastien Raynaud @seb_raynaud, 11 December 2018

  Largely inspired by Daniel Shiffman's coding challenge #124: Flocking Simulation

    - Coding Challenge video: https://youtu.be/mhjuuHl6qHM

*/

​

const flock = [];

let boidsSlider, perceptionSlider, alignmentSlider, cohesionSlider, separationSlider;

let boidsP, perceptionP, alignmentP, cohesionP, separationP;

let showPerceptionRadius = false;

​

// SETUP FUNCTION ---------------------------------------------------

function setup() {

  createCanvas(windowWidth, windowHeight);

  //createCanvas(800, 600);

  // Create the DOM elements

  boidsP = createP('Boids');

  boidsSlider = createSlider(1, 300, 100, 1);

  perceptionP = createP('Perception');

  perceptionSlider = createSlider(0, 1000, 100, 1);

  alignmentP = createP('Alignment');

  alignmentSlider = createSlider(0, 5, 1, 0.1);

  cohesionP = createP('Cohesion');

  cohesionSlider = createSlider(0, 5, 1, 0.1);

  separationP = createP('Separation');

  separationSlider = createSlider(0, 5, 1, 0.1);

  // Create an initial population of 100 boids

  for (let i = 0; i < boidsSlider.value(); i++) {

    let pos = createVector(random(width), random(height));

    let vel = p5.Vector.random2D().mult(random(0.5, 3));

    let acc = createVector(0, 0);

    let boid = new Boid(pos, vel, acc);

    flock.push(boid);

  }

}

​

// DRAW FUNCTION ---------------------------------------------------

function draw() {

  background(51, 51, 51, 255);

  // Behavior of the flock of boids

  for (let boid of flock) {

    boid.flock(flock);

    boid.update();

    boid.show();

  }

  // Adjust the amount of boids on screen

  let maxBoids = boidsSlider.value();

  let difference = flock.length - maxBoids;

  if (difference < 0) {

    for (let i = 0; i < -difference; i++) {

      let pos = createVector(random(width), random(height));

      let vel = p5.Vector.random2D().mult(random(0.5, 3));

      let acc = createVector(0, 0);

      let boid = new Boid(pos, vel, acc);

      flock.push(boid);

    }

  } else if (difference > 0) {

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

      flock.pop();

    }

  }

  // Update the DOM elements

  boidsP.html(`Boids: ${boidsSlider.value()}`);

  perceptionP.html(`Perception: ${perceptionSlider.value()}`);

  alignmentP.html(`Alignment: ${alignmentSlider.value()}`);

  cohesionP.html(`Cohesion: ${cohesionSlider.value()}`);

  separationP.html(`Separation: ${separationSlider.value()}`);

}