setup()
setup() runs once when the sketch first loads. It's the perfect place to initialize the canvas, set starting variable values, and configure interactive elements like buttons and input fields.
🔬 These lines style the input field. What happens if you change 'width' from '200px' to '400px'? Try it and watch the input field grow wider.
inputField.style('width', '200px');
inputField.style('padding', '5px');
inputField.style('border', '1px solid #ccc');
inputField.style('border-radius', '5px');
inputField.style('font-size', '16px');
function setup(){
createCanvas(windowWidth,windowHeight);
textAlign(CENTER,CENTER);
textSize(20);
displayedDreamsIndices = new Set(); // Initialize the Set
currentFishX = width / 2; // Initialize main fish's starting x-position
fishY = height/2+60 + 10; // Initialize main fishY to its default position
// Create input field and button
inputField = createInput();
inputField.style('width', '200px');
inputField.style('padding', '5px');
inputField.style('border', '1px solid #ccc');
inputField.style('border-radius', '5px');
inputField.style('font-size', '16px');
inputField.style('font-family', 'Arial, sans-serif');
inputField.attribute('placeholder', 'What do you want to say?');
inputField.hide(); // Start hidden
submitButton = createButton('Talk');
submitButton.style('background-color', '#4CAF50');
submitButton.style('color', 'white');
submitButton.style('padding', '6px 12px');
submitButton.style('border', 'none');
submitButton.style('border-radius', '5px');
submitButton.style('cursor', 'pointer');
submitButton.style('font-size', '16px');
submitButton.style('font-family', 'Arial, sans-serif');
submitButton.hide(); // Start hidden
// NEW: Create the "Visit Website" button
visitWebsiteButton = createButton('Visit Corbun\'s Weird Webs');
visitWebsiteButton.style('background-color', '#008CBA'); // Blue color
visitWebsiteButton.style('color', 'white');
visitWebsiteButton.style('padding', '8px 16px');
visitWebsiteButton.style('border', 'none');
visitWebsiteButton.style('border-radius', '5px');
visitWebsiteButton.style('cursor', 'pointer');
visitWebsiteButton.style('font-size', '16px');
visitWebsiteButton.style('font-family', 'Arial, sans-serif');
// Position elements initially (will be updated in draw or windowResized)
positionInputElements();
// Event listener for button click
submitButton.mousePressed(handleTalk);
// NEW: Event listener for "Visit Website" button click
visitWebsiteButton.mousePressed(handleVisitWebsite);
// Event listener for Enter key in input field
inputField.elt.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
handleTalk();
event.preventDefault(); // Prevent default form submission behavior
}
});
}
Line-by-line explanation (10 lines)
🔧 Subcomponents:
createCanvas(windowWidth,windowHeight);
Creates a canvas that fills the entire window and sets default text alignment and size
currentFishX = width / 2; // Initialize main fish's starting x-position
fishY = height/2+60 + 10; // Initialize main fishY to its default position
Places the fish in the center horizontally and slightly below the bowl's vertical center
inputField = createInput();
inputField.style('width', '200px');
inputField.style('padding', '5px');
inputField.style('border', '1px solid #ccc');
inputField.style('border-radius', '5px');
inputField.style('font-size', '16px');
inputField.style('font-family', 'Arial, sans-serif');
inputField.attribute('placeholder', 'What do you want to say?');
inputField.hide();
Creates a styled input field with placeholder text and hides it until the fish is awake
submitButton = createButton('Talk');
submitButton.style('background-color', '#4CAF50');
submitButton.style('color', 'white');
submitButton.style('padding', '6px 12px');
submitButton.style('border', 'none');
submitButton.style('border-radius', '5px');
submitButton.style('cursor', 'pointer');
submitButton.style('font-size', '16px');
submitButton.style('font-family', 'Arial, sans-serif');
submitButton.hide();
Creates a green 'Talk' button with styling and hides it initially
submitButton.mousePressed(handleTalk);
visitWebsiteButton.mousePressed(handleVisitWebsite);
inputField.elt.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
handleTalk();
event.preventDefault();
}
});
Connects buttons and keyboard input to their respective handler functions
createCanvas(windowWidth,windowHeight);- Creates a canvas that fills the entire browser window—essential for making the sketch responsive
textAlign(CENTER,CENTER);- Centers all text both horizontally and vertically, making thought bubble text appear in the middle of the bubble
displayedDreamsIndices = new Set();- A Set is like an array but stores only unique values—used to track which dreams have been shown, so we know when all dreams have been displayed once
currentFishX = width / 2;- Positions the fish horizontally at the center of the canvas by calculating half the width
fishY = height/2+60 + 10;- Positions the fish vertically below the bowl's center (height/2+60 is the bowl center, +10 is the fish's offset inside)
inputField.attribute('placeholder', 'What do you want to say?');- Sets the gray hint text that appears inside the input field before the user types
inputField.hide();- Hides the input field initially—it will only appear when the fish wakes up and is ready to chat
positionInputElements();- Calls a custom function to calculate and set the exact screen positions of the input, button, and website link
submitButton.mousePressed(handleTalk);- Connects the Talk button to the handleTalk function—when clicked, handleTalk() runs
inputField.elt.addEventListener('keydown', function(event) {- Listens for keyboard key presses in the input field—used to detect the Enter key for submitting without clicking the button