Jasper Stephenson

UX engineer, friendly ghost.

VidSynth: a Webcam-Controlled Virtual Instrument

Sep 2020

Vidsynth demo After attending a workshop in Utrecht about designing a reprogrammable instrument, and I ended up inspired to create something using video as an input source.

A day of tinkering later, I made this demo (source code) which takes 4 color points from your webcam and uses their hue, saturation, and lightness to generate tones, bpm, and chord choices. It sounds like chaos, but in a slightly ordered fashion. I can imagine the applications for something like this being used to help blind people “see” through audio, or to make soundscapes of various spaces — for example, maybe to be used as background music for a podcast about different cities?

I generated the sounds using p5.js, which was my first time using that libary — I can’t wait to dig deeper into what p5 can do, especially in terms of visualization!

CMYK Splitter for Risograph Printing

May 2020

CMYK splitter interface While designing the second zine for Traveling Circus of Urbanism, I was inspired by Oda-san of Hand Saw Press Kyoto to develop a web tool for Risograph printing that can split any image into CMYK and reassign new colors/opacities to each channel. You can then download all of the channels as the transparent/black that’s necessary for printing.

I had a lot of fun going back and forth with Oda-san over how this tool should work, and I hear that it’s starting to catch on with Risograph printers in Japan!

Try it here, or check out the source code!

Autogenerated SVG Art

May 2020

Auto-generated art from the svgmaker When determining the style for the the second zine for Traveling Circus of Urbanism, I decided I wanted to have an element of technological randomness in the illustrations. We knew we’d be going for a 2-color print, so I developed this tool to create randomized visuals that we could generate infinitely and then curate the best ones to use in the zine.

It uses a variety of shapes, gradients, and masks, all created programmatically using Vue. Give it a whirl if you’re curious, or take a peek at the source code.

Ludum Dare Game Jam #46: Final Flower

Apr 2020

Final Flower cover image I was part of a 5-person team tasked with making a game in 3 days on the theme of “keep it alive.” I was in charge of the UI, music, sound effects, level design, and menus for our challening platformer in which you play as a robot tasked with keeping the last flower on Earth alive in a hostile, metallic world. I also made a high score API for this game that can be used in anyone’s project — it’s open source, so you can use it in your next game jam! We got some amazing replayability out of the high score system — we saw hundreds of players competing for the top spots, with some extreme optimizations. Overall, I think it’s the best game-jam game I’ve been a part of yet!

You can play the game in your browser, so check it out!

Image Color Analyzer

Mar 2020

Example of color analysis A friend of mine was trying to take a deeper look at the color pallettes of some of her favorite photographers. I developed this simple tool using Sharp.js to extract color information from an image and organize it in several patterns: by hue, by saturation, and by lightness. From there, she could learn what swaths of colors were being prioritized in filters, how much or little flat whites/blacks were in use, which hues were being desaturated or shifted toward another color, and more.

Global Game Jam 2020: TrackBeat

Mar 2020

TrackBeat cover image I made this game on the theme of “repair” as part of a 5-person team in Osaka. TrackBeat is a rhythm game about being tied to the front of a train, hammering the bumps in the track into shape in time with the music as you roll along. We had some real heavy hitters in our squad — professional 3d modellers and rock-star coders — so I decided to go a role I’d never tried: music! I made a few unique tracks for the game, and I’m happy with how they came out. I also took on the UI and 2D graphics for the game.

Download it here! (Windows only)

Bridge To: An Urbanist Residency in Kyoto

Dec 2019

brdg.to homepage I developed this website for Bridge To, a new urbanist residency in Kyoto, Japan that my wife and I run. It’s got a few fun tricks involving position:sticky elements, and I’m overall very happy with how it came out. The applications have been coming in, so I guess it’s working!

This project was a good excuse to stretch my illustration capabilities — I created the diagram of our space in Sketch, and then brought it to life on the web.

Literal Auto Chess

Oct 2019

There’s been a huge boom of “auto chess” games lately, from the original Dota 2 Auto Chess to Teamfight Tactics to Dota Underlords. Seeing all of those got me thinking — what if it were actually chess that were automated?

The video above says it all. Earn gold to buy pieces, position them carefully, and stay alive! The game is single-player with leaderboards where you can show off your auto chess skills.

As fun as this is, it’s true that pieces sometimes move in silly ways. I’ve been looking into ways to reduce the randomness without sacrificing excitement, so keep an eye out for updates once I figure that one out ;)

Play it here, or check out the source code

Tsk: A Hypersimple Text-Based Task Tracker

Oct 2019

Tsk in action Born out of personal necessity, I used Vue and Electron to make a task tracker that permanently lives on my desktop.

Elements are draggable, section headers are color-customizable, and if you add a date like “(16/9)” or “(next week)” in parentheses it will automatically track the time until that date for you, making the element in question glow red more and more as the deadline approaches.

I plan on continuing to add features to it as the need arises, such as improved semantic date recognition and markdown-powered url embedding.

It’s proven invaluable for keeping track of my many clients and side projects! (And to remember to vote! Trump can GTFO.)

That’s all for now! There’s more to come, so keep your eyes on this page!