let phrase = "TYPOGRAPHYPLAYGROUND";
let fontSize = 24;
let spacingX = 30;
let spacingY = 40;

let cellSize = 6;
let cols, rows;

function setup() {
  createCanvas(612, 792);
  textAlign(CENTER, CENTER);
  textSize(fontSize);
  noStroke();
  cols = floor(width / cellSize);
  rows = floor(height / cellSize);
}

function draw() {
  background(0);

  // grid
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      let px = x * cellSize;
      let py = y * cellSize;
      // **Much stronger falloff at the top**
      let gradient = pow(map(y, 0, rows, 0.0, 1.0), 2.5);

      // Noise breakup (light)
      let noiseVal = noise(x * 0.06, y * 0.06);

      // Less density at top
      let threshold = gradient * 0.8 + noiseVal * 0.25;

      // Skip chance grows dramatically near top
      let skipChance = map(y, 0, rows, 0.4, 0.05);

      if (noiseVal < threshold && random() > skipChance) {
        fill(255);
        rect(px, py, cellSize, cellSize);
      }

      // Grid lines
      stroke(255, 25);
      noFill();
      rect(px, py, cellSize, cellSize);
    }
  }

  // grid interaction
  fill(255);
  let index = 0; 

  for (let y = spacingY; y < height - spacingY; y += spacingY) {
    for (let x = spacingX; x < width - spacingX; x += spacingX) {
      let char = phrase[index % phrase.length];

       push();
    translate(x, y);

    // automatic warp ( s displacement so letters don't overlap)
    let t = frameCount * 0.5;
    let warpX = sin(t + x * 0.05) * 2;   // distance of the warp when letter move 
    let warpY = cos(t + y * 0.05) * 2;
    let rot   = sin(t * 0.5) * 0.2;      // gentler rotation

    translate(warpX, warpY);
    rotate(rot);

    text(char, 0, 0);
    pop();

    index++;


    }
  }
}