setup()
setup() runs exactly once when the sketch starts. It is the perfect place to initialize variables, create the canvas, and build UI elements that exist for the entire program's lifetime.
function setup() {
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < 200; i++) {
bgDots.push({
x: random(width),
y: random(height),
size: random(2, 5),
speed: random(0.2, 0.6)
});
}
setupUI();
}Line-by-line explanation (7 lines)
🔧 Subcomponents:
function_call
Canvas initialization
createCanvas(windowWidth, windowHeight);
Creates a p5.js canvas that fills the entire browser window
for-loop
Background particles loop
for (let i = 0; i < 200; i++) {
Populates bgDots array with 200 randomly positioned particles with varying sizes and speeds
function_call
UI construction
setupUI();
Calls setupUI() to create all login and data-entry form elements in the DOM
createCanvas(windowWidth, windowHeight);- Creates a full-screen p5.js canvas; windowWidth and windowHeight are p5.js variables that equal the browser window dimensions
for (let i = 0; i < 200; i++) {- Loops 200 times to create 200 background dot particles
x: random(width),- Assigns each dot a random horizontal position between 0 and the canvas width
y: random(height),- Assigns each dot a random vertical position between 0 and the canvas height
size: random(2, 5),- Gives each dot a random diameter between 2 and 5 pixels
speed: random(0.2, 0.6)- Assigns each dot an upward drift speed between 0.2 and 0.6 pixels per frame
setupUI();- Calls the setupUI function to create all HTML form elements that users interact with
