Demos

This is a summary of some of Jake's work on CodePen.

Quarto

A digital recreation of the game Quarto.
Musical Chord Progression Arpeggiator

An interface to quickly sketch out musical chord progressions in different musical modes.
Cheap AI Chess!

A functional chess game. Play yourself, your friends, a horrible AI, or watch it play itself!
Video Music

A program that uses the hue of your camera feed to change chords in a chord progression performed by an arpeggiator.
No JS: Tabs that scale down to menu

Using the radio and checkbox input :checked hack to achieve a tab UI that collapses into a menu.
Lissajous

Lissajous curve drawing inspired by Vincent Pantaloni.
Pursuit of PI

A geometric musical game. You are a triangle. Aquiring sides in your effort to become a circle. You can only jump. When you are not moving, time stands still.
100 Divs - Recursive Mesh

Submission for the 100 div CodePen challenge.
Mac-ish Interactive Keyboard and Display

Using CSS `attr()` content to achieve this keyboard style.
Some Noise

Animating random noise. Challenge was to build something in under 8 minutes.
“In C” by Terry Riley

A browser performance and visualization of Terry Riley’s “In C” which is a musical piece intended to be played by a variable amount of performers.
Pixel Smear

Self explanatory. Image pixels smearing horizontally over time.
Travelling Salesperson Sketches

A collection of demos exploring the Travelling Salesperson Problem.
Bi-directional Step Sequencer

A bi-directional step sequencer with custom scale settings and the ability to save work as a URL.
CSS Modal :target Selector

A functioning modal that utilizes :target to open and close.
Step-o-matic

A step sequencer and beat machine using your web browser.
Bad AI Billard Battle

Play pool against a truly awful AI.
Binary Writer

Write in binary using HTML and CSS.
Seeded Procedural Music Generator

Procedural Generation allows you to create unique infiniteness that can be consistently reproduced. Enter seed data (your name is a great place to start) and hear a unique, infinite, and reproducible song.
CSS Calculator

A very basic calculator that uses input radio :checked pseudo selectors to do math.
Searching a Dataset with Filters

Searching and filtering a list of words using CSS and wildcard selectors.
Metered

Metered is a musical composition with five patterns. Each pattern is made up of two measures in different time signatures. Each pattern is looped. The drum beat changes time signatures to highlight a specific pattern. The piece ends after 420 quarter notes, which is the first time that all patterns end simultaneously.
Arpeggiator Cube

An arpeggiator with an interactive interface. Scroll, drag, or arrow key y-axis to change arpeggio and x-axis to change tempo. Click or tap y-axis to change pattern.
CSS-Only Presentation Using `:target` and `accesskey`

Was in one of those “inaccessible CSS solution” moods. If you’re asking “should I do this?” you probably shouldn’t.
Tombstone Generator

You can make jokes or sincere tributes to loved ones.
CSS Rotary Clock

Recreates the function of this watch while only using CSS and HTML.
Infinitely Scrollable Random Music

Infinite scroll meets random music. Manually scroll down or enable autoscroll, sit back and zone out. Pro Tip: Browser height influences tempo.
Checkbox Phone Number Input

CSS that can parse checkboxes to determine numbers because science.
pen#PwLXXP

The self-coding (and sentient) pen.
pen#JoVrdw

Another self-coding pen. Cousin of pen#PwLXXP.
CSS Keyboard

A functional keyboard using CSS
Hexadecimal Counter Drawing an SVG Polyline

Counts from 0-255 with CSS using 32 radios in two groups of 16, or 256 app “states” with two clicks. To prove it, I am drawing a CSS SVG polyline background image with however many points you have selected hexadecimally. The number you see is that number.
Hexadecimal Background Color

Three input groups generating 4096 different background colors without using JavaScript. Limited to three-char hex codes as six would result in 16,777,216 declaration blocks.
CodePen Profile Header

A random animation of my face for my CodePen profile header's background.
CSS Scroll Jacking Demo Using `:hover`

Not that it's a good idea, but you can hijack scrolling only using :hover state in CSS.
Grab the Chano

Grab Chance the Rapper's face and move it around while it makes noise.