// Press "A" to force them to the center

/*

    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

  In setup, a flock of boids is created with initial position and velocity

  After 40 frames, boids acquire perception, alignment, cohesion, and separation

    - Preception: how far a boid can be from another boid to be considered neighbor

    - Alignment: steering behavior of a boid towards the average velocity of its neighbors

    - Cohesion: steering behavior of a boid towards the average location of its neighbors

    - Separation: steering behavior of boid to avoid too much proximity with its closest neighbors

  If a boid fly too high or too low, a force is applied to make it go to the average depth

    - So that they tend to fly horizontally

  There is also a quad tree to minimize the cost distance calculation

*/

​

const flock = []; // Array of boids

let depth = 800; // The Z location of the boid tend to stay between +depth/2 and -depth/2

let gap = 300; // Boids can go further than the edges, this further distance is the gap

let quadTree; // A quad tree to minimize the cost of distance calculation

let unitX, unitY, unitZ; // Unit vectors pointing in the X, Y, and Z directions

​

let useQuadTree = true; // Toogle the use of a quad tree

let showPerceptionRadius = false; // Toogle vizualization of perception radius

let goMiddle = false; // Pressing "a" toogle it, making all boids go to the center

let downloadCanvas = false; // Make it true to lower frameRate and download the canvas each 2 frames

​

let boidsSlider, perceptionSlider, alignmentSlider, cohesionSlider, separationSlider; // Sliders

let boidsP, perceptionP, alignmentP, cohesionP, separationP; // Paragraphs

let startingBoids = 200; // Amount of boid at the start of the sketch

let startingPerception = 90; // Perception radius at the start of the sketch

let t = 0; // Counts the frame from the time boids go out of the middle of space

​

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

// Make the canvas, declare some variables, create the DOM elements and the initial boid population

function setup() {

  // Declaration of a canvas to allow canvas download

  let p5Canvas;

    if (downloadCanvas) {

    p5Canvas = createCanvas(800, 800, WEBGL);

    frameRate(5);

  } else {

    p5Canvas = createCanvas(800, 800, WEBGL); // You can change the resolution here

  }

​

  // Declaration of depth (z axis), unit vectors, and the camera

  depth = height;

  unitX = createVector(1, 0, 0);

  unitY = createVector(0, 1, 0);

  unitZ = createVector(0, 0, 1);

  let cameraX = 630 / 600 * width;

  let cameraY = 140 / 500 * height;

  let cameraZ = -280 / 500 * depth;

  camera(cameraX, cameraY, cameraZ, 0, 0, 0, 0, 0, 1);

  // Create the DOM elements: sliders and paragraphs

  createDOMs();

​

  // Create an initial population of 100 boids

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

    pushRandomBoid();

  }

}

​

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

function draw() {

  // Background and lightning

  background(40);

  directionalLight(150, 150, 150, 1, 1, 0);

  ambientLight(150);

  // Draw the corners of a box showing the space where boids can fly

  stroke(80);

  strokeWeight(8);

  noFill();

  box(width + gap/2, height + gap/2, depth + gap/2);

​

  // Make the quad tree

  let boundary = new Cube(0, 0, 0, width + 2 * gap, height + 2 * gap, depth + 2 * gap);

  quadTree = new QuadTree(boundary, 4);

  for (let boid of flock) {

    quadTree.insert(boid);

  }

  // Each boid determines its acceleration for the next frame

  for (let boid of flock) {

    boid.flock(flock, quadTree);

  }

  // Each boid updates its position and velocity, and is displayed on screen

  for (let boid of flock) {

    boid.update(gap);

    boid.show();

  }

​

  // Adjust the amount of boids on screen according to the slider value

  let maxBoids = boidsSlider.value();

  let difference = flock.length - maxBoids;

  if (difference < 0) {

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

      pushRandomBoid(); // Add boids if there are less boids than the slider value

    }

  } else if (difference > 0) {

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

      flock.pop(); // Remove boids if there are more boids than the slider value

    }

  }

​

  // 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()}`);

  t++; // t counts the number of frames, it is used to not have cohesion in the first 40 frames

  // Download the current state of the canvas as .png

  if (downloadCanvas && frameCount % 2 == 1) download(canvas, 'Flocking_' + frameCount + '.png');

}

​

// Go to the middle

function keyPressed() {

  if (keyCode == 65) {

    goMiddle = !goMiddle; // Toogles goMiddle, forcing the boids to go to the middle or releasing them

    t = 0; // Resets t so that boids do not have cohesion in the next 40 frames

  }

}

​

// Create the DOM elements

function createDOMs() {

  // Create the paragraphs and sliders

  boidsP =          createP('Boids');

  perceptionP = createP('Perception');

  alignmentP =  createP('Alignment');

  cohesionP =   createP('Cohesion');

  separationP = createP('Separation');

  if (windowWidth * windowHeight > 1200 * 1200) startingPerception = 150; // Larger perception on a larger screen

  boidsSlider =             createSlider(1, 500, startingBoids, 1);

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

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

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

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

​

  // Position the DOM elements on the top left corner

  let DOMoffset = 500; // Place the DOM elements underneath the canvas when we want to download the canvas

  if (!downloadCanvas) DOMoffset = 0; // Otherwise keep the DOM elements on the top left corner

  let DOMgap = 15; // Gap between the DOM elements

  boidsSlider.position(         DOMgap, DOMoffset + boidsSlider.height * 0 + 1 * DOMgap);

  perceptionSlider.position(DOMgap, DOMoffset + boidsSlider.height * 1 + 2 * DOMgap);

  alignmentSlider.position( DOMgap, DOMoffset + boidsSlider.height * 2 + 3 * DOMgap);

  cohesionSlider.position(  DOMgap, DOMoffset + boidsSlider.height * 3 + 4 * DOMgap);

  separationSlider.position(DOMgap, DOMoffset + boidsSlider.height * 4 + 5 * DOMgap);

  boidsP.position(          boidsSlider.width + DOMgap * 2, DOMoffset + boidsSlider.height * 0 + 0 * DOMgap + 2);

  perceptionP.position( boidsSlider.width + DOMgap * 2, DOMoffset + boidsSlider.height * 1 + 1 * DOMgap + 2);

  alignmentP.position(  boidsSlider.width + DOMgap * 2, DOMoffset + boidsSlider.height * 2 + 2 * DOMgap + 2);

  cohesionP.position(       boidsSlider.width + DOMgap * 2, DOMoffset + boidsSlider.height * 3 + 3 * DOMgap + 2);

  separationP.position( boidsSlider.width + DOMgap * 2, DOMoffset + boidsSlider.height * 4 + 4 * DOMgap + 2);

}

​

// Make a new boid

function pushRandomBoid() {

  //let pos = createVector(random(width), random(height), random(-depth/2, depth/2)); // Uncomment and comment next line to create boids at random position

  let pos = createVector(0, 0, 0); // Create a boid at the center of space

  let vel = p5.Vector.random3D().mult(random(0.5, 3)); // Give a random velocity

  let boid = new Boid(pos, vel); // Create a new boid

  flock.push(boid); // Add the new boid to the flock

}

​

// Canvas Donwload to make the gif

// Taken from Jose Quintana: https://codepen.io/joseluisq/pen/mnkLu

function download(canvas, filename) {

  /// create an "off-screen" anchor tag

  var lnk = document.createElement('a'), e;

​

  /// the key here is to set the download attribute of the a tag

  lnk.download = filename;

​

  /// convert canvas content to data-uri for link. When download

  /// attribute is set the content pointed to by link will be

  /// pushed as "download" in HTML5 capable browsers

  lnk.href = canvas.toDataURL("image/png;base64");

​

  /// create a "fake" click-event to trigger the download

  if (document.createEvent) {

    e = document.createEvent("MouseEvents");

    e.initMouseEvent("click", true, true, window,

                     0, 0, 0, 0, 0, false, false, false,

                     false, 0, null);

​

    lnk.dispatchEvent(e);

  } else if (lnk.fireEvent) {

    lnk.fireEvent("onclick");

  }

}