setup()
setup() runs once when the sketch launches. It initializes the canvas size, creates the central mycelium network, and populates the spores array. This is where you set up all the global objects that draw() will animate each frame.
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
console.log("Setup called - Canvas size:", width, "x", height);
// Initialize the mycelium network from the center
mycelium = new Mycelium(width / 2, height / 2);
console.log("Mycelium created with", mycelium.branches.length, "initial branches");
console.log("Active tips:", mycelium.activeTips.length);
// Initialize spores
for (let i = 0; i < SPORE_COUNT; i++) {
spores.push(new Spore(random(width), random(height)));
}
console.log("Setup complete");
}Line-by-line explanation (5 lines)
🔧 Subcomponents:
function-call
Canvas Creation
createCanvas(windowWidth, windowHeight);
Creates a full-screen canvas that scales to the window size
object-instantiation
Mycelium Initialization
mycelium = new Mycelium(width / 2, height / 2);
Creates the root mycelium network at the center of the screen
for-loop
Spore Initialization
for (let i = 0; i < SPORE_COUNT; i++) {
spores.push(new Spore(random(width), random(height)));
}
Populates the spores array with 150 Spore objects at random positions
createCanvas(windowWidth, windowHeight);- Creates a p5.js canvas that fills the entire browser window using the windowWidth and windowHeight variables.
background(0);- Fills the canvas with black (RGB value 0), setting the initial dark background.
mycelium = new Mycelium(width / 2, height / 2);- Instantiates a new Mycelium object at the center of the canvas (width/2, height/2). The Mycelium constructor creates five root branches radiating outward.
for (let i = 0; i < SPORE_COUNT; i++) {- Loops 150 times (SPORE_COUNT is 150), creating a new Spore for each iteration.
spores.push(new Spore(random(width), random(height)));- Creates a Spore at a random x and y position on the canvas and adds it to the spores array.
