CC - Final Project (1)

Date: Monday, 08/10/2026

Class: Creative Coding (IMALR-GT 102)

Section: 002 (Carrie)

Name: Janice Vuong

Week: Week 5

Building off my Final Project (Rough) Draft Idea: p5.js speech recognition + display text recognized (to fill the canvas) + reactivity (text distort through noise() function) + text color changes every so often

(tl;dr : scroll to the bottom to see the final project what it did become and changed to ⬇️)

From Monday (08/03) class, I asked my classmates on whether I should have added

1) text distortion/reactivity, or

2) color changing text, and

I just got 1 vote for each so then it was basically a tie. I spent all of class time trying to implement both ideas but I could not get the text distortion/noise() function (it was a lot of YouTube tutorials).

Technically the original idea was that if someone says any word more audibly louder than the prior words/volume → text/word display grows LARGER

turns out implementing the color changing text was easier (because of Gemini), however I had to simplify the idea. Now the text color, changes randomly in a period of time. The person/or people interacting with my code/sketch has no effect …. sad :_(

//color changing text portion
  // get total seconds passed since starting
  let totalSeconds = Math.floor(millis() / 1000); 
  
  // change color every 3 seconds
  let interval = Math.floor(totalSeconds / 3); 
  
  // pick a color based on the interval
  if (interval % 3 === 0) {
    //yellow ish based on feb karaoke visit 
    fill("#D7C036");   
  } else if (interval % 3 === 1) {
    //pink based on feb karaoke visit 
    fill("#DCB5D2");   
  } else {
    fill(186, 85, 211);   
  }

💡 The colors I picked were based off a karaoke visit (scrolling through my past favorite folder album changed my final project idea from the interaction point of having someone talk → words appear (due to the p5.SpeechRec() )

that if final project is about karaoke, then people would more likely speak right??????

Then in class on Wed (08/05) I asked Queenie about the tone.js library and how to add sound/a song. And she told me if it just a .mp3 file/song I can just upload a file directly into my p5.js (wow!!!!)

Biggest Issue/Challenge: okay so this ended not working out in my project :,(

I saw a working example, and made a copy: https://editor.p5js.org/basicallyjanice/full/SuqlOP0uZ

^that code plays the song (YMCA!), when mousePressed()

And then I had my rough draft code: https://editor.p5js.org/basicallyjanice/full/t8fjtxFBq

^this is my rough draft that displays speech to text when mousePressed()

And no matter what, I could not merge both codes (even with Gemini/LLMs) :_( like I tried to troubleshoot a lot, switching places where the .mp4/song file was uploaded, changing the index.html file, I spent a good 2 hours and was really tired.

I ended up trying to focus my mind on other things so I decided to “draw” out the karaoke song display title boxes instead

  //karaoke song title box displays
  // outer blackish grey song display box
  fill('#3E3F39');
  rect(30, 430, 395, 60);
  
  // first inner song box panel
  fill('black');
  rect(35, 435, 190, 50);
  textStyle(BOLD);

  // second inner song box panel
  fill('black');
  rect(230, 435, 190, 50);
  textStyle(BOLD);

  // displays "YMCA" song title
  textSize(15);
  fill('orange');
  text("Y.M.C.A.", 45, 475);

  // displays first Song Code (918312)
  textSize(15);
  fill('orange');
  text("🔴 918312", 40, 455);

  // displays "Celebration" song title
  textSize(15);
  fill("#D7C036");
  text("Celebration [MV]", 235, 475);

  // displays Second Song Code (951653)
  textSize(15);
  fill("#D7C036");
  text("1 - 951653", 235, 455);

As you can see, the song code numbers were based of my karaoke visit (ktown!) in February, and text colors to match too. I actually wanted to make the first song to be “Empire State of Mind”, I know, I know it is super overplayed a lot in the city— however Alicia Keys did sing it during the Knick’s parade so….???? (but also Mimi said she will cringe if she hears this song one more time.. and Mimi is in my CC section so I will spare everyone’s ears)

so YMCA (by the Village People) it is!! Celebration song was inspired because Alex/Chrissy/Mengna kept playing this song during “Learning How to Fail” Workshop on Friday (08/07) so it became stuck in my head

I still wanted some text reactivity (or interactivity???) so I decided that if certain key words are said… then maybe something will happen??

bubbles!!!!!!

I was inspired by the bubble (echo) effect in iMessage, I thought that, that would be the perfect/whimsy interactivity element to the project. Despite no music/backing song would be playing, it would force the person trying this code, and surprise/reward them with the bubble effect/delight

The bubble effect/portion was created with Gemini

The transcription portion was from a p5.js sketch by Dan Shiffman

and now is my *final project* (karaoke!) and video below: https://editor.p5js.org/basicallyjanice/full/uk__lGzJU

jan’s final CC project: Karaoke!

disclaimer: this is so ironic to me (now, monday 08/10), because over the weekend, and with very poor sleep, i am sick. i am not even sure if i can even present this code (because it requires speech)! haha but now it is making me consider accessibility in a different way

jan’s code

let myRec = new p5.SpeechRec('en-US', parseResult); 
let displayText = "press mousepad and get ready 🎤🎵...";
let song;
let bubbles = []; 
// Array to store active word bubbles

// special surprise words <33
const targetWords = ["ymca", "yay", "celebration", "janice"];

function preload() {
  song = loadSound('assets/YMCA - Karaoke Version - v2.mp3');
}

function setup() {
  createCanvas(500, 500);
  
  myRec.interimResults = true; 
  myRec.continuous = true;     
}

function mousePressed() {
  myRec.start();

  myRec.onEnd = function() {
    myRec.start();
  };
}

function parseResult() {
  if (myRec.resultValue) {
    let previousText = displayText;
    displayText = myRec.resultString.toLowerCase();
    
    console.log("transcribed:", displayText);

    // check for special words
    for (let word of targetWords) {
      if (displayText.includes(word) && !previousText.includes(word)) {
        spawnWordBubbles(word.toUpperCase(), 25); // create 25 small word bubbles
      }
    }
  }
}

function spawnWordBubbles(wordText, count) {
  for (let i = 0; i < count; i++) {
    bubbles.push(new WordBubble(wordText));
  }
}

function draw() {
  background("#375148");
  //based on feb karaoke visit
  //background("#2E32F7") past test color

  //render word bubbles
  for (let i = bubbles.length - 1; i >= 0; i--) {
    bubbles[i].update();
    bubbles[i].display();
    
    // remove bubble if faded or off-screen
    if (bubbles[i].isFinished()) {
      bubbles.splice(i, 1);
    }
  }

  
  //karaoke song title box displays
  // outer blackish grey song display box
  fill('#3E3F39');
  rect(30, 430, 395, 60);
  
  // first inner song box panel
  fill('black');
  rect(35, 435, 190, 50);
  textStyle(BOLD);

  // second inner song box panel
  fill('black');
  rect(230, 435, 190, 50);
  textStyle(BOLD);

  // displays "YMCA" song title
  textSize(15);
  fill('orange');
  text("Y.M.C.A.", 45, 475);

  // displays first Song Code (918312)
  textSize(15);
  fill('orange');
  text("🔴 918312", 40, 455);

  // displays "Celebration" song title
  textSize(15);
  fill("#D7C036");
  text("Celebration [MV]", 235, 475);

  // displays Second Song Code (951653)
  textSize(15);
  fill("#D7C036");
  text("1 - 951653", 235, 455);

  
//color changing text portion
  // get total seconds passed since starting
  let totalSeconds = Math.floor(millis() / 1000); 
  
  // change color every 3 seconds
  let interval = Math.floor(totalSeconds / 3); 
  
  // pick a color based on the interval
  if (interval % 3 === 0) {
    //yellow ish based on feb karaoke visit 
    fill("#D7C036");   
  } else if (interval % 3 === 1) {
    //pink based on feb karaoke visit 
    fill("#DCB5D2");   
  } else {
    fill(186, 85, 211);   
  }
  
  // configure text formatting BEFORE calling text()
  textSize(40);
  textWrap(WORD);
  textStyle(BOLD);
  
  // using 4 parameters (x, y, maxWidth) enables textWrap to work properly
  text(displayText, 50, 60, 400); 
}