While I was visiting my high school a few weeks ago I got the chance to visit the fabled room 301, where many of the most focused programmers at Stuy tend to hang out. One of my favorite features of 301 and denizens is the constant influx of new and interesting projects. The people who hang around are always tinkering away at something or another, and this visit was no exception.

That day current senior and friend of mine George Vorobyev showed me a graphical demo he’d written in the past couple weeks that showed a discrete grid of vertical actuators behaving a lot like water. When he’d click, it would appear that a drop of water had landed, complete with the spring-like effect you see with a real water droplet. The visual aesthetic really reminded me of the inFORM project from MIT’s tangible media labs.

There were also a number of other effects that George had written up, but they...

Ilan Biala posted a video on the HS Hackers Facebook group, with a request that someone reproduce the effect in JavaScript.

The first thing I did was to break down the animation into its core elements: the two endpoints, the radius, and the center of the drawn arc. If we have all three pieces of information, this is enough to draw the desired arc.

The endpoints

The first endpoint’s movement is easy to figure out: it doesn’t move! The second endpoint simply travels around the major circle of the animation, the same circle that the drawn arc is part of when the animation is paused. A quick write-up provides something much like the common loading animation.

The radius

In finding the radius it’s critical to note that the animation comes in two segments: the loading-style circle and the second segment which looks like the arc is rotating. The loading circle, as shown above, is really...