const maxYChange = 5;

const yNoiseChange = 0.01;

const mouseYNoiseChange = 0.3;

const timeNoiseChange = 0.013;

​

let video;

let inverted = false;

let userInput;

let sendButton;

let message = '';

let showWebcam = false;

let cols = ['cyan', 'magenta', 'yellow', 'red', 'green', 'blue'];

let grid = 12;

let matrix = [];

let bgImage;

​

function preload() {

  bgImage = loadImage('background.png');

  customFont = loadFont('medium.ttf'); // Load the custom font

}

​

function setup() {

  createCanvas(1052.8, 789.6);

​

  // Initial input box and send button

  userInput = createInput();

  userInput.position(20, height / 2 - 20);

  sendButton = createButton('Send');

  sendButton.position(userInput.x + userInput.width + 10, height / 2 - 20);

  sendButton.mousePressed(startWebcam);

​

  // Webcam setup (hidden initially)

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

}

​

function draw() {

  if (!showWebcam) {

    // Display the typing screen

    background(bgImage);

    textFont(customFont); // Use the custom font

    textAlign(CENTER, CENTER);

    textSize(32);

    fill(76, 87, 107);

    text('Type your message below...', width / 2.8, height / 3.8);

  } else {

    // Display the distorted webcam feed with glitchy text

    background(255);

    image(video, -maxXChange, -maxYChange, width + maxXChange * 2, height + maxYChange * 2);

​

    for (let i = 0; i < height; i += 10) {

      drawStreak(i);

    }

​

    // Draw glitchy text

    drawGlitchyText();

  }

}

​

function startWebcam() {

  message = userInput.value();

  userInput.remove();

  sendButton.remove();

  showWebcam = true;

  makeMatrix();

}

​

function drawStreak(y) {

  let h = floor(random(5, 20));

  let xChange = floor(map(noise(y * yNoiseChange, (mouseY * mouseYNoiseChange + frameCount) * timeNoiseChange), 0, 1, -maxXChange, maxXChange));

  let yChange = floor(xChange * (maxYChange / maxXChange) * (random() > 0.5 ? -1 : 1));

​

  if (random() < 0.02) {

    if (!inverted) {

      filter(INVERT);

      inverted = true;

    } else {

      filter(INVERT);

      inverted = false;

    }

  }

​

  image(video, xChange, y + yChange, width, h, 0, y, width, h);

}

​

function drawGlitchyText() {

  textSize(2 * height / grid);

  textFont('monospace'); // Using a default font

  textAlign(CENTER, CENTER);

  rectMode(CENTER);

  blendMode(DIFFERENCE);

  noStroke();

​

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

    let x = matrix[i].x + random(-5, 5); // Random horizontal jitter

    let y = matrix[i].y + random(-5, 5); // Random vertical jitter

    let chr = message.charAt(i % message.length);

​

    if (random() < 0.05) {

      fill(random(cols));

    } else {

      fill(255);

    }

​

    push();

    translate(x, y);

    if (random() < 0.2) rotate(random(-QUARTER_PI, QUARTER_PI));

    text(chr, 0, 0);

    pop();

  }

}

​

function makeMatrix() {

  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);

      matrix.push({

        x: x,

        y: y,

      });

      i++;

    }

  }

}

​