Unravelling the Magic behind Polyrhythms

Source: Unravelling the Magic behind Polyrhythms, Hyperplexed, 17:49, uploaded 2023-05-25, playlist index 1540, category hint: Other / Unclear.

Hyperplexed rebuilds an audio-visual animation inspired by Project JDM. Twenty-one coloured arcs sit along a line. A small circle travels around each arc, and every contact with an end of the arc triggers a sound. The circles start together, drift into an arrangement that looks chaotic, then return to their starting positions after exactly fifteen minutes. The effect depends on a simple relation between whole numbers, elapsed time and angular distance.

The circles and their shared return

The opening demonstration gives each circle the same starting position. Their angular velocities then differ: the innermost circle moves fastest and the outermost one slowest. A circle reaching either end of its arc produces a note, so the visual paths become a set of interlocking rhythmic events. One circle moving on its own would say little. The combined sequence produces a pattern that changes as the circles separate.

The paths soon look disordered. Their contacts happen at changing intervals, and the arcs stop sharing a visible shape. The same timing rules continue underneath that surface. After enough time the circles begin to meet in recognisable arrangements again, and eventually all of them return to their initial positions at once. The video calls this relation a polyrhythm and uses the animation to make the repeated common period visible.

A canvas, a line, and a half circle

The reconstruction starts in CodePen with a full-window HTML canvas. Hyperplexed calls the canvas paper and the drawing context pen, then gives the canvas its actual width and height before drawing. The first object is a line placed about ninety percent of the way down the page and stretched across roughly eighty percent of its width.

The arc uses the same horizontal centre as the line. Its radius comes from the line length, reduced to a smaller proportion, and its position sits at the same vertical level. Canvas angles use radians, so a half circle runs from π to 2π when it should sit above the line. A smaller filled circle then becomes the moving object. The arc supplies the path, while the line supplies the two points at which sound will later occur.

To place the moving circle on that path, the code uses the usual point-on-a-circle relation. The centre, radius and angle determine the circle’s x and y coordinates through sine and cosine. Changing the angle therefore moves the small circle without changing the arc itself. Hyperplexed pauses over this step because sine and cosine enter the explanation as working tools for the drawing.

Time becomes angular distance

Manually changing the angle would produce motion in principle and a tedious thousand updates per second in practice. The browser already redraws the page repeatedly, so the video passes the drawing function to requestAnimationFrame. Each redraw gives the code a current timestamp. Comparing that value with the page’s start time provides elapsed time at the rate the browser can sustain, usually around sixty frames per second in the example.

The angle is renamed distance because the useful relation is distance = time × velocity. A starting distance of π places the circle at the left end of the arc. Adding elapsed time multiplied by a chosen velocity moves it along the path. A trial velocity of five moves too fast, so the example settles on a smaller value while the mechanism is being tested.

The distance keeps growing past 2π, which is harmless for an angle but useless for a circle that should turn around at the ends of a half circle. The modulus operator folds the growing value back into a bounded range. That still leaves the direction wrong: a value below π would place the circle on the lower half of the full circle. The code mirrors that lower range around π by subtracting it from the maximum angle. The result is a ping-pong path from one end of the arc to the other.

Twenty-one arcs on one line

The first working pair of arc and circle becomes a loop over a manually chosen list of twenty-one colours. Each iteration draws one arc and one moving circle. The initial version increases the radius by an arbitrary increment, which leaves the spacing uneven. Hyperplexed then calculates the usable section of the line by taking half the line length and removing the radius of the first arc. Dividing that space among the arcs gives every pair an equal interval.

The same index that selects a colour also identifies the pair’s position in the sequence. This keeps the drawing code shared across all twenty-one arcs and lets the visual order carry information about the later velocity calculation. At this stage the result behaves like a silent metronome: the geometry works, yet every circle still moves at roughly the same speed.

Whole loops and a fifteen-minute period

Subtracting a small amount from each circle’s velocity creates staggered motion, though it gives no reason for the circles to meet again at a precise time. The original animation returns to alignment after fifteen minutes, so Hyperplexed replaces the hand-picked velocity with a calculated one.

Fifteen minutes becomes 900 seconds. The circles have to travel an integer number of complete loops during that shared period. One full trip around the half circle and back to the starting point covers 2π of angular distance. Choosing 50 loops for the innermost circle therefore produces a much faster motion, while choosing 30 loops for the outermost circle produces a slower one. The remaining circles receive the integer values between those limits through the loop index.

Velocity follows by rearranging the same distance-and-time equation. Every circle uses the same duration and an integer loop count, so each one has a different speed while all of them still arrive at the same starting position when the 900 seconds end. This is the part that turns apparent drift into a repeatable rhythm. The video presents the arithmetic through the animation. A formal account of polyrhythm in music theory lies outside the tutorial.

Notes scheduled from impact times

The final stage makes each contact audible. Hyperplexed records short clips, trims them to about two seconds and prepares roughly one sound for each arc. The browser’s audio API loads a sound alongside its colour, so the loop can find the clip belonging to the circle that reaches the line.

Testing whether the travelled distance is exactly divisible by π seems natural, though a continuously updated floating-point value may never land on zero. The code schedules impacts in time instead. If a circle has just touched the line, its next impact occurs after half a loop divided by its velocity. The first impact time comes from the shared animation start time and that circle’s velocity. The code stores this timing with the arc, checks it on each redraw and advances it after playing the sound.

There is a browser-specific trap. requestAnimationFrame stops while the page is minimised, so sounds that should have occurred during that gap can fire together when the page reopens. Hyperplexed adds a soundEnabled flag, turns it off when the window is minimised and lets a click enable sound again. The toggle is slightly awkward because browser autoplay rules require user interaction, though it also prevents a burst of delayed notes from reaching the listener at once.

The resulting system remains open to changes. The arcs can use another shape, the sounds can use another instrument, the colours can change and the period can be extended to an hour. The visual style is therefore one choice made on top of a timing structure that can produce many related versions.

Limits and source details

The video is a guided reconstruction of a visual coding idea. It explains the relation among canvas geometry, angular motion, browser frames, integer loop counts and scheduled audio. It does not define the wider history or terminology of polyrhythm, compare the animation with a performed musical tradition or establish that the resulting sound meets a particular music-theory definition.

The description names Project JDM as the inspiration and links a CodePen reconstruction. It also credits Bishara Haroni’s recording of “Gymnopédie No 1” as music licensed through Artlist. The description’s thumbnail credit points to a SpongeBob wallpaper by jes123 on wallpaper.com. These credits describe the source’s production context. They provide no evidence for the mathematical or musical claims.

Further reading / references

• Project JDM, the YouTube channel Hyperplexed names as the inspiration for the animation.
• CodePen Polyrhythmic Spiral, linked in the video’s description.
• Bishara Haroni, “Gymnopédie No 1”, licensed through Artlist and named in the video’s description.