Making digital toys at Recurse Center

What I learned and made in batch

2023-08-14

Before attending RC, my personal projects squeezed into stray midnight hours in my college dorm – and it's no wonder most never saw the light of day. Now for almost every day over the past three months, I've been able to explore my interests with an amazing cohort of programmers.

My focus for the batch was on building for the web. The cozy, silly, wacky websites that gave me so much joy as a kid...I missed them. From my experiences working in UX – designing software and apps to increasing standardization – I grew an itch to make things that were the complete opposite in spirit.

Going from years of making things for someone else to pusuing what I was interested in learning (and not just for a job) was daunting. The first weeks of my batch were spent noodling on ideas, worrying that I didn't have a "big project" I wanted to work on. Rather, I had a series of small experiments I wanted to try. Exploring those curiosities turned into a series of 6 toy projects and more clarity on what I want to dive into for the next several years.

Part 1: GUI? More like Gooey UI!

Refreshing on the classic crew of Javascript, HTML, CSS
Building fictional Toy UI components with React

Toy UI knob Bloop bloop...a toy component built with React and Framer Motion Progressive wheel Woah, radial menu galore! One experiment with vanilla Javascript (code)

Part 2: 3D Experiments

Experimented with three.js via react-three-fiber
Built and deployed a 3D fortune cookie
Set up a database of "fortunes" on MongoDB

Opening a 3D fortune cookie with a Kaomoji A cookie animated with React Spring and modeled in Spline Rotating 3D house Testing performant "animations" by creating a flipbook effect (repo)

Part 3: Multiplayer

Attending sessions on live coding, physical computing, and more at ITP Camp 2023
Developed "Wiggle Party" in collaboration with another camper
Got familiar with websockets, p5.js, and ml5.js

Wiggle partygoers dancing at the ITP Camp Showcase

Part 4: Information cartography

Learned about embeddings, latent space visualization (UMAP, t-SNE), and more terms from the ML/AI concept soup
Spun up a "concept association" toy with the OpenAI completions API

Latent walker Results from walking the concept map...where did we start?

Part 5: Web exploring

Deeper into state management in React (Reducers, useContext)
Basic d3.js (focused on force graphs, hiearchy, and zoom libraries)
How to scrape websites with Puppeteer

Blog explore Initial prototype of a 'wobbly web browser' made with d3

Part 6: Infinite canvas

Revisited Javascript and it's hard parts
Started working on a series of tiny HTML, CSS, JS websites to experiment with esoteric features
Implemented an interactive zoomable and pannable "canvas" in React that imports content from the Are.na API

Photo grid canvas Vanilla Javascript implementation of a mouse-reactive canvas (code) Are.na canvas Are.na Hypermedia Canvas toy repo

Thank you RC!

I'm especially grateful for Athena, Ellen, Iris, Rey, Erika, Terra, Kathrin, Dan, Matt, Max, Subin, Sean, Yu, Changlin, Jesse and the amazing RC staff for their support.

If you would like to spend 6 or 12 weeks in Brooklyn (or virtually) growing as a programmer, please consider applying to RC! It took me a year to muster the courage to do so, and I only wish I applied sooner.