let userInput;

let sendButton;

let message = '';

let showWebcam = false;

let bgImage;

let customFont;

let errorImage;

let printingImage;

let showErrorScreen = false;

​

let errorPopups = []; // Array to store error image positions

let timer = 1000; // Starting interval in milliseconds

let startErrorImages = false; // Control when error images start appearing

​

function preload() {

  bgImage = loadImage('background.png'); // Load the background image

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

  errorImage = loadImage('error.jpg'); // Load the error image

  printingImage = loadImage('printing.png'); // Load the printing image

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // Initial input box and send button

  userInput = createInput();

  userInput.style('border', '1px solid #ccc'); // Optional: Border color

  userInput.style('border-radius', '20px'); // Curved edges

  userInput.position(width / 4.5, height / 3); // Center the input box

  userInput.size(width / 2 + 50, height / 3);

  sendButton = createButton('Send');

  sendButton.style('font-family', customFont);

  sendButton.style('font-size', '16px');

  sendButton.position(

    userInput.x + userInput.width / 2.5,

    userInput.y + userInput.height + 15

  ); // Position send button next to input box

  sendButton.size(userInput.width / 5, userInput.height / 5);

  sendButton.mousePressed(startWebcam);

​

  // Webcam setup (hidden initially)

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

}

​

function draw() {

  if (showErrorScreen) {

    background(0); // Black background for the error screen

    imageMode(CENTER);

    image(errorImage, width / 2, height / 2); // Display the error image in the center

    return;

  }

​

  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, height / 3.8);

  } else {

    // Display the webcam feed with subtle glitches

    background(255);

    drawGlitchyWebcam();

    drawGlitchyText();

​

    if (startErrorImages) {

      // Draw all the error images on the screen

      drawErrorImages();

    }

  }

}

​

function popErrorImage() {

  if (errorPopups.length >= 50) {

    // If enough images are displayed, show error screen

    showErrorScreen = true;

    return;

  }

​

  // Add a new error image at a random position

  let x = random(width);

  let y = random(height);

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

​

  // Decrease timer to make images appear faster

  timer /= 1.1;

  setTimeout(popErrorImage, timer);

}

​

function drawErrorImages() {

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

    image(printingImage, errorPopups[i].x, errorPopups[i].y, 400, 200);

  }

}

​

function startWebcam() {

  message = userInput.value();

  userInput.remove();

  sendButton.remove();

  showWebcam = true;

​

  // Wait 4 seconds before starting the error images

  setTimeout(() => {

    startErrorImages = true;

    popErrorImage(); // Begin showing error images

  }, 4000);

}

​

function drawGlitchyWebcam() {

  image(video, 0, 0, width, height); // Base webcam feed

  let step = floor(random(10, 50));

​

  // Add subtle streak glitches

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

    drawStreak(i);

  }

}

​

function drawStreak(y) {

  let h = floor(random(5, 15)); // Narrower streaks

  let xChange = floor(map(noise(y * 0.01, frameCount * 0.01), 0, 1, -15, 15));

  let yChange = floor(xChange * (2 / 15));

​

  if (random() < 0.02) { // Rare inversion effect

    push();

    filter(INVERT);

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

    pop();

  } else {

    // Regular streak with subtle shift

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

  }

}

​

// Typing effect variables

let typingIndex = 0;

let distortedMessage = '';

let manipulationOptions = [

  "You shouldn't trust everything...",

  "The truth isn't always what it seems...",

  "Reality is subjective, isn't it?",

  "Is this what you really wanted to say?",

  "Are you sure about that message?"

];

let currentIteration = 0;

let iterations = [];

let finalMessageDisplayed = false;

let showOriginalMessage = true;

let typingEffectMessage = '';

​

// List of words for random replacements

let replacementWords = [

  "illusion",

  "deception",

  "falsehood",

  "truth",

  "belief",

  "vision",

  "dream",

  "nightmare",

  "whisper",

  "shout",

  "unknown",

  "known"

];

​

function drawGlitchyText() {

  textSize(height / 16); // Adjust text size

  textFont('monospace'); // Use monospace font

  textAlign(CENTER, CENTER);

  noStroke();

​

  if (!finalMessageDisplayed && frameCount % 5 === 0) {

    if (showOriginalMessage) {

      if (typingIndex < message.length) {

        typingEffectMessage += message[typingIndex];

        typingIndex++;

      } else {

        iterations.push(typingEffectMessage);

        typingEffectMessage = '';

        typingIndex = 0;

        showOriginalMessage = false;

      }

    } else {

      let words = message.split(' ');

      if (typingIndex < words.length) {

        let originalWord = words[typingIndex];

        let randomWord = replacementWords[int(random(replacementWords.length))];

        let chosenWord = random() < 0.5 ? originalWord : randomWord;

        typingEffectMessage += chosenWord + ' ';

        typingIndex++;

      } else {

        iterations.push(typingEffectMessage.trim());

        typingEffectMessage = '';

        typingIndex = 0;

        currentIteration++;

​

        if (currentIteration >= 3) {

          iterations.push('');

          let finalManipulation = manipulationOptions[int(random(manipulationOptions.length))];

          iterations.push(finalManipulation);

          finalMessageDisplayed = true;

        }

      }

    }

  }

​

  if (typingEffectMessage !== '') {

    push();

    fill(255);

    text(typingEffectMessage, width / 2, height / 2);

    pop();

  }

​

  let yOffset = height / 4;

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

    push();

    fill(255);

    text(iterations[i], width / 2, yOffset + i * 40);

    pop();

  }

}

​