let font;  // Font used for rendering the text

let points = [];  // Array to store points representing the text outline

let whiteDots = [];  // Array to hold WhiteDot objects that form the text

let formingText = false;  // Boolean to track if the text is forming or dots are scattered

let buttons = [];  // Array to store buttons that trigger text formation or reset

let stars = [];  // Array to store background stars

const numStars = 900;  // Number of stars in the background

let shootingStar;  // Object for the shooting star

const dotSize = 5;  // Constant for the size of white dots forming the text

​

function preload() {

  // Preload the custom font before setup

  font = loadFont('Mukta-SemiBold.ttf');

}

​

function setup() {

  createCanvas(500, 500);  // Create a 500x500 canvas

  background(0);  // Set background color to black

  textSize(128);  // Set text size

​

  // Create buttons for interacting with the text and store them in an array

  buttons.push(new Button("Click on Me", width / 2 - 50, height - 50, 100, 30, () => formingText = true));  // Button for forming text

  buttons.push(new Button("Reset Dots", width / 2 - 50, height - 90, 100, 30, resetDots));  // Button for resetting the dots

​

  // Convert the text 'stars' into points to represent its shape

  let bounds = font.textBounds('stars', 0, 0, 192);  // Get bounds for centering

  points = font.textToPoints('stars', (width - bounds.w) / 2, (height + bounds.h) / 2, 192, {

    sampleFactor: 0.25,  // Controls smoothness

    simplifyThreshold: 0  // Ensures detailed points

  });

​

  // Create WhiteDot objects from the points and store them in an array

  points.forEach(point => {

    whiteDots.push(new WhiteDot(point.x, point.y));  // Create a white dot at each point

  });

​

  // Scatter the dots randomly across the canvas

  scatterDots(500, 500);  // Call scatterDots with canvas size

​

  // Initialize stars in the background and the shooting star

  setupStars();

  shootingStar = new ShootingStar();  // Initialize the shooting star

}

​

function draw() {

  background(0);  // Clear the canvas and set background to black for every frame

​

  // Draw the background stars and the shooting star

  drawStars();

​

  // Move and display the shooting star with a trail effect

  shootingStar.move();  // Move the shooting star

  shootingStar.display();  // Draw the shooting star and its trail

​

  // Update and display each white dot forming the text

  whiteDots.forEach(dot => {

    dot.moveTowardText(formingText);  // If formingText is true, move dots toward the text shape

    dot.display(dotSize);  // Draw each white dot

  });

​

  // Display each button on the screen

  buttons.forEach(button => {

    button.display();

  });

}

​

// Function to scatter the white dots randomly across the canvas

function scatterDots(canvasWidth, canvasHeight) {

  whiteDots.forEach(dot => {

    dot.currentX = random(canvasWidth);  // Set random x position within canvas width

    dot.currentY = random(canvasHeight);  // Set random y position within canvas height

  });

}

​

// Function to reset the white dots and stop forming the text

function resetDots() {

  formingText = false;  // Stop forming the text

  scatterDots(500, 500);  // Scatter the dots randomly across the canvas again

}

​

// Detect mouse presses and trigger button actions

function mousePressed() {

  buttons.forEach(button => {

    if (button.isClicked(mouseX, mouseY)) {  // Check if the button is clicked

      button.action();  // Execute the action tied to the button

    }

  });

}

​

// Function to initialize stars in the background

function setupStars() {

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

    stars.push(new Star(random(width), random(height)));  // Create stars at random positions

  }

}

​

// Function to draw the stars in the background

function drawStars() {

  stars.forEach(star => {

    star.shake();  // Make the stars shake slightly

    star.display();  // Display each star

  });

}

​

​