CC - Final Project Draft

Date: Monday, 08/03/2026

Class: Creative Coding (IMALR-GT 102)

Section: 002 (Carrie)

Name: Janice Vuong

Week: Week 5

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

Building off learning the p5.SpeechRec() from Week 4 and opened up my eyes, and i love text!!!

I feel like type and text is a focus I really enjoy, so that is why I wanted to incorporate it in my project.

p5.js final project rough draft link: https://editor.p5js.org/basicallyjanice/full/MinNxwfIf

I had an idea that I wanted the speech recognition to react, to the user’s speech decibel/audio levels. And when I was searching on the internet, that wasn’t really possible. However I saw a p5.js sketch by Dan Shiffman on transcription so I thought that was cool and had it incorporated in my code.

function parseResult() {
  if (myRec.resultValue) {
    displayText = myRec.resultString.toLowerCase();
    //text to display lowercase
    
    // display-print the transcription to the console
    console.log("transcribed:", displayText);
  }
}

Also in class when I was originally testing the p5.js speech recognition, the text displayed of the speech (that it was recognizing) was getting cut off and displayed off the canvas.

So I learned the textWrap(WORD); function from p5.js reference library.

function draw() {
  background("#B9CBD9 ");
  //light blue background color
  
  // configure text formatting BEFORE calling text()
  textSize(40);
  textWrap(WORD);
  fill(0);
  
  // using 4 parameters (x, y, maxWidth) enables textWrap to 
  // work properly
  text(displayText, 50, 60, 400); 
}

to-do:

~~p5.js speech recognition~~

~~display text recognized (to fill the canvas)~~

reactivity (text distort through noise() function)

or/and text color changes every so often

let myRec = new p5.SpeechRec('en-US', parseResult); 
// connect function on initialization
let displayText = "click to start 🗣️...";

function setup() {
  createCanvas(500, 500);
  
  myRec.interimResults = true; 
  // shows live transcription of speech
  myRec.continuous = true;     
  // keep listening continuously
}

function mousePressed() {
  myRec.start();
  
  // restart automatically if recognition ends
  myRec.onEnd = function() {
    myRec.start();
  };
}

function parseResult() {
  if (myRec.resultValue) {
    displayText = myRec.resultString.toLowerCase();
    //text to display lowercase
    
    // display-print the transcription to the console
    console.log("transcribed:", displayText);
  }
}

function draw() {
  background("#B9CBD9 ");
  //light blue background color
  
  // configure text formatting BEFORE calling text()
  textSize(40);
  textWrap(WORD);
  fill(0);
  
  // using 4 parameters (x, y, maxWidth) enables textWrap to work properly
  text(displayText, 50, 60, 400); 
}