A mathematician's dream ∫∫∫...

/* 

  Author: Juan Carlos Ponce Campuzano

  Date: 03/Dec/2024

  https://www.patreon.com/jcponce

  Inspired from Desmos reddit:

  https://www.reddit.com/r/desmos/comments/1h33pas/somebody_made_this_in_their_calculator_and_it/

*/

​

const flock = [];

​

let gui;

​

let params = {

  alignment: 1.5,

  cohesion: 1,

  separation: 2,

  slow: false

};

​

let boidImage;

​

function preload() {

  boidImage = loadImage("latex-integral-flocking.png"); // Replace with your image path

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // Remove the splash screen after preload

  const splash = document.getElementById('splash');

  splash.classList.add('hidden'); // Trigger fade-out animation

  setTimeout(() => {

    splash.remove(); // Completely remove the splash screen after animation

  }, 1000); // Match the duration of the fade-out animation

  // Initialize lil-gui

  gui = new lil.GUI();

  gui.add(params, 'alignment', 0, 2, 0.1).name('Alignment');

  gui.add(params, 'cohesion', 0, 2, 0.1).name('Cohesion');

  gui.add(params, 'separation', 0, 4, 0.1).name('Separation');

  gui.add(params, 'slow').name('Slow animation');

  gui.close();

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

    flock.push(new Boid());

  }

​

}

​

function draw() {

  background(255);

  if(params.slow){

    frameRate(40);

  } else frameRate(60);

  for (let boid of flock) {

    boid.edges();

    boid.flock(flock);

    boid.update();

    boid.render();

  }  

}

​

// Flocking

// Daniel Shiffman

// https://thecodingtrain.com/CodingChallenges/124-flocking-boids.html

// https://youtu.be/mhjuuHl6qHM

​

// This version by Juan Carlos Ponce Campuzano

// 03/Dec/2024

​

class Boid {

  constructor() {

    this.position = createVector(width / 2, height / 2);

    this.velocity = p5.Vector.random2D();

    this.velocity.setMag(random(1, 3));

    this.acceleration = createVector();

    this.maxForce = 0.2;

    this.maxSpeed = 5;

    this.r = 2;

  }

​

  edges() {

    if (this.position.x > width) {

      this.position.x = 0;

    } else if (this.position.x < 0) {

      this.position.x = width;

    }

    if (this.position.y > height) {

      this.position.y = 0;

    } else if (this.position.y < 0) {

      this.position.y = height;

    }

  }

​

  align(boids) {

    let perceptionRadius = 80;

    let steering = createVector();

    let total = 0;

    for (let other of boids) {

      let d = dist(

        this.position.x,

        this.position.y,

        other.position.x,

        other.position.y

      );

      if (other != this && d < perceptionRadius) {

        steering.add(other.velocity);

        total++;

      }

    }

    if (total > 0) {

      steering.div(total);

      steering.setMag(this.maxSpeed);

      steering.sub(this.velocity);

      steering.limit(this.maxForce);

    }

    return steering;

  }

​

  separation(boids) {

    let perceptionRadius = 74;

    let steering = createVector();

    let total = 0;

    for (let other of boids) {

      let d = dist(

        this.position.x,

        this.position.y,

        other.position.x,

        other.position.y

      );

      if (other != this && d < perceptionRadius && d > 0) {

        let diff = p5.Vector.sub(this.position, other.position);

        diff.div(d * d);

        steering.add(diff);

        total++;

      }

    }

    if (total > 0) {

      steering.div(total);

      steering.setMag(this.maxSpeed);

      steering.sub(this.velocity);

      steering.limit(this.maxForce);

    }

    return steering;

  }

​

  cohesion(boids) {

    let perceptionRadius = 60;

    let steering = createVector();

    let total = 0;

    for (let other of boids) {

      let d = dist(

        this.position.x,

        this.position.y,

        other.position.x,

        other.position.y

      );

      if (other != this && d < perceptionRadius) {

        steering.add(other.position);

        total++;

      }

    }

    if (total > 0) {

      steering.div(total);

      steering.sub(this.position);

      steering.setMag(this.maxSpeed);

      steering.sub(this.velocity);

      steering.limit(this.maxForce);

    }

    return steering;

  }

​

  flock(boids) {

    let alignment = this.align(boids);

    let cohesion = this.cohesion(boids);

    let separation = this.separation(boids);

​

    alignment.mult(params.alignment);

    cohesion.mult(params.cohesion);

    separation.mult(params.separation);

​

    this.acceleration.add(alignment);

    this.acceleration.add(cohesion);

    this.acceleration.add(separation);

  }

​

  update() {

    this.position.add(this.velocity);

    this.velocity.add(this.acceleration);

    this.velocity.limit(this.maxSpeed);

    this.acceleration.mult(0);

  }

​

  render() {

    push();

    translate(this.position.x, this.position.y);

    rotate(this.velocity.heading() + PI);

    imageMode(CENTER);

​

    // Set a fixed larger size for the image

    let size = 90; // Adjust this value to make the image larger

    image(boidImage, 0, 0, size, size);

    pop();

  }

}

​