Water Ripple Rings
Rings crossing a surface of floating specks and bouncing off the edges.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef } from "react";
/**
* Vibary · Water Ripple Rings
*
* Rings spreading across a surface of floating specks, bouncing off the
* edges and crossing back through each other.
*About this effect
A still surface for a waiting screen, a lock screen or a quiet header — the kind of background that rewards a second look. The reflections are not simulated, they are mirrored sources: a ring meeting a straight wall comes back as a ring centred on the source's mirror image behind that wall, so four extra sources, one per edge, buy correct reflection angles, correct arrival times and correct interference where two fronts cross, for the price of four more distance tests per speck. A grid solve of the wave equation needs thousands of cells a frame to reach the same answer. The claim was checked rather than asserted: this construction was compared against an independent finite-difference solve with reflecting walls over three bounces, and the worst disagreement was 4.5% of peak amplitude — the residual being the grid solve's own dispersion. Amplitude falls as one over the square root of the distance travelled, which is what spreading in two dimensions does, so a reflected front reads as further away with nothing tuned to make it so.