let str = "";

let started = false;

let matrix = [];

let grid = 12;

let font;

​

function preload() {

  // Ensure the font path is correct and the font file is available

  font = loadFont('Helvetica.ttf'); // Update this path if your font file is in a different location

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function startEffect() {

  const input = document.getElementById('userInput').value;

  if (input) {

    str = input;

    makeMatrix();

  }

}

​

function mousePressed() {

  grid = 2 * floor(random(5, 25));

  if (started == false) fullscreen(true);

  else makeMatrix();

}

​

function draw() {

  if (str) {

    for (let i = 0; i < floor(grid / 3); i++) {

      if (matrix.length > 0) fillSquare();

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth - 1, windowHeight - 1);

  started = true;

  makeMatrix();

}

​

function makeMatrix() {

  blendMode(BLEND);

  background(0)

  matrix = [];

  let i = 0;

  for (let row = 1; row < grid - 1; row++) {

    for (let col = 2; col < 1.5 * (width / height) * grid - 2; col++) {

      let y = row * height / grid;

      let x = col * height / (grid * 1.5);

      let r = false;

      if (floor(random(4)) == 0) r = true;

      matrix.push({

        x: x,

        y: y,

        chr: str.substring(i, i + 1),

        r: r

      });

      i = (i + 1) % str.length;

    }

  }

}

​

function fillSquare() {

  textSize(2 * height / grid);

  textFont(font);

  textAlign(CENTER, CENTER);

  rectMode(CENTER);

  blendMode(DIFFERENCE);

  noStroke();

  let i = floor(random(matrix.length));

  push();

  translate(matrix[i].x, matrix[i].y);

  fill(random(cols));

  if (i % 4 == 0) rotate(-QUARTER_PI);

  else if (i % 4 == 1) rotate(QUARTER_PI);

  if (matrix[i].r) {

    push();

    if (floor(random(2)) == 0) rotate(HALF_PI);

    rect(0, 0.25 * height / grid, height / grid, 1.5 * height / grid);

    pop();

  }

  fill(random(cols));

  text(matrix[i].chr, 0, 0);

  pop();

  matrix.splice(i, 1);

}

​