Bubble Drag is a direct-manipulation canvas experiment: circles drift toward changing destinations, but any circle can be caught and repositioned with a mouse, pen, or touch gesture. The vertical spectrum at the left changes the canvas color continuously while preserving strong contrast around the bubbles.
Frame-Rate Independent Drift
The original animation moved each coordinate by one thirtieth of its remaining distance on every timer callback. That produces a smooth approach, but its speed depends on how often the callback runs. A time-based exponential approach gives the same motion at different display refresh rates. For current position \\(p\\), destination \\(q\\), elapsed time \\(\Delta t\\), and response rate \\(\lambda\\), the update is
\[ p'=q+(p-q)e^{-\lambda\Delta t}. \]Applying two consecutive updates with durations \\(\Delta t_1\\) and \\(\Delta t_2\\) is equivalent to one update with duration \\(\Delta t_1+\Delta t_2\\). The bubbles therefore drift at the same rate on a 60 Hz display, a high-refresh screen, or after a temporarily delayed frame.
Picking a Circle
A pointer at \\(u=(u_x,u_y)\\) selects a bubble centered at \\(c=(c_x,c_y)\\) with radius \\(r\\) when
\[ (u_x-c_x)^2+(u_y-c_y)^2\leq r^2. \]This radial test matches the visible shape. The legacy demo compared unrelated page-coordinate intervals, leaving the vertical hit area effectively broken. Pointer capture now keeps an active drag attached even when the pointer moves quickly or leaves the circle. Touch input receives a small invisible tolerance without changing the drawn radius, and every dragged center is clamped so the complete bubble remains inside the canvas.
Continuous Color Selection
The palette consists of RGB key colors arranged from red through magenta, blue, green, yellow, and back to red. A normalized vertical position determines two neighboring stops and a linear interpolation amount \\(t\\):
\[ C(t)=(1-t)C_0+tC_1. \]The selected RGB value fills the canvas as one solid color. Bubble outlines mix that value with white, so their shapes remain visible without introducing a separate visual theme. Dragging along the palette updates the color continuously on mouse and touch devices.
Pause freezes autonomous drift but leaves dragging and color selection available. Shuffle assigns new destinations, while the bubble-count control rebuilds the field from 5 to 24 circles. Reduced-motion preferences start the demo paused without disabling its direct interactions.