This is a collection of rough experiments, doodles, and toys.
A quick experiment to render efficient "ticker tape" on a canvas.
Used as part of an online treasure hunt I made.
An ascii rock garden. Rake with touch / mouse.
A garden of emoji that slowly climbs your screen.
Try touch-typing an English word without moving your fingers from their resting position on the keyboard.
This was a proof-of-concept for a keyboard glove, which was implemented in hardware by mapping the trie to a directory tree.
Caution: it flashes! Controls listed in the README.
Created in 99B of Javascript.
Pulse available Philips hue lights to whatever is playing on Spotify.
Control your Philips Hue lights with MIDI triggers.
Rainbow remix of Bubble.
THIRTY-EIGHT rough visual experiments in alphabetical order.
Each experiment was built using a web tool I created in the spirit of OpenFrameworks and TouchDesigner. I wanted libraries close at hand with a simple API for drawing to <canvas>, SVG, etc.
Combines two images by alternating them row-by-row.
Each row is placed to line up visually with the row above it, which causes a subtle shearing effect.
Cuts a hologram out of acrylic using the Hacklab TO laser cutter.
A collection of string matching algorithms designed with React Select in mind.
Manually sort a list of items using Timsort.
Abandoned UI experiment; seeing a large list is useful for large sets. Also, quicksort would work better here.
Asynchronous TimSort implementation for Node.js.
A chill place to write things.
Full-screen hex, hsl, and rgb color picker & converter
Improve your online privacy and security over the 12 days of Cryptmas.
I was interviewed for this work by NPR, the CBC, and PCMag.
Create a private Twitter list out of someone else's feed so you can read it.
A single program that outputs my name when you run it through three separate programming languages.
wallpaper..?
If you make a pin out of this please send me one.
"...the formula can be used to describe many complex shapes and curves that are found in nature. Gielis holds a patent related to the synthesis of patterns generated by the superformula."
:facepalm:
Play this one in a small window. Arrow keys to move around.
It was left here by the aliens.
Follows your mouse.
Short narrative experiment written for the PICO-8 fantasy console.
Threw this together to help with color inspiration for another project.
It resizes!
Nobody's perfect! Takes a MIDI file and messes up a few of the notes.
Play a .mid file at your own speed using a MIDI keyboard!
Works best with MIDI keyboards, but you can use your computer keyboard too.
Returns the average color from a list of HSL arrays.
I've got plaster swirls on my ceiling. This began as a recreation of that and turned into something else.
Synthesizer synesthesia. Turn MIDI notes into colors.
Geometric patterns created from straight lines cutting through a circle.
Move your mouse/finger. Remix of "filings".
Use a MIDI keyboard as your laptop keyboard.
Hard press = UPPERCASE, soft press = lowercase.
A competitive typing tutor. Two players type different paragraphs on the same keyboard, simultaneously.
Poster? Coaster?
Looping CSS animation.
Tiling patterns from a single spiral with a fixed modulation signal.
Though the line's formula stays consistent as it spirals out, the tile grid doesn't increase in size.
Abandoned background generator. Pattern is played out.
Stumbled upon this on my way to making swirls.
A CLI tool to update your favorite text editor theme. Emphasizes comments and mutes everything else.
V1 -> V2 contained the tiniest tweak perceptually (smooth line all 'round), but it was a technical challenge. V2 -> V3 contains the tiniest code tweaks, but is perceptually very different. Uses canvas transform logic from zonin'.
Efficiently scales and rotates canvas image data seemingly in-place using two overlapping canvas elements.
Independently oscillating points that form a greater picture together.
It's hard to see the ship... :/
Very simple rule applied to a bunch of particles for a smooth ripple effect.
Changing the timing function on this one is extremely satisfying.
Added a linear ramp and smoothing function to v1 to make the lowest frequency bin match up with the highest frequency bin in both position and derivative. The effect is a continuous circle, versus the "speech-bubble" notch effect of v1.
Trying out CSS animation steps().
Playing with bg gradient dots, CSS only.
Playing with bg gradient stripes, CSS only.
Repeatedly apply a set of transformations to text.
Simple visualizations of sinusoidal functions.
Accidentally discovered this 2d water effect by stacking sine waves. Simple but convincing!
Cliché vector "field" "diagram".
Remix of ~~~ using angles & moving agents instead of absolute positions.
CSS-only typography experiment.
A tricker, more generalized case of Lattice implemented on a trangular grid.
Lines + circles.
Blend modes + simplex noise.
Title screen born of nostalgia for the pictures we used to draw on oscilloscopes.
n͖͙͍͔o̴̰̤͈͙̘̥w͉̮ ̩w̺̘i̠̲͉̘̪t̟̜͉͓͈͞h̩͚̺̕ ̧͉̹̮̠ͅm̻̰͔̜͚o̲̥̘r̶͕̟͇͇̟̭e̠ ̩̺̖̟g̪̬̰̺̟̪͈͜l͇͉͚̬͞i̡ṭ̠̲̰̦ͅc̨̣ͅh̰̲̯̺͕̼͈͜e̷͕̜͎̱s̢̩
A quick look into some of the options for context.globalCompositeOperation.
Async/await ftw
A version of Stormy Green that doesn't drift out of phase.
Sine waves shifting sinusoidally.
Variations on "Stone" with controlled line angles across the circle.
Sphere effect arising from random lines across a circle.
I'm sure someone else discovered this effect long before I did.
A little doodle with a lot of circles.
Could be done far more efficiently by scaling / translating a fixed amount of concentric circles, but math-ing it was more fun :)
If the window is wider than it is tall, it'll split into columns. Otherwise, it'll give you two rows.
This layout was rather difficult before flexbox came along.
There's nothing like driving by a field of trees in the passenger seat.
Super quick demo trying (failing, mostly) to capture the perspective effect.
Small canvas demo using Lissajous curves.
Hey! It's a normal distribution!
Animated lava lamps with simple non-rectangular collision detection and metaballs for wax clumps.
CSS Flexbox solution to prevent tooltips from overflowing their container at the edges.
Possible header for "Mechanical waves and sound" for Khan Academy's new content redesign.
Includes a few variations.
CSS technique to make a semi-transparent background fade in perfectly with its box-shadow.
Iconic album art, animated with a Gaussian function and some simplex noise.
Drag your mouse over it, and click for something special.
A color-theory game completed as a bonus project for Khan Academy's 2016 Hackathon. Built with a friend using Unity 3D.
Contribution to the publication "Codrops" for their Line Menu Styles collection.
My contribution to a collection of poems.
From the project page: "there is confusion in the mixed layers of metaphors. This is not an obfuscated code repository; not really. In some ways, it is the opposite."
A browser extension that removes the unread count from your Gmail inbox and title bar.
These used to be pokéballs.
Riffing on pokéball wave.
Animated demo written alongside a new programmer who was really into Pokémon.
Pride and Prejudice in its entirety, sorted by the visual weight of its characters.
I was hoping for a more convincing gradient; the weight calculation could use some work.
A cross-browser WebExtension to declutter busy pages and make them readable again.
Written originally as a bookmarklet in 2013.
Nothing gonna stop you, there's nothing that strong ♫
An excuse to write git push it to-the-limit into the console.
A forcefully applied dark theme for the web.
An ASCII art pond ripple animation.
Bingo cards generated from the attendance list of XOXOFest. The first person to meet enough attendees "won" the party.
Built hastily between speakers on the last day of the festival; requires login with Twitter to protect attendees' identity.
A quick visual built during lunch, inspired by the base of the lunch table.
A collection of dotfiles that I use + some scripts to keep 'em in sync.
Maintains its default font-size until it is too wide to fit on the page. If it starts overflowing, it will adjust to take up 100% of the page width.
Requires a bit of JS on page load. Just CSS and SVG after that.
A math facts app that you can play from a payphone.
Call +1.480.360.MATH (6284) from the US, +1.647.360.MATH (6284) from Canada.
A visual demo using typed arrays.
Creates a shadow based on mouse position.
A speedometer that travels through time with Doc Brown.
A Chrome extension: count and list all page-defined global variables.
A sliding menu concept using just radio buttons and CSS.
Boring minimal audio visualizer.
Animated shapes with wavelike edges.
Includes an audio visualizer built with the Web Audio API.
Sticky headers cover internally-linked content by default. The most robust solutions I've seen use JS, but these 4 lines of CSS seem to do the trick.
Auditory illusion of a tone that continually descends in pitch. It has been described as a "sonic barber's pole".
Implemented with the Web Audio API using custom oscillators.
Jeff Thomas's Fluid Simulation, ported to Khan Academy's CS platform.
A game: hit space over the red dots to earn points.
Pop-up programming challenges in your browser.
Two versions of a canvas util function.
The letters [A-z], composed of smaller versions of themselves.
A Pebble watchface that divides the week into six 28-hour days instead of the standard 24/7.
A quick ~10m demo to demonstrate some animation concepts.
Probably doesn't work cross-browser.
Responsive chat interface using CSS flexbox.
Created as a proof of concept for TextSecure's browser extension layout.
Retro command line emulator using my TinyTerm library.
Type "help" for command list.
Functional JavaScript terminal using my TinyTerm library.
A tiny in-browser terminal.
Since I made a fancy headline for Terra I figured it was only fair to make one for sweep.
Never used.
Web typography experiment: drop cap + justify.
In-browser keystroke dynamics demo using Tappy.
Web typography experiment using CSS transforms and SVG.
A JavaScript library for recording and comparing rhythms
UI pattern for nested spoilers.
Demo involved patching Adobe Web Platform's balance-text polyfill.
UI experiment for line-by-line tutorials. Annotations can be turned off to expose a complete code example.
A bit of an anti-pattern, but people seemed to like it.
Utils for Terra.
Rapidfire, turnless tic-tac-toe with a custom websocket lobby.
Inspired by Kung-Fu Chess.
Reaction game that steals your history*. It exploits alpha-rounding to create an n-input OR gate for CSS :visited states, then probes links in sequential binary trees.
*This is a proof-of-concept and won't actually steal anything.
3D race-to-the-finish game.
Built with a custom raycaster / collision engine.
Tap the rhythm of the lyrics displayed.
Needed this for tappy before there were 1000 libraries to choose from.
Warning: contains a blocking loop that may cause browsers to hang briefly.
Warning: contains a blocking loop that may cause browsers to hang briefly.
Warning: contains a blocking loop that may cause browsers to hang briefly.
No jQuery dependency, section progress shown in headers, click to scroll, resizable with scrollbar on window. Inspired by Slinky.js and DesignWall.
Currently doesn't work on iOS < 8 since they mess with scroll events. If you use this in production, look into iScroll.
Search for emoji domains and short domains.
Realtime web-based collaborative coding.
Initial pass at the menu system for Pairjam.
For Pairjam.
For Pairjam.
Bad interaction tbh.
Displays a random ASCII face.
Hacked together an app with a rainbow interface. Threw this page together to see how things looked together.
100% for personal use so...
¯\_(ツ)_/¯
A minimal New Tab page for Chrome
An audiovisual experiment that generates landscapes from sound waves.
Pretty images from math.
Supports my blog post of the same name.
A Chrome extension to preserve the background color between page loads.
Used to work. Doesn't anymore.
Part of "Stealing history with CSS binary trees".
Democratic billboard for sharing the pulse of a community. Popular thoughts will be displayed on the billboard for all to see.
Takes a series of characters and a series of words and checks if they match the same sequence. Words need not be delimited.
WebRTC file sharing concept thrown together in ~40 minutes (or your pizza's free!)
How I like to think of myself.
Only wakes you up if the wind is howling. An alarm for kiteboarders.
A multiplayer shark-frenzy controlled with your phone.
Created with friends at Hacker School. I was in charge of the mobile + WebSocket controller framework and the server.
This used to be on Chrome Experiments but it's offline now :(
A super-efficient memoized key generator in JavaScript.
Lowercase alphanumeric, length [1, 198).
CSS gradient rule for thin diagonal lines.
Cross-device, cross-browser.
Small demo of live translation synchronization.
Checks how quickly you can navigate to other sites in a new tab. Only works in Firefox.
A JavaScript library for smoother color transitions
Chat through happenstance. The interface adapts to meet demand.
An experimental online game of King of the Hill, on this very website.
Really little chat server written in Node.js.
CSS animation with no additional HTML or JS.
Supporting code for my "Taking the average tone" blog post.
Scrapes Wikipedia to find the most important births and deaths of each year by word count.
A terrible clone of a terrible clone of a game.
Generate frequencies, chords, and songs.
A JavaScript library for simple biological simulations and cellular automata.
Tell people on the internet what they should do.
Boring.
Thx Mary :)
Recreating Soulwax's album art in CSS.
Using a repeating pattern to give the illusion of semi-transparency.
CSS only.
Fun with gradients and background-clip: text.
Uses Chrome's canvas compositing algorithm (circa 2013) to simulate watercolor painting in the browser.
Slide-out footer with semantic markup.
lol these variable names...
Recreating a popular clothing brand's logo in CSS.
BYOG (glasses).
Sass vanishing point mixin.
Random mutations of a polyhedron.
Simple animation in three.js.
Block pointer events on scroll to reach 60fps.
A follow-up article has since been written to show more robust techniques.
Two very small implementations of Fizzbuzz: one in JavaScript (74B) and one in Stylus (126B).
Sass flower with variable number of petals.
Are the base lines straight or at an angle?
Linear gradient, animation, and background-clip
Used this as my 404 page for a while.
Pure Sass animated solar system.
Collection of Sass animations.
Snake for 2 players on the same keyboard?! Saucy.
Ha.
Recreating a nice hover effect in CSS.
Pure Sass hamburger. Sesame-seed bun, lettuce, tomato, fresh cheddar, and infinity perfectly cooked Angus beef patties.
An attempt to give flat buttons some depth. Collection of inputs including radio buttons, checkboxes, and text inputs.
Each one's only a single element.
Hover over "DNS".
Loading bar concept.
Ugly implementation of something pretty.
Some Javascript that I threw together for a friend to 1) solve his problem, 2) explain some hacky JS tricks, and 3) attempt to show him that they aren't always great to use since they obfuscate your code.
There's actually some cool stuff going on in here, so I've commented it thoroughly.
Sass 3D text-shadow mixin.
Geeky loading animations using ASCII characters.
Sass mixin: jump from x to y in z steps.
This was my first CodePen to hit the front page :)
A quick reference for before your morning coffee.
A simple frequency bar visualizer for audio in Processing.
Features a terrible mash-up of Watermelon Man and Mos Def's Beef freestyle that I threw together in Audacity...
Geeky loading animations using ASCII characters.
Buttons that maintain linear perspective from the screen's vertical midpoint.
The perspective effect can be added to anything; a site where each content block was extruded could look interesting.
Chrome only as of 2018.
Semantic vertical menu using nested radio buttons and CSS.
Sass speech bubble mixin.
Buggy proof of concept exploring the CSS background-attachment property and a 3rd-party Instagram API.
Scrolling gallery view for tumblr.
A depth-sensing grafitti wall for touch-screens & pen tablets.
Demo built for web browsers and Wacom tablets. Installation involved creating a large infrared plane behind a flexible display and sensing deformations using Community Core Vision.
A fitness form trainer using an Xbox Kinect.
Word-search puzzle generator.
Used to promote "hack nights" at my university.
A quine is a non-empty computer program which takes no input and produces a copy of its own source code as its only output.
My former personal brand mark.
Settings reveal concept where a nut unscrews itself then drops a curtain.