I recently finished a 12-week batch at the Recurse Center. I’m still finding it a bit tricky to succinctly describe what RC is. Here’s how I put it in my personal newsletter:
Anything can happen, and that excites [me]. The Recurse Center imposes no structure on attendees’ time, which adds even more possibilities to what each week will bring. Most weeks, [I’m working] on something new, like making the bathroom icon dance or making Bitmoji dance or making 3D spheres dance… come to think of it, much of [my] work has been dance-adjacent. That’s the kind of place RC is though. Programmers from different “sub-specialties” spend time working on something both a little new and a little familiar. It’s a playground. And it’s fun.
For the rest of this post, I’ll summarize each of my projects, why I chose it, and what I accomplished.
Game of Life animated SVG (source)
Coming into RC, my goal was to learn the fundamentals of animated graphics on the web. I started by animating SVGs with plain old Elm, ignoring CSS’s timing primitives. On the second day of RC, someone typically organizes a pairing workshop, where participants code Conway’s Game of Life. I decided to stick with this problem for the rest of the week, and turned my attention to making it look as smooth as possible.
Flossing character animated SVG (source)
Armed with the power of smooth animations and bored with Conway’s so-called “game”, I turned to a more entertaining domain: dance! This first dancer uses normal SVG paths, redrawn on each browser animation frame. We can simulate the arms moving “front-to-back” by switching the order in which we draw each body part, depending on where we are in the dance loop.
Dancing Bitmoji (source / talk)
Animating the bathroom icon is fun, but I figured it might be more rewarding to animate something in my own likeness. Bitmoji’s API is rather closed—there is no means to “decompose” a Bitmoji’s limbs or visual features. It’s just a raster image, which limits the animation options. As I was discussing this limitation, another Recurser introduced me to Puppet Warping, a Photoshop technique for displacing points in an image around pinned anchors. Using WebGL, we can apply a similar technique to distort Bitmoji’s PNGs according to user-defined anchors.
Airtable proxy API (source)
At this point, I’m about halfway through my time at RC.
I wanted to take a short break from graphics,
so I started some utility apps that I’ve wanted to exist for some time.
The first: a proxy for Airtable’s API that allows you to define “row-level permissions”.
I based the idea on PostgREST and Hasura,
which both provide means for exposing your database more directly to your web clients.
A tool like this would speed up the initial prototype phase of new applications,
making it easier to use Airtable as my interim database.
I planned to use a predefined column (i.e. “Owner”) on all tables to keep track of which rows were visible by which users.
Then this middleware application would check the JWT sub on each request and deny any unauthorized attempts.
After a few days, I scrapped this project since Airtable’s API rate limits made my approach unfeasible.
Find Tweets (source)
My second non-graphics detour was a collaboration with another Recurser and attempt to learn Svelte. We both ran into this problem: we like, retweet, or DM a meme. But when we want to share it with someone else days later, it takes forever to find. The app is a super-simple keyword search across those three channels. The workflow leaves much to be desired (and it doesn’t always… find the tweets), but it was a breeze to get up and running with Svelte. Most of our time unfortunately was spent learning Oauth 1.0 to authenticate with Twitter’s API.
Live MIDI dancer (source)
For my final RC project, I returned to dance for inspiration. All of my dance experiments thus far ignored one major dimension of real dance: the music. In this project, I used the WebMIDI API to listen to notes from my hardware synth. These notes trigger moves defined with a custom DSL using a live-coding editor. Of course, this whole thing is easier to demonstrate with a video:
This is the only project, I plan to pursue further now that my batch is over. If you have any ideas for improving this dancer or if you want to chat about RC, feel free to drop me a line.