setup()
setup() runs once when the sketch starts. It's the perfect place to initialize all your game state: canvas, arrays of objects, buttons, and any static layers (like the background buffer). Notice how each creature type gets its own array (jellyfishList, fishList, etc.) and its own spawn loop—this makes the code repetitive but easy to extend with new species.
🔬 This loop spawns jellies at random x between 15% and 85% of canvas width. What happens if you change the x range to random(0, width) so they can spawn at the edges? Or what if you change y to always spawn at the top: y = 0?
for (let i = 0; i < NUM_JELLYFISH; i++) {
const x = random(width * 0.15, width * 0.85);
const y = random(height);
const baseSize = random(18, 40);
const hue = random(190, 320);
jellyfishList.push(new Jellyfish(x, y, baseSize, hue));
}function setup() {
createCanvas(windowWidth, windowHeight);
coins = 200;
bgLayer = createGraphics(windowWidth, windowHeight);
drawBackground(bgLayer);
// Jellyfish
for (let i = 0; i < NUM_JELLYFISH; i++) {
const x = random(width * 0.15, width * 0.85);
const y = random(height);
const baseSize = random(18, 40);
const hue = random(190, 320);
jellyfishList.push(new Jellyfish(x, y, baseSize, hue));
}
// Fish
for (let i = 0; i < NUM_FISH; i++) {
const x = random(width);
const y = random(height * 0.1, height * 0.9);
const size = random(15, 35);
const hue = random() < 0.5 ? random(0, 60) : random(150, 250);
const direction = random() < 0.5 ? 1 : -1;
fishList.push(new Fish(x, y, size, hue, direction));
}
// ... (all 12 creature type loops omitted for brevity) ...
// Particles
for (let i = 0; i < NUM_PARTICLES; i++) {
particles.push(new Particle(true));
}
// Bubbles
for (let i = 0; i < NUM_BUBBLES; i++) {
bubbleList.push(new Bubble(random(width), random(height), random(1, 4), random(0.1, 0.5)));
}
// --- Shop buttons ---
buyJellyfishButton = createButton(`Buy Jellyfish (${JELLYFISH_COST} coins)`);
buyJellyfishButton.class('shop-button');
buyJellyfishButton.position(20, 20);
buyJellyfishButton.mousePressed(() => {
if (coins >= JELLYFISH_COST) {
coins -= JELLYFISH_COST;
const x = random(width * 0.15, width * 0.85);
const y = height + random(100, 300);
const baseSize = random(18, 40);
const hue = random(190, 320);
jellyfishList.push(new Jellyfish(x, y, baseSize, hue));
} else {
alert("Not enough coins to buy a jellyfish!");
}
});
// ... (11 more purchase button declarations follow the same pattern) ...
}Line-by-line explanation (7 lines)
🔧 Subcomponents:
createCanvas(windowWidth, windowHeight);
Creates a full-screen canvas that fills the browser window
for (let i = 0; i < NUM_JELLYFISH; i++) { jellyfishList.push(new Jellyfish(...)); }
Loops through each creature constant, instantiates N creatures with random properties, and pushes them into their species-specific array
buyJellyfishButton = createButton(`Buy Jellyfish (${JELLYFISH_COST} coins)`);
Creates a clickable button that deducts coins and spawns a new creature if the player has enough balance
createCanvas(windowWidth, windowHeight);- Creates a p5.js canvas that matches the browser window size, which will be the drawing surface for all aquarium creatures
coins = 200;- Sets the player's starting coin balance to 200—enough to buy several cheap creatures or a few expensive ones
bgLayer = createGraphics(windowWidth, windowHeight);- Creates an off-screen graphics buffer (the same size as the main canvas) where the ocean background will be drawn once and reused every frame
drawBackground(bgLayer);- Calls a helper function to fill the buffer with a gradient ocean, light rays, and other static scenery that won't change
for (let i = 0; i < NUM_JELLYFISH; i++) { const x = random(width * 0.15, width * 0.85);- Spawns NUM_JELLYFISH (14) new Jellyfish objects at random x positions between 15% and 85% of canvas width (keeping them away from edges)
jellyfishList.push(new Jellyfish(x, y, baseSize, hue));- Adds the newly created Jellyfish to the jellyfishList array so it will be updated and drawn every frame
buyJellyfishButton.mousePressed(() => { if (coins >= JELLYFISH_COST) { coins -= JELLYFISH_COST; jellyfishList.push(new Jellyfish(...)); } });- Registers a click listener on the button—when clicked, it checks if the player has enough coins, deducts the cost, and spawns a new jellyfish
