listeningJokes

let jokes = []; // Array to store jokes from the CSV

let shuffledJokes = []; // Array to store shuffled jokes

let jokeSetup, punchline; // Variables for the current setup and punchline

let setupFrames = 120; // Frames to show setup

let punchlineFrames = 600; // Frames to show punchline

let frameCounter = 0; // Frame counter for timing

let state = 0; // 0: Show Setup, 1: Show Punchline, 2: Transition to Next Joke

let currentJokeIndex = 0;

let speech;

let brushes = [];

let criticalMass;

let colorChoice = 0

let countSwitch = 0

let epicenterX, epicenterY

let headphones 

let adv = 0

let pens = []

​

function shuffleArray(array) {

  let shuffled = array.slice();

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

    const j = Math.floor(Math.random() * (i + 1));

    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];

  }

  return shuffled;

}

​

let backgroundSound;

​

function preload() {

  headphones = loadImage('https://deckard.openprocessing.org/user276376/visual2480615/h46e124172bacdcfe78513ce8d9229f7d/headphone-emoji-2048x2048-2ayz493s.png')

  // Load the CSV file from the provided URL

  let url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vS8WhlDcV30CXVlTcLr2N3RXeQlSwlwhYBV4TCp-_ar4f-z9QDfatPKU38HlqmCYDrOuP3htjMiVO31/pub?gid=0&single=true&output=csv';

  loadTable(url, 'csv', 'header', table => {

    for (let row of table.rows) {

      jokes.push({

        setup: row.get('Setup'),

        punchline: row.get('Punchline')

      });

    }

  });

​

  // Load background sound

  backgroundSound = loadSound('atmosphere.mp3');

}

​

function setup() {

  criticalMass= random(50, 200)

 headphones.resize(0, height / 2)

  disableCanvasInteractions();

  createCanvas(windowHeight, windowHeight);

  speech = new p5.Speech();

  textSize(24);

  textAlign(CENTER, CENTER);

​

  if (backgroundSound) {

    backgroundSound.loop();

  }

 console.log = function() {};

  if (jokes.length > 0) {

    shuffledJokes = shuffleArray(jokes);

    jokeSetup = shuffledJokes[currentJokeIndex].setup;

    punchline = shuffledJokes[currentJokeIndex].punchline;

    speech.speak(jokeSetup);

  }

​

  epicenterX = width / 2

  epicenterY = height / 2

  for (let i = 0; i < criticalMass; i++) {

    colorChoice = random(255)

      brushes.push(new Brush(width / 2 + 

                              map(noise(i), 0, 1, 0, width / 2), 

                             height / 2 + 

                              map(noise(i), 0, 1, 0, height / 2), i));

  }

}

​

function disableCanvasInteractions() {

  let canvas = document.querySelector('canvas');

  if (canvas) {

    canvas.addEventListener('contextmenu', e => e.preventDefault());

    canvas.addEventListener('mousedown', e => e.preventDefault());

    canvas.addEventListener('touchstart', e => e.preventDefault());

  }

  document.addEventListener('keydown', e => e.preventDefault());

}

​

function draw() {

  if (frameCount % 120 === 0) {

    background(map(frameCount, 0, 30000, 0, 255), 150, 255, random(0, random([1, random(20)])))

  }

    if (frameCount % 8000 === 0) {

    background(random(255), random(255), random(255), random(150, 200))

  }

   colorMode(HSB, 255);

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

    brushes[i].display();

    brushes[i].update();

  }

  fill(255)

    noStroke()

square(0, height - height / 10, height / 10)

  square(width - width / 10, height - height / 10, height / 10)

  square(0, 0, height / 10)

  square(width - width / 10, 0, height / 10)

  fill(0)

​

  if (jokes.length === 0) {

    text("Loading jokes...", width / 2, height / 2);

    return;

  }

​

  if (state === 0) {

    // Display the setup

   // text(jokeSetup, width / 2, height - height / 20);

    if (frameCounter > setupFrames) {

      frameCounter = 0;

      state = 1;

      speech.speak(punchline);

    }

  } else if (state === 1) {

    // Display the punchline

    //text(punchline, width / 2, height - height / 20);

    if (frameCounter > punchlineFrames) {

      frameCounter = 0;

      state = 2;

    }

  } else if (state === 2) {

    // Transition to the next joke

    currentJokeIndex++;

    if (currentJokeIndex >= shuffledJokes.length) {

      shuffledJokes = shuffleArray(jokes);

      currentJokeIndex = 0;

    }

    jokeSetup = shuffledJokes[currentJokeIndex].setup;

    punchline = shuffledJokes[currentJokeIndex].punchline;

    speech.speak(jokeSetup);

    frameCounter = 0;

    state = 0;

  }

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

    pens[i].update()

    pens[i].display()

  }

  frameCounter++;

  if (frameCount % 100 < 80) {

    imageMode(CENTER)

    image(headphones, headphones.width, height - headphones.height)

  image(headphones, width - headphones.width, height - headphones.height)

        image(headphones, headphones.width, headphones.height)

  image(headphones, width - headphones.width, headphones.height)

  }

}

​

class Brush {

  constructor(x, y, index) {

    this.pos = createVector(x, y);

    this.prevX = x;

    this.prevY = y;

    this.index = index

    this.hue = random(255)

    this.sat = random(127, 255)

    this.bright = random(127, 255)

    this.size = random(0.25, 10)

    this.inc = adv

  }

​

  update() {

    let lineSize = map(noise(adv), 0, 1, 10, (this.inc * this.size) + (frameCount / (this.index * this.inc + frameCount / (adv - frameCount / 1000000))) + this.inc * (1 + criticalMass - this.index) / 5)

    strokeWeight(lineSize)

    let hueDiff = 255 - this.hue

    if (this.pos.x > width + lineSize || this.pos.x < -lineSize || this.pos.y > height + lineSize || this.pos.y < -lineSize) {

          if (frameCount % 100 === 0) {

      adv = 0.01

      pens.push(new Pen (random(width), random(height)))

    }

      noStroke()

      adv += 0.001

      this.inc = 0

​

      this.pos.x = random(width)

      this.pos.y = random(height)

​

    this.prevX = this.pos.x

    this.prevY = this.pos.y

    } else {

      if (hueDiff > 127) {

      stroke(this.hue + map(sin(frameCount / (50 * this.pos.x)), -1, 1, hueDiff / 1.5, hueDiff), this.sat, this.bright, 0.5 * this.index + this.inc * (this.index / 20) - adv / 2)

      } else 

        stroke(this.hue - map(cos(frameCount / (50 * this.pos.y)), -1, 1, hueDiff / 1.5, hueDiff), this.sat, this.bright, 0.5 * this.index + this.inc * (this.index / 20) - adv / 2)

    }

    this.pos.x += sin(this.pos.y / (this.inc + this.index * 100)) / 10 + cos((this.pos.y / (500 - this.inc)) * (this.inc + (frameCount / 100))) + random(this.inc / (1 + this.index)) * 10 + (1 + this.index) / 100

    this.pos.y += cos(this.pos.x / (this.inc + this.index * 100)) / 10 + cos((this.pos.x / (500 - this.inc)) * (this.inc + (frameCount / 100))) + random(this.inc / (1 + this.index)) * 10 + (1 + this.index) / 100

    this.inc += (1 + this.index) / (10 * frameCount)

​

  }

​

  display() {

    line(this.pos.x, this.pos.y, this.prevX, this.prevY)

    line(width - this.pos.x, height - this.pos.y, width - this.prevX, height - this.prevY)

    line(width - this.pos.x, this.pos.y, width - this.prevX, this.prevY)

    line(this.pos.x, height - this.pos.y, this.prevX, height - this.prevY)

    this.prevX = this.pos.x

    this.prevY = this.pos.y

  }

}

​

class Pen {

  constructor(x, y) {

    this.x = x

    this.y = y

    this.prevX = x

    this.prevY = y

    this.ink = random([0, 255])

  }

  update() {

    if (pens.length > 20) {

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

       pens.shift(); // Remove the first element

      }

    }

    this.x += map(sin(this.y / random(9, 11)), -1, 1, -1, noise(cos(this.y / (1 + frameCount / 10))) * (1 + noise(frameCount / 5)))

    this.y += map(cos(this.x / random(18,21)), -1, 1, -1, noise(sin(this.x / (1 + frameCount / 20))) * (1 + noise(frameCount / 2)))

    if (this.x > width || this.x < 0 || this.y > height || this.y < 0) {

      noStroke()

      this.x = width / 2

      this.y = random(height)

          this.prevX = this.x

    this.prevY = this.y

    }

  }

  display() {

        strokeWeight(map(noise(frameCount / 100), 0, 1, 1, 10))

    stroke(this.ink)

        line(this.x, this.y, this.prevX, this.prevY)

    line(width - this.x, height - this.y, width - this.prevX, height - this.prevY)

    line(width - this.x, this.y, width - this.prevX, this.prevY)

    line(this.x, height - this.y, this.prevX, height - this.prevY)

    this.prevX = this.x

    this.prevY = this.y

  }

}

​