RM logo
Starfield screenshot
Modicum: Starfield ( 2019 ) JS WebGL Web Audio

Kixeye once used the Windows 3.1 starfield screensaver as a 24-hour coding challenge. My submission was hardware accelerated and bounced to music, but due to the time constraints it lacked finesse. It's taken me years to revisit the project, and this is its latest incarnation.

This starfield is made from a handful of dense particle meshes. The shaders are responsible for looping them through space, sizing them and shaping them to look like stars.

Connecting the effect to music required a lot of work— the web audio API is impressive, but still a draft, and it was difficult to play and analyze audio across Chrome, Firefox and Safari. I invite you to have a look through its source; when Web Audio matures, I'll simplify my implementation.

This is my second project built on top of my Modicum library, which helped speed things along.

Fuligo screenshot
Fuligo ( 2018 - present ) HTML & CSS SVG Modular ES npm Electron Mocha.js Immer Functional Programming

Fuligo is a functional, modular ES remake of Mac Fungus (and a reset of Scourge). Its core business logic uses Immer to compose rules that generate legal moves and state changes that have no side effects. Mocha-based unit tests keep the business logic dependable. The view is HTML & CSS with SVG icons, to exercise my DOM skills. My goal is to build the UI interactivity and the board animation sequencing from RxJS observables.

While I’d like to use React or Vue on a project at work, I believe the JavaScript ecosystem has trouble retaining such tools as long-term strategies for maintaining projects. I want this code to be used and maintained for a long time.

Hundred Rabbits games screenshot
Collaboration with Hundred Rabbits ( 2017 - ongoing )

Hundred Rabbits is a creative agency who live and work on a boat currently destined for Tokyo, Japan. On the open ocean, they can’t access support from Apple or Adobe, so many of their tools are handmade from JavaScript and HTML. They began converting their iOS games and creative tools to the web to better support their players and creative community.

I didn’t know all this when I submitted a pull request to their Oquonie repo in 2017, but we became good friends and collaborators, and we’ve been ever since. As they are without Internet for long periods of time, I surprised them with a port of Verreciel in July ‘17, and Hiversaires in January ‘18. They are ports of a Swift SceneKit game and an ObjC game, respectively. All of these games sport the ability to rapidly play themselves to completion, which helps create promotional material and test the game’s integrity somewhat after making large changes.

Working on these games introduced me to npm and Electron. While not every project warrants npm, I learned how to use it to facilitate collaboration and create systems for formatting and building JavaScript projects.

Drivey.js screenshot
Drivey.js ( March, September - October 2018, March — May 2020 ) HTML & CSS ES 2015 three.js WebGL Haxe

A relaxing driving simulation. (Please skim the repo’s readme file, as it is very detailed.)

This was the hardest port I’ve ever attempted, and taught me quite a lot about refactoring and creating migration strageties. Originally someone’s old passion project, written in their own programming language, I had no compiler or runtime to work with, or any reference to the API of its custom rendering system— which is largely incompatible with modern graphics pipelines.

I first migrated the code to Haxe, a compiled language whose advanced type system and type inferencing made it possible to systematically resolve each ambiguity in the original project. From there I built replacement API calls that plugged into three.js. I refactored the Haxe JavaScript output into ES 2015 classes and slowly migrated/reproduced the rest.

In 2020 I revisited the project, refactoring the levels from JavaScript into an HTML format. Many of the concepts related to level generation were adjusted to make authoring levels a more intuitive experience. If you'd like to try making a Drivey level, download one of the existing ones from the repo, experiment with it, and test your changes by dropping your level file into an open Drivey window.

Matrix screenshot
matrix ( September 2018 ) ES 2015 three.js WebGL Font Generation

Code rain graphics demo. There are so many rubbish Matrix screensavers, I wanted to do it right. Read the repo’s readme file for more information. Two fun details: my knowledge of signed distance fields from Scourge (see below) was a big help, and I rebuilt the matrix font in Illustrator that some digital agency partially left in an old SWF by mistake.

Detail of J.F. Hyde's periodic table
J.F. Hyde's periodic table of elements ( November 2016 ) Adobe Illustrator SVG

The discoverer and developer of silicone and organosilicon chemistry, James Franklin Hyde, published a formulation of the periodic table of the elements in a student magazine in 1976, with the intent to share his perspective with the future chemists of the world. Original copies are very hard to come by nowadays.

During a long plane ride in 2016, I took it upon myself to meticulously reproduce Hyde's periodic chart by hand in Adobe Illustrator, to share with friends and upload to Wikipedia in SVG format. With the approval of Hyde's surviving family, I submitted the image to Wikimedia— and saw that it was improperly rasterized. Wikipedia uses librsvg to rasterize SVG files, which is configured to only support a subset of SVG's current feature set. By installing and running librsvg locally, I was able to quickly isolate the issues and produce a Wikipedia-friendly version.

We take for granted that at one point in history, the chemical elements and their periodicity were classified, but no standard diagram existed. It's important that students and educators have access to alternative formats of the periodic table and other diagrams, to remember that there is no one right way to observe the natural world.

Gamut screenshot
The Gamut ( September - November 2016 ) Unity

This project was my first Unity game, where you fly a moth between hoops of color before time runs out. Its original deadline coincided with Election Night, 2016; I added the poem later. Part of this project entailed dynamic mesh generation, for a feature that I dropped; the blog discusses this in some detail.

The Gamut ended up being mostly a combination of Unity particle systems and a custom shader.

Hanoi screenshot
Modicum/Hanoi ( 2016 ) JS WebGL

The Tower of Hanoi is a puzzle about moving different size rings between three poles. The solution is a kind of dance. I made this graphics demo to visualize the solution in a unique way.

Modicum is a simple 2D WebGL engine I wrote for fun. It creates meshes by looking at program inputs and composing the required data.

Scourge screenshot
Scourge ( 2010 - 2015 ) HTML Haxe Flash WebGL Unit Testing

In 2010 I prototyped a remake of the classic Mac game Fungus. The following year, I wrote a system for playing board games, and implemented these rules inside of it. In 2013, I began implementing its UI in a project that simultaneously targeted Flash, HTML5, Mac and Windows. Intermittently for the next four years, I added to the project until it turned into a carnival of weird ideas. Oh well.

The upside: I wrote a Haxe library for cross-platform concurrency; I learned a ton about WebGL, OpenGL and GLSL; I learned about signed distance fields; and I learned what makes a project fail.

Wireworld screenshot
wireworldas3 ( 2007, 2010 ) Flash AS3 TDSI Haxe SVG

In 2007, I wrote a Flash app that ran the Wireworld computer in different ways. The idea was to present the subject matter interestingly, and to explore which implementation would perform the best. In 2010 I added two faster implementations, which used Alchemy opcodes. I remade the UI with SVGs and components built from Adobe’s Text Layout Framework. (These were all pretty advanced at the time.)