Dynamic Wave Animation with JavaScript & Canvas

Description

Bring your screen to life with a mesmerizing wave animation using pure JavaScript and the HTML5 Canvas API. This project generates dynamic, smoothly flowing waves that continuously evolve over time, creating a visually appealing effect.

Features:

✅ Realistic Wave Motion – Uses sine functions to create smooth, natural-looking waves.
✅ Dynamic Animation – Waves shift and evolve with a fading effect for a seamless transition.
✅ Randomized Wave Properties – Each wave has a unique amplitude, frequency, and speed.
✅ Responsive Design – Adjusts to screen size dynamically when the window is resized.
✅ Vibrant Color Scheme – HSL-based stroke colors create a beautiful gradient effect.

How It Works:

The animation is achieved using trigonometric sine waves, with each wave having:

A base Y position, which is randomized within a range.
A wavelength, affecting how stretched out the wave looks.
An amplitude, controlling wave height.
A speed, determining how fast it oscillates.
A phase shift, which updates on every frame to create continuous motion.

Using requestAnimationFrame(), the animation is drawn repeatedly, giving an ultra-smooth visual effect. The canvas is also resized dynamically when the window size changes, ensuring the animation always fits perfectly.