setup()
setup() runs exactly once when the sketch starts, making it the right place to configure canvas size, drawing defaults, and to build any starting data (like the stars array) that draw() will use repeatedly.
function setup() {
createCanvas(windowWidth, windowHeight); noStroke(); textAlign(CENTER, CENTER); textSize(26);
for (let i = 0; i < 180; i++) stars.push({ x: random(width), y: random(height) });
}Line-by-line explanation (5 lines)
🔧 Subcomponents:
for-loop
Star Field Creation
for (let i = 0; i < 180; i++) stars.push({ x: random(width), y: random(height) });
Creates 180 star objects at random positions and stores them in the global stars array so draw() can render them every frame.
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window, so the 8-ball scene always spans the whole screen.
noStroke();- Turns off outlines by default for shapes drawn later, like the ball and triangle (stars turn stroke back on themselves in draw()).
textAlign(CENTER, CENTER);- Makes any text() call center itself horizontally and vertically on the coordinates given, which is exactly what's needed for the answer text inside the triangle.
textSize(26);- Sets the default font size in pixels used whenever text() is called.
for (let i = 0; i < 180; i++) stars.push({ x: random(width), y: random(height) });- Runs 180 times, each time creating a plain object with random x and y coordinates and adding it to the stars array.
