setup()
setup() runs once when the sketch starts. It's where you initialize the canvas, set up global variables, and create entities that exist from the beginning. The try-catch block catches errors so a broken setup doesn't crash silently—instead, an error message prints to the console.
🔬 This loop spawns customers off-screen left. What happens if you change random(100, height - 100) to random(height / 2, height) so all initial customers start in the bottom half?
// Spawn a few initial customers to prevent an empty screen at the start
for (let i = 0; i < 3; i++) {
customers.push(new Customer(-CUSTOMER_SIZE * (i + 1), random(100, height - 100)));function setup() {
try {
createCanvas(windowWidth, windowHeight);
lastCustomerSpawnTime = millis();
// Spawn a few initial customers to prevent an empty screen at the start
for (let i = 0; i < 3; i++) {
customers.push(new Customer(-CUSTOMER_SIZE * (i + 1), random(100, height - 100))); // Spawn off-screen left at random height
}
// NEW: Generate 100 background stars (RESTORED)
for (let i = 0; i < 100; i++) {
backgroundStars.push({
x: random(width),
y: random(height / 2), // Top half of the screen
size1: random(5, 10),
size2: random(10, 20),
points: floor(random(5, 8)) // 5, 6, or 7 points
});
}
// NEW: Create Image Upload Input and People Call Button (RESTORED)
imageInput = createInput('', 'file');
imageInput.position(20, height - 80);
imageInput.size(150, 20);
imageInput.attribute('accept', 'image/*'); // Only accept image files
imageInput.elt.addEventListener('change', handleImageUpload);
peopleCallCustomButton = createButton('People Call Image!');
peopleCallCustomButton.position(20, height - 50);
peopleCallCustomButton.size(150, 30);
peopleCallCustomButton.mousePressed(callCustomImagePerson);
} catch (error) {
console.error("Error in setup():", error);
// Optionally display an error message on the screen if canvas fails
textSize(24);
textAlign(CENTER, CENTER);
text("Error in Setup!", width/2, height/2);
}
}Line-by-line explanation (7 lines)
🔧 Subcomponents:
function-call
Canvas creation and timing
createCanvas(windowWidth, windowHeight);
lastCustomerSpawnTime = millis();
Sets up a full-screen canvas and initializes the spawn timer so customers start arriving immediately
for-loop
Spawn initial customers
for (let i = 0; i < 3; i++) {
customers.push(new Customer(-CUSTOMER_SIZE * (i + 1), random(100, height - 100)));
}
Creates three customers off-screen left at staggered x positions so they don't all arrive at once
for-loop
Generate background stars
for (let i = 0; i < 100; i++) {
backgroundStars.push({
x: random(width),
y: random(height / 2),
size1: random(5, 10),
size2: random(10, 20),
points: floor(random(5, 8))
});
}
Populates the backgroundStars array with 100 star objects containing position and size properties for visual decoration
function-call
Create image upload UI
imageInput = createInput('', 'file');
imageInput.position(20, height - 80);
imageInput.size(150, 20);
imageInput.attribute('accept', 'image/*');
imageInput.elt.addEventListener('change', handleImageUpload);
Creates a file input element at the bottom left that accepts image files and triggers handleImageUpload when a file is selected
function-call
Create People Call button
peopleCallCustomButton = createButton('People Call Image!');
peopleCallCustomButton.position(20, height - 50);
peopleCallCustomButton.size(150, 30);
peopleCallCustomButton.mousePressed(callCustomImagePerson);
Creates a button that spawns custom image attackers, toggling spam mode when clicked
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire window. windowWidth and windowHeight are p5.js variables that adjust if the window resizes.
lastCustomerSpawnTime = millis();- Records the current milliseconds so the draw loop can track when to spawn the next customer (via CUSTOMER_SPAWN_INTERVAL).
customers.push(new Customer(-CUSTOMER_SIZE * (i + 1), random(100, height - 100)));- Adds three new Customer objects to the customers array. They spawn off-screen left (negative x) at random heights so the restaurant doesn't start empty.
backgroundStars.push({ x: random(width), y: random(height / 2), size1: random(5, 10), size2: random(10, 20), points: floor(random(5, 8)) });- Adds a star object with random position (top half only), two size values for the star's inner and outer radius, and a random point count (5–7) so stars look different.
imageInput.attribute('accept', 'image/*');- Restricts the file picker to image files only, preventing accidental uploads of text or videos.
imageInput.elt.addEventListener('change', handleImageUpload);- Attaches a listener so when the user picks an image, handleImageUpload() fires immediately to load the image into the customImage variable.
peopleCallCustomButton.mousePressed(callCustomImagePerson);- Binds the button so clicking it calls callCustomImagePerson(), which toggles image spam mode and spawns the first attacker.
