3D Rotating Flower Field (Dark Mode)

An interactive 3D flower field animation built with HTML5 Canvas and vanilla JavaScript. Features a rotating perspective view with colorful flowers moving through 3D space in a dark, dreamy environment.

Features

• Dark Mode: Features a deep dark background with vibrant flowers
• 3D Perspective: Flowers move through 3D space with realistic depth perception
• Rotation Effect: The entire flower field slowly rotates around the center
• Colorful Flowers: Each flower has a pastel hue generated using HSL colors
• Variety of Flowers: Random number of petals (5-8) and weighted size distribution
• Responsive Design: Automatically adjusts to window size changes
• Smooth Animation: Uses requestAnimationFrame for optimal performance

How it Works

• 300 flowers are generated with random positions, colors, sizes, and speeds
• Each flower exists in 3D space (x, y, z coordinates)
• Flowers rotate around the center using trigonometric functions
• Perspective projection creates the illusion of depth
• Flowers that move off-screen are recycled to the back of the scene

Usage

Simply open index.html in a web browser. The animation starts automatically and fills the entire viewport.

Customization

You can adjust various parameters in constants.js:

• NUM_FLOWERS: Number of flowers (default: 300)
• MIN_FLOWER_SIZE / MAX_FLOWER_SIZE: Flower size range
• MIN_SPEED / MAX_SPEED: Flower movement speed range
• PERSPECTIVE_FACTOR: Controls depth effect intensity
• ROTATION_SPEED: How fast the flower field rotates
• BG_COLOR: Background color (dark theme)
• SIZE_DISTRIBUTION: Weighted distribution for flower sizes (small, medium, large)

Files

• index.html: Main HTML structure
• index.js: Animation controller
• renderer.js: Canvas rendering logic
• flower.js: Flower generation and properties
• constants.js: Configuration parameters
• styles.css: Basic styling for full-screen display