Note

#rx_tape #html #css #svg #javascript

This is starting to feel reel (pun intended)

The new tape animation was more complicated than I originally thought.

First the reel size, set via an radius, doesn't grow linearly. As tape enters the spools they fill up quickly but the bigger the spool is, the more tape it takes to add the next "layer", so the spools fill up slower the more tape they have on them. The radius is then a function of the length of the tape stored, rather than a factor of the playback duration.

The second part is that the sprockets (spinny bits) don't spin at a constant rotation for a given playback speed. The tape has to move between the spools at a constant speed. When there is less tape on one spool then it has to spin faster to keep up and likewise tape on the fuller spool has to spin slower to match the same speed. So the speed of each sprocket is a function of the sprocket radius, rather than a fixed value

Fun fact, on real cassette players tape moves at 4.76cm/s

Screen recording of a virtual walkman with animated sprockets and tape window as it's played and fast-forwarded

metadata

Open on GiHub

{
  "mastodon_status": [
    "https://social.lol/@r0b/117186658589977850",
    "https://social.lol/@r0b/117186784298343674"
  ]
}