// Global variables
    let bodies = [];
    let shapes = [];
    let currentShape = 0;
    let nextShape = 1;
    let transition = 0;
    let trails = [[], [], []]; // Store trail history for each body
    const maxTrailLength = 400; // Length of visible trails
    const transitionSpeed = 0.0004; // Much slower transitions to see orbits develop
    const G = 10; // Simplified gravitational constant
    const dt = 0.0008; // Time step
    const scale = 130; // Scale for visualization
    const maxRadius = 2.5; // Maximum allowed radius from center

    function setup() {
      createCanvas(800, 600);
      
    
      shapes = [
        // Original Shape 0: Figure-eight inspired
        [
          { pos: createVector(-1, 0), vel: createVector(0, 0.5) },
          { pos: createVector(1, 0), vel: createVector(0, -0.5) },
          { pos: createVector(0, 0), vel: createVector(0.5, 0) }
        ],
        // Original Shape 1: Equilateral triangle
        [
          { pos: createVector(-1, -0.577), vel: createVector(0, 0.5) },
          { pos: createVector(1, -0.577), vel: createVector(0, 0.5) },
          { pos: createVector(0, 1), vel: createVector(0, -1) }
        ],
        // Original Shape 2: Linear arrangement
        [
          { pos: createVector(-1.5, 0), vel: createVector(0, 0.4) },
          { pos: createVector(0, 0), vel: createVector(0, 0) },
          { pos: createVector(1.5, 0), vel: createVector(0, -0.4) }
        ],
        // Original Shape 3: Tight triangle
        [
          { pos: createVector(-0.5, -0.289), vel: createVector(0, 0.3) },
          { pos: createVector(0.5, -0.289), vel: createVector(0, 0.3) },
          { pos: createVector(0, 0.577), vel: createVector(0, -0.6) }
        ],
        // Original Shape 4: Wide figure-eight
        [
          { pos: createVector(-1.5, 0), vel: createVector(0, 0.6) },
          { pos: createVector(1.5, 0), vel: createVector(0, -0.6) },
          { pos: createVector(0, 0.5), vel: createVector(0.6, 0) }
        ],
        // Original Shape 5: Scalene triangle
        [
          { pos: createVector(-1, -0.3), vel: createVector(0, 0.4) },
          { pos: createVector(0.8, -0.2), vel: createVector(0, 0.4) },
          { pos: createVector(0, 0.8), vel: createVector(0, -0.8) }
        ],
        // Original Shape 6: Offset figure-eight
        [
          { pos: createVector(-1.2, 0.2), vel: createVector(0, 0.5) },
          { pos: createVector(1.2, 0.2), vel: createVector(0, -0.5) },
          { pos: createVector(0, -0.4), vel: createVector(0.5, 0) }
        ],
        // Original Shape 7: Isosceles triangle
        [
          { pos: createVector(-0.8, -0.4), vel: createVector(0, 0.5) },
          { pos: createVector(0.8, -0.4), vel: createVector(0, 0.5) },
          { pos: createVector(0, 0.8), vel: createVector(0, -1) }
        ],
        // Original Shape 8: Vertical alignment
        [
          { pos: createVector(0, -1), vel: createVector(0.4, 0) },
          { pos: createVector(0, 0), vel: createVector(0, 0) },
          { pos: createVector(0, 1), vel: createVector(-0.4, 0) }
        ],
        // Original Shape 9: Wide triangle
        [
          { pos: createVector(-1.2, -0.7), vel: createVector(0, 0.6) },
          { pos: createVector(1.2, -0.7), vel: createVector(0, 0.6) },
          { pos: createVector(0, 1.4), vel: createVector(0, -1.2) }
        ],
        // New Shape 10: Butterfly I inspired
        [
          { pos: createVector(-1, 0), vel: createVector(0, 0.4) },
          { pos: createVector(1, 0), vel: createVector(0, -0.4) },
          { pos: createVector(0, 0.5), vel: createVector(0.5, 0) }
        ],
        // New Shape 11: Butterfly II inspired
        [
          { pos: createVector(-1.1, 0.1), vel: createVector(0.1, 0.5) },
          { pos: createVector(1.1, 0.1), vel: createVector(-0.1, -0.5) },
          { pos: createVector(0, -0.5), vel: createVector(0.4, 0) }
        ],
        // New Shape 12: Dragonfly inspired
        [
          { pos: createVector(-1.3, 0), vel: createVector(0, 0.6) },
          { pos: createVector(1.3, 0), vel: createVector(0, -0.6) },
          { pos: createVector(0, 0.3), vel: createVector(0.5, 0) }
        ],
        // New Shape 13: Yin-Yang I inspired
        [
          { pos: createVector(-0.9, -0.5), vel: createVector(0.2, 0.4) },
          { pos: createVector(0.9, -0.5), vel: createVector(-0.2, 0.4) },
          { pos: createVector(0, 1.0), vel: createVector(0, -0.8) }
        ],
        // New Shape 14: Moth I inspired
        [
          { pos: createVector(-1.0, -0.2), vel: createVector(0, 0.3) },
          { pos: createVector(1.0, -0.2), vel: createVector(0, 0.3) },
          { pos: createVector(0, 0.6), vel: createVector(0, -0.6) }
        ],
        // New Shape 15: Butterfly III inspired
        [
          { pos: createVector(-1.4, 0.2), vel: createVector(0.1, 0.5) },
          { pos: createVector(1.4, 0.2), vel: createVector(-0.1, -0.5) },
          { pos: createVector(0, -0.6), vel: createVector(0.6, 0) }
        ],
        // New Shape 16: Moth III inspired
        [
          { pos: createVector(-0.6, -0.3), vel: createVector(0, 0.4) },
          { pos: createVector(0.6, -0.3), vel: createVector(0, 0.4) },
          { pos: createVector(0, 0.7), vel: createVector(0, -0.8) }
        ],
        // New Shape 17: Yarn inspired
        [
          { pos: createVector(-1.5, -0.1), vel: createVector(0, 0.5) },
          { pos: createVector(1.5, -0.1), vel: createVector(0, -0.5) },
          { pos: createVector(0, 0.4), vel: createVector(0.5, 0) }
        ],
        // New Shape 18: Yin-Yang II inspired
        [
          { pos: createVector(-1.0, -0.6), vel: createVector(0.3, 0.5) },
          { pos: createVector(1.0, -0.6), vel: createVector(-0.3, 0.5) },
          { pos: createVector(0, 1.2), vel: createVector(0, -1.0) }
        ],
        // New Shape 19: Cloverleaf inspired
        [
          { pos: createVector(-1.2, -0.4), vel: createVector(0, 0.4) },
          { pos: createVector(1.2, -0.4), vel: createVector(0, 0.4) },
          { pos: createVector(0, 0.8), vel: createVector(0, -0.8) }
        ],
        // New Shape 20: Goggles inspired
        [
          { pos: createVector(-1.1, 0), vel: createVector(0, 0.5) },
          { pos: createVector(1.1, 0), vel: createVector(0, -0.5) },
          { pos: createVector(0, 0.2), vel: createVector(0.4, 0) }
        ],
        // New Shape 21: Broucke inspired
        [
          { pos: createVector(-1.3, 0.3), vel: createVector(0.2, 0.4) },
          { pos: createVector(1.3, 0.3), vel: createVector(-0.2, -0.4) },
          { pos: createVector(0, -0.6), vel: createVector(0.5, 0) }
        ],
        // New Shape 22: Hénon inspired
        [
          { pos: createVector(-0.8, -0.5), vel: createVector(0, 0.6) },
          { pos: createVector(0.8, -0.5), vel: createVector(0, 0.6) },
          { pos: createVector(0, 1.0), vel: createVector(0, -1.2) }
        ],
        // New Shape 23: Circular orbit inspired
        [
          { pos: createVector(-1, 0), vel: createVector(0, 0.577) },
          { pos: createVector(0.5, 0.866), vel: createVector(-0.5, -0.289) },
          { pos: createVector(0.5, -0.866), vel: createVector(0.5, -0.289) }
        ],
        // New Shape 24: Collinear Euler 1 inspired
        [
          { pos: createVector(-1.5, 0), vel: createVector(0, 0) },
          { pos: createVector(0, 0), vel: createVector(0, 0) },
          { pos: createVector(1.5, 0), vel: createVector(0, 0) }
        ],
        // New Shape 25: Collinear Euler 2 inspired
        [
          { pos: createVector(-1.2, 0), vel: createVector(0, 0) },
          { pos: createVector(-0.3, 0), vel: createVector(0, 0) },
          { pos: createVector(1.5, 0), vel: createVector(0, 0) }
        ],
        // New Shape 26: Collinear Euler 3 inspired
        [
          { pos: createVector(-1.0, 0), vel: createVector(0, 0) },
          { pos: createVector(0.5, 0), vel: createVector(0, 0) },
          { pos: createVector(1.5, 0), vel: createVector(0, 0) }
        ],
        // New Shape 27: Halo orbit inspired
        [
          { pos: createVector(-0.8, -0.2), vel: createVector(0.1, 0.3) },
          { pos: createVector(0.8, -0.2), vel: createVector(-0.1, 0.3) },
          { pos: createVector(0, 0.5), vel: createVector(0, -0.6) }
        ],
        // New Shape 28: Lyapunov orbit inspired
        [
          { pos: createVector(-1.0, 0.1), vel: createVector(0, 0.4) },
          { pos: createVector(1.0, 0.1), vel: createVector(0, -0.4) },
          { pos: createVector(0, -0.3), vel: createVector(0.4, 0) }
        ],
        // New Shape 29: Pretzel inspired
        [
          { pos: createVector(-1.4, 0), vel: createVector(0, 0.5) },
          { pos: createVector(1.4, 0), vel: createVector(0, -0.5) },
          { pos: createVector(0, 0.4), vel: createVector(0.5, 0) }
        ],
        // NEW RANDOM Shape 30: Asymmetric spiral
        [
          { pos: createVector(-1.3, -0.8), vel: createVector(0.3, 0.6) },
          { pos: createVector(0.7, 0.9), vel: createVector(-0.4, -0.3) },
          { pos: createVector(0.6, -0.4), vel: createVector(0.2, 0.5) }
        ],
        // NEW RANDOM Shape 31: Chaotic triangle
        [
          { pos: createVector(-1.6, 0.3), vel: createVector(0.1, 0.7) },
          { pos: createVector(1.4, -0.5), vel: createVector(-0.3, 0.4) },
          { pos: createVector(0.2, 1.1), vel: createVector(0.4, -0.9) }
        ],
        // NEW RANDOM Shape 32: Offset orbit
        [
          { pos: createVector(-0.7, 1.2), vel: createVector(0.5, -0.2) },
          { pos: createVector(1.3, -0.3), vel: createVector(-0.6, 0.5) },
          { pos: createVector(-0.4, -0.9), vel: createVector(0.3, 0.4) }
        ],
        // NEW RANDOM Shape 33: Wild dance
        [
          { pos: createVector(-1.1, -1.0), vel: createVector(0.6, 0.3) },
          { pos: createVector(0.9, 0.8), vel: createVector(-0.2, -0.6) },
          { pos: createVector(0.3, 0.2), vel: createVector(0.4, 0.5) }
        ],
        // NEW RANDOM Shape 34: Eccentric orbit
        [
          { pos: createVector(-1.5, 0.6), vel: createVector(0.2, 0.5) },
          { pos: createVector(1.2, 0.4), vel: createVector(-0.5, -0.4) },
          { pos: createVector(0.1, -1.0), vel: createVector(0.6, 0.3) }
        ],
        // NEW RANDOM Shape 35: Twisted path
        [
          { pos: createVector(-0.9, -0.7), vel: createVector(0.4, 0.7) },
          { pos: createVector(1.1, 0.5), vel: createVector(-0.3, -0.5) },
          { pos: createVector(-0.2, 0.9), vel: createVector(0.5, -0.4) }
        ],
        // NEW RANDOM Shape 36: Diagonal sweep
        [
          { pos: createVector(-1.4, -0.9), vel: createVector(0.5, 0.5) },
          { pos: createVector(0.8, 1.0), vel: createVector(-0.4, -0.6) },
          { pos: createVector(0.5, -0.3), vel: createVector(0.3, 0.6) }
        ],
        // NEW RANDOM Shape 37: Random chaos
        [
          { pos: createVector(-1.0, 0.8), vel: createVector(0.6, -0.3) },
          { pos: createVector(1.3, -0.7), vel: createVector(-0.5, 0.6) },
          { pos: createVector(-0.5, -0.2), vel: createVector(0.4, 0.4) }
        ],
        // NEW RANDOM Shape 38: Scattered formation
        [
          { pos: createVector(-1.2, 1.1), vel: createVector(0.3, -0.5) },
          { pos: createVector(1.5, 0.2), vel: createVector(-0.6, 0.3) },
          { pos: createVector(-0.3, -1.2), vel: createVector(0.5, 0.7) }
        ],
        // NEW RANDOM Shape 39: Extreme orbit
        [
          { pos: createVector(-1.6, -0.4), vel: createVector(0.7, 0.4) },
          { pos: createVector(0.9, 1.2), vel: createVector(-0.3, -0.7) },
          { pos: createVector(0.4, -0.8), vel: createVector(0.5, 0.6) }
        ],
        // NEW FLOWER Shape 40: Petal Dance
        [
          { pos: createVector(-0.7, -0.7), vel: createVector(0.3, 0.5) },
          { pos: createVector(0.7, -0.7), vel: createVector(-0.3, 0.5) },
          { pos: createVector(0, 1.0), vel: createVector(0, -0.7) }
        ],
        // NEW FLOWER Shape 41: Rose Spiral
        [
          { pos: createVector(-1.0, 0.3), vel: createVector(0.4, 0.3) },
          { pos: createVector(0.5, -0.9), vel: createVector(-0.2, 0.6) },
          { pos: createVector(0.5, 0.6), vel: createVector(-0.3, -0.5) }
        ],
        // NEW FLOWER Shape 42: Lotus Bloom
        [
          { pos: createVector(-0.6, 0), vel: createVector(0.2, 0.6) },
          { pos: createVector(0.6, 0), vel: createVector(-0.2, 0.6) },
          { pos: createVector(0, -0.8), vel: createVector(0, -0.8) }
        ],
        // NEW CALLIGRAPHY Shape 43: Brush Stroke Flow
        [
          { pos: createVector(-1.2, 0.5), vel: createVector(0.5, 0.2) },
          { pos: createVector(0, -0.8), vel: createVector(0, 0.7) },
          { pos: createVector(1.2, 0.3), vel: createVector(-0.5, 0.3) }
        ],
        // NEW FLOWER Shape 44: Orchid Grace
        [
          { pos: createVector(-0.8, 0.6), vel: createVector(0.3, -0.4) },
          { pos: createVector(0.8, 0.6), vel: createVector(-0.3, -0.4) },
          { pos: createVector(0, -0.9), vel: createVector(0, 0.8) }
        ],
        // NEW CALLIGRAPHY Shape 45: Zen Circle
        [
          { pos: createVector(-0.9, 0), vel: createVector(0, 0.6) },
          { pos: createVector(0.45, 0.78), vel: createVector(-0.52, -0.3) },
          { pos: createVector(0.45, -0.78), vel: createVector(0.52, -0.3) }
        ],
        // NEW FLOWER Shape 46: Tulip Sway
        [
          { pos: createVector(-0.5, -0.8), vel: createVector(0.2, 0.6) },
          { pos: createVector(0.5, -0.8), vel: createVector(-0.2, 0.6) },
          { pos: createVector(0, 0.9), vel: createVector(0, -0.9) }
        ],
        // NEW CALLIGRAPHY Shape 47: Dragon Curve
        [
          { pos: createVector(-1.3, -0.3), vel: createVector(0.6, 0.4) },
          { pos: createVector(0.4, 1.0), vel: createVector(-0.3, -0.6) },
          { pos: createVector(0.9, -0.7), vel: createVector(-0.4, 0.5) }
        ],
        // NEW FLOWER Shape 48: Cherry Blossom
        [
          { pos: createVector(-0.7, 0.4), vel: createVector(0.4, 0.3) },
          { pos: createVector(0.7, 0.4), vel: createVector(-0.4, 0.3) },
          { pos: createVector(0, -0.7), vel: createVector(0, -0.6) }
        ],
        // NEW CALLIGRAPHY Shape 49: Infinity Flow
        [
          { pos: createVector(-1.1, 0), vel: createVector(0, 0.5) },
          { pos: createVector(1.1, 0), vel: createVector(0, -0.5) },
          { pos: createVector(0, 0), vel: createVector(0.6, 0) }
        ]
      ];

      // Initialize bodies with the first shape
      for (let i = 0; i < 3; i++) {
        bodies.push({
          pos: shapes[0][i].pos.copy(),
          vel: shapes[0][i].vel.copy(),
          acc: createVector(0, 0),
          mass: 1
        });
      }
    }

    function draw() {
      background(0, 0, 0, 30); // Fading background for trail effect
      translate(width / 2, height / 2);

      // Update positions and velocities
      updateBodies();
      
      // Constrain bodies to stay within circular boundary
      for (let body of bodies) {
        let dist = body.pos.mag();
        if (dist > maxRadius) {
          // Bounce off circular boundary
          body.pos.normalize();
          body.pos.mult(maxRadius);
          
          // Reflect velocity
          let normal = body.pos.copy().normalize();
          let dotProduct = body.vel.dot(normal);
          let reflection = p5.Vector.mult(normal, 2 * dotProduct);
          body.vel.sub(reflection);
          body.vel.mult(0.9); // Dampen velocity on bounce
        }
      }

      // Draw circular boundary
      noFill();
      stroke(100, 100, 100, 100);
      strokeWeight(2);
      //circle(0, 0, maxRadius * 2 * scale);

      // Store positions in trails
      for (let i = 0; i < bodies.length; i++) {
        trails[i].push(bodies[i].pos.copy());
        if (trails[i].length > maxTrailLength) {
          trails[i].shift();
        }
      }

      // Draw trails with colors
      const colors = [
        [255, 100, 100], // Red for body 1
        [100, 255, 100], // Green for body 2
        [100, 100, 255]  // Blue for body 3
      ];

      for (let i = 0; i < trails.length; i++) {
        noFill();
        stroke(colors[i][0], colors[i][1], colors[i][2], 150);
        strokeWeight(2);
        beginShape();
        for (let pos of trails[i]) {
          vertex(pos.x * scale, pos.y * scale);
        }
        endShape();
      }

      // Draw bodies with colors
      for (let i = 0; i < bodies.length; i++) {
        fill(colors[i][0], colors[i][1], colors[i][2]);
        noStroke();
        circle(bodies[i].pos.x * scale, bodies[i].pos.y * scale, 12);
        
        // Add a white center glow
        fill(255, 200);
        circle(bodies[i].pos.x * scale, bodies[i].pos.y * scale, 6);
      }

      // Update transition between shapes
      transition += transitionSpeed;
      if (transition >= 1) {
        transition = 0;
        currentShape = (currentShape + 1) % shapes.length;
        nextShape = (currentShape + 1) % shapes.length;
        // Clear trails when transitioning to new shape
        trails = [[], [], []];
      }
      
      // Display current shape name
      fill(255);
      noStroke();
      textAlign(LEFT, TOP);
      textSize(16);
      text(`Configuration ${currentShape + 1}/${shapes.length}`, -width/2 + 10, -height/2 + 10);
    }

    function updateBodies() {
      // Only interpolate during the first part of transition
      if (transition < 0.1) {
        let t = transition / 0.1; // Normalize to 0-1 for first 10%
        for (let i = 0; i < bodies.length; i++) {
          let currentPos = shapes[currentShape][i].pos;
          let nextPos = shapes[nextShape][i].pos;
          let currentVel = shapes[currentShape][i].vel;
          let nextVel = shapes[nextShape][i].vel;

          bodies[i].pos = p5.Vector.lerp(currentPos, nextPos, t);
          bodies[i].vel = p5.Vector.lerp(currentVel, nextVel, t);
        }
      } else {
        // Let physics take over for 90% of the time
        // Calculate gravitational forces
        for (let i = 0; i < bodies.length; i++) {
          bodies[i].acc.set(0, 0);
          for (let j = 0; j < bodies.length; j++) {
            if (i !== j) {
              let r = p5.Vector.sub(bodies[j].pos, bodies[i].pos);
              let dist = r.mag();
              if (dist > 0.01) {
                let force = G * bodies[i].mass * bodies[j].mass / (dist * dist);
                r.normalize();
                r.mult(force / bodies[i].mass);
                bodies[i].acc.add(r);
              }
            }
          }
        }

        // Update velocities and positions
        for (let body of bodies) {
          body.vel.add(p5.Vector.mult(body.acc, dt));
          body.pos.add(p5.Vector.mult(body.vel, dt));
        }
      }
    }