let caterpillarParticles = [];

let cocoonParticles = [];

let butterflyParticles = [];

let t = 0;

​

function setup() {

  createCanvas(800, 800);

  angleMode(DEGREES);

  noFill();

  // Caterpillar initialization

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

    caterpillarParticles.push(new Particle(random(width), random(height/2 + 100)));

  }

}

​

function draw() {

  background(20, 25, 35);

  if (stage === 0) {

    drawCaterpillarStage();

  } else if (stage === 1) {

    drawCocoonStage();

  } else if (stage === 2) {

    drawButterflyStage();

  }

}

​

// Caterpillar Stage

function drawCaterpillarStage() {

  stroke(100, 255, 100);

  for (let p of caterpillarParticles) {

    p.moveCaterpillar();

    p.display();

  }

  // Trigger to change to the next stage

  if (frameCount > 300) { 

    stage = 1;

    // Cocoon transition

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

      cocoonParticles.push(new Particle(random(width/2 - 50, width/2 + 50), random(height/2 - 50, height/2 + 50)));

    }

  }

}

​

// Cocoon Stage

function drawCocoonStage() {

  stroke(200, 100, 255);

  for (let p of cocoonParticles) {

    p.moveCocoon();

    p.display();

  }

  // Trigger to change to Butterfly stage

  if (frameCount > 600) {

    stage = 2;

    // Generate butterflies

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

      butterflyParticles.push(new Butterfly(width / 2, height / 2));

    }

  }

}

​

// Butterfly Stage

function drawButterflyStage() {

  for (let b of butterflyParticles) {

    b.display();

  }

}

​

// Particle Class

class Particle {

  constructor(x, y) {

    this.pos = createVector(x, y);

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

    this.acc = createVector(0, 0);

    this.maxSpeed = 2;

  }

  moveCaterpillar() {

    this.acc = p5.Vector.fromAngle(noise(this.pos.x * 0.01, this.pos.y * 0.01) * 360);

    this.acc.setMag(0.1);

    this.vel.add(this.acc);

    this.vel.limit(this.maxSpeed);

    this.pos.add(this.vel);

  }

  moveCocoon() {

    this.acc = createVector(0, 0);

    this.vel.mult(0.95); // Slowly stopping particles

    this.pos.add(this.vel);

  }

  display() {

    ellipse(this.pos.x, this.pos.y, 4);

  }

}

​

// Butterfly Class

class Butterfly {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.wings = [];

    this.createWings();

  }

  createWings() {

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

      this.wings.push(random(100, 200)); // Generate unique wing sizes

    }

  }

  display() {

    push();

    translate(this.x, this.y);

    stroke(255, random(150, 255), random(150, 255));

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

      beginShape();

      for (let angle = 0; angle < 360; angle += 5) {

        let radius = this.wings[i] * noise(angle * 0.05, i * 0.1 + frameCount * 0.01);

        let x = radius * cos(angle);

        let y = radius * sin(angle);

        vertex(x, y);

      }

      endShape(CLOSE);

    }

    pop();

  }

}

​