Spinning Text

09-Jul-2018 About a year ago I stumbled upon an animation by @wavegrower that left me scratching my head: I was mesmerised. Specially on how this spinning texts magically arrange themselves every so often creating a wavelike effect. What is going on here? This is a replica of that animation. Despite the simplicity of the arrangement which @wavegrower makes obvious, there is a fundamentally deep reason why the effect is so beautiful and familiar. Whilst I got the first version working pretty quickly it somehow didn't have the same effect. Things seemed to be spinning at the right rate but somehow it looked weird. What's wrong? After lots head-scratching, knob turning and internet surfing, I found an explanation of how it could work on wikipedia: Harmonics. Duh "Obvious" it looks beautiful because of harmony. The proportions of the spinning rates are harmonious, like octaves in music. Each spinning text has a frequency (repetition per second) and if they all share the same base frequency (the first spinning text) then at some point, their positions will meet in time/space (resonate), creating a harmonic effect. Initially this wasn't obvious at all, somehow I knew what was going on. I had an intuition about it but I couldn't "see" it. Upon reflection, I realised that I have seen this wave-like pattern in different fields I have studied: signals in electronics, notes is music, proportions in design. It's all over the place. It's funny how sometimes trying to figure out how simple things works, you end up digging deep on fundamental subjects. I started this little project to practice css animations and ended up reading about harmonics, math and music. Anyway, the reason my animation looked weird was because I was rounding-off the spin duration numbers, making them slightly off. And like in music when instruments are untuned, even slightly, the music just doesn't sound right. Obviously. ← Back to Playground