David Lyons

3D Artist, Front End / WebXR Developer and Interaction Designer based in Los Angeles


Codevember 2017

In November 2017, I participated in Codevember, a personal challenge and creative exercise in time management open to anyone to complete a new code sketch or code poem each day of the month throughout November. I wanted to create visual, interactive sketches with Three.js and tween.js, using the daily topics from codevember.xyz.

Because I only had a day to finish each sketch, I needed to keep each sketch very simple, both visually and conceptually. The only input is the mouse and the entire screen is one large button. Clicking anywhere (or in some cases, dragging or holding the mouse button down) will trigger the interaction with the object. I tried to make the geometry procedurally if it was simple enough, but modeled the refrigerator and sword in Maya since I wanted something a bit more complex for those and they would have been a bit too tedious to create with code.

Most of the topics were nouns, so I focused on those for the concept, rather than the environmental context of the topic, and opted for simple solid background color variations that complimented the colors of the topic object. The toon shaders and outlines are not only fast to implement and look nice, but they also reinforce the idea that these are not intended to be photoreal / real world representations, but virtual objects that have their own virtual behaviors.

I shared screen recordings of each sketch on Instagram and Twitter with a link to the real-time interactive sketch on my Codepen so anyone could easily view and modify the source. Starting with day 5, I paired the screen recordings of each sketch with music. Some of the topics took more than 1 day, and some of the days I wasn’t able to work on a sketch, so by the end of the month I got through the first 10 topics.