setup()
setup() runs exactly once when the sketch starts. It's the right place to build up your starting data - here that means pre-filling the clouds and particles arrays with plain objects so draw() can just update and reuse them every frame instead of recreating them.
🔬 This loop fills the particles array before the sketch even starts drawing. What happens visually if you change size: random(1, 3) to size: random(1, 8) - do the dust motes start to look more like snow?
// Initialize background particles
for (let i = 0; i < numParticles; i++) {
particles.push({
x: random(width),
y: random(height),
size: random(1, 3),
speed: random(0.1, 0.5),
color: color(255, random(50, 150)), // Semi-transparent white
direction: random(TWO_PI)
});
}function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(RADIANS); // Ensure angles are in radians for trigonometric functions
// Define leaf colors for the autumn transition
leafColor1 = color(0, 150, 0); // Initial Green
leafColor2 = color(255, 165, 0); // Orange
leafColor3 = color(255, 0, 0); // Red
leafColor4 = color(255, 255, 0); // Yellow
// Define trunk color (brown)
trunkColor = color(100, 60, 30);
// Define initial sky colors (will be dynamically updated)
skyColor1 = color(173, 216, 230); // Light Blue
skyColor2 = color(255, 192, 203); // Pink
// Define sun/moon color (yellow for sun, light grey for moon - based on autumn progress)
sunMoonColor = color(255, 200, 0); // Default to yellow sun
// Randomize the initial angle offset for a more organic tree lean
treeInitialAngleOffset = random(-PI / 20, PI / 20); // +/- 9 degrees
// Initialize wind direction noise offset
windDirectionNoiseOffset = random(1000);
// Initialize branch growth noise offset
branchNoiseOffset = random(1000);
// Initialize clouds
for (let i = 0; i < numClouds; i++) {
clouds.push({
x: random(width),
y: random(height * 0.1, height * 0.4),
size: random(width * 0.1, width * 0.25),
detail: floor(random(5, 10))
});
}
// Initialize background particles
for (let i = 0; i < numParticles; i++) {
particles.push({
x: random(width),
y: random(height),
size: random(1, 3),
speed: random(0.1, 0.5),
color: color(255, random(50, 150)), // Semi-transparent white
direction: random(TWO_PI)
});
}
}Line-by-line explanation (7 lines)
🔧 Subcomponents:
for-loop
Cloud Initialization Loop
for (let i = 0; i < numClouds; i++) {
Creates numClouds cloud objects with random position, size, and detail, stored in the clouds array
for-loop
Particle Initialization Loop
for (let i = 0; i < numParticles; i++) {
Creates numParticles dust/star objects with random position, speed, and direction
createCanvas(windowWidth, windowHeight);- Makes the canvas fill the entire browser window instead of a fixed size.
angleMode(RADIANS);- Tells p5 that all angle arguments (to sin, cos, rotate, etc.) are in radians rather than degrees - the default, but stated explicitly here for clarity.
leafColor1 = color(0, 150, 0); // Initial Green- Stores the starting leaf color as a p5.Color object so it can be reused and interpolated later.
treeInitialAngleOffset = random(-PI / 20, PI / 20); // +/- 9 degrees- Picks a small random tilt for the whole tree so it doesn't grow perfectly straight up every time.
windDirectionNoiseOffset = random(1000);- Picks a random starting point inside Perlin noise space, so every reload produces a different but still smooth wind pattern.
clouds.push({- Adds a new plain JavaScript object (not a class) to the clouds array, each with its own x, y, size, and detail level.
particles.push({- Adds a new dust/star object to the particles array with a random speed and direction of drift.
