About this simulation — what are we looking at?
In 2023, novice David M noticed that HBO Max shows an elegant animation while a video buffers — circles that oscillate left and right, fading in on one side and fading out on the other. He decided to recreate it in p5.js.
This refactored version replaces every “magic number” in David’s original with a named constant, wraps every operation in its own function, and documents the mathematics step by step in the sketch source code. The controls below also add three new features not in the original: a circle size slider, a background color picker, and a circle color picker.
The core math in two sentences:
Each circle’s horizontal position is sin(phase) × spread — a smooth wave that creates the side-to-side oscillation.
Its opacity is 0.5 × (1 + cos(phase)) × maxOpacity — a cosine curve that naturally ties brightness to position.
The Chat Log walks through every design decision, critiques the prompt, and derives the position and opacity formulas from scratch.
Adjust the controls on the right to explore the animation.