let points;

let bounds;

let extraDots = []; // Array to store extra dots

let numExtraDots = 10000; // Number of extra dots to generate

let noiseOffsets = []; // Array to store noise offsets for text points

let extraNoiseOffsets = []; // Array to store noise offsets for extra dots

​

function preload() {

  // Load a font for the text

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

}

​

function setup() {

  createCanvas(500, 500);

  textSize(128);

  // Get bounds of the text for centering

  bounds = font.textBounds('amna', 0, 0, 192); // Calculate bounds with 0, 0 for now

  // Convert text to points and center the text

  let centerX = (width - bounds.w) / 2; // Center X based on width of canvas and text bounds

  let centerY = (height + bounds.h) / 2; // Center Y based on height of canvas and text bounds

  points = font.textToPoints('amna', centerX, centerY, 192, {

    sampleFactor: 0.5, // Increased to create a more detailed text shape

    simplifyThreshold: 0

  });

​

  // Generate noise offsets for each text point

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

    noiseOffsets.push({ x: random(1000), y: random(1000) }); // Random offsets for each point

  }

​

  // Generate random dots outside of the text area and their noise offsets

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

    let x = random(width);

    let y = random(height);

    let inText = false;

​

    // Check if the random point is inside the text shape

    for (let j = 0; j < points.length; j++) {

      let d = dist(x, y, points[j].x, points[j].y);

      if (d < 20) { // Adjust threshold to prevent overlap with text points

        inText = true;

        break;

      }

    }

    // If the point is outside the text, add it to extraDots array and assign a noise offset

    if (!inText) {

      extraDots.push({ x: x, y: y });

      extraNoiseOffsets.push({ x: random(5000), y: random(5000) }); // Random noise offsets for extra dots

    }

  }

}

​

function draw() {

  background(0);

  noStroke();

  let shaking = !mouseIsPressed; // Shaking for the text happens only when the mouse is NOT pressed

​

  // Add a trippy color-changing effect for the extra dots

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

    let dot = extraDots[i];

    let moveFactor = 30; // Shaking effect for extra dots

    // Use noise for smooth transformation

    let noiseX = map(noise(extraNoiseOffsets[i].x), 0, 1, -moveFactor, moveFactor);

    let noiseY = map(noise(extraNoiseOffsets[i].y), 0, 1, -moveFactor, moveFactor);

​

    // Update noise offsets for smooth motion

    extraNoiseOffsets[i].x += 0.01;

    extraNoiseOffsets[i].y += 0.01;

​

    // Color change based on position and movement

    let r = map(noiseX, -moveFactor, moveFactor, 0, 255);

    let g = map(noiseY, -moveFactor, moveFactor, 0, 255);

    let b = map(dot.x + dot.y, 0, width + height, 255, 0);

    fill(r, g, b);

    ellipse(dot.x + noiseX, dot.y + noiseY, 3); // Draw extra dots with noise and dynamic color

  }

​

  // Trippy scale and rotation effect for the text points

  let scaleFactor = map(sin(frameCount * 0.02), -1, 1, 0.95, 1.05); // Pulsating effect

  let rotationFactor = sin(frameCount * 0.02) * 0.02; // Slight rotation effect

​

  push(); // Save the current transformation state

  translate(width / 2, height / 2); // Move origin to the center of the canvas

  rotate(rotationFactor); // Rotate the canvas slightly

  scale(scaleFactor); // Apply scale for pulsating effect

  translate(-width / 2, -height / 2); // Move back the origin

​

  fill(255); // Keep text points white or you can change to any static color

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

    let pt = points[i];

    let moveFactor = 30; // Default shaking value for text points

​

    // Use noise to create smooth transformation

    let noiseX = map(noise(noiseOffsets[i].x), 0, 1, -moveFactor, moveFactor);

    let noiseY = map(noise(noiseOffsets[i].y), 0, 1, -moveFactor, moveFactor);

    // If the mouse is pressed, stop shaking the text points

    if (!shaking) {

      noiseX = 0; // No shaking for text points when mouse is pressed

      noiseY = 0; // No shaking for text points when mouse is pressed

    }

    // Update noise offsets for smooth motion

    noiseOffsets[i].x += 0.01;

    noiseOffsets[i].y += 0.01;

​

    ellipse(pt.x + noiseX, pt.y + noiseY, 3); // Draw text points with noise for smooth transformation

  }

  pop(); // Restore the transformation state

}

​