Snow Animation Secrets: How to Build Beautiful Effects Step-by-Step (2025)

				
					    <script>
        // Get the canvas element and its 2D rendering context
        const canvas = document.getElementById('fallingCanvas');
        const ctx = canvas.getContext('2d');

        // Set canvas dimensions to fill the entire window
        // Ensure minimum dimensions to prevent issues with calculations if innerWidth/Height are ever 0
        canvas.width = Math.max(1, window.innerWidth);
        canvas.height = Math.max(1, window.innerHeight);

        // --- Simulation Parameters ---
        const NUM_PARTICLES = 300; // Number of snowflakes/confetti pieces
        const PARTICLE_TYPE = 'snow'; // 'snow' or 'confetti'

        const GRAVITY = 0.05; // How fast particles fall downwards
        const WIND_STRENGTH = 0.5; // How strong the horizontal wind is
        const WIND_VARIATION = 0.3; // How much the wind varies (for more natural movement)
        const SPAWN_HEIGHT_VARIATION = 0.8; // Controls how far above the screen particles can spawn

        // Terrain parameters
        const TERRAIN_SMOOTHNESS = 50; // Higher value means smoother initial terrain
        const TERRAIN_HEIGHT_VARIATION = 50; // Max vertical variation of the initial terrain
        const TERRAIN_BASE_OFFSET = 50; // How far from the bottom the base terrain line is

        // Accumulation parameters
        const ACCUMULATION_FACTOR = 0.5; // How much each particle adds to the terrain height
        const TERRAIN_ACCUMULATION_SMOOTHING_RADIUS = 20; // How wide the smoothing effect is around an impact
        const TERRAIN_ACCUMULATION_SMOOTHING_ITERATIONS = 3; // How many times to apply smoothing after an impact

        let particles = []; // Array to hold all particle objects
        let groundPoints = []; // Array to store the y-coordinates of the terrain

        // --- Particle Class Definition ---
        class Particle {
            constructor(x, y, type) {
                this.x = x;
                this.y = y;
                this.type = type;

                // Random initial horizontal velocity for a natural spread
                this.vx = (Math.random() - 0.5) * WIND_STRENGTH * 2;
                this.vy = Math.random() * 2 + 1; // Initial downward velocity

                if (this.type === 'snow') {
                    this.size = Math.random() * 3 + 1; // Snowflakes: 1 to 4 pixels
                    this.color = 'rgba(255, 255, 255, ' + (Math.random() * 0.5 + 0.5) + ')'; // White, subtle transparency
                    this.rotation = 0; // No rotation for simple snowflakes
                    this.rotationSpeed = 0;
                } else { // confetti
                    this.size = Math.random() * 8 + 5; // Confetti: 5 to 13 pixels
                    this.color = `hsl(${Math.random() * 360}, 80%, 70%)`; // Random vibrant colors
                    this.rotation = Math.random() * Math.PI * 2; // Random initial rotation
                    this.rotationSpeed = (Math.random() - 0.5) * 0.05; // Subtle rotation speed
                }

                this.alpha = 1; // Initial opacity
            }

            // Updates the particle's position and properties
            update() {
                // Apply gravity
                this.vy += GRAVITY;

                // Apply wind with some variation for realism
                this.vx += (Math.random() - 0.5) * WIND_VARIATION + (WIND_STRENGTH * (this.vx > 0 ? 0.1 : -0.1));

                this.x += this.vx;
                this.y += this.vy;

                // Update rotation for confetti
                if (this.type === 'confetti') {
                    this.rotation += this.rotationSpeed;
                }

                // Get the ground height at the particle's current x position
                const groundY = getGroundHeight(this.x);

                // Check if particle hits the ground
                if (this.y + this.size >= groundY) {
                    // Particle has hit the ground, contribute to terrain and reset
                    const groundIndex = Math.max(0, Math.min(canvas.width - 1, Math.floor(this.x)));
                    
                    // Lower the ground point (increase Y value) to simulate accumulation
                    groundPoints[groundIndex] -= this.size * ACCUMULATION_FACTOR;

                    // Ensure ground doesn't go above the top of the canvas
                    groundPoints[groundIndex] = Math.max(0, groundPoints[groundIndex]);

                    // Smooth the terrain around the impact point
                    smoothTerrain(groundIndex, TERRAIN_ACCUMULATION_SMOOTHING_RADIUS, TERRAIN_ACCUMULATION_SMOOTHING_ITERATIONS);

                    this.reset(); // Reset the particle to fall again
                }

                // If particle drifts off screen horizontally, reset it
                if (this.x < -this.size || this.x > canvas.width + this.size) {
                    this.reset();
                }
            }

            // Resets particle to a new random position at the top
            reset() {
                this.x = Math.random() * canvas.width;
                // Re-spawn above the top of the canvas, with some variation
                this.y = -this.size - (Math.random() * canvas.height * SPAWN_HEIGHT_VARIATION);
                this.vx = (Math.random() - 0.5) * WIND_STRENGTH * 2;
                this.vy = Math.random() * 2 + 1;
                this.rotation = Math.random() * Math.PI * 2;
                this.alpha = 1;
            }

            // Draws the particle on the canvas
            draw() {
                ctx.save(); // Save the current canvas state (important for rotation)
                ctx.translate(this.x, this.y); // Move origin to particle's center
                ctx.rotate(this.rotation); // Apply rotation

                ctx.fillStyle = this.color;
                ctx.globalAlpha = this.alpha; // Apply particle's opacity

                if (this.type === 'snow') {
                    ctx.beginPath();
                    ctx.arc(0, 0, this.size, 0, Math.PI * 2);
                    ctx.shadowColor = 'rgba(255, 255, 255, 0.7)'; // Soft glow for snow
                    ctx.shadowBlur = this.size * 1.5;
                    ctx.fill();
                } else { // confetti
                    ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size); // Draw a square
                    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'; // Subtle shadow for confetti
                    ctx.shadowBlur = this.size / 2;
                }

                ctx.restore(); // Restore the canvas state (undo translation and rotation)
                ctx.shadowBlur = 0; // Reset shadow blur for other drawings
                ctx.globalAlpha = 1; // Reset global alpha
            }
        }

        // --- Terrain Functions ---

        // Generates the initial undulating terrain profile
        function generateTerrain() {
            groundPoints = [];
            const baseLine = canvas.height - TERRAIN_BASE_OFFSET; // Base height of the terrain

            // Ensure canvas.width is valid before looping
            const currentCanvasWidth = canvas.width > 0 ? canvas.width : window.innerWidth;

            for (let i = 0; i < currentCanvasWidth; i++) {
                // Use sine wave for general undulation, plus some randomness for "small drops"
                const sineWave = Math.sin(i / TERRAIN_SMOOTHNESS) * TERRAIN_HEIGHT_VARIATION;
                const randomVariation = (Math.random() - 0.5) * TERRAIN_HEIGHT_VARIATION * 0.5;
                groundPoints[i] = baseLine + sineWave + randomVariation;

                // Ensure initial terrain doesn't go too high or too low
                groundPoints[i] = Math.max(canvas.height - (TERRAIN_BASE_OFFSET + TERRAIN_HEIGHT_VARIATION * 1.5),
                                          Math.min(canvas.height - TERRAIN_BASE_OFFSET / 2, groundPoints[i]));
            }
        }

        // Gets the ground height at a specific x-coordinate
        function getGroundHeight(x) {
            // Ensure x is within bounds of the groundPoints array
            const clampedX = Math.max(0, Math.min(canvas.width - 1, Math.floor(x)));
            return groundPoints[clampedX];
        }

        // Smooths the terrain after a particle impact to prevent jaggedness
        function smoothTerrain(centerIndex, radius, iterations) {
            const tempGroundPoints = [...groundPoints]; // Create a copy for calculations

            for (let iter = 0; iter < iterations; iter++) {
                for (let i = 0; i < canvas.width; i++) {
                    const start = Math.max(0, i - radius);
                    const end = Math.min(canvas.width - 1, i + radius);
                    let sum = 0;
                    let count = 0;

                    for (let j = start; j <= end; j++) {
                        sum += tempGroundPoints[j];
                        count++;
                    }
                    groundPoints[i] = sum / count;
                }
                // Update tempGroundPoints for the next iteration if needed
                if (iter < iterations - 1) {
                    tempGroundPoints.splice(0, tempGroundPoints.length, ...groundPoints);
                }
            }
        }


        // Draws the generated terrain on the canvas
        function drawTerrain() {
            ctx.beginPath();
            ctx.moveTo(0, canvas.height); // Start at bottom-left corner of canvas
            ctx.lineTo(0, groundPoints[0]); // Move up to the first terrain point

            // Draw the top contour of the terrain
            for (let i = 0; i < canvas.width; i++) {
                ctx.lineTo(i, groundPoints[i]);
            }

            ctx.lineTo(canvas.width, canvas.height); // Move down to bottom-right corner of canvas
            ctx.closePath(); // Close the path to form a shape

            // Apply a gradient fill for the ground
            const gradient = ctx.createLinearGradient(0, canvas.height - (TERRAIN_BASE_OFFSET + TERRAIN_HEIGHT_VARIATION * 1.5), 0, canvas.height);
            if (PARTICLE_TYPE === 'snow') {
                gradient.addColorStop(0, '#B0C4DE'); // Light steel blue for snow ground
                gradient.addColorStop(1, '#6A7B8E'); // Darker blue-gray
            } else { // confetti
                gradient.addColorStop(0, '#8B4513'); // SaddleBrown for confetti ground
                gradient.addColorStop(1, '#5C2F00'); // Darker brown
            }
            ctx.fillStyle = gradient;
            ctx.fill();
        }

        // --- Scene Element Drawing Functions ---

        function drawHouse(x, width, height) {
            const baseGroundY = getGroundHeight(x + width / 2); // Get ground height at center of house base
            const houseBottomY = baseGroundY;
            const houseTopY = houseBottomY - height;
            const roofHeight = width * 0.4; // Roof height proportional to house width

            // House body with gradient for depth
            const houseGradient = ctx.createLinearGradient(x, houseTopY, x + width, houseTopY + height);
            houseGradient.addColorStop(0, '#8B4513'); // Darker brown left
            houseGradient.addColorStop(0.5, '#A0522D'); // Lighter brown center
            houseGradient.addColorStop(1, '#8B4513'); // Darker brown right
            ctx.fillStyle = houseGradient;
            ctx.fillRect(x, houseTopY, width, height);

            // Roof with gradient
            ctx.beginPath();
            ctx.moveTo(x - width * 0.1, houseTopY); // Extend roof slightly
            ctx.lineTo(x + width / 2, houseTopY - roofHeight);
            ctx.lineTo(x + width + width * 0.1, houseTopY); // Extend roof slightly
            ctx.closePath();
            const roofGradient = ctx.createLinearGradient(x, houseTopY - roofHeight, x + width, houseTopY);
            roofGradient.addColorStop(0, '#696969'); // Dark gray
            roofGradient.addColorStop(0.5, '#808080'); // Gray
            roofGradient.addColorStop(1, '#696969'); // Dark gray
            ctx.fillStyle = roofGradient;
            ctx.fill();

            // Door
            ctx.fillStyle = '#5C4033'; // Darker brown for door
            ctx.fillRect(x + width * 0.4, houseTopY + height * 0.6, width * 0.2, height * 0.4);
            // Doorknob
            ctx.beginPath();
            ctx.arc(x + width * 0.55, houseTopY + height * 0.8, 2, 0, Math.PI * 2);
            ctx.fillStyle = '#FFD700'; // Gold doorknob
            ctx.fill();

            // Window with frame
            ctx.fillStyle = '#ADD8E6'; // Light blue for window glass
            ctx.fillRect(x + width * 0.2, houseTopY + height * 0.2, width * 0.25, height * 0.25);
            ctx.fillStyle = '#4B3621'; // Dark brown for window frame
            ctx.fillRect(x + width * 0.18, houseTopY + height * 0.18, width * 0.29, height * 0.29);
            ctx.fillRect(x + width * 0.2, houseTopY + height * 0.325, width * 0.25, 2); // Horizontal divider
            ctx.fillRect(x + width * 0.325, houseTopY + height * 0.2, 2, height * 0.25); // Vertical divider
        }

        function drawRoadLamp(x, height) {
            const baseGroundY = getGroundHeight(x); // Get ground height at lamp base
            const poleBottomY = baseGroundY;
            const poleTopY = poleBottomY - height;
            const lampHeadSize = 12;

            // Pole with gradient
            const poleGradient = ctx.createLinearGradient(x - 5, poleTopY, x + 5, poleBottomY);
            poleGradient.addColorStop(0, '#404040'); // Darker gray top
            poleGradient.addColorStop(0.5, '#606060'); // Lighter gray middle
            poleGradient.addColorStop(1, '#404040'); // Darker gray bottom
            ctx.fillStyle = poleGradient;
            ctx.fillRect(x - 5, poleTopY, 10, height); // Wider pole

            // Lamp arm
            ctx.beginPath();
            ctx.moveTo(x + 5, poleTopY + 10);
            ctx.lineTo(x + 5 + 20, poleTopY + 10);
            ctx.lineTo(x + 5 + 20, poleTopY + 20);
            ctx.lineTo(x + 5, poleTopY + 20);
            ctx.closePath();
            ctx.fillStyle = '#404040';
            ctx.fill();

            // Lamp head (more detailed)
            ctx.beginPath();
            ctx.moveTo(x + 25, poleTopY + 20);
            ctx.lineTo(x + 25 + lampHeadSize, poleTopY + 20);
            ctx.lineTo(x + 25 + lampHeadSize * 0.8, poleTopY + 20 + lampHeadSize);
            ctx.lineTo(x + 25 - lampHeadSize * 0.8, poleTopY + 20 + lampHeadSize);
            ctx.closePath();
            ctx.fillStyle = '#606060'; // Lamp casing
            ctx.fill();

            // Light glow
            ctx.beginPath();
            ctx.arc(x + 25, poleTopY + 20 + lampHeadSize * 0.7, lampHeadSize * 0.8, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(255, 255, 150, 0.8)'; // Yellowish light
            ctx.shadowColor = 'rgba(255, 255, 150, 1)';
            ctx.shadowBlur = 25; // Stronger glow
            ctx.fill();
            ctx.shadowBlur = 0; // Reset shadow
        }

        function drawSnowman(x, baseRadius) {
            const baseGroundY = getGroundHeight(x); // Get ground height at snowman base
            const body1Y = baseGroundY - baseRadius;
            const body2Y = body1Y - baseRadius * 1.5;
            const headY = body2Y - baseRadius;

            // Function to draw a shaded snowball
            function drawShadedBall(cx, cy, r) {
                const gradient = ctx.createRadialGradient(cx - r * 0.3, cy - r * 0.3, r * 0.1, cx, cy, r);
                gradient.addColorStop(0, 'white');
                gradient.addColorStop(1, '#E0E0E0'); // Off-white for shading
                ctx.fillStyle = gradient;
                ctx.beginPath();
                ctx.arc(cx, cy, r, 0, Math.PI * 2);
                ctx.fill();
            }

            // Bottom body
            drawShadedBall(x, body1Y, baseRadius);

            // Middle body
            drawShadedBall(x, body2Y, baseRadius * 0.8);

            // Head
            drawShadedBall(x, headY, baseRadius * 0.6);

            // Eyes
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(x - baseRadius * 0.2, headY - baseRadius * 0.1, baseRadius * 0.1, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(x + baseRadius * 0.2, headY - baseRadius * 0.1, baseRadius * 0.1, 0, Math.PI * 2);
            ctx.fill();

            // Nose (more realistic carrot shape)
            ctx.fillStyle = 'orange';
            ctx.beginPath();
            ctx.moveTo(x, headY);
            ctx.lineTo(x + baseRadius * 0.4, headY + baseRadius * 0.05);
            ctx.lineTo(x + baseRadius * 0.2, headY + baseRadius * 0.2);
            ctx.closePath();
            ctx.fill();

            // Buttons
            ctx.fillStyle = '#333333';
            ctx.beginPath();
            ctx.arc(x, body2Y - baseRadius * 0.4, baseRadius * 0.08, 0, Math.PI * 2);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(x, body2Y + baseRadius * 0.1, baseRadius * 0.08, 0, Math.PI * 2);
            ctx.fill();

            // Arms (simple sticks)
            ctx.strokeStyle = '#5C4033'; // Brown for sticks
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(x - baseRadius * 0.7, body2Y);
            ctx.lineTo(x - baseRadius * 1.2, body2Y - baseRadius * 0.5);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(x + baseRadius * 0.7, body2Y);
            ctx.lineTo(x + baseRadius * 1.2, body2Y - baseRadius * 0.5);
            ctx.stroke();
        }


        // --- Initialization Function ---
        function initParticles() {
            particles = []; // Clear existing particles
            for (let i = 0; i < NUM_PARTICLES; i++) {
                // Initialize particles randomly across the visible area and above
                const x = Math.random() * canvas.width;
                // Initial y position is randomly distributed from slightly above the top
                // to within the visible canvas, creating an initial "falling" look
                const y = Math.random() * canvas.height;
                particles.push(new Particle(x, y, PARTICLE_TYPE));
            }
        }

        // --- Main Animation Loop ---
        function animate() {
            // Clear the entire canvas for each frame
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Draw the terrain first, so particles fall on top of it
            drawTerrain();

            // Draw scene elements on top of the terrain
            // Position them relative to the canvas width for responsiveness
            const houseX = canvas.width * 0.2;
            const houseWidth = 80;
            const houseHeight = 60;
            drawHouse(houseX, houseWidth, houseHeight);

            const lampX = canvas.width * 0.7;
            const lampHeight = 100;
            drawRoadLamp(lampX, lampHeight);

            const snowmanX = canvas.width * 0.85;
            const snowmanBaseRadius = 20;
            drawSnowman(snowmanX, snowmanBaseRadius);


            // Update and draw particles
            for (const particle of particles) {
                particle.update();
                particle.draw();
            }

            requestAnimationFrame(animate);
        }

        // --- Event Listeners ---
        // Handle window resizing to adjust canvas dimensions
        window.addEventListener('resize', () => {
            canvas.width = Math.max(1, window.innerWidth); // Ensure minimum width
            canvas.height = Math.max(1, window.innerHeight); // Ensure minimum height
            generateTerrain(); // Re-generate terrain to fit new canvas size
            initParticles(); // Re-initialize particles to fit new canvas size
        });

        // --- Start the Simulation ---
        window.onload = function() {
            generateTerrain(); // Generate initial terrain before starting
            initParticles(); // Generate initial particles
            animate();        // Start the animation loop
        };
    </script>