setup()
setup() runs once when the sketch starts. It initializes all global variables, creates the canvas, and populates arrays with clouds and particles. This is where you define starting colors, sizes, and positions that will be used throughout the sketch.
function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(RADIANS);
leafColor1 = color(0, 150, 0);
leafColor2 = color(255, 165, 0);
leafColor3 = color(255, 0, 0);
leafColor4 = color(255, 255, 0);
trunkColor = color(100, 60, 30);
skyColor1 = color(173, 216, 230);
skyColor2 = color(255, 192, 203);
sunMoonColor = color(255, 200, 0);
treeInitialAngleOffset = random(-PI / 20, PI / 20);
windDirectionNoiseOffset = random(1000);
branchNoiseOffset = random(1000);
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))
});
}
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)),
direction: random(TWO_PI)
});
}
}๐ง Subcomponents:
initialization
Canvas and Angle Mode Setup
createCanvas(windowWidth, windowHeight); angleMode(RADIANS);
Creates a canvas that fills the entire window and sets angles to use radians (required for trigonometric functions)
initialization
Color Palette Initialization
leafColor1 = color(0, 150, 0); leafColor2 = color(255, 165, 0); leafColor3 = color(255, 0, 0); leafColor4 = color(255, 255, 0);
Defines the four autumn transition colors: green, orange, red, and yellow
initialization
Noise Offset Randomization
windDirectionNoiseOffset = random(1000); branchNoiseOffset = random(1000);
Creates unique random starting points for Perlin noise functions to ensure different wind and branch patterns each run
for-loop
Cloud Array Population
for (let i = 0; i < numClouds; i++) { clouds.push({...}); }
Creates 5 cloud objects with random positions, sizes, and detail levels
for-loop
Particle Array Population
for (let i = 0; i < numParticles; i++) { particles.push({...}); }
Creates 200 background particles (dust/stars) with random positions, speeds, and directions
Line by Line:
createCanvas(windowWidth, windowHeight)- Creates a canvas that fills the entire browser window, making the sketch responsive to window size
angleMode(RADIANS)- Sets all angle measurements to use radians instead of degrees, which is required for sin() and cos() trigonometric functions
leafColor1 = color(0, 150, 0)- Defines the first leaf color as green (RGB: 0, 150, 0) for the start of autumn
treeInitialAngleOffset = random(-PI / 20, PI / 20)- Gives the tree a random initial lean between -9 and +9 degrees to make it look more natural and organic
windDirectionNoiseOffset = random(1000)- Creates a random starting point for the Perlin noise that controls wind direction, ensuring different wind patterns each time
clouds.push({x: random(width), y: random(height * 0.1, height * 0.4), ...})- Adds a new cloud object to the clouds array with random properties for position, size, and visual detail
particles.push({x: random(width), y: random(height), ...})- Adds a new particle object to the particles array with random position, speed, and direction for background atmosphere
