Progress on baby bubbles

Progress on baby bubbles

{
	"project_list": {
		"project": [

			// ================================== //
			// Featured Projects
			// ================================== //

			{
				"name": "baby bubbles",
				"id": "babynames",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2016.06.01",
				"role": "data visualizer, concept",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "hey baby, what's your name?",
				"brief": "
Cinco de Mayo, 2016: baby Leif comes into the world. In a sleep-deprived haze, I found myself inspired to make a visualization of baby name popularity from SSA data (because, you know, there aren't enough already).

First, I scraped the data from the Social Security Administration. Then, I played with it until we arrived here.

View it live at babybubbl.es.
",
				"media": [
					{
						"path": "babynames-sample.jpg",
						"width": "1200",
						"height": "600",
						"caption": "The final version (detail)",
						"alt": "Baby names visualization"
					},
					{
						"path": "babynames-full.jpg",
						"width": "1600",
						"height": "829",
						"caption": "The final version",
						"alt": "Baby names visualization"
					}/*,
					{
						// TODO: gif showing animation (did alan make one for tweet?)
					},
					{
						// TODO: images of prototypes
					}
					*/
				]
			},

			/*
			{
				"name": "atlas of emotions",
				"id": "atlasofemo",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2016.07.01",
				"role": "data visualizer, developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},

			{
				"name": "open redistricting",
				"id": "openredist",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.04.01",
				"role": "developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},

			{
				"name": "consumer reports",
				"id": "consumerreports",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.02.01",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},

			{
				"name": "living liquid",
				"id": "livingliquid",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.04.01",
				"role": "developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},
			*/

			{
				"name": "build a room",
				"id": "buildaroom",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.06.01",
				"role": "exhibit designer, developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "installations" },
					{ "id": "ixd" },
					{ "id": "maxmsp" },
					{ "id": "spatial" }
				],
				"tagline": "3D drawing in physical space",
				"brief": "At the core of the Exploratorium's "Geometry Playground" exhibition is the concept of spatial reasoning: the ability to create a mental model of a space, and to navigate and manipulate it. Build A Room allows visitors to create three-dimensional spaces out of thin air with a \"light brush\", custom software, and a room-sized canvas.",
				"media": [
					{
						"path": "buildARoom01.jpg",
						"width": "960",
						"height": "540"
					},
					{
						"path": "http://player.vimeo.com/video/74178950",
						"poster": "room02_thumb.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "buildARoom02.jpg",
						"caption": "Visitors often work together to design and build their room.",
						"alt": "Visitors working together"
					},
					{
						"path": "spinashape01.jpg",
						"caption": "The first iteration focused on rotational geometry, created by spinning objects.",
						"alt": "Spinning shapes"
					},
					{
						"path": "screenshot04.jpg",
						"caption": "While spinning objects made interesting shapes, visitors just wanted to paint with light.",
						"alt": "Light painting"
					},
					{
						"path": "longExposure01.jpg",
						"caption": "Early tests involved light sabers and long-exposure photography.",
						"alt": "Jedi fun"
					}
				]
			},

			{
				"name": "d-fuse - small global",
				"id": "dfuse",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2005.09.01",
				"role": "data visualizer, moving image designer",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "eyebeam" },
					{ "id": "maps" },
					{ "id": "motiongfx" },
					{ "id": "processing" },
					{ "id": "visualization" }
				],
				"tagline": "a stylized glimpse into the world's data",
				"brief": "A collection of style tests and production runs I completed while at Eyebeam for a multichannel moving image installation, by UK-based artist collective D-Fuse.

\"Small Global\" juxtaposes visualizations of paired data sets to highlight relationships that often go unnoticed by mass media.",
				"media": [
					{
						"path": "http://player.vimeo.com/video/10275443",
						"poster": "energy.jpg",
						"width": "720",
						"height": "480",
						"embedType": "vimeo",
						"caption": "An overview of energy consumption by country, one continent at a time. Data were taken from various online sources, and combined with the NASA Earth Light Map to reference population centers."
					},
					{
						"path": "http://player.vimeo.com/video/10275493",
						"width": "720",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Since its first franchise opening in Des Plains, Illinois, in 1955, McDonalds has expanded to well over 30,000 locations worldwide. This animation chronicles the spread of McDonalds across the globe.The data used for this animation were taken from mcdonalds.com and mcspotlight.org, and were current up to the year 2000."
					},
					{
						"path": "http://player.vimeo.com/video/10275513",
						"width": "600",
						"height": "412",
						"embedType": "vimeo",
						"caption": "This animation is based on a map in the New State of the World graphic atlas which shows the number of refugees produced by each country. The exiled refugee population of each country is represented by the total number of tiles in the abstracted country border. Darker tiles represent a higher number of refugees that have fled the country."
					},
					{
						"path": "http://player.vimeo.com/video/10275537",
						"width": "600",
						"height": "412",
						"embedType": "vimeo",
						"caption": "This animation is based on a map in the New State of the World graphic atlas which shows the number of refugees received by each country. Refugee entry is abstracted as an imaginary weight falling on a country. Each asylum granted raises the height of the new homeland, leading gradually to a three-dimensional bar graph, with refugee population on the vertical axis. The higher and darker the country, the more refugees are harbored within."
					}
				]
			},

			{
				"name": "dividing space",
				"id": "dividingspace",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.06.02",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "fabrication" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "ixd" },
					{ "id": "processing" }
				],
				"tagline": "hands-on geometry exploration",
				"brief": "Understanding geometry doesn't require pen, paper, and textbooks. Another way to learn geometry is to experience it and experiment with it. This is the philosophy behind the Exploratorium's "Geometry Playground" exhibition.

Dividing Space presents an interactive Voronoi diagram – visitors can manipulate the diagram by configuring a field of red pegs and sending a blue puck through them. Custom software ties into a computer vision system to enable this realtime, playful interaction with otherwise complex geometry.

Dividing Space uses Processing, ReacTIVision and Mesh.",
				"media": [
					{
						"path": "dividingSpace01.jpg",
						"width": "1276",
						"height": "718",
					},
					{
						"path": "http://player.vimeo.com/video/14351862",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Dividing space allows visitors to explore Voronoi diagrams by manipulating eight moveable pegs and two rolling pucks.
The red pegs provide an opportunity to set up and observe many different Voronoi diagrams, and the blue pucks allow playful experimentation with Voronoi diagrams in motion."
					},
					{
						"path": "final01.jpg",
						"caption": "The pegs and pucks on the table are tracked by a camera above, and their locations are sent to custom software that calculates and projects a Voronoi diagram onto the table below.",
						"alt": "Voronoi diagram around red pegs and blue pucks"
					},
					{
						"path": "final03.jpg",
						"caption": "The table is large enough to accommodate multiple visitors at once, and the presence of two rolling pucks and multiple pegs encourages interaction between visitors.",
						"alt": "Social interaction around the exhibit"
					},
					{
						"path": "final06.jpg",
						"caption": "Dividing space encourages both active play and contemplative exploration.",
						"alt": "Active play and contemplative exploration"
					},
					{
						"path": "final08.jpg",
						"caption": "Dividing Space was originally conceived as a counterpart to Scott Snibbe's Boundary Functions, as the non-immersive half of a research pairing designed to investigate the effects of immersivity on visitor experience.",
						"alt": "Visitors experiment with the geometry"
					},
					{
						"path": "proto02.jpg",
						"caption": "The first prototype came fairly close to the desired interaction and content delivery.  The most effective change was to add a label at one end of the table, to make it more visible than the bin-mounted labels, and to discourage air hockey-like behavior.",
						"alt": "The first prototype, open at both ends"
					}
				]
			},

			{
				"name": "elastotron",
				"id": "elastotron",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.03.03",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "itp" },
					{ "id": "processing" }
				],
				"tagline": "rippling reflections",
				"brief": "A video mirror that projects two-dimensional media into three-dimensional space.
Elastotron exists in multiple iterations, each of which grows from an elastic motion algorithm that creates a bouncy, rippling effect that responds fluidly to viewers' movements.",
				"media": [
					{
						"path": "reflections01.jpg",
						"width": "1600",
						"height": "1200",
						"caption": "Elastotron was shown in 2009 at San Francisco's Exploratorium in the 'Reflections' exhibition, which showcased works that asked viewers to, um, reflect on the nature of their self-image.",
						"alt": "'Reflections', Exploratorium, 2009"
					},
					{
						"path": "reflections04.jpg",
						"caption": "Elastotron offers six different modes, each of which highlights different elements of reflection, from motion to depth to color.
Viewers can also toggle a flood lamp providing contrast for their reflection, casting themselves into shadow and changing peaks into valleys.",
						"alt": "Visitors exploring Elastotron"
					},
					{
						"path": "http://player.vimeo.com/video/13992186",
						"poster": "elastotronReflections.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Visitors play with their reflections."
					},
					{
						"path": "promo01.jpg",
						"caption": "Elastotron's six display modes.",
						"alt": "Elastotron's six display modes."
					},
					{
						"path": "greatwall03.jpg",
						"caption": "Elastotron was featured on the Great Wall of Oakland, a 10-story outdoor projection, in April 2009.",
						"alt": "Elastotron on the Great Wall of Oaloand"
					},
					{
						"path": "http://player.vimeo.com/video/13845931",
						"poster": "greatwall03.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Elastotron works well at scale; it doesn't get much larger than 120 feet high."
					},
					{
						"path": "http://player.vimeo.com/video/9809759",
						"poster": "invite_thumb.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "A version of Elastrotron was shown at the Yerba Buena Center for the Arts in 2010."
					}
				]
			},

			{
				"name": "gamestar mechanic",
				"id": "gamestar",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2008.04.01",
				"role": "lead developer, some game/interaction design",
				"tag": [
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "games" },
					{ "id": "ixd" },
					{ "id": "social" },
					{ "id": "usergen" },
					{ "id": "webdev" }
				],
				"brief": "Gamestar Mechanic is a game about game design. A game editor, online role playing game, and community site are designed to teach kids about complex systems by providing tools to build them.

Gamestar Mechanic is the brainchild of Katie Salen of the Institute of Play. I was the lead developer and architect for the core experience, including a drag-and-drop game editor, a top-down and platformer game engine, and an embeddable game player widget. I also contributed significantly to the user interface and game design.",
				"media": [
					{
						"path": "factory01.jpg",
						"width": "942",
						"height": "629",
						"caption": "Factory 7, home of the 6 schools of Game Mechanics.",
						"alt": "Factory 7"
					},
					{
						"path": "game01.jpg",
						"caption": "Simple and complex games can be built with Gamestar Mechanic.",
						"alt": "Top-down game"
					},
					{
						"path": "repairJob01.jpg",
						"caption": "A drag-and-drop game editor allows for quick design and iteration.",
						"alt": "Game editor"
					},
					{
						"path": "http://player.vimeo.com/video/10275263",
						"poster": "level01.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "http://player.vimeo.com/video/10275316",
						"poster": "level06.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "http://player.vimeo.com/video/10275368",
						"poster": "level08.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "editor01.jpg",
						"caption": "This series of screenshots demonstrates the ease of quickly sketching out a simple action game.",
						"alt": "Creating a new game"
					},
					{
						"path": "editor02.jpg",
						"caption": "After choosing parameters for the game, place a player avatar.",
						"alt": "Placing a player avatar"
					},
					{
						"path": "editor03.jpg",
						"caption": "Do it Bob Ross-style and add some fluffy clouds.",
						"alt": "Add some clouds"
					},
					{
						"path": "editor04.jpg",
						"caption": "Place a Goal Block up in the sky for the player to jump towards.",
						"alt": "Add a Goal Block"
					},
					{
						"path": "editor05.jpg",
						"caption": "Flip the Edit/Play switch at any time to test the design immediately.",
						"alt": "Iterate quickly"
					},
					{
						"path": "editor06.jpg",
						"caption": "Platformers are even better with enemies. Let's add some.",
						"alt": "Add some enemies"
					},
					{
						"path": "editor07.jpg",
						"caption": "Collectable points add a little variety.",
						"alt": "Add some points"
					},
					{
						"path": "editor08.jpg",
						"caption": "A Health Counter and Points Counter round out the interface.",
						"alt": "Add some counters"
					},
					{
						"path": "editor09.jpg",
						"caption": "Require the player collect all points for an additional challenge.",
						"alt": "Collect 'em all"
					},
					{
						"path": "editor10.jpg",
						"caption": "A background image and some music add some polish.",
						"alt": "Finishing touches"
					},
					{
						"path": "editor11.jpg",
						"caption": "Only takes a few minutes to design and build a working game. A few more will make it really great!",
						"alt": "The final product"
					}
				]
			},

			{
				"name": "hoodline prototypes",
				"id": "hoodline",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.03.01",
				"role": "data visualizer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "the City via Yelp",
				"brief": "Hoodline hired Stamen to investigate San Francisco via public data. This series of prototypes uses Yelp data to tell stories about the city, narrated by its reviewers.
Read more about it in this blog post.",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
					{
						"path": "yelp03.gif",
						"width": "1200",
						"height": "675",
						"caption": "Rating as color, number of reviews as height on 3D map",
						"alt": "Ratings, number of reviews"
					},
					{
						"path": "yelp03-restaurants.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Restaurants reliably get many reviews",
						"alt": "Restaurants on 3D map"
					},
					{
						"path": "yelp06-restaurantCorridors.jpg",
						"width": "1484",
						"height": "828",
						"caption": "A quick, not-that-successful experiment in determining business corridors via k-means clustering",
						"alt": "Restaurants, in k-means clusters"
					},
					{
						"path": "yelp06a-boundaries.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Another experiment: find neighborhood boundaries by identifying businesses tagged with multiple neighborhoods",
						"alt": "Neighborhood overlaps"
					}
				]
			},

			{
				"name": "house of days",
				"id": "houseofdays",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2009.03.17",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "visualization" }
				],
				"tagline": "a visual history of the Bay",
				"brief": "A collection of hours, one day at a time. Taken every hour on the hour, these photographs detail a long-term portrait of San Francisco Bay from individual moments to seasonal and annual patterns.",
				"media": [
					{
						"path": "houseOfDays01.jpg",
						"width": "1280",
						"height": "960",
						"caption": "The House of Days is a reclaimed Alcatraz searchlight building, positioned on the south edge of the Golden Gate. A camera within takes photographs looking north every hour.",
						"alt": "The House of Days, on the San Francisco Bay"
					},
					{
						"path": "houseOfDays02.jpg",
						"caption": "Within the House is a display of days past recently and long ago. Each row contains 24 photographs, comprising a single day.",
						"alt": "24 hours per row, day after day"
					},
					{
						"path": "houseOfDays03.jpg",
						"caption": "The photographs scroll upwards and downwards, illustrating the passing of days, seasons, and years. Days grow longer and shorter, fog and rain and sun come and go.",
						"alt": "Years' worth of days"
					},
					{
						"path": "01_gull04.jpg",
						"caption": "Every day can be viewed large, with the press of a button. Here, a Western Gull appears right on the hour.",
						"alt": "Western Gull"
					},
					{
						"path": "04_ship02.jpg",
						"caption": "Huge container ships come in and out of the Bay regularly.",
						"alt": "Container ship"
					},
					{
						"path": "08_fog02.jpg",
						"caption": "San Francisco is known for its fog; the Golden Gate can be especially thick at times.",
						"alt": "Fog in the Golden Gate"
					},
					{
						"path": "15_ship04.jpg",
						"caption": "A cruise ship steals into port shortly before daybreak.",
						"alt": "Cruise ship"
					},
					{
						"path": "10_storm01.jpg",
						"caption": "Strong storms sometimes sweep in from the west.",
						"alt": "Storm brewing"
					},
					{
						"path": "14_sunset03.jpg",
						"caption": "The sun sets far to the north this close to the summer solstice.",
						"alt": "Solstice sunset"
					}
				]
			},
			/*
			{
				"name": "picturing place",
				"id": "picturingplace",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.09.01",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "visualization" }
				],
				"tagline": "",
				"brief": ""
				"media": [
				]
			},
			*/
			{
				"name": "plankton populations",
				"id": "planktonpops",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.19",
				"role": "exhibit designer",
				"tag": [
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "visualization" }
				],
				"tagline": "searching for life in the oceans",
				"brief": "We all know of the \"charismatic megafauna\" in the oceans: whales, sharks, dolphins. But what of the plankton that form the base of the marine food web, and produce the oxygen we breathe?

Plankton Populations allows visitors to examine marine micro-biomes by peering through a wood-and-glass lens into a digital representation of the world's oceans.",
				"media": [
					{
						"path": "planktonPops01.jpg",
						"width": "900",
						"height": "601",
						"caption": "Visitors explore plankton types in the world's oceans.",
						"alt": "Visitors fishing for plankton"
					},
					{
						"path": "https://www.youtube.com/embed/tysoSbEL8Zw",
						"width": "853",
						"height": "480",
						"embedType": "youtube",
						"caption": "Video produced by the Exploratorium Moving Image Department."
					},
					{
						"path": "planktonPops02.jpg",
						"caption": "Representations of the type and density of plankton populations are visible through the lens.",
						"alt": "Magnifying plankton populations"
					},
					{
						"path": "planktonPops03.jpg",
						"caption": "A special marker, opaque to sensors within the table but transparent to humans, allows the system to draw plankton wherever the lens moves.",
						"alt": "Infrared fiducials tracked by the table"
					}
				]
			},

			{
				"name": "ship tracker",
				"id": "shiptracker",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.17",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "visualization" }
				],
				"tagline": "tracking ships through the Bay",
				"brief": "Global shipping is fundamental to San Francisco Bay Area commerce. The ports of Oakland and Richmond turn around multiple massive container and tanker ships daily, providing and supplying raw materials and manufactured goods to the region and the world.

Understanding the travels of these ships, as well as the daily paths of smaller ships like ferries and tug boats, helps us to better understand our place on the world stage. And it makes for some beautiful visualization.",
				"media": [
					{
						"path": "shipTracker01.jpg",
						"width": "1920",
						"height": "1080"
					},
					{
						"path": "shipTracker02.jpg",
						"caption": "Visitors can see where boats are and have been recently...",
						"alt": "Recent ship tracks"
					},
					{
						"path": "styleTest03.jpg",
						"caption": "...and visitors can see aggregated ship paths over months of traffic.",
						"alt": "Aggregated ship tracks"
					},
					{
						"path": "20130709_americasCup01.jpg",
						"caption": "An America's Cup race appears on July 9, 2013.",
						"alt": "America's Cup race"
					},
					{
						"path": "prototype01.jpg",
						"caption": "An early prototype showed only the central Bay.",
						"alt": "Early prototype"
					},
					{
						"path": "tugApproach.jpg",
						"caption": "The view out the window adjacent to Ship Tracker: a tugboat travels out toward an incoming container ship.",
						"alt": "View at the exhibit"
					},
					{
						"path": "colorTest_cargo.jpg",
						"caption": "Container ship paths for two months.",
						"alt": "Container ship tracks"
					},
					{
						"path": "colorTest_passenger.jpg",
						"caption": "Ferry paths for two months.",
						"alt": "Ferry tracks"
					},
					{
						"path": "colorTest_tanker.jpg",
						"caption": "Tanker paths for two months; note the mooring circles to the south, where tankers until they are prepared to offload their cargo at the Port of Richmond to the north.",
						"alt": "Tanker tracks"
					},
					{
						"path": "colorTest_tugPilot.jpg",
						"caption": "Tugboats and Bar Pilot paths for two months.",
						"alt": "Tugboat tracks"
					}
				]
			},

			{
				"name": "sparklebooth",
				"id": "sparklebooth",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2012.05.01",
				"role": "installation designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "installations" }
				],
				"tagline": "the wedding photo booth, reinvented",
				"brief": "May 5, 2012 was a great day for me. It was the day that Gloriane became my wife, and amazingly, also the day my experimental wedding installation did not crash or light anyone on fire.

The Sparklebooth adds to the tradition of the wedding photobooth, allowing guests to draw over their portraits with sparklers. Custom software adds the sparkler trails to the media as with a long-exposure photograph.",
				"media": [
					{
						"path": "glorianeAndEric.jpg",
						"width": "1920",
						"height": "1080"
					},
					{ "path": "dawnAndMarshall.jpg" },
					{ "path": "radbertAndTin.jpg" },
					{ "path": "otis.jpg" },
					{
						"path": "development01.jpg",
						"caption": "The first successful test.",
						"alt": "The first successful test"
					},
					{
						"path": "development02.jpg",
						"caption": "A pretty accident, writing code in the sun.",
						"alt": "A pretty accident"
					}
				]
			},

			{
				"name": "tidal ribbon",
				"id": "tidalribbon",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.18",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "fabrication" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "visualization" }
				],
				"tagline": "one year of tides, made touchable",
				"brief": "Tidal Ribbon is a data sculpture displaying NOAA tide data collected in San Francisco Bay. Installed in 2013 in the Exploratorium's Bay Observatory gallery, the piece augments the view of the water with a glimpse of the water's past.

A collection of lasercut acrylic slices span eight feet, each representing one day and collectively describing a year's worth of tides. Each daily slice is annotated with details of the tide heights, moon phase, and other relevant information.

Created with Doug Thistlethwaite at the Exploratorium; inspired by the work of Adrien Segal.",
				"media": [
					{
						"path": "tidalRibbon01.jpg",
						"width": "1280",
						"height": "720",
						"caption": "Close-up of tide slices. The ridges correspond to the six-minute sampling interval of the tide gauge.
Photograph by Gayle Laird, Exploratorium.",
						"alt": "Tide slices"
					},
					{
						"path": "tidalRibbon02.jpg",
						"caption": "Each slice can be pulled out for closer examination of the daily record.
Photograph by Gayle Laird, Exploratorium.",
						"alt": "Examining the daily slices"
					},
					{
						"path": "waves.jpg",
						"caption": "Tides arrive about one hour later every day, creating a wave pattern.",
						"alt": "Staggered tides"
					},
					{
						"path": "protoWood02.jpg",
						"caption": "The first prototype, showing The Tōhoku tsunami in March 2011",
						"alt": "First prototype"
					},
					{
						"path": "both01.jpg",
						"caption": "Two early iterations side-by-side",
						"alt": "Two early iterations"
					}
				]
			},

			{
				"name": "tile designer",
				"id": "tiledesigner",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.06.01",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" }
				],
				"tagline": "pattern designer and explainer",
				"brief": "Tessellation is perhaps the simplest geometric concept with the broadest range of creative expression. Part of the Exploratorium's "Geometry Playground" exhibition, it allows visitors to explore tessellations by creating them.

Visitors move a single line on a touchscreen; this line is rotated and translated into three different patterns. These tessellations all respond in real-time, generating a wide range of patterns both on-screen and projected onto a nearby wall. Visitors thereby both design custom patterns and decorate the exhibition with them.",
				"media": [
					{
						"path": "tileDesigner01.jpg",
						"width": "1024",
						"height": "768",
						"alt": "visitor drawing tesselations",
					},
					{
						"path": "tileDesigner02.jpg",
						"caption": "Tile Designer gives visitors the creative power to decorate the exhibition.",
						"alt": "Decorate the exhibition"
					},
					{
						"path": "lowerScreen01.jpg",
						"caption": "Simply dragging a line segment creates an infinite range of patterns.",
						"alt": "Simple interface"
					},
					{
						"path": "upperScreen01.jpg",
						"caption": "Three patterns are created simultaneously from the same line segment.",
						"alt": "Three patterns"
					},
					{
						"path": "sketches01.jpg",
						"caption": "Early sketches explore ideas about environmental applications of visitors' designs.",
						"alt": "Early sketches"
					}
				]
			},

			{
				"name": "transmote talks",
				"id": "transmotetalks",
				"featured": false,
				"thumbOffsetY": 0.15,
				"date": "2015.04.13",
				"role": "public speaker",
				"tag": [
				],
				"tagline": "sometimes i say things out loud.",
				"brief": "I love sharing ideas with people. While one-on-ones are my favorite, sharing ideas with hundreds of people, one at a time, doesn't feel very efficient. So, people created conferences. And sometimes I speak at them.",
				"media": [
					{
						"path": "http://player.vimeo.com/video/81940032",
						"poster": "andNotOr.jpg",
						"width": "800",
						"height": "450",
						"embedType": "vimeo",
						"caption": "&& ! || (And Not Or): Generalism in a world of divided labor"
					},
					{
						"path": "https://www.youtube.com/embed/_wGYzYyLZkk",
						"poster": "howWeUsedTo.jpg",
						"width": "800",
						"height": "450",
						"embedType": "youtube",
						"caption": "How We Used To. How We Will: innovation and iteration viewed through the lens of Flickr's history"
					},
					{
						"path": "http://player.vimeo.com/video/82394675",
						"poster": "instIntPanel.jpg",
						"width": "800",
						"height": "450",
						"embedType": "vimeo",
						"caption": "INST-INT Panel: Alexis Lloyd with Eric Socolofsky, Matt Cottam, and Michael Szivos"
					},
					{
						"path": "http://player.vimeo.com/video/69096802",
						"poster": "immediateGratification.jpg",
						"width": "800",
						"height": "450",
						"embedType": "vimeo",
						"caption": "Design for Immediate Gratification: Exhibit design at the Exploratorium"
					},
				]
			},

			{
				"name": "visualizing the bay area",
				"id": "vizthebay",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.20",
				"role": "exhibit designer/developer, technical lead",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "visualization" }
				],
				"tagline": "illustrating Bay Area systems",
				"brief": "Many complex systems comprise San Francisco Bay Area, from weather and seismology to demographics and transit. These systems often lie invisible due to their physical and temporal scales.

Visitors can explore these systems via a series of interactive visualizations on display in the Exploratorium's Bay Observatory gallery. Visualizing the Bay Area serves as a platform for this content, with a topographical map carved into solid maple as a physical foundation for a digital framework supporting multiple layers of content.",
				"media": [
					{
						"path": "vizTheBay01.jpg",
						"caption": "Visitors explore Fog Browser during evening open hours.",
						"alt": "Fog Browser",
						"width": 1920,
						"height": 1080
					},
					{
						"path": "findingFaultLines.jpg",
						"caption": "Seismology and fault lines of the Bay Area, by James Hovell.",
						"alt": "Seismology and fault lines"
					},
					{
						"path": "fogBrowser.jpg",
						"caption": "Fog patterns over San Francisco Bay, by Eric Socolofsky.",
						"alt": "SF fog patterns"
					},
					{
						"path": "population_age18.jpg",
						"caption": "Demographics studies, by Eric Fischer.",
						"alt": "Demographics"
					},
					{
						"path": "salinity.jpg",
						"caption": "Salinity in the Bay, modeled by Rusty Holleman.",
						"alt": "Salinity in the Bay"
					},
					{
						"path": "http://player.vimeo.com/video/73115373",
						"poster": "fogBrowser01.jpg",
						"width": "750",
						"height": "600",
						"embedType": "vimeo",
						"caption": "Multiple datasets, including wind, water vapor density, and sunrise/set, combine to create an animation of fog patterns rolling through the Bay Area."
					},
					{
						"path": "http://player.vimeo.com/video/73115372",
						"poster": "fogBrowser02.jpg",
						"width": "960",
						"height": "540",
						"embedType": "vimeo",
						"caption": "Projected onto a topographical model, the flat image of the fog takes on depth."
					},
					{
						"path": "topoModel.jpg",
						"caption": "Carved from a solid block of maple, the model is designed to support multiple visualizations.",
						"alt": "Carved maple model"
					},
					{
						"path": "bayModel_topoTests.jpg",
						"caption": "Early fabrication tests.",
						"alt": "Early fabrication tests"
					}
				]
			},

			{
				"name": "wind.io",
				"id": "windio",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.07.29",
				"role": "front end developer",
				"tag": [
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "usergen" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			// ================================== //
			// More Projects
			// ================================== //

			{
				"name": "aperture",
				"id": "aperture",
				"featured": false,
				"thumbOffsetY": 0.1,
				"date": "2006.05.01",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "eyebeam" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "processing" },
					{ "id": "spatial" }
				],
				"tagline": "a spatial synthesizer",
				"brief": "An experiment with malleable space, Aperture is a 'spatial synthesizer' developed during my fellowship in Eyebeam's Production Lab.
Multichannel sonic textures combine with generative visuals overhead to generate six different spatial qualities, exploring concepts from 'Contemplace' with greater focus.",
				"media": [
					{
						"path": "vast_satr.jpg",
						"width": "1600",
						"height": "1200",
						"caption": "'Saturated' state, transitioning to 'vast' state.",
						"alt": "Saturated to vast"
					},
					{
						"path": "http://player.vimeo.com/video/10335935",
						"poster": "satr_vast.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "'Saturated' state, transitioning to 'vast' state."
					},
					{
						"path": "vast_anon.jpg",
						"caption": "'Vast' state, transitioning to 'anonymous' state.",
						"alt": "Vast to anonymous"
					},
					{
						"path": "http://player.vimeo.com/video/10335989",
						"poster": "vast_anon.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "'Vast' state, transitioning to 'anonymous' state.",
					},
					{
						"path": "anon.jpg",
						"caption": "'Anonymous' state.",
						"alt": "Anonymous"
					},
					{
						"path": "pers02.jpg",
						"caption": "'Personal' state.",
						"alt": "Personal"
					},
					{
						"path": "spaceRender01.jpg",
						"caption": "Concept rendering produced during Aperture's development.",
						"alt": "Concept rendering"
					},
					{
						"path": "stateSketches_med.jpg",
						"caption": "Sketches exploring possibilities for audiovisual textures.",
						"alt": "Texture sketches"
					}
				]
			},

			{
				"name": "breaking ground",
				"id": "breakingground",
				"featured": false,
				"thumbOffsetY": -0.3,
				"date": "2002.01.01",
				"role": "architect, designer",
				"tag": [
					{ "id": "architecture" },
					{ "id": "featured" },
					{ "id": "spatial" },
					{ "id": "fabrication" }
				],
				"tagline": "my past life as an architect",
				"brief": "Breaking Ground is my print portfolio. Completed in 2001, the majority of the works contained within are architectural design projects, some professional and some academic.

\"As I make headway...I pick up tools necessary to construct. The more tools I acquire, the more varied the project grows. And this is exactly what makes the project worth undertaking.\"",
				"media": [
					{
						"path": "breakingground_cover.jpg",
						"width": "1024",
						"height": "768",
						"caption": "The physical object, submitted for acceptance into graduate school. Back when people printed things.",
						"alt": "Print portfolio"
					},
					{
						"path": "arthouse_lg.jpg",
						"caption": "Sited in a hybrid industrial-residential neighborhood on St. Louis' south side, this home is texturally and programmatically linked to the community in which it resides.
The living quarters for the painter and sculptor occupy the south end of the home, away from the street. The interior and exterior are clad in rough-sawn lumber, an allusion to traditional home building and to the lumberyard next door.
Two studios and a gallery provide a place to create and show work. The lumber cladding peels away to reveal board-form concrete walls at the studios, and polished concrete at the gallery.",
						"alt": "Work-live space for a sculptor and a painter"
					},
					{
						"path": "holmesplace_lg.jpg",
						"caption": "Occupying a highly visible space in a high-end retail center in downtown Chicago, this space is Holmes Place Health Clubs' introduction to the American populous.
The 566sf pre-sales space serves as a marketing, membership, and retail center for the international upscale health club chain.
Working with CannonDesign as project designer, architect, and manager, I placed emphasis on maximizing visual impact with a minimum of means. A trim budget and a limited amount of space demanded visual and spatial transparency with effective use of materials.",
						"alt": "Polished retail space on Michigan Avenue"
					},
					{
						"path": "cpscomp_lg.jpg",
						"caption": "A competition held by the Chicago Public School District called for a facility to accommodate a diverse body of 800 students; my partner and I expanded the program to accommodate the south-side community of Roseland.
By integrating existing buildings into the new, we sought to maintain and enhance neighborhood cohesion. About 15% of the student body will be physically disabled. as such, primary circulation is ramped through the 'vivarium', a semi-outdoor space that changes throughout the year.",
						"alt": "New school integrated into the existing neighborhood fabric"
					},
					{
						"path": "laumeier_lg.jpg",
						"caption": "Laumeier is an alternative venue for the display and creation of art. Site-specific and independent artwork is placed throughout the park, in a variety of natural settings.
Outdoor and indoor spaces at Laumeier are essentially different rooms in the same gallery -- exterior circulation flows directly into and through interior spaces. Buildings become events along existing and new paths that flow through the outdoor exhibits.",
						"alt": "Sculpture, painting, and ceramics studios embedded in the park"
					},
					{
						"path": "chezfleur_lg.jpg",
						"caption": "A friend wanted to build a potting shed in her backyard. I designed Chez Fleur Minihan to be buildable by someone with little construction knowledge and a tight budget. The accompanying drawings are somewhere between a standard set of construction docs and a how-to manual.
The material palette is simple in order to keep costs down: a lumber frame with concrete footings, standard hardware, and a corrugated fiberglass roof.
The structure itself, while providing shelter for supplies and tools, is kept very open to allow maximum sunlight and air circulation for the plants growing inside and around the shed.",
						"alt": "Potting shed for a friend"
					},
					{
						"path": "blueoncmu_lg.jpg",
						"caption": "I needed a desk, but was working with a modest neophyte architect's salary. Acknowledging my fairly transient lifestyle, I opted to design a modular desk that could be broken down for easier moving, and that could be assembled in a variety of configurations to fit a variety of spaces.
The structure consists of 9-15 concrete blocks, depending on the chosen configuration. The shelves and top are birch plywood with a custom blue stain and polyurethane finish. The cmu also allows for efficient cable management by routing wires through its open cells.",
						"alt": "Furniture design/build on a budget"
					},
					{
						"path": "redlamp_lg.jpg",
						"caption": "Layers of ruby red plexi, offset by washers and nuts, spaced along a single threaded rod that acts as both the main structure and a handle. The core is surrounded by translucent acetate sheeting to diffuse the light. This lamp can be installed as either a desk lamp or a hanging lantern.",
						"alt": "Experiment in color and light"
					},
				]
			},

			{
				"name": "brian alfred - works",
				"id": "brianalfred",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2005.06.01",
				"role": "moving image designer",
				"tag": [
					{ "id": "artwork" },
					{ "id": "clients" },
					{ "id": "eyebeam" },
					{ "id": "flash" },
					{ "id": "motiongfx" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "contemplace",
				"id": "contemplace",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2004.05.15",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "installations" },
					{ "id": "itp" },
					{ "id": "maxmsp" },
					{ "id": "processing" },
					{ "id": "spatial" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "eleminer",
				"id": "eleminer",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2015.09.01",
				"role": "game designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "games" },
					{ "id": "itp" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "FLARManager",
				"id": "flarmanager",
				"featured": false,
				"thumbOffsetY": 0.15,
				"date": "2010.09.01",
				"role": "library author",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "usergen" }
				],
				"tagline": "taking the 'augh' out of 'augmented reality'",
				"brief": "FLARManager is a lightweight framework that makes it easier to build augmented reality applications for Flash. This open-source project began as a side project and grew into a full-featured product available for both open and commercial use.",
				"media": [
					{
						"path": "flarManager_v01.jpg",
						"width": "640",
						"height": "480",
						"caption": "Inspired by the GE Smart Grid campaign, I decided to put together a toolset to make creating applications with FLARToolkit easier.",
						"alt": "FLARManager"
					},
					{
						"path": "http://player.vimeo.com/video/11916909",
						"poster": "flarManagerFlareNFT.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "flarManager_v07.jpg",
						"caption": "FLARManager also provides smarter marker recognition and tracking, similar to other fiducial-tracking engines like reacTIVision.",
						"alt": "Marker recognition and tracking"
					},
					{
						"path": "https://www.youtube.com/embed/r2IShy6uvyE",
						"poster": "flarManager_v06.jpg",
						"width": "640",
						"height": "480",
						"embedType": "youtube",
						"caption": "Unfortunately, I haven't had much time to use the tools that I've created.  However, producing examples and documentation have led to some fun side experiments."
					}
				]
			},

			{
				"name": "grove",
				"id": "grove",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2003.12.15",
				"role": "artist",
				"tag": [
					{ "id": "artwork" },
					{ "id": "fabrication" },
					{ "id": "installations" },
					{ "id": "itp" },
					{ "id": "spatial" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "josefina's adventure",
				"id": "josefina",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2006.08.04",
				"role": "game developer",
				"tag": [
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "flash" },
					{ "id": "games" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "marclay studies",
				"id": "marclay",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2005.01.05",
				"role": "moving image designer",
				"tag": [
					{ "id": "artwork" },
					{ "id": "clients" },
					{ "id": "eyebeam" },
					{ "id": "motiongfx" },
					{ "id": "code" },
					{ "id": "processing" },
					{ "id": "flash" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "anthony mccall - works",
				"id": "mccall",
				"featured": false,
				"thumbOffsetY": 0.2,
				"date": "2005.10.01",
				"role": "developer",
				"tag": [
					{ "id": "clients" },
					{ "id": "eyebeam" },
					{ "id": "installations" },
					{ "id": "spatial" },
					{ "id": "flash" },
					{ "id": "code" },
					{ "id": "artwork" }
				],
				"tagline": "software for solid light films",
				"brief": "I met Anthony McCall while working at Eyebeam, and we maintained a working relationship after the end of my fellowship.

Anthony's primary medium is \"solid light\", simple geometric forms projected into a room full of haze that transforms points into lines, and lines into shifting, ethereal planes.

These are examples of the commissioned work I've done for him. I also found this interview to offer particularly descriptive insight into his work, touching on the relation of film to sculpture in his pieces, and the unique qualities of the medium of \"solid light\".",
				"media": [
					{
						"path": "AM-Peer-02.jpg",
						"width": "600",
						"height": "896",
						"caption": "Anthony McCall.
\"Between You and I\" (2006), sixteenth minute.
Installation at Peer / The Round Chapel , London, 2006.
Photo by Hugo Glendenning, copyright Anthony McCall 2006.",
						"alt": "Between You and I, 16th minute"
					},
					{
						"path": "AM-Peer-05.jpg",
						"caption": "Anthony McCall.
\"Between You and I\" (2006), tenth minute.
Installation at Peer / The Round Chapel , London, 2006.
Photo by Hugo Glendenning, copyright Anthony McCall 2006.",
						"alt": "Between You and I, 10th minute"
					},
					{
						"path": "yaiVert01.jpg",
						"caption": "",
						"alt": "Screen capture of Between You and I"
					},
					{
						"path": "yaiVert02.jpg",
						"caption": "Screen captures of \"Between You and I\".
Simple geometric forms in a two-dimensional plane become much more when projected into the third dimension.",
						"alt": "Screen capture of Between You and I"
					},
					{
						"path": "yaiVert_ui.jpg",
						"caption": "",
						"alt": "Authoring software for Between You and I"
					},
					{
						"path": "yaiHoriz_ui.jpg",
						"caption": "I developed authoring tools for Anthony to create the horizontal and vertical versions of 'Between You and I'.",
						"alt": "Authoring software for Between You and I"
					},
					{
						"path": "hazer2.jpg",
						"caption": "",
						"alt": "Early style tests at Eyebeam"
					},
					{
						"path": "hazer6.jpg",
						"caption": "Early style tests at Eyebeam.
Photographs by Chihcheng Peng.",
						"alt": "Early style tests at Eyebeam"
					}
				]
			},

			{
				"name": "quickcomic",
				"id": "quickcomic",
				"featured": false,
				"thumbOffsetY": 0.05,
				"date": "2006.10.27",
				"role": "concept, interaction designer, developer",
				"tag": [
					{ "id": "webdev" },
					{ "id": "code" },
					{ "id": "usergen" },
					{ "id": "flash" },
					{ "id": "ixd" },
					{ "id": "social" },
					{ "id": "featured" }
				],
				"tagline": "comic authoring tool",
				"brief": "I designed and developed Quickcomic to allow people to very quickly serve up their opinions with a side order of humor.  My pals Alex Meyer and Ahmad Saeed helped me bring it to life, with their illustration/graphic design and server-side coding skills (respectively).",
				"media": [
					{
						"path": "http://www.quickcomic.com/remote/qcEmbed.swf",
						"poster": "quickcomic_title.jpg",
						"width": "720",
						"height": "570",
						"flashvars": "stripId=475",
						"embedType": "flash",
						"caption": "Authors are presented with an empty four-panel comic, which they populate with illustrated characters and text. Comics can be shared with others and embedded in other sites."
					}
				]
			},

			{
				"name": "rift",
				"id": "rift",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2009.10.04",
				"role": "co-artist",
				"tag": [
					{ "id": "artwork" },
					{ "id": "installations" },
					{ "id": "spatial" },
					{ "id": "code" },
					{ "id": "maxmsp" },
					{ "id": "featured" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "silly walks generator",
				"id": "swg",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2006.03.08",
				"role": "concept, interaction designer, developer",
				"tag": [
					{ "id": "ixd" },
					{ "id": "usergen" },
					{ "id": "clients" },
					{ "id": "flash" },
					{ "id": "featured" },
					{ "id": "social" },
					{ "id": "games" },
					{ "id": "code" }
				],
				"tagline": "roll your own Silly Walk",
				"brief": "A client approached me to build a promotional game for their release of a series of \"Monty Python's Personal Best\" DVDs. Rather than creating a traditional game, I thought it would be fun to enable users to create their own Silly Walks, based on the original Ministry of Silly Walks sketch.",
				"media": [
					{
						"path": "ss01_lumberjack.jpg",
						"width": "800",
						"height": "600",
						"caption": "Users can choose from four different Flying Circus backgrounds and four different characters, including the Inquisitor, Lumberjack, Knight, and Mime.",
						"alt": "Choose the Inquisitor, Lumberjack, Knight, or Mime"
					},
					{
						"path": "ss02_knight.jpg",
						"caption": "Drag limbs into position, then set a keyframe. Continue until your animation is complete. Tweak the Speed and Silliness sliders to fine-tune your animation.",
						"alt": "Keyframe your animation and tweak Speed and Silliness"
					},
					{
						"path": "ss03_inquisitor.jpg",
						"caption": "Completed Silly Walks can be sent to friends via unique URLs. This site was my first attempt at user-generated content, and in retrospect, it would be much better with a public gallery and voting system. My next project focusing on user authorship, Quickcomic, made much more of an effort to build community around the content.",
						"alt": "Send Silly Walks to your friends"
					}
				]
			},

			{
				"name": "terraformer",
				"id": "terraformer",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2003.05.15",
				"role": "game designer/developer",
				"tag": [
					{ "id": "games" },
					{ "id": "code" },
					{ "id": "flash" },
					{ "id": "itp" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "transmote v1.0",
				"id": "transmotev1",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2004.03.15",
				"role": "artist/coder",
				"tag": [
					{ "id": "code" },
					{ "id": "flash" },
					{ "id": "ixd" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "transmote v2.0",
				"id": "transmotev2",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2010.09.19",
				"role": "artist/coder",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "ixd" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "vectogram",
				"id": "vectogram",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2004.08.01",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "flash" },
					{ "id": "fabrication" },
					{ "id": "games" },
					{ "id": "installations" },
					{ "id": "usergen" }
				],
				"tagline": "generative art as two-player game",
				"brief": "Vectogram is a two-player generative drawing tool sporting a sleek arcade cocktail cabinet. Players can choose to cooperate or compete for control of the electronic canvas.

Select from five different Vectoids, each with its own drawing style and vulnerability to other Vectoids. Deploy Vectoids thoughtfully in order to paint a picture pleasing to your eye!",
				"media": [
					{
						"path": "purpleWhite04.jpg",
						"width": "1196",
						"height": "600",
						"caption": "Each player chooses a color, and has at their disposal five different Vectoids.",
						"alt": "purple v. white"
					},
					{
						"path": "whiteBlue02.jpg",
						"alt": "white v. blue"
					},
					{
						"path": "greenWhite03.jpg",
						"alt": "green v. white"
					},
					{
						"path": "blueWhite02.jpg",
						"alt": "blue v. white"
					},
					{
						"path": "blueRed04.jpg",
						"alt": "blue v. red"
					},
					{
						"path": "redPurple01.jpg",
						"alt": "red v. purple"
					},
					{
						"path": "cin01.jpg",
						"caption": "The custom-built cocktail arcade cabinet.",
						"alt": "custom-built cocktail arcade cabinet"
					},
					{
						"path": "socolofsky_eric_2_adjusted.jpg",
						"caption": "Vectogram made its debut at this 3-day event at Compact-Impact, New York City.",
						"alt": "Compact-Impact Night, Vol. 3"
					},
					{
						"path": "cin03.jpg",
						"caption": "Best thing about the cocktail arcade cabinet?  Cocktails.",
						"alt": "cocktails + vectogram = <3"
					},
					{
						"path": "cin05.jpg",
						"alt": "fierce competition"
					},
					{
						"path": "const00.jpg",
						"caption": "The cabinet was fabricated in the cozy lil' shop at ITP.

I intended to use an old tube TV, but didn't realize how very low the resolution was on those things...so had to swap with an LCD flat-panel at the last minute.",
						"alt": "cabinet construction"
					},
					{
						"path": "const01.jpg",
						"caption": "Jin-Yo Mok 'helps' with documentation.",
						"alt": "jin-yo helps"
					}
				]
			}

		]
	}
}

{
	"project_list": {
		"project": [

			// ================================== //
			// Featured Projects
			// ================================== //

			{
				"name": "build a room",
				"id": "buildaroom",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.06.01",
				"role": "exhibit designer, developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "installations" },
					{ "id": "ixd" },
					{ "id": "maxmsp" },
					{ "id": "spatial" }
				],
				"tagline": "3D drawing in physical space",
				"brief": "At the core of the Exploratorium's "Geometry Playground" exhibition is the concept of spatial reasoning: the ability to create a mental model of a space, and to navigate and manipulate it. Build A Room allows visitors to create three-dimensional spaces out of thin air with a \"light brush\", custom software, and a room-sized canvas.",
				"media": [
					{
						"path": "buildARoom01.jpg",
						"width": "960",
						"height": "540"
					},
					{
						"path": "http://player.vimeo.com/video/74178950",
						"poster": "room02_thumb.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "buildARoom02.jpg",
						"caption": "Visitors often work together to design and build their room.",
						"alt": "Visitors working together"
					},
					{
						"path": "spinashape01.jpg",
						"caption": "The first iteration focused on rotational geometry, created by spinning objects.",
						"alt": "Spinning shapes"
					},
					{
						"path": "screenshot04.jpg",
						"caption": "While spinning objects made interesting shapes, visitors just wanted to paint with light.",
						"alt": "Light painting"
					},
					{
						"path": "longExposure01.jpg",
						"caption": "Early tests involved light sabers and long-exposure photography.",
						"alt": "Jedi fun"
					}
				]
			},

			{
				"name": "d-fuse - small global",
				"id": "dfuse",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2005.09.01",
				"role": "data visualizer, moving image designer",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "eyebeam" },
					{ "id": "maps" },
					{ "id": "motiongfx" },
					{ "id": "processing" },
					{ "id": "visualization" }
				],
				"tagline": "a stylized glimpse into the world's data",
				"brief": "A collection of style tests and production runs I completed while at Eyebeam for a multichannel moving image installation, by UK-based artist collective D-Fuse.

\"Small Global\" juxtaposes visualizations of paired data sets to highlight relationships that often go unnoticed by mass media.",
				"media": [
					{
						"path": "http://player.vimeo.com/video/10275443",
						"poster": "energy.jpg",
						"width": "720",
						"height": "480",
						"embedType": "vimeo",
						"caption": "An overview of energy consumption by country, one continent at a time. Data were taken from various online sources, and combined with the NASA Earth Light Map to reference population centers."
					},
					{
						"path": "http://player.vimeo.com/video/10275493",
						"width": "720",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Since its first franchise opening in Des Plains, Illinois, in 1955, McDonalds has expanded to well over 30,000 locations worldwide. This animation chronicles the spread of McDonalds across the globe.The data used for this animation were taken from mcdonalds.com and mcspotlight.org, and were current up to the year 2000."
					},
					{
						"path": "http://player.vimeo.com/video/10275513",
						"width": "600",
						"height": "412",
						"embedType": "vimeo",
						"caption": "This animation is based on a map in the New State of the World graphic atlas which shows the number of refugees produced by each country. The exiled refugee population of each country is represented by the total number of tiles in the abstracted country border. Darker tiles represent a higher number of refugees that have fled the country."
					},
					{
						"path": "http://player.vimeo.com/video/10275537",
						"width": "600",
						"height": "412",
						"embedType": "vimeo",
						"caption": "This animation is based on a map in the New State of the World graphic atlas which shows the number of refugees received by each country. Refugee entry is abstracted as an imaginary weight falling on a country. Each asylum granted raises the height of the new homeland, leading gradually to a three-dimensional bar graph, with refugee population on the vertical axis. The higher and darker the country, the more refugees are harbored within."
					}
				]
			},

			{
				"name": "dividing space",
				"id": "dividingspace",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.06.02",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "fabrication" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "ixd" },
					{ "id": "processing" }
				],
				"tagline": "hands-on geometry exploration",
				"brief": "Understanding geometry doesn't require pen, paper, and textbooks. Another way to learn geometry is to experience it and experiment with it. This is the philosophy behind the Exploratorium's "Geometry Playground" exhibition.

Dividing Space presents an interactive Voronoi diagram – visitors can manipulate the diagram by configuring a field of red pegs and sending a blue puck through them. Custom software ties into a computer vision system to enable this realtime, playful interaction with otherwise complex geometry.

Dividing Space uses Processing, ReacTIVision and Mesh.",
				"media": [
					{
						"path": "dividingSpace01.jpg",
						"width": "1276",
						"height": "718",
					},
					{
						"path": "http://player.vimeo.com/video/14351862",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Dividing space allows visitors to explore Voronoi diagrams by manipulating eight moveable pegs and two rolling pucks.
The red pegs provide an opportunity to set up and observe many different Voronoi diagrams, and the blue pucks allow playful experimentation with Voronoi diagrams in motion."
					},
					{
						"path": "final01.jpg",
						"caption": "The pegs and pucks on the table are tracked by a camera above, and their locations are sent to custom software that calculates and projects a Voronoi diagram onto the table below.",
						"alt": "Voronoi diagram around red pegs and blue pucks"
					},
					{
						"path": "final03.jpg",
						"caption": "The table is large enough to accommodate multiple visitors at once, and the presence of two rolling pucks and multiple pegs encourages interaction between visitors.",
						"alt": "Social interaction around the exhibit"
					},
					{
						"path": "final06.jpg",
						"caption": "Dividing space encourages both active play and contemplative exploration.",
						"alt": "Active play and contemplative exploration"
					},
					{
						"path": "final08.jpg",
						"caption": "Dividing Space was originally conceived as a counterpart to Scott Snibbe's Boundary Functions, as the non-immersive half of a research pairing designed to investigate the effects of immersivity on visitor experience.",
						"alt": "Visitors experiment with the geometry"
					},
					{
						"path": "proto02.jpg",
						"caption": "The first prototype came fairly close to the desired interaction and content delivery.  The most effective change was to add a label at one end of the table, to make it more visible than the bin-mounted labels, and to discourage air hockey-like behavior.",
						"alt": "The first prototype, open at both ends"
					}
				]
			},

			{
				"name": "elastotron",
				"id": "elastotron",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.03.03",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "itp" },
					{ "id": "processing" }
				],
				"tagline": "rippling reflections",
				"brief": "A video mirror that projects two-dimensional media into three-dimensional space.
Elastotron exists in multiple iterations, each of which grows from an elastic motion algorithm that creates a bouncy, rippling effect that responds fluidly to viewers' movements.",
				"media": [
					{
						"path": "reflections01.jpg",
						"width": "1600",
						"height": "1200",
						"caption": "Elastotron was shown in 2009 at San Francisco's Exploratorium in the 'Reflections' exhibition, which showcased works that asked viewers to, um, reflect on the nature of their self-image.",
						"alt": "'Reflections', Exploratorium, 2009"
					},
					{
						"path": "reflections04.jpg",
						"caption": "Elastotron offers six different modes, each of which highlights different elements of reflection, from motion to depth to color.
Viewers can also toggle a flood lamp providing contrast for their reflection, casting themselves into shadow and changing peaks into valleys.",
						"alt": "Visitors exploring Elastotron"
					},
					{
						"path": "http://player.vimeo.com/video/13992186",
						"poster": "elastotronReflections.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Visitors play with their reflections."
					},
					{
						"path": "promo01.jpg",
						"caption": "Elastotron's six display modes.",
						"alt": "Elastotron's six display modes."
					},
					{
						"path": "greatwall03.jpg",
						"caption": "Elastotron was featured on the Great Wall of Oakland, a 10-story outdoor projection, in April 2009.",
						"alt": "Elastotron on the Great Wall of Oaloand"
					},
					{
						"path": "http://player.vimeo.com/video/13845931",
						"poster": "greatwall03.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "Elastotron works well at scale; it doesn't get much larger than 120 feet high."
					},
					{
						"path": "http://player.vimeo.com/video/9809759",
						"poster": "invite_thumb.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "A version of Elastrotron was shown at the Yerba Buena Center for the Arts in 2010."
					}
				]
			},

			{
				"name": "gamestar mechanic",
				"id": "gamestar",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2008.04.01",
				"role": "lead developer, some game/interaction design",
				"tag": [
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "games" },
					{ "id": "ixd" },
					{ "id": "social" },
					{ "id": "usergen" },
					{ "id": "webdev" }
				],
				"brief": "Gamestar Mechanic is a game about game design. A game editor, online role playing game, and community site are designed to teach kids about complex systems by providing tools to build them.

Gamestar Mechanic is the brainchild of Katie Salen of the Institute of Play. I was the lead developer and architect for the core experience, including a drag-and-drop game editor, a top-down and platformer game engine, and an embeddable game player widget. I also contributed significantly to the user interface and game design.",
				"media": [
					{
						"path": "factory01.jpg",
						"width": "942",
						"height": "629",
						"caption": "Factory 7, home of the 6 schools of Game Mechanics.",
						"alt": "Factory 7"
					},
					{
						"path": "game01.jpg",
						"caption": "Simple and complex games can be built with Gamestar Mechanic.",
						"alt": "Top-down game"
					},
					{
						"path": "repairJob01.jpg",
						"caption": "A drag-and-drop game editor allows for quick design and iteration.",
						"alt": "Game editor"
					},
					{
						"path": "http://player.vimeo.com/video/10275263",
						"poster": "level01.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "http://player.vimeo.com/video/10275316",
						"poster": "level06.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "http://player.vimeo.com/video/10275368",
						"poster": "level08.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "editor01.jpg",
						"caption": "This series of screenshots demonstrates the ease of quickly sketching out a simple action game.",
						"alt": "Creating a new game"
					},
					{
						"path": "editor02.jpg",
						"caption": "After choosing parameters for the game, place a player avatar.",
						"alt": "Placing a player avatar"
					},
					{
						"path": "editor03.jpg",
						"caption": "Do it Bob Ross-style and add some fluffy clouds.",
						"alt": "Add some clouds"
					},
					{
						"path": "editor04.jpg",
						"caption": "Place a Goal Block up in the sky for the player to jump towards.",
						"alt": "Add a Goal Block"
					},
					{
						"path": "editor05.jpg",
						"caption": "Flip the Edit/Play switch at any time to test the design immediately.",
						"alt": "Iterate quickly"
					},
					{
						"path": "editor06.jpg",
						"caption": "Platformers are even better with enemies. Let's add some.",
						"alt": "Add some enemies"
					},
					{
						"path": "editor07.jpg",
						"caption": "Collectable points add a little variety.",
						"alt": "Add some points"
					},
					{
						"path": "editor08.jpg",
						"caption": "A Health Counter and Points Counter round out the interface.",
						"alt": "Add some counters"
					},
					{
						"path": "editor09.jpg",
						"caption": "Require the player collect all points for an additional challenge.",
						"alt": "Collect 'em all"
					},
					{
						"path": "editor10.jpg",
						"caption": "A background image and some music add some polish.",
						"alt": "Finishing touches"
					},
					{
						"path": "editor11.jpg",
						"caption": "Only takes a few minutes to design and build a working game. A few more will make it really great!",
						"alt": "The final product"
					}
				]
			},

			{
				"name": "hoodline prototypes",
				"id": "hoodline",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.03.01",
				"role": "data visualizer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "the City via Yelp",
				"brief": "Hoodline hired Stamen to investigate San Francisco via public data. This series of prototypes uses Yelp data to tell stories about the city, narrated by its reviewers.
Read more about it in this blog post.",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
					{
						"path": "yelp03.gif",
						"width": "1200",
						"height": "675",
						"caption": "Rating as color, number of reviews as height on 3D map",
						"alt": "Ratings, number of reviews"
					},
					{
						"path": "yelp03-restaurants.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Restaurants reliably get many reviews",
						"alt": "Restaurants on 3D map"
					},
					{
						"path": "yelp06-restaurantCorridors.jpg",
						"width": "1484",
						"height": "828",
						"caption": "A quick, not-that-successful experiment in determining business corridors via k-means clustering",
						"alt": "Restaurants, in k-means clusters"
					},
					{
						"path": "yelp06a-boundaries.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Another experiment: find neighborhood boundaries by identifying businesses tagged with multiple neighborhoods",
						"alt": "Neighborhood overlaps"
					}
				]
			},

			/*
			{
				"name": "baby bubbles",
				"id": "babynames",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2016.06.01",
				"role": "data visualizer, concept",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},

			{
				"name": "atlas of emotions",
				"id": "atlasofemo",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2016.07.01",
				"role": "data visualizer, developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},

			{
				"name": "open redistricting",
				"id": "openredist",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.04.01",
				"role": "developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},

			{
				"name": "consumer reports",
				"id": "consumerreports",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.02.01",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},

			{
				"name": "living liquid",
				"id": "livingliquid",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2017.04.01",
				"role": "developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "stamen" },
					{ "id": "visualization" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
					{
						"path": "yelp02.jpg",
						"width": "1484",
						"height": "828",
						"caption": "Yelp businesses: rating as color, number of reviews as size",
						"alt": "Ratings, number of reviews"
					},
				]
			},
			*/

			{
				"name": "house of days",
				"id": "houseofdays",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2009.03.17",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "visualization" }
				],
				"tagline": "a visual history of the Bay",
				"brief": "A collection of hours, one day at a time. Taken every hour on the hour, these photographs detail a long-term portrait of San Francisco Bay from individual moments to seasonal and annual patterns.",
				"media": [
					{
						"path": "houseOfDays01.jpg",
						"width": "1280",
						"height": "960",
						"caption": "The House of Days is a reclaimed Alcatraz searchlight building, positioned on the south edge of the Golden Gate. A camera within takes photographs looking north every hour.",
						"alt": "The House of Days, on the San Francisco Bay"
					},
					{
						"path": "houseOfDays02.jpg",
						"caption": "Within the House is a display of days past recently and long ago. Each row contains 24 photographs, comprising a single day.",
						"alt": "24 hours per row, day after day"
					},
					{
						"path": "houseOfDays03.jpg",
						"caption": "The photographs scroll upwards and downwards, illustrating the passing of days, seasons, and years. Days grow longer and shorter, fog and rain and sun come and go.",
						"alt": "Years' worth of days"
					},
					{
						"path": "01_gull04.jpg",
						"caption": "Every day can be viewed large, with the press of a button. Here, a Western Gull appears right on the hour.",
						"alt": "Western Gull"
					},
					{
						"path": "04_ship02.jpg",
						"caption": "Huge container ships come in and out of the Bay regularly.",
						"alt": "Container ship"
					},
					{
						"path": "08_fog02.jpg",
						"caption": "San Francisco is known for its fog; the Golden Gate can be especially thick at times.",
						"alt": "Fog in the Golden Gate"
					},
					{
						"path": "15_ship04.jpg",
						"caption": "A cruise ship steals into port shortly before daybreak.",
						"alt": "Cruise ship"
					},
					{
						"path": "10_storm01.jpg",
						"caption": "Strong storms sometimes sweep in from the west.",
						"alt": "Storm brewing"
					},
					{
						"path": "14_sunset03.jpg",
						"caption": "The sun sets far to the north this close to the summer solstice.",
						"alt": "Solstice sunset"
					}
				]
			},
			/*
			{
				"name": "picturing place",
				"id": "picturingplace",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.09.01",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "visualization" }
				],
				"tagline": "",
				"brief": ""
				"media": [
				]
			},
			*/
			{
				"name": "plankton populations",
				"id": "planktonpops",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.19",
				"role": "exhibit designer",
				"tag": [
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "visualization" }
				],
				"tagline": "searching for life in the oceans",
				"brief": "We all know of the \"charismatic megafauna\" in the oceans: whales, sharks, dolphins. But what of the plankton that form the base of the marine food web, and produce the oxygen we breathe?

Plankton Populations allows visitors to examine marine micro-biomes by peering through a wood-and-glass lens into a digital representation of the world's oceans.",
				"media": [
					{
						"path": "planktonPops01.jpg",
						"width": "900",
						"height": "601",
						"caption": "Visitors explore plankton types in the world's oceans.",
						"alt": "Visitors fishing for plankton"
					},
					{
						"path": "https://www.youtube.com/embed/tysoSbEL8Zw",
						"width": "853",
						"height": "480",
						"embedType": "youtube",
						"caption": "Video produced by the Exploratorium Moving Image Department."
					},
					{
						"path": "planktonPops02.jpg",
						"caption": "Representations of the type and density of plankton populations are visible through the lens.",
						"alt": "Magnifying plankton populations"
					},
					{
						"path": "planktonPops03.jpg",
						"caption": "A special marker, opaque to sensors within the table but transparent to humans, allows the system to draw plankton wherever the lens moves.",
						"alt": "Infrared fiducials tracked by the table"
					}
				]
			},

			{
				"name": "ship tracker",
				"id": "shiptracker",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.17",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "visualization" }
				],
				"tagline": "tracking ships through the Bay",
				"brief": "Global shipping is fundamental to San Francisco Bay Area commerce. The ports of Oakland and Richmond turn around multiple massive container and tanker ships daily, providing and supplying raw materials and manufactured goods to the region and the world.

Understanding the travels of these ships, as well as the daily paths of smaller ships like ferries and tug boats, helps us to better understand our place on the world stage. And it makes for some beautiful visualization.",
				"media": [
					{
						"path": "shipTracker01.jpg",
						"width": "1920",
						"height": "1080"
					},
					{
						"path": "shipTracker02.jpg",
						"caption": "Visitors can see where boats are and have been recently...",
						"alt": "Recent ship tracks"
					},
					{
						"path": "styleTest03.jpg",
						"caption": "...and visitors can see aggregated ship paths over months of traffic.",
						"alt": "Aggregated ship tracks"
					},
					{
						"path": "20130709_americasCup01.jpg",
						"caption": "An America's Cup race appears on July 9, 2013.",
						"alt": "America's Cup race"
					},
					{
						"path": "prototype01.jpg",
						"caption": "An early prototype showed only the central Bay.",
						"alt": "Early prototype"
					},
					{
						"path": "tugApproach.jpg",
						"caption": "The view out the window adjacent to Ship Tracker: a tugboat travels out toward an incoming container ship.",
						"alt": "View at the exhibit"
					},
					{
						"path": "colorTest_cargo.jpg",
						"caption": "Container ship paths for two months.",
						"alt": "Container ship tracks"
					},
					{
						"path": "colorTest_passenger.jpg",
						"caption": "Ferry paths for two months.",
						"alt": "Ferry tracks"
					},
					{
						"path": "colorTest_tanker.jpg",
						"caption": "Tanker paths for two months; note the mooring circles to the south, where tankers until they are prepared to offload their cargo at the Port of Richmond to the north.",
						"alt": "Tanker tracks"
					},
					{
						"path": "colorTest_tugPilot.jpg",
						"caption": "Tugboats and Bar Pilot paths for two months.",
						"alt": "Tugboat tracks"
					}
				]
			},

			{
				"name": "sparklebooth",
				"id": "sparklebooth",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2012.05.01",
				"role": "installation designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "installations" }
				],
				"tagline": "the wedding photo booth, reinvented",
				"brief": "May 5, 2012 was a great day for me. It was the day that Gloriane became my wife, and amazingly, also the day my experimental wedding installation did not crash or light anyone on fire.

The Sparklebooth adds to the tradition of the wedding photobooth, allowing guests to draw over their portraits with sparklers. Custom software adds the sparkler trails to the media as with a long-exposure photograph.",
				"media": [
					{
						"path": "glorianeAndEric.jpg",
						"width": "1920",
						"height": "1080"
					},
					{ "path": "dawnAndMarshall.jpg" },
					{ "path": "radbertAndTin.jpg" },
					{ "path": "otis.jpg" },
					{
						"path": "development01.jpg",
						"caption": "The first successful test.",
						"alt": "The first successful test"
					},
					{
						"path": "development02.jpg",
						"caption": "A pretty accident, writing code in the sun.",
						"alt": "A pretty accident"
					}
				]
			},

			{
				"name": "tidal ribbon",
				"id": "tidalribbon",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.18",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "fabrication" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "visualization" }
				],
				"tagline": "one year of tides, made touchable",
				"brief": "Tidal Ribbon is a data sculpture displaying NOAA tide data collected in San Francisco Bay. Installed in 2013 in the Exploratorium's Bay Observatory gallery, the piece augments the view of the water with a glimpse of the water's past.

A collection of lasercut acrylic slices span eight feet, each representing one day and collectively describing a year's worth of tides. Each daily slice is annotated with details of the tide heights, moon phase, and other relevant information.

Created with Doug Thistlethwaite at the Exploratorium; inspired by the work of Adrien Segal.",
				"media": [
					{
						"path": "tidalRibbon01.jpg",
						"width": "1280",
						"height": "720",
						"caption": "Close-up of tide slices. The ridges correspond to the six-minute sampling interval of the tide gauge.
Photograph by Gayle Laird, Exploratorium.",
						"alt": "Tide slices"
					},
					{
						"path": "tidalRibbon02.jpg",
						"caption": "Each slice can be pulled out for closer examination of the daily record.
Photograph by Gayle Laird, Exploratorium.",
						"alt": "Examining the daily slices"
					},
					{
						"path": "waves.jpg",
						"caption": "Tides arrive about one hour later every day, creating a wave pattern.",
						"alt": "Staggered tides"
					},
					{
						"path": "protoWood02.jpg",
						"caption": "The first prototype, showing The Tōhoku tsunami in March 2011",
						"alt": "First prototype"
					},
					{
						"path": "both01.jpg",
						"caption": "Two early iterations side-by-side",
						"alt": "Two early iterations"
					}
				]
			},

			{
				"name": "tile designer",
				"id": "tiledesigner",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2010.06.01",
				"role": "exhibit designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" }
				],
				"tagline": "pattern designer and explainer",
				"brief": "Tessellation is perhaps the simplest geometric concept with the broadest range of creative expression. Part of the Exploratorium's "Geometry Playground" exhibition, it allows visitors to explore tessellations by creating them.

Visitors move a single line on a touchscreen; this line is rotated and translated into three different patterns. These tessellations all respond in real-time, generating a wide range of patterns both on-screen and projected onto a nearby wall. Visitors thereby both design custom patterns and decorate the exhibition with them.",
				"media": [
					{
						"path": "tileDesigner01.jpg",
						"width": "1024",
						"height": "768",
						"alt": "visitor drawing tesselations",
					},
					{
						"path": "tileDesigner02.jpg",
						"caption": "Tile Designer gives visitors the creative power to decorate the exhibition.",
						"alt": "Decorate the exhibition"
					},
					{
						"path": "lowerScreen01.jpg",
						"caption": "Simply dragging a line segment creates an infinite range of patterns.",
						"alt": "Simple interface"
					},
					{
						"path": "upperScreen01.jpg",
						"caption": "Three patterns are created simultaneously from the same line segment.",
						"alt": "Three patterns"
					},
					{
						"path": "sketches01.jpg",
						"caption": "Early sketches explore ideas about environmental applications of visitors' designs.",
						"alt": "Early sketches"
					}
				]
			},

			{
				"name": "transmote talks",
				"id": "transmotetalks",
				"featured": false,
				"thumbOffsetY": 0.15,
				"date": "2015.04.13",
				"role": "public speaker",
				"tag": [
				],
				"tagline": "sometimes i say things out loud.",
				"brief": "I love sharing ideas with people. While one-on-ones are my favorite, sharing ideas with hundreds of people, one at a time, doesn't feel very efficient. So, people created conferences. And sometimes I speak at them.",
				"media": [
					{
						"path": "http://player.vimeo.com/video/81940032",
						"poster": "andNotOr.jpg",
						"width": "800",
						"height": "450",
						"embedType": "vimeo",
						"caption": "&& ! || (And Not Or): Generalism in a world of divided labor"
					},
					{
						"path": "https://www.youtube.com/embed/_wGYzYyLZkk",
						"poster": "howWeUsedTo.jpg",
						"width": "800",
						"height": "450",
						"embedType": "youtube",
						"caption": "How We Used To. How We Will: innovation and iteration viewed through the lens of Flickr's history"
					},
					{
						"path": "http://player.vimeo.com/video/82394675",
						"poster": "instIntPanel.jpg",
						"width": "800",
						"height": "450",
						"embedType": "vimeo",
						"caption": "INST-INT Panel: Alexis Lloyd with Eric Socolofsky, Matt Cottam, and Michael Szivos"
					},
					{
						"path": "http://player.vimeo.com/video/69096802",
						"poster": "immediateGratification.jpg",
						"width": "800",
						"height": "450",
						"embedType": "vimeo",
						"caption": "Design for Immediate Gratification: Exhibit design at the Exploratorium"
					},
				]
			},

			{
				"name": "visualizing the bay area",
				"id": "vizthebay",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.04.20",
				"role": "exhibit designer/developer, technical lead",
				"tag": [
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "exhibit" },
					{ "id": "explo" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "maps" },
					{ "id": "visualization" }
				],
				"tagline": "illustrating Bay Area systems",
				"brief": "Many complex systems comprise San Francisco Bay Area, from weather and seismology to demographics and transit. These systems often lie invisible due to their physical and temporal scales.

Visitors can explore these systems via a series of interactive visualizations on display in the Exploratorium's Bay Observatory gallery. Visualizing the Bay Area serves as a platform for this content, with a topographical map carved into solid maple as a physical foundation for a digital framework supporting multiple layers of content.",
				"media": [
					{
						"path": "vizTheBay01.jpg",
						"caption": "Visitors explore Fog Browser during evening open hours.",
						"alt": "Fog Browser",
						"width": 1920,
						"height": 1080
					},
					{
						"path": "findingFaultLines.jpg",
						"caption": "Seismology and fault lines of the Bay Area, by James Hovell.",
						"alt": "Seismology and fault lines"
					},
					{
						"path": "fogBrowser.jpg",
						"caption": "Fog patterns over San Francisco Bay, by Eric Socolofsky.",
						"alt": "SF fog patterns"
					},
					{
						"path": "population_age18.jpg",
						"caption": "Demographics studies, by Eric Fischer.",
						"alt": "Demographics"
					},
					{
						"path": "salinity.jpg",
						"caption": "Salinity in the Bay, modeled by Rusty Holleman.",
						"alt": "Salinity in the Bay"
					},
					{
						"path": "http://player.vimeo.com/video/73115373",
						"poster": "fogBrowser01.jpg",
						"width": "750",
						"height": "600",
						"embedType": "vimeo",
						"caption": "Multiple datasets, including wind, water vapor density, and sunrise/set, combine to create an animation of fog patterns rolling through the Bay Area."
					},
					{
						"path": "http://player.vimeo.com/video/73115372",
						"poster": "fogBrowser02.jpg",
						"width": "960",
						"height": "540",
						"embedType": "vimeo",
						"caption": "Projected onto a topographical model, the flat image of the fog takes on depth."
					},
					{
						"path": "topoModel.jpg",
						"caption": "Carved from a solid block of maple, the model is designed to support multiple visualizations.",
						"alt": "Carved maple model"
					},
					{
						"path": "bayModel_topoTests.jpg",
						"caption": "Early fabrication tests.",
						"alt": "Early fabrication tests"
					}
				]
			},

			{
				"name": "wind.io",
				"id": "windio",
				"featured": true,
				"thumbOffsetY": 0,
				"date": "2013.07.29",
				"role": "front end developer",
				"tag": [
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "usergen" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			// ================================== //
			// More Projects
			// ================================== //

			{
				"name": "aperture",
				"id": "aperture",
				"featured": false,
				"thumbOffsetY": 0.1,
				"date": "2006.05.01",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "eyebeam" },
					{ "id": "featured" },
					{ "id": "installations" },
					{ "id": "processing" },
					{ "id": "spatial" }
				],
				"tagline": "a spatial synthesizer",
				"brief": "An experiment with malleable space, Aperture is a 'spatial synthesizer' developed during my fellowship in Eyebeam's Production Lab.
Multichannel sonic textures combine with generative visuals overhead to generate six different spatial qualities, exploring concepts from 'Contemplace' with greater focus.",
				"media": [
					{
						"path": "vast_satr.jpg",
						"width": "1600",
						"height": "1200",
						"caption": "'Saturated' state, transitioning to 'vast' state.",
						"alt": "Saturated to vast"
					},
					{
						"path": "http://player.vimeo.com/video/10335935",
						"poster": "satr_vast.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "'Saturated' state, transitioning to 'vast' state."
					},
					{
						"path": "vast_anon.jpg",
						"caption": "'Vast' state, transitioning to 'anonymous' state.",
						"alt": "Vast to anonymous"
					},
					{
						"path": "http://player.vimeo.com/video/10335989",
						"poster": "vast_anon.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo",
						"caption": "'Vast' state, transitioning to 'anonymous' state.",
					},
					{
						"path": "anon.jpg",
						"caption": "'Anonymous' state.",
						"alt": "Anonymous"
					},
					{
						"path": "pers02.jpg",
						"caption": "'Personal' state.",
						"alt": "Personal"
					},
					{
						"path": "spaceRender01.jpg",
						"caption": "Concept rendering produced during Aperture's development.",
						"alt": "Concept rendering"
					},
					{
						"path": "stateSketches_med.jpg",
						"caption": "Sketches exploring possibilities for audiovisual textures.",
						"alt": "Texture sketches"
					}
				]
			},

			{
				"name": "breaking ground",
				"id": "breakingground",
				"featured": false,
				"thumbOffsetY": -0.3,
				"date": "2002.01.01",
				"role": "architect, designer",
				"tag": [
					{ "id": "architecture" },
					{ "id": "featured" },
					{ "id": "spatial" },
					{ "id": "fabrication" }
				],
				"tagline": "my past life as an architect",
				"brief": "Breaking Ground is my print portfolio. Completed in 2001, the majority of the works contained within are architectural design projects, some professional and some academic.

\"As I make headway...I pick up tools necessary to construct. The more tools I acquire, the more varied the project grows. And this is exactly what makes the project worth undertaking.\"",
				"media": [
					{
						"path": "breakingground_cover.jpg",
						"width": "1024",
						"height": "768",
						"caption": "The physical object, submitted for acceptance into graduate school. Back when people printed things.",
						"alt": "Print portfolio"
					},
					{
						"path": "arthouse_lg.jpg",
						"caption": "Sited in a hybrid industrial-residential neighborhood on St. Louis' south side, this home is texturally and programmatically linked to the community in which it resides.
The living quarters for the painter and sculptor occupy the south end of the home, away from the street. The interior and exterior are clad in rough-sawn lumber, an allusion to traditional home building and to the lumberyard next door.
Two studios and a gallery provide a place to create and show work. The lumber cladding peels away to reveal board-form concrete walls at the studios, and polished concrete at the gallery.",
						"alt": "Work-live space for a sculptor and a painter"
					},
					{
						"path": "holmesplace_lg.jpg",
						"caption": "Occupying a highly visible space in a high-end retail center in downtown Chicago, this space is Holmes Place Health Clubs' introduction to the American populous.
The 566sf pre-sales space serves as a marketing, membership, and retail center for the international upscale health club chain.
Working with CannonDesign as project designer, architect, and manager, I placed emphasis on maximizing visual impact with a minimum of means. A trim budget and a limited amount of space demanded visual and spatial transparency with effective use of materials.",
						"alt": "Polished retail space on Michigan Avenue"
					},
					{
						"path": "cpscomp_lg.jpg",
						"caption": "A competition held by the Chicago Public School District called for a facility to accommodate a diverse body of 800 students; my partner and I expanded the program to accommodate the south-side community of Roseland.
By integrating existing buildings into the new, we sought to maintain and enhance neighborhood cohesion. About 15% of the student body will be physically disabled. as such, primary circulation is ramped through the 'vivarium', a semi-outdoor space that changes throughout the year.",
						"alt": "New school integrated into the existing neighborhood fabric"
					},
					{
						"path": "laumeier_lg.jpg",
						"caption": "Laumeier is an alternative venue for the display and creation of art. Site-specific and independent artwork is placed throughout the park, in a variety of natural settings.
Outdoor and indoor spaces at Laumeier are essentially different rooms in the same gallery -- exterior circulation flows directly into and through interior spaces. Buildings become events along existing and new paths that flow through the outdoor exhibits.",
						"alt": "Sculpture, painting, and ceramics studios embedded in the park"
					},
					{
						"path": "chezfleur_lg.jpg",
						"caption": "A friend wanted to build a potting shed in her backyard. I designed Chez Fleur Minihan to be buildable by someone with little construction knowledge and a tight budget. The accompanying drawings are somewhere between a standard set of construction docs and a how-to manual.
The material palette is simple in order to keep costs down: a lumber frame with concrete footings, standard hardware, and a corrugated fiberglass roof.
The structure itself, while providing shelter for supplies and tools, is kept very open to allow maximum sunlight and air circulation for the plants growing inside and around the shed.",
						"alt": "Potting shed for a friend"
					},
					{
						"path": "blueoncmu_lg.jpg",
						"caption": "I needed a desk, but was working with a modest neophyte architect's salary. Acknowledging my fairly transient lifestyle, I opted to design a modular desk that could be broken down for easier moving, and that could be assembled in a variety of configurations to fit a variety of spaces.
The structure consists of 9-15 concrete blocks, depending on the chosen configuration. The shelves and top are birch plywood with a custom blue stain and polyurethane finish. The cmu also allows for efficient cable management by routing wires through its open cells.",
						"alt": "Furniture design/build on a budget"
					},
					{
						"path": "redlamp_lg.jpg",
						"caption": "Layers of ruby red plexi, offset by washers and nuts, spaced along a single threaded rod that acts as both the main structure and a handle. The core is surrounded by translucent acetate sheeting to diffuse the light. This lamp can be installed as either a desk lamp or a hanging lantern.",
						"alt": "Experiment in color and light"
					},
				]
			},

			{
				"name": "brian alfred - works",
				"id": "brianalfred",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2005.06.01",
				"role": "moving image designer",
				"tag": [
					{ "id": "artwork" },
					{ "id": "clients" },
					{ "id": "eyebeam" },
					{ "id": "flash" },
					{ "id": "motiongfx" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "contemplace",
				"id": "contemplace",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2004.05.15",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "installations" },
					{ "id": "itp" },
					{ "id": "maxmsp" },
					{ "id": "processing" },
					{ "id": "spatial" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "eleminer",
				"id": "eleminer",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2015.09.01",
				"role": "game designer/developer",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "games" },
					{ "id": "itp" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "FLARManager",
				"id": "flarmanager",
				"featured": false,
				"thumbOffsetY": 0.15,
				"date": "2010.09.01",
				"role": "library author",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "usergen" }
				],
				"tagline": "taking the 'augh' out of 'augmented reality'",
				"brief": "FLARManager is a lightweight framework that makes it easier to build augmented reality applications for Flash. This open-source project began as a side project and grew into a full-featured product available for both open and commercial use.",
				"media": [
					{
						"path": "flarManager_v01.jpg",
						"width": "640",
						"height": "480",
						"caption": "Inspired by the GE Smart Grid campaign, I decided to put together a toolset to make creating applications with FLARToolkit easier.",
						"alt": "FLARManager"
					},
					{
						"path": "http://player.vimeo.com/video/11916909",
						"poster": "flarManagerFlareNFT.jpg",
						"width": "640",
						"height": "480",
						"embedType": "vimeo"
					},
					{
						"path": "flarManager_v07.jpg",
						"caption": "FLARManager also provides smarter marker recognition and tracking, similar to other fiducial-tracking engines like reacTIVision.",
						"alt": "Marker recognition and tracking"
					},
					{
						"path": "https://www.youtube.com/embed/r2IShy6uvyE",
						"poster": "flarManager_v06.jpg",
						"width": "640",
						"height": "480",
						"embedType": "youtube",
						"caption": "Unfortunately, I haven't had much time to use the tools that I've created.  However, producing examples and documentation have led to some fun side experiments."
					}
				]
			},

			{
				"name": "grove",
				"id": "grove",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2003.12.15",
				"role": "artist",
				"tag": [
					{ "id": "artwork" },
					{ "id": "fabrication" },
					{ "id": "installations" },
					{ "id": "itp" },
					{ "id": "spatial" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "josefina's adventure",
				"id": "josefina",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2006.08.04",
				"role": "game developer",
				"tag": [
					{ "id": "clients" },
					{ "id": "code" },
					{ "id": "educational" },
					{ "id": "flash" },
					{ "id": "games" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "marclay studies",
				"id": "marclay",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2005.01.05",
				"role": "moving image designer",
				"tag": [
					{ "id": "artwork" },
					{ "id": "clients" },
					{ "id": "eyebeam" },
					{ "id": "motiongfx" },
					{ "id": "code" },
					{ "id": "processing" },
					{ "id": "flash" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "anthony mccall - works",
				"id": "mccall",
				"featured": false,
				"thumbOffsetY": 0.2,
				"date": "2005.10.01",
				"role": "developer",
				"tag": [
					{ "id": "clients" },
					{ "id": "eyebeam" },
					{ "id": "installations" },
					{ "id": "spatial" },
					{ "id": "flash" },
					{ "id": "code" },
					{ "id": "artwork" }
				],
				"tagline": "software for solid light films",
				"brief": "I met Anthony McCall while working at Eyebeam, and we maintained a working relationship after the end of my fellowship.

Anthony's primary medium is \"solid light\", simple geometric forms projected into a room full of haze that transforms points into lines, and lines into shifting, ethereal planes.

These are examples of the commissioned work I've done for him. I also found this interview to offer particularly descriptive insight into his work, touching on the relation of film to sculpture in his pieces, and the unique qualities of the medium of \"solid light\".",
				"media": [
					{
						"path": "AM-Peer-02.jpg",
						"width": "600",
						"height": "896",
						"caption": "Anthony McCall.
\"Between You and I\" (2006), sixteenth minute.
Installation at Peer / The Round Chapel , London, 2006.
Photo by Hugo Glendenning, copyright Anthony McCall 2006.",
						"alt": "Between You and I, 16th minute"
					},
					{
						"path": "AM-Peer-05.jpg",
						"caption": "Anthony McCall.
\"Between You and I\" (2006), tenth minute.
Installation at Peer / The Round Chapel , London, 2006.
Photo by Hugo Glendenning, copyright Anthony McCall 2006.",
						"alt": "Between You and I, 10th minute"
					},
					{
						"path": "yaiVert01.jpg",
						"caption": "",
						"alt": "Screen capture of Between You and I"
					},
					{
						"path": "yaiVert02.jpg",
						"caption": "Screen captures of \"Between You and I\".
Simple geometric forms in a two-dimensional plane become much more when projected into the third dimension.",
						"alt": "Screen capture of Between You and I"
					},
					{
						"path": "yaiVert_ui.jpg",
						"caption": "",
						"alt": "Authoring software for Between You and I"
					},
					{
						"path": "yaiHoriz_ui.jpg",
						"caption": "I developed authoring tools for Anthony to create the horizontal and vertical versions of 'Between You and I'.",
						"alt": "Authoring software for Between You and I"
					},
					{
						"path": "hazer2.jpg",
						"caption": "",
						"alt": "Early style tests at Eyebeam"
					},
					{
						"path": "hazer6.jpg",
						"caption": "Early style tests at Eyebeam.
Photographs by Chihcheng Peng.",
						"alt": "Early style tests at Eyebeam"
					}
				]
			},

			{
				"name": "quickcomic",
				"id": "quickcomic",
				"featured": false,
				"thumbOffsetY": 0.05,
				"date": "2006.10.27",
				"role": "concept, interaction designer, developer",
				"tag": [
					{ "id": "webdev" },
					{ "id": "code" },
					{ "id": "usergen" },
					{ "id": "flash" },
					{ "id": "ixd" },
					{ "id": "social" },
					{ "id": "featured" }
				],
				"tagline": "comic authoring tool",
				"brief": "I designed and developed Quickcomic to allow people to very quickly serve up their opinions with a side order of humor.  My pals Alex Meyer and Ahmad Saeed helped me bring it to life, with their illustration/graphic design and server-side coding skills (respectively).",
				"media": [
					{
						"path": "http://www.quickcomic.com/remote/qcEmbed.swf",
						"poster": "quickcomic_title.jpg",
						"width": "720",
						"height": "570",
						"flashvars": "stripId=475",
						"embedType": "flash",
						"caption": "Authors are presented with an empty four-panel comic, which they populate with illustrated characters and text. Comics can be shared with others and embedded in other sites."
					}
				]
			},

			{
				"name": "rift",
				"id": "rift",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2009.10.04",
				"role": "co-artist",
				"tag": [
					{ "id": "artwork" },
					{ "id": "installations" },
					{ "id": "spatial" },
					{ "id": "code" },
					{ "id": "maxmsp" },
					{ "id": "featured" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "silly walks generator",
				"id": "swg",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2006.03.08",
				"role": "concept, interaction designer, developer",
				"tag": [
					{ "id": "ixd" },
					{ "id": "usergen" },
					{ "id": "clients" },
					{ "id": "flash" },
					{ "id": "featured" },
					{ "id": "social" },
					{ "id": "games" },
					{ "id": "code" }
				],
				"tagline": "roll your own Silly Walk",
				"brief": "A client approached me to build a promotional game for their release of a series of \"Monty Python's Personal Best\" DVDs. Rather than creating a traditional game, I thought it would be fun to enable users to create their own Silly Walks, based on the original Ministry of Silly Walks sketch.",
				"media": [
					{
						"path": "ss01_lumberjack.jpg",
						"width": "800",
						"height": "600",
						"caption": "Users can choose from four different Flying Circus backgrounds and four different characters, including the Inquisitor, Lumberjack, Knight, and Mime.",
						"alt": "Choose the Inquisitor, Lumberjack, Knight, or Mime"
					},
					{
						"path": "ss02_knight.jpg",
						"caption": "Drag limbs into position, then set a keyframe. Continue until your animation is complete. Tweak the Speed and Silliness sliders to fine-tune your animation.",
						"alt": "Keyframe your animation and tweak Speed and Silliness"
					},
					{
						"path": "ss03_inquisitor.jpg",
						"caption": "Completed Silly Walks can be sent to friends via unique URLs. This site was my first attempt at user-generated content, and in retrospect, it would be much better with a public gallery and voting system. My next project focusing on user authorship, Quickcomic, made much more of an effort to build community around the content.",
						"alt": "Send Silly Walks to your friends"
					}
				]
			},

			{
				"name": "terraformer",
				"id": "terraformer",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2003.05.15",
				"role": "game designer/developer",
				"tag": [
					{ "id": "games" },
					{ "id": "code" },
					{ "id": "flash" },
					{ "id": "itp" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "transmote v1.0",
				"id": "transmotev1",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2004.03.15",
				"role": "artist/coder",
				"tag": [
					{ "id": "code" },
					{ "id": "flash" },
					{ "id": "ixd" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "transmote v2.0",
				"id": "transmotev2",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2010.09.19",
				"role": "artist/coder",
				"tag": [
					{ "id": "code" },
					{ "id": "featured" },
					{ "id": "flash" },
					{ "id": "ixd" },
					{ "id": "webdev" }
				],
				"tagline": "",
				"brief": "",
				"media": [
				]
			},

			{
				"name": "vectogram",
				"id": "vectogram",
				"featured": false,
				"thumbOffsetY": 0,
				"date": "2004.08.01",
				"role": "artist/coder",
				"tag": [
					{ "id": "algorithmic" },
					{ "id": "artwork" },
					{ "id": "code" },
					{ "id": "flash" },
					{ "id": "fabrication" },
					{ "id": "games" },
					{ "id": "installations" },
					{ "id": "usergen" }
				],
				"tagline": "generative art as two-player game",
				"brief": "Vectogram is a two-player generative drawing tool sporting a sleek arcade cocktail cabinet. Players can choose to cooperate or compete for control of the electronic canvas.

Select from five different Vectoids, each with its own drawing style and vulnerability to other Vectoids. Deploy Vectoids thoughtfully in order to paint a picture pleasing to your eye!",
				"media": [
					{
						"path": "purpleWhite04.jpg",
						"width": "1196",
						"height": "600",
						"caption": "Each player chooses a color, and has at their disposal five different Vectoids.",
						"alt": "purple v. white"
					},
					{
						"path": "whiteBlue02.jpg",
						"alt": "white v. blue"
					},
					{
						"path": "greenWhite03.jpg",
						"alt": "green v. white"
					},
					{
						"path": "blueWhite02.jpg",
						"alt": "blue v. white"
					},
					{
						"path": "blueRed04.jpg",
						"alt": "blue v. red"
					},
					{
						"path": "redPurple01.jpg",
						"alt": "red v. purple"
					},
					{
						"path": "cin01.jpg",
						"caption": "The custom-built cocktail arcade cabinet.",
						"alt": "custom-built cocktail arcade cabinet"
					},
					{
						"path": "socolofsky_eric_2_adjusted.jpg",
						"caption": "Vectogram made its debut at this 3-day event at Compact-Impact, New York City.",
						"alt": "Compact-Impact Night, Vol. 3"
					},
					{
						"path": "cin03.jpg",
						"caption": "Best thing about the cocktail arcade cabinet?  Cocktails.",
						"alt": "cocktails + vectogram = <3"
					},
					{
						"path": "cin05.jpg",
						"alt": "fierce competition"
					},
					{
						"path": "const00.jpg",
						"caption": "The cabinet was fabricated in the cozy lil' shop at ITP.

I intended to use an old tube TV, but didn't realize how very low the resolution was on those things...so had to swap with an LCD flat-panel at the last minute.",
						"alt": "cabinet construction"
					},
					{
						"path": "const01.jpg",
						"caption": "Jin-Yo Mok 'helps' with documentation.",
						"alt": "jin-yo helps"
					}
				]
			}

		]
	}
}