// Constructor to initialize a Bitty object with position, size, color, angle, and static properties

  constructor(position, size, c, angle, isStatic) {

    this.size = size; // Size of the Bitty object (used for the radius of the circle)

    this.color = c; // Color of the Bitty object

    // Create a Matter.js circle body with the given position and size

    this.body = Bodies.circle(position.x, position.y, size.x);

    this.body.isStatic = isStatic; // Set whether the body is static or dynamic

    Composite.add(engine.world, this.body); // Add the body to the Matter.js world

  }

  // Method to update the state of the Bitty object based on mouse interaction

  update() {

    let mou = new p5.Vector(mouseX, mouseY); // Create a vector for the mouse position

    let pos = new p5.Vector(this.body.position.x, this.body.position.y); // Create a vector for the body's position

    let d = mou.dist(pos); // Calculate the distance between the mouse and the body

    // If the mouse is close to the body, make it dynamic (not static)

    if (d < this.size.x * 4) {

      this.body.isStatic = false;

    }

  }

  // Method to display the Bitty object on the canvas

  display() {

    let position = this.body.position; // Get the current position of the body

    let angle = this.body.angle; // Get the current angle of the body

    noStroke();

    ellipseMode(CENTER); // Set ellipse mode to CENTER (for drawing centered ellipses)

    push(); // Save the current drawing state

    translate(position.x, position.y); // Move the origin to the body's position

    fill(this.color); // Set the fill color to the body's color

    rotate(angle); // Rotate the drawing context by the body's angle

    ellipse(0, 0, this.size.x * 2, this.size.y * 2); // Draw an ellipse (circle) representing the body

    pop(); // Restore the previous drawing state

  }

}

​

// Initialize Matter.js variables

let Engine = Matter.Engine,

    Runner = Matter.Runner,

    Bodies = Matter.Bodies,

    Composite = Matter.Composite;

​

// Create a Matter.js engine

let engine = Engine.create();

​

// Create a Matter.js runner

let runner = Runner.create();

​

// Run the Matter.js engine using the runner

Runner.run(runner, engine);

​

let gravity = new p5.Vector(0, 0.2); // Set gravity vector (used if necessary)

​

let dots = []; // Array to store all Bitty objects

​

let font;

​

function preload() {

  font = loadFont('hershey_futura.otf');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); // Create a full-window canvas

  background(255)

  getText();

}

​

function draw() {

  background(255); // Set background color to light gray

  // Loop through all Bitty objects and update and display them

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

    dots[i].display(); // Display the Bitty object

    dots[i].update(); // Update the Bitty object based on mouse interaction

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  console.log(width);

  background(255);

  dots = [];

  Composite.clear(engine.world, false);

  console.log(dots.length);

  getText();

}

​

function keyPressed() {

  getText();

}

​

function getText() {

  background(255); // Set background color to white

  textSize(240); // Set text size

  textAlign(LEFT, TOP); // Set text alignment to top-left

  textWrap(WORD); // Enable text wrapping

  textFont(font);

  let txt;

  if (width > 800) {

    txt = "Jean Y. Kim"

    //dia = 4;

  } else {

    txt = "JYK";

  }

  text(txt, 20, -100, width); // Display the word "elephant" on the canvas

  let gap = 4; // Set gap between Bitty objects

  // Loop through the canvas to create Bitty objects based on the brightness of the text

  for (let y = 0; y < height; y = y + gap * 2) {

    for (let x = 0; x < width; x = x + gap * 2) {

      let c = get(x, y); // Get the color at the current position

      let b = brightness(c); // Get the brightness of the color

      if (b == 0) { // If the brightness is 0 (i.e., black pixel)

        dots.push(

          new Bitty(

            new p5.Vector(x, y), // Position of the Bitty object

            new p5.Vector(gap, gap), // Size of the Bitty object

            "#ffcc00", // Random color from the palette

            random(0, 360), // Random angle (not used in this version)

            true // Make the Bitty object static initially

          )

        );

      }

    }

  }

​

  // Create a ground body at the bottom of the canvas

  let ground = Bodies.rectangle(width / 2, height, width, 20, { isStatic: true });

​

  // Create wall bodies on the left and right edges of the canvas

  let wall1 = Bodies.rectangle(0, height / 2, 10, height, { isStatic: true });

  let wall2 = Bodies.rectangle(width - 10, height / 2, 10, height, { isStatic: true });

​

  // Add the ground and wall bodies to the Matter.js world

  Composite.add(engine.world, ground);

  Composite.add(engine.world, wall1);

  Composite.add(engine.world, wall2);

}

​