setup()
setup() runs once when p5.js loads. It prepares the DOM elements (HTML divs, input fields, buttons) and initializes the chatbot's memory so Larry can continue learning across sessions.
function setup() {
noCanvas();
loadMemory();
const app = select("#app");
app.html("");
createElement("h1", "Larry").parent(app);
chatHistoryDiv = createDiv().parent(app);
chatHistoryDiv.id("chatHistoryDiv");
const row = createDiv().parent(app);
row.addClass("row");
inputField = createInput().parent(row);
inputField.id("inputField");
sendButton = createButton("Send");
sendButton.parent(row);
sendButton.id("sendButton");
sendButton.mousePressed(sendCurrentMessage);
voiceButton = createButton("🎤");
voiceButton.parent(row);
voiceButton.id("voiceButton");
voiceButton.mousePressed(startVoice);
inputField.elt.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
e.preventDefault();
sendCurrentMessage();
}
});
addMessage("bot", "Hello. I am Larry 🤖");
}
Line-by-line explanation (12 lines)
🔧 Subcomponents:
const app = select("#app");
app.html("");
createElement("h1", "Larry").parent(app);
chatHistoryDiv = createDiv().parent(app);
Finds the HTML container and builds the chat interface structure (title, message history area)
inputField = createInput().parent(row);
inputField.id("inputField");
sendButton = createButton("Send");
sendButton.mousePressed(sendCurrentMessage);
voiceButton = createButton("🎤");
voiceButton.mousePressed(startVoice);
Creates the text input field and buttons, wiring them to send and voice functions
inputField.elt.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
e.preventDefault();
sendCurrentMessage();
}
});
Allows users to send messages by pressing Enter instead of clicking Send
noCanvas();- Tells p5.js not to create a canvas—we're building a DOM-based chat UI, not drawing with graphics
loadMemory();- Loads Larry's brain from localStorage so it remembers previous conversations, learned facts, and your name
const app = select("#app");- Selects the HTML div with id='app' from index.html where the chat UI will be built
app.html("");- Clears any existing content in the app div before building fresh UI
createElement("h1", "Larry").parent(app);- Creates an <h1> heading reading 'Larry' and places it inside the app div
chatHistoryDiv = createDiv().parent(app);- Creates the main area where all chat messages (yours and Larry's) will appear
inputField = createInput().parent(row);- Creates a text input field where you type messages
sendButton.mousePressed(sendCurrentMessage);- Wires the Send button so clicking it calls sendCurrentMessage() to submit your text
voiceButton.mousePressed(startVoice);- Wires the microphone button so clicking it activates speech recognition
if (e.key === "Enter") {- Checks if the key pressed is Enter (Return)
e.preventDefault();- Prevents the normal Enter key behavior (newline in text field) so we can send instead
addMessage("bot", "Hello. I am Larry 🤖");- Displays Larry's greeting message in the chat when setup finishes