`;

​

let x, y;

let speed = 0.2;

​

let x1, y1;

let xSpeed, ySpeed;

​

let speechRec;

let computer;

let triggerWords = [ "CPC", "leadership", "meeting", "economic", "work", "Party", "conduct", "anti-corruption", "work", "Xi", "Jinping", "goals", "tasks", "economic", "social", "development", "accomplished", "implementing", "fiscal", "policy", "monetary", "policy", "toolkit", "counter-cyclical", "adjustments", "coordination", "policies", "regulation", "consumption", "investment", "efficiency", "demand", "Central", "Committee", "symposium", "opinions", "suggestions", "economic", "situation", "work", "Xi", "Jinping", "speech", "China", "parties", "advance", "human", "rights", "Foreign", "Minister", "Wang", "Yi", "Political", "Bureau", "Communist", "Party", "CPC", "Committee", "transformation", "geopolitical", "conflicts", "recovery", "deficit", "governance", "enjoyment", "Economic", "Social", "Cultural", "Rights", "multilateralism", "people-centered", "solidarity", "coordination", "people", "human", "rights", "development", "achievements", "protection", "heights", "plenary", "session", "reform", "modernization", "conditions", "enjoyment", "Rights", "Ministry", "Foreign", "Affairs", "United", "Nations", "High", "Commissioner", "Human", "Rights", "officials", "regions", "experts", "CPC", "leadership", "meeting", "economic", "work", "Party", "conduct", "anti-corruption", "development", "fiscal", "policy", "monetary", "policy", "toolkit", "counter-cyclical", "adjustments", "coordination", "policies", "regulation", "consumption", "investment", "efficiency", "demand", "values", "humanity", "human", "rights", "security", "development", "cooperation", "transformation", "geopolitical", "conflicts", "recovery", "governance", "multilateralism", "solidarity", "coordination", "modernization", "blueprint", "reform", "conditions", "equal", "enjoyment", "plenary", "symposium", "suggestions", "economy", "opening-up", "premier", "consumption", "stability", "growth", "expectations", "market", "confidence", "BRICS", "cooperation", "loans", "globalization", "trade", "climate", "peace", "multilateralism", "organizations", "contribution", "Global", "South" ];

​

let draggedVideo = null; // Video currently being dragged

let dragOffsetX = 0; // Offset of the mouse position from the video's x position

let dragOffsetY = 0; // Offset of the mouse position from the video's y position

​

let mediaFiles = [

  "Miniature Chatterbox 2024-10-10 02.32.12.mp4",

  "Miniature Chatterbox 2024-10-10 02.32.40.mp4",

  "Miniature Chatterbox 2024-10-10 02.32.42.mp4",

  "Miniature Chatterbox 2024-10-10 02.32.46.mp4",

  "Miniature Chatterbox 2024-10-10 02.32.50.mp4",

  "Miniature Chatterbox 2024-10-10 02.32.54.mp4",

  "Miniature Chatterbox 2024-10-10 02.33.01.mp4",

  "Miniature Chatterbox 2024-10-10 02.33.36.mp4",

  "Miniature Chatterbox 2024-10-10 02.33.37.mp4",

  "Miniature Chatterbox 2024-10-10 02.33.42.mp4",

  "Miniature Chatterbox 2024-10-10 02.45.15.mp4"

];

​

let videos = [];

let triggerCount = 0;

let activeVideos = [];

let totalSocialCredits = 0;

let lastAnnouncementTime = 0;

let countdownTime = 10; // Set the countdown time to 10 seconds

let countdownStartTime;

​

let messages = [

  "The Party's truth is the only truth!",

  "Listen to the Central Committee!",

  "What is unreported is irrelevant!",

  "Happiness and joy is mandatory!",

  "Avoid awkwardness by discussing our glorious space program!",

  "Taiwan is synonymous with ‘peaceful reunification’!",

  "Smile at all times!"

];

let currentMessageIndex = 0;

let messageStartTime;

​

​

function preload() {

  for (let file of mediaFiles) {

    let vid = createVideo(file);

    vid.elt.setAttribute('playsinline', '');

    vid.elt.setAttribute('webkit-playsinline', '');

    vid.hide();

    videos.push(vid);

  }

}

​

​

let graphics;

​

​

function mousePressed() {

  canvas.elt.focus(); // Refocus the canvas on mouse click

​

  // Check if the mouse is over any video for dragging

  for (let i = activeVideos.length - 1; i >= 0; i--) {

    let video = activeVideos[i];

    if (

      mouseX > video.x &&

      mouseX < video.x + video.width &&

      mouseY > video.y &&

      mouseY < video.y + video.height

    ) {

      draggedVideo = video; // Set the video being dragged

      dragOffsetX = mouseX - video.x; // Calculate offset

      dragOffsetY = mouseY - video.y; // Calculate offset

      return; // Exit the function to avoid skipping message

    }

  }

​

  // Skip to the next message (if no video was clicked)

  currentMessageIndex = (currentMessageIndex + 1) % messages.length;

  messageStartTime = millis(); // Reset the message timer

}

​

​

function mouseDragged() {

  if (draggedVideo) {

    draggedVideo.x = mouseX - dragOffsetX;

    draggedVideo.y = mouseY - dragOffsetY;

​

    // Update the video position in the DOM

    draggedVideo.element.position(draggedVideo.x, draggedVideo.y);

  }

}

​

​

function mouseReleased() {

  // Release the dragged video

  draggedVideo = null;

}

​

​

function setup() {

  canvas = createCanvas(windowWidth, windowHeight);

  canvas.elt.tabIndex = "0"; // Make the canvas focusable

  canvas.elt.focus();        // Automatically focus on the canvas

  graphics = createGraphics(width, height);

  background(220);

​

  speechRec = new p5.SpeechRec('en-US', gotSpeech);

  speechRec.continuous = true;

  speechRec.interimResults = false;

​

  computer = new p5.Speech();

​

  textSize(32); 

  textLeading(40);

  textAlign(LEFT, TOP);

​

  let button = createButton('Start/Stop Listening');

  button.position(10, 10);

  button.mousePressed(toggleListen);

​

  x = 0;

  y = height;

​

  x1 = width / 2;

  y1 = height / 2;

  xSpeed = random(2, 5);

  ySpeed = random(2, 5);

  countdownStartTime = millis(); // Record the start time of the countdown

  messageStartTime = millis(); // Record the start time of the first message

​

}

​

​

function draw() {

  background(255, 0, 0); // Clear the canvas for each frame

​

  // Check if the UP or DOWN arrow key is held and adjust speed

  if (keyIsDown(UP_ARROW)) {

    speed += 0.01; // Increase speed gradually

  }

  if (keyIsDown(DOWN_ARROW)) {

    speed = max(0.1, speed - 0.01); // Decrease speed gradually, with a minimum of 0.1

  }

​

  // Display the current scrolling speed

  textSize(16);

  fill(255);

  textAlign(RIGHT, TOP);

  text(`Speed: ${speed.toFixed(2)}`, width - 20, 20);

​

  // Handle the scrolling text

  textSize(32);

  textLeading(40);

  textAlign(LEFT, TOP);

​

  let lineHeight = textAscent() + textDescent(); // Height of one line of text

  let words = article.split(' '); // Split the article into words

  let line = ''; // Current line of text

  let currentY = y; // Start drawing from the current `y` position

  let totalTextHeight = 0; // To calculate the total height of the text block

​

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

    let testLine = line + words[i] + ' ';

    if (textWidth(testLine) > width - 40) {

      let opacity = map(currentY, height, 0, 0, 255); // Calculate opacity for this line

      opacity = constrain(opacity, 0, 255); // Clamp opacity

      fill(255, opacity); // Set fill color with opacity

      text(line, 20, currentY); // Render the line

      line = words[i] + ' '; // Start a new line

      currentY += lineHeight; // Move to the next line position

      totalTextHeight += lineHeight; // Track total height of text block

    } else {

      line = testLine; // Add word to the current line

    }

  }

​

  if (line !== '') {

    let opacity = map(currentY, height, 0, 0, 255);

    opacity = constrain(opacity, 0, 255);

    fill(255, opacity);

    text(line, 20, currentY);

    totalTextHeight += lineHeight; // Add height for the last line

  }

​

  y -= speed; // Scroll upward

​

  if (y < -totalTextHeight) {

    y = height; // Reset to start from the bottom

  }

​

  displayCountdown(); // Display the countdown timer

  displaySocialCredits();

  displayActiveVideos();

​

  if (millis() - lastAnnouncementTime > 30000) {

    announceTotal();

    lastAnnouncementTime = millis();

  }

}

​

​

function displayCountdown() {

  let elapsedTime = millis() - countdownStartTime; // Calculate elapsed time

  let remainingTime = Math.ceil(10 - elapsedTime / 1000); // Calculate remaining time

​

  if (remainingTime > 0) {

    textSize(48);

    textAlign(CENTER, CENTER);

    fill(255); // White text color

​

    // Calculate the vertical position of the countdown timer

    let timerY = height / 4; // Centered at the line between top and top-middle rectangles

​

    text(remainingTime, width / 2, timerY); // Display the countdown timer at the center

​

    // Display the current message below the timer

    textSize(32);

    text(messages[currentMessageIndex], width / 2, timerY + 50);

​

    // Update the message every 5 seconds

    if (millis() - messageStartTime > 1500) {

      currentMessageIndex = (currentMessageIndex + 1) % messages.length;

      messageStartTime = millis(); // Reset the message timer

    }

  }

}

​

​

function displaySocialCredits() {

  textSize(32);

  textAlign(CENTER, CENTER);

​

  // Update position

  x1 += xSpeed;

  y1 += ySpeed;

​

  // Check for collisions with canvas edges

  if (x1 > width - 200 || x1 < 200) { // Adjust these values based on your text width

    xSpeed *= -1;

  }

  if (y1 > height - 50 || y1 < 50) { // Adjust these values based on your text height

    ySpeed *= -1;

  }

​

  // Calculate opacity for both lines (fully visible at the bottom, invisible at the top)

  let opacity = map(y1, height, 0, 255, 0); // Fully opaque at the bottom, fully transparent at the top

  opacity = constrain(opacity, 0, 255); // Ensure the value is within 0–255 range

​

  // Render "Social Credit Streak" with calculated opacity

  fill(255, 255, 0, opacity);

  text("Social Credit Streak: " + triggerCount, x1, y1 - 25);

​

  // Render "Total Social Credits" with the same opacity

  fill(255, 255, 0, opacity);

  text("Total Social Credits: " + totalSocialCredits, x1, y1 + 25);

}

​

function displayActiveVideos() {

  for (let i = activeVideos.length - 1; i >= 0; i--) {

    let video = activeVideos[i];

​

    // Render the video at its current position

    video.element.position(video.x, video.y);

    video.element.size(video.width, video.height);

​

    // Check if the video has ended

    if (video.element.time() >= video.element.duration() - 0.1) {

      video.element.hide(); // Hide the video element

      activeVideos.splice(i, 1); // Remove it from activeVideos

    }

  }

}

​

​

function gotSpeech() {

  if (speechRec.resultValue) {

    let said = speechRec.resultString;

​

    for (let word of triggerWords) {

      if (said.toLowerCase().includes(word.toLowerCase())) {

        triggerResponse(word);

        break;

      }

    }

  }

}

​

​

function triggerResponse(word) {

  let creditsGained = Math.floor(Math.random() * (30 - 15 + 1)) + 15;

  totalSocialCredits += creditsGained;

  triggerCount++;

  computer.speak(`You just gained ${creditsGained} social credits for using ${word}. Social Credit Streak: ${triggerCount}`);

  playRandomVideo();

}

​

function announceTotal() {

  computer.speak(`Total social credits gained in the last thirty seconds: ${totalSocialCredits}`);

  totalSocialCredits = 0; 

}

​

function playRandomVideo() {

  let randomIndex = floor(random(videos.length));

  let randomVideo = videos[randomIndex];

  let randomWidth = random(100, width / 2);

  let randomHeight = randomWidth * (9 / 16);

  let randomX = random(width - randomWidth);

  let randomY = random(height - randomHeight);

  randomVideo.show();

  randomVideo.position(randomX, randomY);

  randomVideo.size(randomWidth, randomHeight);

  randomVideo.play();

  activeVideos.push({

    element: randomVideo,

    x: randomX,

    y: randomY,

    width: randomWidth,

    height: randomHeight

  });

}

​

​

function toggleListen() {

  if (speechRec.isListening) {

    speechRec.stop();

  } else {

    speechRec.start();

  }

}

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​

function textHeight(txt) {

  let words = txt.split(' ');

  let line = '';

  let totalHeight = 0;

  let lineCount = 0;

​

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

    let testLine = line + words[i] + ' ';

    if (textWidth(testLine) > width - 40) {

      lineCount++;

      line = words[i] + ' ';

    } else {

      line = testLine;

    }

  }

  lineCount++; // Add the last line

  totalHeight = lineCount * textLeading();

  return totalHeight;

}

​

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    speed += 0.1; // Increase speed when UP_ARROW is pressed

  } else if (keyCode === DOWN_ARROW) {

    speed = max(0.1, speed - 0.1); // Decrease speed when DOWN_ARROW is pressed, with a minimum of 0.1

  }

}

​