samizdat drafting co.

open source
PlotDevice/python-powered 2d graphics

PlotDevice is a Macintosh application used for computational graphic design. It provides an interactive Python environment where you can create two-dimensional graphics and output them in a variety of vector, bitmap, and animation formats. It is meant both as a sketch environment for exploring generative design and as a general purpose graphics library for use in external Python programs.

PlotDevice scripts can create images from simple geometric primitives, text, and external vector or bitmap images. Drawing commands provide a thin abstraction over Mac OS X's Quartz graphics engine, providing high-quality 2D rendering and powerful compositing operations.

In PlotDevice, a little code can go a long way. Using simple commands you can set the colors and line-style numerically, then programmatically draw using coordinates drawn from a hat.

Each time the script runs, a newly chosen set of random circles will be drawn to the canvas.

In addition to static images and PDFs, your scripts can also generate movies. Here is an animated hypercube rotating in four dimensions.

Animations can be saved to MPEGs, animated GIFs, and multi-page PDF flipbooks.

One Book, Many Readings/Nostalgia and finite state machines

As a child I whiled away countless hours lost in Choose Your Own Adventure books. At the time they just felt different from the other books I'd read. In retrospect it's clear that the difference was that these were an early form of what we'd now call ‘interactive’ entertainment; albeit embodied in technology that had been around since Gutenberg.

This project examines the choices made by those trying to build this kind of proto-game while having only pages, ink, and cross references to work with.

The first cyoa book to make an impression on me. The grid shows all the possible page-to-page ‘choices’ and endings color-coded by degree of tragedy.

To analyze the structure of the book as a whole, it must first be digested into analyzable chunks. The approach is to categorize each page as either a part of the story (grey) or an ending to a particular reading (red if bad, blue if good).

The pages can then be arranged to view the book as a grid of waypoints and terminals.

Books from different vintages compared. Note the general decline in number of colored ending pages from the earliest books at the top to the more recent ones below.

BDBGS!/The plague this time

I heard my first horror story about dealing with bedbugs from an acquaintance in Park Slope in 2008. By 2010 I knew closer to a dozen. When they finally came for me I began to wonder exactly how prevalent these pests are in New York (and whether the growth was as explosive as it seemed).

By scraping the data collected at the Bed Bug Registry I was able to map the infestations geographically and over time. Apartments are plotted as red dots and hotels as yellow dots.

The city's approach to data collection has been to count the number of calls to the ‘311’ complaint line. As a result the numbers are likely to be a significant underestimate of the problem. Even so, the increase in reports over the past 7 years is dramatic.

The neighborhood-by-neighborhood map shows the reports waxing and (occasionally) waning over time.

Behind every dot lies a tale of woe, false alarm, or unexpected display of camaraderie.

Ask the Oracle/introspection enabler

I've never been a fan of horoscopes or other forms of divination that provide concrete predictions of the future. However, the use of the I Ching for similar purposes has always intrigued me.

By formulating a question and then reading a random chapter (selected by flipping coins or counting yarrow stalks), one's concerns are ‘answered’, but not in the form of a “you will find love” reassurance. Instead the chapters describe universal situations of conflict into which one can project the current worries and consider the parallels.

The web app begins by asking you to put your concerns into words…

...then picks a random chapter using a software implementation of the yarrow stalk probability scheme.

open source
arbor.js/Tools for the likeminded

In a number of projects I've made use of force-directed layout algorithms when dealing with tree-like structures. It's an elegant approach to positioning that uses a physics simulation to find the most ‘relaxed’ configuration of nodes and edges based on their connectivity.

After reinventing the wheel in Java, Python, and Actionscript I decided to build a more general framework for this kind of visualization that would run in modern browsers. The result is arbor.js, an ’HTML5’-friendly open source graph-rendering library.

A demonstration app displaying the birdsong data from the Echolalia project.

Atlas plots states as nodes and connects them based on shared borders. The resulting shapes are familiar yet surprising.

For years GraphViz was one of the first things I would reach for when I needed to view hierarchical data. Part of its appeal was the simplicity of the .dot language. Halfviz is a worse-is-better recreation of the tiny subset of GraphViz most relevant to me.

Fuguestate/Decompiling J.S. Bach


Despite my relative hopelessness when confronted with a musical instrument, I've been fascinated by music theory since middle school. The geometric relationships between tones, intervals, and the structure of waves made analytical sense to me, even if it didn't seem to apply very readily to 13 Songs or Loveless.

In college I was blindsided by J.S. Bach whose work perfectly embodies this ‘music is math’ approach to composition. His fugues are both beautiful and dauntingly complex as they layer motif upon motif, building up to emergent juxtapositions you would never predict from the melody line alone. These sketches examine BWV 578: The ‘Little’ Fugue.

The first four measures of the fugue's main motif. Notes are represented in terms of brightness in the upper line as time moves left to right.

Below, the intervals are drawn as ascending (white) and descending (orange) arcs. The length of the arc shows the proportion of an octave the interval spans.

In this animation the notes are plotted spectrographically, in a pattern identical to that used by 19th century player pianos. As the song plays, the harmonies between active notes are drawn in red.

Echolalia/Talking to finches

Birdsong is a popular research topic in neuroscience, primarily because it tells us so much about how human brains deal with language. In collaboration with colleagues at the UCSF Keck Center, I created visualizations of the syntax networks seen in the zebra finch.

The data broke a bird's song down into a finite alphabet of syllables sequenced over time. We could then examine the probability that e.g., syllable D would be followed by C vs by E. The diagram above shows the relative likelihoods of different syllable-to-syllable transitions seen in a particular finch's song.

Once the syllable transition probabilities are known, they can be plotted as a matrix with sources as rows and targets as columns.

One can then create a simulated ‘markov’ bird by choosing a starting syllable then flipping a coin to probabilistically jump to one of its likely followers. The arrows at right show one such path.

The syllables of a simulated birdsong based on the model. Each syllable is plotted as a colored square and the sequence is read left to right and down. There is a large amount of variation but one can also see repeated motifs.

Leafnode/Markup botany

Every web page (including this one) is made up of HTML tags. These tags are nested inside of each other like russian dolls with parent tags containing child tags, grandchild tags, etc. This structure is colloquially called the ‘DOM tree’ by web developers.

These animations take the tree suggestion literally and plot the edits over time to one HTML page in terms of branches growing, flowering, and being discarded.

This animation steps through the HTML of the google homepage over many years (and many edits). Structural tags are drawn in blue while more content-oriented tags are drawn in green. The red dot is the body tag from which all others are descended.

Generations of edits are shown sequentially in this animation. Each version of the page is drawn and then decays as the next edit replaces it. One can qualitatively compare the structures of the past few generations as they pile up.

Diller Scofidio + Renfro/Not a desktop metaphor

This portfolio website for the artists and architects at Diller, Scofidio + Renfro was designed in collaboration with Takaaki Okada & Lisa Strausfeld at Pentagram and developed by me in Actionscript.

The spatially organized, sortable user interface tries to ride the line between unconventional and usable while pulling the viewer into the world of the images with 3D animations.

Projects can be filtered by category, allowing for simple, spatially memorable queries of the dataset.

Within each project is a navigable slideshow of photos, sketches, and construction details.