let numParticles = 100;

let shapeIndex = 0; // Current shape index

let shapePoints = []; // Array to hold shape points

let morphingDuration = 3000; // 3 seconds for morphing

let lastUpdateTime = 0; // Last time the shape was updated

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // Initialize particles

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

    particles.push(new Particle(random(width), random(height)));

  }

​

  // Define shape points for morphing shapes

  shapePoints.push(getCirclePoints());

  shapePoints.push(getSquarePoints());

  shapePoints.push(getTrianglePoints());

  shapePoints.push(getRectanglePoints());

}

​

function draw() {

  background(51);

​

  // Get the target shape points based on the shapeIndex

  let targetPoints = shapePoints[shapeIndex];

​

  // Update each particle to move toward the target points with flocking behavior

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

    particles[i].update(targetPoints[i]);

    particles[i].show();

  }

​

  // Check if the time elapsed is greater than the morphing duration

  if (millis() - lastUpdateTime > morphingDuration) {

    if (areParticlesClose(targetPoints)) {

      shapeIndex = (shapeIndex + 1) % shapePoints.length; // Cycle through shapes

      lastUpdateTime = millis(); // Reset the timer

    }

  }

}

​

function areParticlesClose(targetPoints) {

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

    let d = dist(particles[i].position.x, particles[i].position.y, targetPoints[i].x, targetPoints[i].y);

    if (d > 10) return false; // Allow some tolerance

  }

  return true; // All particles are close to their target points

}

​

function getCirclePoints() {

  let points = [];

  let radius = 100; // Radius of the circle

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

    let angle = map(i, 0, numParticles, 0, TWO_PI);

    let x = width / 2 + cos(angle) * radius;

    let y = height / 2 + sin(angle) * radius;

    points.push(createVector(x, y));

  }

  return points;

}

​

function getSquarePoints() {

  let points = [];

  let side = 150; // Side length of the square

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

    let x, y;

    if (i < numParticles / 4) { // Top side

      x = map(i, 0, numParticles / 4, width / 2 - side / 2, width / 2 + side / 2);

      y = height / 2 - side / 2;

    } else if (i < numParticles / 2) { // Right side

      x = width / 2 + side / 2;

      y = map(i, numParticles / 4, numParticles / 2, height / 2 - side / 2, height / 2 + side / 2);

    } else if (i < 3 * numParticles / 4) { // Bottom side

      x = map(i, numParticles / 2, 3 * numParticles / 4, width / 2 + side / 2, width / 2 - side / 2);

      y = height / 2 + side / 2;

    } else { // Left side

      x = width / 2 - side / 2;

      y = map(i, 3 * numParticles / 4, numParticles, height / 2 + side / 2, height / 2 - side / 2);

    }

    points.push(createVector(x, y));

  }

  return points;

}

​

function getTrianglePoints() {

  let points = [];

  let heightTri = 150; // Height of the triangle

  let widthTri = 150; // Width of the triangle

  let halfWidth = widthTri / 2;

​

  // Define the three vertices of the triangle

  const leftVertex = createVector(width / 2 - halfWidth, height / 2 + heightTri / 2); // Bottom left

  const rightVertex = createVector(width / 2 + halfWidth, height / 2 + heightTri / 2); // Bottom right

  const apexVertex = createVector(width / 2, height / 2 - (heightTri / 2)); // Apex

​

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

    let x, y;

    // Determine the section of the triangle we are in

    let section = Math.floor(map(i, 0, numParticles, 0, 3));

​

    if (section === 0) { // Bottom left edge

      // Interpolate between the left vertex and the apex

      x = map(i, 0, numParticles / 3, leftVertex.x, apexVertex.x);

      y = map(i, 0, numParticles / 3, leftVertex.y, apexVertex.y);

    } else if (section === 1) { // Bottom right edge

      // Interpolate between the right vertex and the apex

      x = map(i, numParticles / 3, 2 * numParticles / 3, rightVertex.x, apexVertex.x);

      y = map(i, numParticles / 3, 2 * numParticles / 3, rightVertex.y, apexVertex.y);

    } else { // Base of the triangle

      if (i < numParticles * (2 / 3)) { // Between left and right vertices

        x = map(i, 2 * numParticles / 3, numParticles, leftVertex.x, rightVertex.x);

        y = leftVertex.y; // Fixed at base height

      } else {

        // Additional handling if needed, currently just fills the base

        x = map(i, 2 * numParticles / 3, numParticles, leftVertex.x, rightVertex.x);

        y = leftVertex.y; // Fixed at base height

      }

    }

​

    points.push(createVector(x, y));

  }

  return points;

}

​

function getRectanglePoints() {

  let points = [];

  let widthRect = 200; // Width of the rectangle

  let heightRect = 100; // Height of the rectangle

  let leftX = width / 2 - widthRect / 2; // X position for the left edge

  let rightX = width / 2 + widthRect / 2; // X position for the right edge

  let topY = height / 2 - heightRect / 2; // Y position for the top edge

  let bottomY = height / 2 + heightRect / 2; // Y position for the bottom edge

​

  // Generate points for the rectangle

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

    let x, y;

​

    // Determine which side we are on

    if (i < numParticles / 4) { // Top side

      x = map(i, 0, numParticles / 4, leftX, rightX);

      y = topY;

    } else if (i < numParticles / 2) { // Right side

      x = rightX;

      y = map(i, numParticles / 4, numParticles / 2, topY, bottomY);

    } else if (i < (3 * numParticles) / 4) { // Bottom side

      x = map(i, numParticles / 2, (3 * numParticles) / 4, rightX, leftX);

      y = bottomY;

    } else { // Left side

      x = leftX;

      y = map(i, (3 * numParticles) / 4, numParticles, bottomY, topY);

    }

​

    points.push(createVector(x, y));

  }

  return points;

}

​

​

// Particle class

class Particle {

  constructor(x, y) {

    this.position = createVector(x, y);

    this.velocity = createVector(random(-1, 1), random(-1, 1));

    this.acceleration = createVector();

    this.size = 8;

    this.colors = [color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(255, 255, 0)]; // Different colors

    this.color = this.colors[shapeIndex]; // Set color based on shape index

  }

​

  update(target) {

    // Calculate flocking forces

    let cohesionForce = this.cohesion();

    let separationForce = this.separation();

    this.acceleration.add(cohesionForce);

    this.acceleration.add(separationForce);

    // Move towards target shape point

    let desired = p5.Vector.sub(target, this.position);

    desired.setMag(2); // Set maximum speed

    let steering = p5.Vector.sub(desired, this.velocity);

    steering.limit(0.5); // Increase steering limit for faster response

    this.acceleration.add(steering);

    // Update velocity and position

    this.velocity.add(this.acceleration);

    this.velocity.limit(4); // Limit maximum velocity

    this.position.add(this.velocity);

    this.acceleration.mult(0); // Reset acceleration

​

    // Update color based on shape index

    this.color = this.colors[shapeIndex];

  }

​

  show() {

    fill(this.color);

    noStroke();

    ellipse(this.position.x, this.position.y, this.size);

  }

​

  cohesion() {

    // Flocking cohesion behavior

    let perceptionRadius = 50;

    let total = 0;

    let steering = createVector();

​

    for (let other of particles) {

      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(0.1); // Control the cohesion strength

    }

​

    return steering;

  }

​

  separation() {

    // Flocking separation behavior

    let perceptionRadius = 25;

    let total = 0;

    let steering = createVector();

​

    for (let other of particles) {

      let d = dist(this.position.x, this.position.y, other.position.x, other.position.y);

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

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

        diff.normalize();

        diff.div(d); // Weight by distance

        steering.add(diff);

        total++;

      }

    }

​

    if (total > 0) {

      steering.div(total);

      steering.setMag(0.2); // Control the separation strength

    }

​

    return steering;

  }

}

​