Home▸Sound & Music▸Silk Fabric Ripple in Wind (2D)

Silk Fabric Ripple in Wind (2D)

A face-on Canvas2D view of the same layered-sine-wave ripple field as the 3D silk banner, colored with the same fresnel-driven iridescent blend — drive it with wind, amplitude, frequency, shimmer and light-angle sliders, or drag the fabric directly.

Sound & Music2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

This 2D companion reuses the 3D silk banner's layered traveling-sine displacement field and its four-hue iridescent shader math, projected onto a flat face-on view instead of an orbitable 3D scene. Wind speed scales simulation time, amplitude and frequency reshape the ripple, shimmer speed drives the color cycle, and the light-angle slider sweeps a fresnel-like highlight band across the cloth the way orbiting the 3D camera would.

⚙ Under the hood

Canvas2D mesh of ~1,300 quads displaced by five layered sine waves (pinned at the top edge), shaded with the same purple/teal/gold/pink iridescent blend and fresnel highlight term as the 3D shader.

silk fabricwave propagationiridescencecloth simulation

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install