setup()
setup() runs once when the sketch loads. It's your chance to initialize the canvas size, load resources (in this case, speech voices), connect to HTML elements, and set up event listeners so the sketch can respond to user interaction.
function setup() {
createCanvas(windowWidth, windowHeight);
setupSpeechRecognition();
availableVoices = window.speechSynthesis.getVoices();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = () => {
availableVoices = window.speechSynthesis.getVoices();
};
}
textAlign(CENTER, CENTER);
rectMode(CENTER);
noStroke();
chatInput = document.getElementById('chat-input');
sendBtn = document.getElementById('send-btn');
settingsToggle = document.getElementById('settings-toggle');
settingsPanel = document.getElementById('settings-panel');
pitchSlider = document.getElementById('slider-pitch');
speedSlider = document.getElementById('slider-speed');
realismSlider = document.getElementById('slider-realism');
checkBreathe = document.getElementById('check-breathe');
checkTrack = document.getElementById('check-track');
sendBtn.addEventListener('click', handleChatSubmit);
chatInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') handleChatSubmit();
});
settingsToggle.addEventListener('click', () => {
settingsPanel.style.display = (settingsPanel.style.display === 'block') ? 'none' : 'block';
});
pitchSlider.addEventListener('input', () => document.getElementById('pitch-val').innerText = pitchSlider.value);
speedSlider.addEventListener('input', () => document.getElementById('speed-val').innerText = speedSlider.value);
realismSlider.addEventListener('input', () => document.getElementById('realism-val').innerText = realismSlider.value + "%");
}Line-by-line explanation (9 lines)
🔧 Subcomponents:
initialization
Voice Pre-loading
availableVoices = window.speechSynthesis.getVoices();
Caches system voices before they're needed so speech synthesis doesn't lag on first use
initialization
DOM Element Linking
chatInput = document.getElementById('chat-input');
Connects JavaScript variables to HTML elements so sliders and buttons can control the sketch
event-listener
Event Listener Binding
sendBtn.addEventListener('click', handleChatSubmit);
Attaches click handlers to buttons and keyboard events so user input triggers speech processing
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window, making Bob the focus of the screen
setupSpeechRecognition();- Calls a helper function to initialize the Web Speech API so Bob can listen to your voice
availableVoices = window.speechSynthesis.getVoices();- Retrieves all voices installed on the system before they're needed, preventing lag when Bob first speaks
textAlign(CENTER, CENTER);- Sets text alignment to center both horizontally and vertically, so all text is centered around its position
rectMode(CENTER);- Changes how rectangles are drawn—when you draw a rect, its position is now its center, not its top-left corner
chatInput = document.getElementById('chat-input');- Finds the HTML input field and stores it in a variable so JavaScript can read what the user types
sendBtn.addEventListener('click', handleChatSubmit);- When the user clicks the Send button, the handleChatSubmit function runs
chatInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') handleChatSubmit(); });- Lets users press Enter in the text input to submit instead of clicking the button
settingsToggle.addEventListener('click', () => { settingsPanel.style.display = (settingsPanel.style.display === 'block') ? 'none' : 'block'; });- Toggles the settings menu open and closed when the user clicks the gear icon
