setup()
setup() runs once when the sketch starts. It's the perfect place to initialize your canvas, create objects, and set starting positions. The stars array stores objects (not just numbers), which allows each star to have multiple properties like position, size, and animation offset.
function setup() {
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < 200; i++) { stars.push({ x: random(width), y: random(height), size: random(1, 3), alphaOffset: random(TWO_PI) }); }
moonX = width / 2;
moonY = height / 2;
}π§ Subcomponents:
function-call
Canvas Creation
createCanvas(windowWidth, windowHeight)
Creates a canvas that fills the entire browser window, allowing the sketch to be responsive
for-loop
Star Generation Loop
for (let i = 0; i < 200; i++) { stars.push({ x: random(width), y: random(height), size: random(1, 3), alphaOffset: random(TWO_PI) }); }
Creates 200 star objects with random positions, sizes, and animation offsets, storing them in the stars array
calculation
Moon Position Initialization
moonX = width / 2; moonY = height / 2;
Centers the moon in the middle of the canvas by setting its coordinates to the canvas center
Line by Line:
createCanvas(windowWidth, windowHeight)- Creates a canvas that matches the full browser window size, making the visualization responsive to window resizing
for (let i = 0; i < 200; i++)- Loops 200 times to create 200 individual stars in the night sky
stars.push({ x: random(width), y: random(height), size: random(1, 3), alphaOffset: random(TWO_PI) })- Creates a star object with random x/y position anywhere on canvas, random size between 1-3 pixels, and a random phase offset (0 to 2Ο) for twinkling animation
moonX = width / 2- Sets the moon's horizontal position to the exact center of the canvas
moonY = height / 2- Sets the moon's vertical position to the exact center of the canvas
