let positionInfo = containerDiv.getBoundingClientRect();

let divHeight = positionInfo.height;

let divWidth = positionInfo.width;

​

containerDiv.style.height = `${window.innerHeight}px`;

​

p5.disableFriendlyErrors = true;

let img;

let sound;

let particles = [];

let comPosition = { x: 0, y: 0 }; // Center of Mass position

let cols = 20; // Number of columns

let rows = 20; // Number of rows

let pieceWidth, pieceHeight;

let engine, world;

let trajectory = [];

let goBanged = false;

​

function preload() {

​

  sound = loadSound("/cracker_sound.mp3");

    img = loadImage("");

}

​

function setup() {

  let cnv = createCanvas(divWidth, window.innerHeight);

  cnv.style("display", "flex");

  cnv.style("border-radius", "20px");

  cnv.parent("sketch-holder");

​

  // Set up the Matter.js engine and world

  engine = Matter.Engine.create();

  world = engine.world;

​

  // Gravity settings

  engine.world.gravity.x = 0.025;

  engine.world.gravity.y = 0.05;

​

  pieceWidth = img.width / cols;

  pieceHeight = img.height / rows;

​

  // Create particles for each image piece

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

    for (let j = 0; j < rows; j++) {

      let x = i * pieceWidth + pieceWidth / 2 - 80;

      let y = j * pieceHeight + pieceHeight / 2 + height;

      let p = new Particle(x, y, pieceWidth, pieceHeight, i, j);

      particles.push(p);

    }

  }

​

  Matter.Engine.run(engine);

}

​

function draw() {

  background("#112");

​

  // Show each particle (image piece)

  for (let particle of particles) {

    particle.show();

  }

​

  // Calculate Center of Mass

  calculateCenterOfMass();

​

  trajectory.push({ x: comPosition.x - 28, y: comPosition.y + 17 });

  for (let point of trajectory) {

    fill(205, 120, 200);

    ellipse(point.x, point.y, 10);

  }

​

  // Draw the Center of Mass

  noStroke();

  fill(25, 120, 200); // Red color for the COM

  ellipse(comPosition.x - 28, comPosition.y + 17, 20); // Large dot for COM

}

​

function mousePressed() {}

​

function explodeCracker() {

  let array_size = particles.length - 1;

  if (!sound.isPlaying()) {

    sound.play();

  }

  for (let i = array_size; i > -1; i--) {

    for (let j = i - 1; j > -1; j--) {

      let force_x = random(-0.0000002, 0.00005);

      let force_y = random(-0.0000002, 0.00005);

      let force_plus = Matter.Vector.create(force_x, force_y);

      let force_minus = Matter.Vector.create(-force_x, -force_y);

      Matter.Body.applyForce(

        particles[i].body,

        particles[i].body.position,

        force_plus

      );

      Matter.Body.applyForce(

        particles[j].body,

        particles[j].body.position,

        force_minus

      );

    }

  }

}

​

function calculateCenterOfMass() {

  let totalMass = 0;

  let comX = 0;

  let comY = 0;

​

  for (let p of particles) {

    totalMass += p.mass;

    comX += p.x * p.mass;

    comY += p.y * p.mass;

  }

​

  if (totalMass > 0) {

    comPosition.x = comX / totalMass;

    comPosition.y = comY / totalMass;

  }

}

​

// Particle class using Matter.js physics

class Particle {

  constructor(x, y, w, h, col, row) {

    this.w = w;

    this.h = h;

    this.col = col;

    this.row = row;

    this.x = x;

    this.y = y;

    // Create a physical body for the particle

    this.body = Matter.Bodies.rectangle(

      x,

      y,

      w,

      h,

      {

        mass: random(0.001, 0.1),

      },

      {

        restitution: 1.0,

      }

    );

    this.mass = this.body.mass;

    this.body.angle = 0.0;

    //Matter.Body.setAngularVelocity(this.body, 0.05);

    Matter.Body.setVelocity(this.body, { x: 4, y: -9 });

    Matter.World.add(world, this.body);

  }

​

  explode() {

    // Apply a random burst force in a random direction

    let force = Matter.Vector.create(

      random(-0.0025, 0.0025),

      random(-0.0025, 0.0025)

    );

    Matter.Body.applyForce(this.body, this.body.position, force);

  }

​

  show() {

    // Get the position and angle from Matter.js physics engine

    let pos = this.body.position;

    let angle = this.body.angle;

    this.x = pos.x;

    this.y = pos.y;

    push();

    translate(pos.x, pos.y);

    rotate(angle);

​

    // Draw the image piece based on the particle's position and angle

    let sx = this.col * this.w;

    let sy = this.row * this.h;

    imageMode(CENTER);

    image(img, 0, 0, this.w, this.h, sx, sy, this.w, this.h);

​

    pop();

  }

}

​

let btnGoBang = document.getElementById("gobang");

btnGoBang.addEventListener("click", (e) => {

  if (!goBanged) {

    e.preventDefault();

    explodeCracker();

    goBanged = true;

  }

});

​