let shuffledText = "";

let customFont1, customFont2;

​

function preload() {

  // Load the custom fonts

  customFont1 = loadFont('ejaza.ttf'); // First font

  customFont2 = loadFont('islamic.ttf'); // Replace with your second font filename

}

​

function setup() {

  createCanvas(600, 600);

  background(255); // Set background to white

  textAlign(CENTER, CENTER); // Center the text

  noLoop();

  shuffleText(); // Shuffle the text once at the beginning

}

​

function draw() {

  background(255, 10); // Slightly fade the background for a trailing effect

​

  // Draw distorted text at the center

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

    let opacity = random(50, 255); // Random opacity for glitch effect

    let randomSize = random(100, 500); // Random size for each character

​

    fill(random(255), random(255), random(255), opacity); // Set stroke color with varying opacity

​

    textSize(randomSize); // Set random text size

​

    // Randomly choose between the two fonts

    let chosenFont = random() < 0.5 ? customFont1 : customFont2;

    textFont(chosenFont);

​

    // All characters drawn at the center (width/2, height/2)

    push(); // Save the current drawing state

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

​

    if (i < 4) { // For the first 4 characters

      let angle = random(-PI / 2, PI / 2); // Random angle for vertical reflection

      rotate(angle); // Rotate by the random angle

    }

​

    text(shuffledText[i], 0, 0); // Draw each character at the center

    pop(); // Restore the previous drawing state

  }

}

​

function shuffleText() {

  shuffledText = baseText.split('').sort(() => 0.5 - Math.random()).join('');

}

​