setup()
setup() runs once when the sketch starts. It is the perfect place to initialize your canvas size, set drawing properties like colors and text alignment, and display static instructions that appear before any animation.
function setup() {
createCanvas(windowWidth, windowHeight);
background(220); // Light grey background
textAlign(CENTER, CENTER);
textSize(18);
fill(50);
noStroke();
// Initial prompt
text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, height / 2);
}
Line-by-line explanation (6 lines)
createCanvas(windowWidth, windowHeight);- Creates a canvas that fills the entire browser window, making the sketch responsive to different screen sizes
background(220);- Fills the canvas with light gray (RGB value 220 for all channels) as the starting background
textAlign(CENTER, CENTER);- Centers all text both horizontally and vertically at the coordinates where text is drawn
textSize(18);- Sets the font size to 18 pixels for the instruction text
fill(50);- Sets the color for all subsequent shapes and text to dark gray (RGB 50)
text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, height / 2);- Displays the instruction prompt centered on the canvas, telling the user how to use the sketch