setup()
setup() runs exactly once when the sketch starts. Use it to initialize canvas, load assets, and call helper functions that set up your game world.
function setup() {
createCanvas(windowWidth, windowHeight);
loadImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoFui8C0lSswDQTAffLhIUuAA9Ca2J_F5Uiw&s',
img => posterImg = img,
err => console.log('Poster image blocked by CORS, using fallback.')
);
setupUI();
setupAudio();
}Line-by-line explanation (6 lines)
🔧 Subcomponents:
function-call
Create Canvas
createCanvas(windowWidth, windowHeight);
Creates a full-screen canvas that fills the browser window
async-load
Load Poster Image
loadImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoFui8C0lSswDQTAffLhIUuAA9Ca2J_F5Uiw&s',
Attempts to load a poster image from the internet; if blocked by CORS, falls back to a drawn rectangle
createCanvas(windowWidth, windowHeight);- Creates a canvas that matches the current window dimensions. This runs once at startup and resizes automatically when windowResized() is called.
loadImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoFui8C0lSswDQTAffLhIUuAA9Ca2J_F5Uiw&s',- Attempts to load an image from Google's servers. The callback function runs if successful; the error handler runs if CORS blocks the load (which it usually does).
img => posterImg = img,- Arrow function that stores the loaded image in the global posterImg variable so drawRoom() can display it.
err => console.log('Poster image blocked by CORS, using fallback.')- Arrow function that logs a message if the image fails to load—the sketch continues normally and uses a gray rectangle instead.
setupUI();- Calls the setupUI function to create all HTML buttons and text displays (start screen, HUD, camera buttons, admin panel).
setupAudio();- Calls the setupAudio function to initialize all procedural oscillators, envelopes, and noise generators for sound effects.
