Animated Circle - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Initialize snow pile heights. Each element corresponds to a segment of the canvas width.
  // All segments start at 0 height.
  snowPileHeights = Array(floor(width / pileResolution)).fill(0);
  frameRate(30); // Set a stable frame rate for consistent animation
}

function draw() {
  background(0, 0, 50); // Dark blue night sky

  // Generate new snowflakes randomly
  // Adjust the random() threshold (e.g., 0.2) to control the density of snowflakes
  if (random(1) < 0.2) {
    snowflakes.push(new Snowflake());
  }

  // Update, display, and manage snowflakes
  // Loop backward to safely remove snowflakes from the array without affecting iteration
  for (let i = snowflakes.length - 1; i >= 0; i--) {
    let flake = snowflakes[i];
    flake.fall(); // Make the snowflake fall and drift
    flake.show(); // Display the snowflake

    // Calculate the horizontal index for the snow pile based on snowflake's x position
    let pileIndex = floor(flake.x / pileResolution);

    // Check if the snowflake has hit the bottom or the existing snow pile
    if (pileIndex >= 0 && pileIndex < snowPileHeights.length) { // Ensure pileIndex is within bounds
      if (flake.y >= height - snowPileHeights[pileIndex]) {
        // Snowflake has hit the pile
        // Add its size (or a fraction of it) to the snow pile height at this segment
        // Scaling by 0.5 makes the pile grow slower and smoother
        snowPileHeights[pileIndex] += flake.size * 0.5;

        // Cap the snow pile height so it doesn't exceed the canvas height
        if (snowPileHeights[pileIndex] > height) {
          snowPileHeights[pileIndex] = height;
        }

        snowflakes.splice(i, 1); // Remove the snowflake from the array
      }
    } else if (flake.y > height + flake.size || flake.x < -flake.size || flake.x > width + flake.size) {
      // If the snowflake flew off the bottom or sides of the canvas without hitting the pile
      snowflakes.splice(i, 1); // Remove it
    }
  }

  // Draw the snow pile at the bottom of the canvas
  fill(255); // White color for the snow
  noStroke(); // No outline for the snow pile segments
  for (let i = 0; i < snowPileHeights.length; i++) {
    let h = snowPileHeights[i]; // Get the height of the snow at this segment
    // Draw a rectangle for each segment of the snow pile
    rect(i * pileResolution, height - h, pileResolution, h);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Recalculate snow pile properties based on the new canvas width
  pileResolution = width / 10; // Maintain the same resolution
  snowPileHeights = Array(floor(width / pileResolution)).fill(0);
  snowflakes = []; // Clear all snowflakes when the window is resized for a fresh start
}

class Snowflake {
  constructor() {
    // Start snowflakes randomly across the width and slightly above the canvas
    this.x = random(width);
    this.y = random(-100, 0);
    // Random size between 5 and 15 pixels
    this.size = random(5, 15);
    // Random falling speed between 1 and 3 pixels per frame
    this.speed = random(1, 3);
    // Random offset for the sin() function to create varied horizontal swaying
    this.driftOffset = random(100);
  }
}

  fall() {
    // Update vertical position based on speed
    this.y += this.speed;
    // Add slight horizontal drift using sin() for gentle swaying
    // The frequency (0.05) and amplitude (1) can be adjusted for different drift effects
    this.x += sin((frameCount + this.driftOffset) * 0.05) * 1;
  }

  show() {
    noStroke(); // No outline for snowflakes
    fill(255); // White color for snowflakes
    circle(this.x, this.y, this.size); // Draw the snowflake as a circle
  }