Zane Sterling

Programmer and computer graphics enthusiast

Read this first

Spinup - Are you ready for Hacker News?

This past weekend I went to PennApps with my good friends and teammates Josh Hofing and Mitchell Gouzenko. We went in with no idea what we were going to make, and came out with something awesome, which is one of the things I love about hackathons.

What did we make

We set out to solve a problem which hits every web dev now and then. Most of the time when you write a site you don’t expect it to get more than a few concurrent viewers, so you just run it on one server. But occasionally you make something really awesome, and it ends up on the top of Reddit or Hacker News. Suddenly your server is completely overloaded and you’re frantically looking for ways to keep the thousand people at the gate from seeing a slow load time and turning around. You could of course avoid this by running your project on a dozen servers from the start, but that gets expensive.

That’s where...

Continue reading →

Rain Simulator

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...

Continue reading →

Reproducing an animation from scratch

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...

Continue reading →