Photo by Mark Thiessen - National Geographic

The completed packs of “The Explorers Game” cards, pictured at the 2011 Symposium. See the full article about the event from bizbash.com.

“The Explorers Game” logo, which started the development of the cards' style.

The card box design.

An example of one of the Explorers cards, featuring the likeness and information for Aparajita Datta.

Aside from the 101 cards featuring Explorers, the collection also has 23 activity cards, including this one.

The cards were color-coded to show the status of each Explorer: teal for Emerging Explorers, green for Explorers-in-Residence, and orange for National Geographic Fellows. The activity cards, which did not fall within these distinctions, had a different card-back to match the box and were each designed to be unique.

Ads created for the "Cause an Uproar" and Freshwater Missions (and sub-sites) for National Geographic.

Ads created for the Little Kitties for Big Cats campaign. Pay $5 to upload a photo of your cat to their site and your money will go to saving Big Cats in the wild.

Bookmark created for the Little Kitties for Big Cats campaign. The bookmarks were printed and distributed to vet offices and other businesses.

The Photoshop mock-up for the Bangkok Bistro home page. The development of the site was very experimental, but can be seen here.

The Photoshop mock-up for the Bangkok Bistro menu page. The development of the site was very experimental, but can be seen here.

The Photoshop mock-up for the Bangkok Bistro location page, with the contact portion brought up. The development of the site was very experimental, but can be seen here.

While designing the site for the Bangkok Bistro, I thought a lot about the interface of the site on different devices. This is the iPhone interface for the menu. It was intended for the user to be able to "flip" through the menu items, which are divided into the different categories in an accordion style. The drop-down menu on the top would be the primary navigation.

The interface for the iPad portrait size. Unlike the iPhone, the interface is still scroll-based.

HTML Ad for a fictional product.

HTML Ad advertising the "Warrior Dash." Unlike the previous ad, this one is for a real event and links to the organization's website. Why not sign up?

The Ads, pictured in the gMail interface.

Every year I try to practice my portrait skills by working on a self portrait. This is the result from 2009.

"Just Out of Reach." This piece was originally meant to be a t-shirt design. Unfortunately, the ratio makes web-view of this piece awkward. View it a little better in a new window.

A commission for a tattoo design based on a piece of graffiti.

"All I Know." A personal piece originally drawn in pencil. Color and effects added in Corel Painter and Photoshop.

Another pencil piece with some color and texture added in Photoshop.

A portrait of Woody Allen created to emulate the style of Philippe Guyenne, a.k.a. HPX or HardcorePixxX. View the source image on his site. Woody Allen was not used in this picture for any reason other than I liked the source picture.

Drawing meant to emulate the style of French illustration and comic artist "Bengal." His old site appears to no longer be functional, but you can view his work at www.conceptart.org/?artist=bengal.

"Blood Moon Monk." This drawing started as part of the Character of the Week Challenge of the same title on conceptart.org

"Take My..." My self-portrait for 2010.

"Not Scared."

A comic page from an older project. While this project may be dead, I hope to return to comic work in the future.

An in-progess commission.

A music player created to take in XML, parse the information, and then manipulate sound files with a number of controls.

                        
///////////////////////////////////////  Import Files
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import flash.net.URLRequest;
import flash.display.Loader;
import flash.display.Sprite;
import flash.utils.ByteArray;
import flash.media.Sound;
import flash.media.SoundChannel;

//////////////////////////////////////////VARIABLES and default values

//variables for management of drop down
var dropDown:Boolean = false;  			// true = drop down is open
var where:String = "closed";   			// identifies display in the drop down (eye, list, or closed)
var bottomPosition:Number = player.bottomAndButton.y;	//store original value for easy return to position

var animDropDown:Tween;
var animDropClose:Tween;
var screenLarger:Tween;
var screenSmaller:Tween;
player.screen.scaleY = .25;


//Scroll Bar Controls and Limiters
player.screen.listScrollBar.visible = false;
player.volumeBox.volSlider.x = 19;

var scrollLimit:Rectangle = new Rectangle();
scrollLimit.top = 12;
scrollLimit.left = 0;
scrollLimit.right = 0;
scrollLimit.bottom = 12;

var scrollVolLimit:Rectangle = new Rectangle();
scrollVolLimit.top = 0;
scrollVolLimit.left = 0;
scrollVolLimit.right = 38;
scrollVolLimit.bottom = 0;

var scrollSongLimit:Rectangle = new Rectangle();
scrollSongLimit.top = 0;
scrollSongLimit.left = 0;
scrollSongLimit.right = 300;
scrollSongLimit.bottom = 0;

player.loading.visible= false;
var loadActive:Boolean = false;


//Variables for song management
var songList:Array = new Array();
var numberOfSongs:int = 0;
var currentSong:int = 0;
var songHere:Number = 0;   //song progress in milliseconds


//Song and Channel variables
var song:Sound = new Sound();
var channel:SoundChannel = new SoundChannel();
var musicState:String = "off";
var volTransform:SoundTransform = new SoundTransform();
volTransform.volume = .5;


//Visualizer
var waveform:ByteArray = new ByteArray();
player.screen.vizSquare.visible = false;


//xml and info management
var songListXML:XML = new XML();
var songFile:URLRequest = new URLRequest("playlist.xml");
var xmlLoader:URLLoader = new URLLoader(songFile);

xmlLoader.addEventListener(Event.COMPLETE, enable);  /// <-- START!



///////////////////////////////////////////////////////Start and enabling buttons
function enable(theEvent:Event){
	songListXML = XML(theEvent.target.data);
	numberOfSongs = songListXML.Song.length() -1;

	enableButtons();
	loadSong();
	}

function enableButtons(){
	player.buttonEye.buttonMode = true;
	player.buttonList.buttonMode = true;
	player.bottomAndButton.buttonClose.buttonMode = true;
	player.buttonPlay.buttonMode = true;
	player.buttons.buttonPause.buttonMode = true;
	player.buttons.buttonBack.buttonMode = true;
	player.buttons.buttonForward.buttonMode = true;
	player.volumeBox.volSlider.buttonMode = true;
	player.songSlider.buttonSongSlider.buttonMode = true;

	player.buttonEye.addEventListener(MouseEvent.CLICK, onEyeClick);
	player.buttonList.addEventListener(MouseEvent.CLICK, onListClick);
	player.bottomAndButton.buttonClose.addEventListener(MouseEvent.CLICK, onCloseClick);
	player.buttonPlay.addEventListener(MouseEvent.CLICK, onPlayClick);
	player.buttons.buttonPause.addEventListener(MouseEvent.CLICK, onPauseClick);
	player.buttons.buttonBack.addEventListener(MouseEvent.CLICK, onBackClick);
	player.buttons.buttonForward.addEventListener(MouseEvent.CLICK, onForwardClick);
	player.volumeBox.volSlider.addEventListener(MouseEvent.MOUSE_DOWN, onVolDown);
	player.songSlider.buttonSongSlider.addEventListener(MouseEvent.MOUSE_DOWN, clickSongSlider);

	player.buttonEye.stop();
	player.buttonList.stop();
	player.bottomAndButton.buttonClose.stop();
	player.buttonPlay.stop();
	player.buttons.buttonPause.stop();
	player.buttons.buttonBack.stop();
	player.buttons.buttonForward.stop();
	}

function disableButtons(){
	player.buttonEye.removeEventListener(MouseEvent.CLICK, onEyeClick);
	player.buttonList.removeEventListener(MouseEvent.CLICK, onListClick);
	player.bottomAndButton.buttonClose.removeEventListener(MouseEvent.CLICK, onCloseClick);
	player.buttonPlay.removeEventListener(MouseEvent.CLICK, onPlayClick);
	player.buttons.buttonPause.removeEventListener(MouseEvent.CLICK, onPauseClick);
	player.buttons.buttonBack.removeEventListener(MouseEvent.CLICK, onBackClick);
	player.buttons.buttonForward.removeEventListener(MouseEvent.CLICK, onForwardClick);
	player.volumeBox.volSlider.removeEventListener(MouseEvent.MOUSE_DOWN, onVolDown);
	player.songSlider.buttonSongSlider.removeEventListener(MouseEvent.MOUSE_DOWN, clickSongSlider);
	}



////////////////////////////////////////////////////////Drop Down Functions
///////// Buttons
function onEyeClick(theEvent:MouseEvent){
	if(where != "eye"){
		if(dropDown == false){
			where = "closedToEye";
			}
		else {
			where = "listToEye";
			}
		openDropDown();
		where = "eye";
		}
	}

function onListClick(theEvent:MouseEvent){
	if(where != "list"){
		if(dropDown == false){
			where = "closedToList";
			}
		else {
			where = "eyeToList";
			}
		openDropDown();
		}
	}

function onCloseClick(theEvent:MouseEvent){
	if(where != "closed"){
		if(where == "eye"){
			where = "eyeToClosed";
			}
		else {
			where = "listToClosed";
			}
		closeDropDown();
		where = "closed";
		}
	}

//////// Open and Closing
function openDropDown(){
	disableButtons();
	if (dropDown == true){
		emptyDropDown();
		dropDown = false;
		closeDropDown();
		}
	else {
		animDropDown = new Tween(player.bottomAndButton, "y", Regular.easeInOut, bottomPosition, 300, 1, true);
		screenLarger = new Tween(player.screen, "scaleY", Regular.easeInOut, .25, 1, 1, true);
		dropDown = true;
		animDropDown.addEventListener(TweenEvent.MOTION_FINISH, dropDownComplete);
		}
	}

function dropDownComplete(theEvent:TweenEvent){
	if((where == "closedToList")||(where == "eyeToList")){
		displaySongList();
		setSongData();
		}
	else if(where == "eye"){
		displayViz();
		}
		enableButtons();
	}

function closeDropDown(){
	disableButtons();
	if( dropDown == false){
		screenSmaller = new Tween(player.screen, "scaleY", Regular.easeInOut, 1, .25, 1, true);
		animDropClose = new Tween(player.bottomAndButton, "y", Regular.easeInOut, 300, bottomPosition, 1, true);
		animDropClose.addEventListener(TweenEvent.MOTION_FINISH, redirectToOpen);
		}
	else{
		emptyDropDown();
		screenSmaller = new Tween(player.screen, "scaleY", Regular.easeInOut, 1, .25, 1, true);
		animDropClose = new Tween(player.bottomAndButton, "y", Regular.easeInOut, 300, bottomPosition, 1, true);
		dropDown = false;
		animDropClose.addEventListener(TweenEvent.MOTION_FINISH, dropCloseComplete);
		}
	}

function dropCloseComplete(theEvent:TweenEvent){
	enableButtons();
	}

function redirectToOpen(theEvent:TweenEvent){
	openDropDown();
	}

function emptyDropDown(){
	if((where == "listToClosed")||(where == "listToEye")){
		for(var j:int = 0; j<=numberOfSongs; j++){
			player.screen.maskSquare.removeChild(songList[j]);
			}
		player.screen.listScrollBar.visible = false;
		}
	else if(where == "eyeToClosed" || where == "eyeToList"){
		player.screen.vizSquare.visible = false;
		}
	}


////////// List
function displaySongList(){
	var listItemY:Number = 45;
	where = "list";

	if(songList[0] == null){
	for(var i:int = 0; i<=numberOfSongs; i++){
		var item:songListItem = new songListItem();
		songList[i] = item;
		songList[i].name = i.toString();
		songList[i].buttonListPlay.buttonMode = true;
		songList[i].buttonListPlay.stop();
		songList[i].buttonListPlay.addEventListener(MouseEvent.CLICK, onListPlayClick);
		}
	}

	for(var k:int = 0; k<=numberOfSongs; k++){
		songList[k].listSongBox.listSongName.text = songListXML.Song[k].Title;
		songList[k].listArtistBox.listArtistName.text = songListXML.Song[k].Artist;
		player.screen.maskSquare.addChild(songList[k]);

		songList[k].buttonListPlaySelected.visible = false;

		songList[k].y = listItemY;
		listItemY += 20;
	}

	player.screen.listScrollBar.listScrollBarSlider.scaleY = 6/(numberOfSongs + 1);
	if((6/(numberOfSongs + 1)) >= 1){
		player.screen.listScrollBar.visible = false;
		}
	else{
		player.screen.listScrollBar.visible = true;
		player.screen.listScrollBar.listScrollBarSlider.buttonMode = true;
		scrollLimit.bottom = 12 + ( 112 - player.screen.listScrollBar.listScrollBarSlider.height);
		}

	player.screen.listScrollBar.listScrollBarSlider.addEventListener(MouseEvent.MOUSE_DOWN, clickListScroll);
	}

function clickListScroll(theEvent:MouseEvent){
	addEventListener(MouseEvent.MOUSE_MOVE, dragListScroll);
	addEventListener(MouseEvent.MOUSE_UP, unclickListScroll);
	player.screen.listScrollBar.listScrollBarSlider.startDrag(false, scrollLimit);
	}

function dragListScroll(theEvent:MouseEvent){
	player.screen.maskSquare.y = 0 - (((player.screen.listScrollBar.listScrollBarSlider.y - scrollLimit.top)/59) * (45+(numberOfSongs+1)*8.1) )
	}

function unclickListScroll(theEvent:MouseEvent){
	removeEventListener(MouseEvent.MOUSE_MOVE, dragListScroll);
	removeEventListener(MouseEvent.MOUSE_UP, unclickListScroll);
	player.screen.listScrollBar.listScrollBarSlider.stopDrag();
	}

////////////// Visualizer aka "eye"
function displayViz(){
	player.screen.vizSquare.visible = true;
	}

function startWaveViz(){
	SoundMixer.computeSpectrum(waveform, false, 2);
	player.screen.vizSquare.graphics.clear();
	player.screen.vizSquare.graphics.lineStyle(0, 0xFFFFFF);
	drawChannelWaves();
	player.screen.vizSquare.graphics.lineStyle(0, 0xBFFF18);
	drawChannelWaves();
	}

function drawChannelWaves(){
	var SAMPLES:Number = 256;
	var XStep:Number = player.screen.vizSquare.width / SAMPLES;

	player.screen.vizSquare.graphics.moveTo(0, player.screen.vizSquare.height/2);

	for(var i:int = 0, X:Number = 0; i < SAMPLES; i++, X+=XStep){
		var amplitude:Number = waveform.readFloat();
		var Y:Number = (player.screen.vizSquare.height / 2) + (amplitude * player.screen.vizSquare.height/2);
		player.screen.vizSquare.graphics.lineTo(X, Y);
		}
	}


///////////////// Loading Songs
function loadSong(){
	removeEventListener(Event.ENTER_FRAME, songProgress);
	player.songSlider.buttonSongSlider.x = 0;

	if(loadActive == true){
		song.removeEventListener(ProgressEvent.PROGRESS, showProgress);
		song.removeEventListener(Event.COMPLETE, onSongLoad);
		player.loading.visible= false;
		player.loading.loadingMask.scaleX = 0;
		}

	song = new Sound();
	songName.text = songListXML.Song[currentSong].Title;
	artistName.text = songListXML.Song[currentSong].Artist;
	albumName.text = songListXML.Song[currentSong].Album;


	if(where == "list"){
		setSongData();
		}

	var soundFile:URLRequest = new URLRequest(songListXML.Song[currentSong].@songURL);
	song.load(soundFile);
	loadActive = true;
	song.addEventListener(ProgressEvent.PROGRESS, showProgress);
	song.addEventListener(Event.COMPLETE, onSongLoad);
}

function onSongLoad(theEvent:Event){
	formatTime();
	player.loading.visible= false;
	if(musicState == "playFromList" || musicState == "playFromChange"){
		playMusic();
		musicState = "on"
		loadActive = false;
		}
	}


////////////  Music control buttons
function onPlayClick(theEvent:MouseEvent){
	if(musicState != "on"){
		playMusic();
		}
	}

function onListPlayClick(theEvent:MouseEvent){     /////// Play button next to song in list
	stopSong();
	clearSongData();
	currentSong = Number(theEvent.target.parent.name);

	musicState = "playFromList";
	loadSong();
	}

function onPauseClick(theEvent:MouseEvent){
	pauseMusic();
	}

function onBackClick(theEvent:MouseEvent){
	clearSongData();
	if (currentSong == 0){
		currentSong = numberOfSongs;
		}
	else{
		currentSong--;
		}

	if (musicState == "on"){
		stopSong();
		}
	musicState = "playFromChange"
	loadSong();
	}

function onForwardClick(theEvent:MouseEvent){
	nextSong();
	}

function onVolDown(theEvent:MouseEvent){
	addEventListener(MouseEvent.MOUSE_MOVE, dragVolSlider);
	addEventListener(MouseEvent.MOUSE_UP, unclickVolSlider);
	player.volumeBox.volSlider.startDrag(false, scrollVolLimit);
	}

function unclickVolSlider(theEvent:MouseEvent){
	removeEventListener(MouseEvent.MOUSE_MOVE, dragVolSlider);
	removeEventListener(MouseEvent.MOUSE_UP, unclickVolSlider);
	player.volumeBox.volSlider.stopDrag();
	}

function dragVolSlider(theEvent:MouseEvent){
	volTransform.volume = (player.volumeBox.volSlider.x/scrollVolLimit.right)
	channel.soundTransform = volTransform;
	}

function clickSongSlider(theEvent:MouseEvent){
	pauseMusic();
	addEventListener(MouseEvent.MOUSE_MOVE, dragSongSlider);
	addEventListener(MouseEvent.MOUSE_UP, unclickSongSlider);
	player.songSlider.buttonSongSlider.startDrag(false, scrollSongLimit);
	}

function unclickSongSlider(theEvent:MouseEvent){
	removeEventListener(MouseEvent.MOUSE_MOVE, dragSongSlider);
	removeEventListener(MouseEvent.MOUSE_UP, unclickSongSlider);
	player.songSlider.buttonSongSlider.stopDrag();

	if (musicState == "pause"){
		playMusic();
		}
	formatTime();
	}

function dragSongSlider(theEvent:MouseEvent){
	songHere = song.length * (player.songSlider.buttonSongSlider.x/300);
	}

function playMusic(){
	channel = song.play(songHere);
	channel.soundTransform = volTransform;
	musicState = "on";
	channel.addEventListener(Event.SOUND_COMPLETE, songFinished);
	addEventListener(Event.ENTER_FRAME, songProgress);
	}

function pauseMusic(){
	if(musicState == "on"){
		songHere = channel.position;
		channel.stop();
		removeEventListener(Event.ENTER_FRAME, songProgress);
		musicState = "pause";
		}
	else{
		musicState = "off";
		}
	}

//////////////// Back-end song management
function stopSong(){
	channel.stop();
	musicState = "off";
	}

function clearSongData(){
	songHere = 0;
	if(where == "list"){
		songList[currentSong].buttonListPlaySelected.visible = false;
		songList[currentSong].buttonListPlay.visible = true;
		}
	}

function setSongData(){
	songList[currentSong].buttonListPlaySelected.visible = true;
	songList[currentSong].buttonListPlay.visible = false;
	}

function songProgress(theEvent:Event){
	player.songSlider.buttonSongSlider.x = 300 * channel.position/song.length;
	songHere = channel.position;
	formatTime();
	if(where == "eye"){
		startWaveViz();
		}
	}

function showProgress(theEvent:ProgressEvent){
	player.loading.visible= true;
	player.loading.loadingMask.scaleX = (theEvent.bytesLoaded/theEvent.bytesTotal);
	}

function songFinished(theEvent:Event){
	nextSong();
	}

function nextSong(){
	clearSongData();
	if (currentSong == numberOfSongs){
		currentSong = 0;
		}
	else{
		currentSong++;
		}

	if (musicState == "on"){
		stopSong();
		}
	musicState = "playFromChange"
	loadSong();
	}

function formatTime(){
	var minutesNow:Number = 0;
	var secondsNow:Number = 0;
	var minutesTotal:Number = 0;
	var secondsTotal:Number = 0;
	var milli:Number = 0;		//number of milliseconds
	var secondsNowString:String = "00";
	var secondsTotalString:String = "00";

	milli = songHere;
	minutesNow = milli/60000;
	minutesNow = Math.floor(minutesNow);
	secondsNow = (milli/1000) - (minutesNow*60);
	secondsNow = Math.floor(secondsNow);

	milli = song.length;
	minutesTotal = milli/60000;
	minutesTotal = Math.floor(minutesTotal);
	secondsTotal = (milli/1000) - (minutesTotal*60);
	secondsTotal = Math.floor(secondsTotal);

	if (secondsNow < 10){
		secondsNowString = "0" + secondsNow.toString();
		}
	else{
		secondsNowString = secondsNow.toString();
		}

	if (secondsTotal < 10){
		secondsTotalString = "0" + secondsTotal.toString();
		}
	else{
		secondsTotalString = secondsTotal.toString();
		}

	time.text = minutesNow + ":" + secondsNowString + "/" + minutesTotal + ":" + secondsTotalString;
	}                    

View the code from the project.

A screen-shot of the live site. Take a look the real thing.

My original mock-up of the site. Unfortunately, I was unable to fully realize this view technically. Take a look at the real thing.

                        <!DOCTYPE html>
<html>
<head>
    <title>Search Ladder</title>
    <link rel="stylesheet" type="text/css" href="ladder.css" />
</head>
<body>
    <div id="wrapper">
        <hgroup>
            <h2 class="green">Search Ladder</h2>
            <h3>What words have climbed the ladder today?</h3>
        </hgroup>

        <h1 class="green"></h1>

        <ol id="masonry">

        </ol>  <!-- END #MASONRY  -->
    </div> <!-- END WRAPPER   -->


<!--   ....................................  Javascript ........................-->

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.masonry.js"></script>
<script type="text/javascript">


        // ask getWords.php to get the words from google trends
    function getXML(){
        request = new XMLHttpRequest();
        request.open("POST" , "getWords.php" , true);
        request.onreadystatechange = onRequestReturn;
        request.send();
    };

        // Get the XML back from PHP
    function onRequestReturn(){
        if(request.readyState == 4){

            xmlText = request.responseXML.documentElement;

            if(xmlText){
                //if you get something back, continue, if not, error
                getStrings();
            }else{
                $("h1").append("An error has occurred.");
            };
        };
	};


        // Pick apart the XML and store each entry in the array strings
            // Also, store the change in placement on the list (info in XML) in placementChange
    function getStrings(){
        strings = new Array();
        placementChange = new Array();

        firstWord = xmlText.getElementsByTagName("a")[0].firstChild.nodeValue;

        for(var k=0; k<19; k++){
            placementChange[k] = xmlText.getElementsByTagName("span")[k+1].getAttribute("class");
            var spaceIndex = placementChange[k].indexOf(" ");
            placementChange[k] = placementChange[k].substr(spaceIndex+1);

            strings[k] = xmlText.getElementsByTagName("a")[k+1].firstChild.nodeValue;
        };

        cleanPlacementChange();
        sizeStringsInOrder();
    };


        // Before the strings are randomized, size them in order.
            // This makes the top search bigger and last on the list smaller
            // Puts strings[] in a span which holds the font-size style
            // and then stores that in sizedStrings[]
    function sizeStringsInOrder(){
        sizedStrings = new Array();
        var fontSize = 100;

         for(var j=0 ;j<19 ; j++){
            sizedStrings[j] = "<span style='font-size:" + fontSize + "px' data-placement='" + placementChange[j] + "'>" + strings[j] + "</span>";
            fontSize -= 4;
        };

        randomize();

    };


        // Randomize the strings
            // make new array stringsRand[] and use jQuery to sort the strings randomly.
    function randomize(){
        stringsRand = new Array();
        stringsRand = sizedStrings;

		stringsRand.sort(function() { return 0.5 - Math.random() });
        fillHTML();
    };


        // Take the strings that we've sized and randomized and now put them in the HTML
    function fillHTML(){
            // Prepare firstWord to be inserted in a url to a google search for that word
        var linkTextHeader = firstWord.replace(' ' , '+');

            // Put firstWord in the h1, but wrapped in a link to the google search
        $("h1").html("<span><a target='blank' href='http://www.google.com/search?q=" + linkTextHeader + "'>" + firstWord + "</a></span>");

            // for every string, wrap it in html and then insert that into the ordered list
        for (var i = 0; i<19 ; i++){
                // Prepare each string to be inserted into a url to a google search for the string
            var linkText = $(stringsRand[i]).html().replace(/ /g , '+');
                // Wrap string in an <li> a <a> and finally a <p> tag (to hold text color class)
            var holdString = "<li class='brick'><a target='blank' href='http://www.google.com/search?q=" + linkText + "'><p ";

                // alternate text color
            if( i%2 == 0){
                holdString += "class='teal'>";
            }else{
                holdString += "class='green'>";
            };

                // Finish html wrapping and also ass the p for the change in placement
             var indexofPlacementStart= stringsRand[i].indexOf("data-placement") + 16;
             var showPlacementChange = stringsRand[i].substr(indexofPlacementStart);
             var indexOfPlacementStop = showPlacementChange.indexOf("'");
             showPlacementChange = showPlacementChange.substr(0, indexOfPlacementStop);

            holdString += stringsRand[i] + "<p class='change'>" + showPlacementChange + "</p></p></a></li>";

                // Add to the ol in the html!
            $("#masonry").append(holdString);
        };

        changeSize();
    };


        // Adjust the sizes of the boxes to the text and vice versa
    function changeSize(){
        var headerSize = 140;

            // For search terms that are long and have multiple words, make the text wrap to another line ~Sometimes~
        $(".brick a p span:contains(' ')").each(function(){
            if((Math.random() > .5) || ($(this).innerWidth() > 400)){
                $(this).closest("li").css({'width' : ($(this).innerWidth()/2)});
            };
            //alert($(this).width());
            $(this).closest("li").css({'width': $(this).width()});
            //alert($(this).closest("li").width());
        });

            // Readjust size of the box around hte text to fit the text
        $(".brick").each(function(){
            $(this).css({'width': $(this).children("a").children("p").children("span").innerWidth() });
        });


            // Make the first result (in h1) fit the the width of the wrapper, unless it's a really short word
        var headerChange = headerSize;

                // If the text wraps to another line, then keep making the text smaller until it fits on one line
        if($("h1").height() < $("h1 span").height()){
            while($("h1").height() < $("h1 span").height()){
                headerChange = headerChange - 1;
                $("h1").css({"font-size" : headerChange});
            };
                // If one word is too log, then keep making it smaller until it fits the wrapper
        }else if($("h1").width() < $("h1 span").width()){
            while($("h1").innerWidth() < $("h1 span").width()){
                headerChange = headerChange - 1;
                $("h1").css({"font-size" : headerChange});
            };
                // If the search term is too small to fit the width, keep making it bigger until it is.
        }else{
            while(($("h1 span").width() < $("h1").innerWidth()-4) && ($("h1 span").height() < $("h1").height())){
                headerChange = headerChange + 1;
                $("h1").css({"font-size" : headerChange});
            };
        };

        addMasonry();
    };

        // Add masonry to the bricks so that they follow the masonry pattern
    function addMasonry(){
        $("#masonry").masonry({
            columnWidth: 1,
            itemSelector: ".brick"
        });
    };


        // Make the placement change look prettier (replace "up" with "+" etc)
    function cleanPlacementChange(){
        for(var h=0; h<19; h++){
            placementChange[h] = placementChange[h].replace("down", "-");
            placementChange[h] = placementChange[h].replace("up", "+");
            placementChange[h] = placementChange[h].replace("equal", "=");
        };
    };


    $(document).ready(function(){
            // start dominoes
        getXML();
    });


</script>

</body>
</html>
                    

View the code from the project.

A screen-shot of the finished product. Take a look.

                        <!Doctype html>

        <head>
            <style type="text/css">
                .strikeout{
                    text-decoration: line-through;
                }

                #todo{
                    width: 400px;
                    background-color: #cccccc;
                    margin: 30px auto 30px auto;
                    padding: 30px;
                }
                ul{
                    margin-bottom: 40px;
                    list-style-type: none;
                }
                li{
                    position: relative;
                }
                li p{
                    margin: 0;
                    display: inline;
                    line-height: 130%;
                }
                .completeButton{
                    position: absolute;
                    left: -30px;
                }
                .priorityButton{
                    float: right;
                }
                li>label{
                    float: right;
                }

            </style>
        </head>

<body>

<div id="content">


            <div id="todo">
                <h1>To Do List</h1>
                <form>
		            <ul>
                        <li>
                            <p>Get an Internship</p>
                        </li>
                        <li>
                            <p>Graduate School</p>
                        </li>
                        <li>
                            <p>Get a Job</p>
                        </li>
                        <li>
                            <p>Make Money</p>
                        </li>
                        <li>
                            <p>Live Happily Ever After</p>
                        </li>
		            </ul>

		            <label>Add a to-do:</label>
		            <input type="text" name="textToAdd" value="" />
                    <input type="button" name="addButton" value="Add Item" />
	            </form>

            </div>
        </div>




<!--   ........................................JavaScript ......................................................... -->

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

<script type="text/javascript">

	function strikeout(){
		// "this" is a p tag in an li
		if(!($(this).hasClass("editable"))){
			$(this).addClass("strikeout");
		};
	};

	function removeStrike(){
		// "this" is a p tag in an li
		$(this).removeClass("strikeout");
	};

	function addItem(){
		// "this" does not exist here because this edits using heirarchy
        if(($("input[name = 'textToAdd']").attr("value") != "")){
			var holdText = $("input[name = 'textToAdd']").attr("value");
            var itemIDforAttr = 0;

            setTimeout(function(){
                $("#todo ul").append("<li><p>" + holdText +"</p><input class='completeButton' type='button' name='complete' value='X' /><input class='priorityButton' type='checkbox' name='priority' value='" + itemIDforAttr + "' /><label>high priority</label></li>");
			    $("#todo ul").children().last().children("p").hide().animate({"background-color": "yellow"}, 10).fadeIn().delay(2000).animate({"background-color": "#cccccc"}, 1000);

			    $("input[name='textToAdd']").attr("value", "");
            }, 100);
		};
	};


    function addList(){
		// "this" does not exist here because this edits using heirarchy
        if(($("input[name = 'listTextToAdd']").attr("value") != "")){
			var holdText = $("input[name = 'listTextToAdd']").attr("value");
            var listIDforAttr = 0;

            $.post("includes/functional/post.php", { send: holdText, "func": "addList", "send2": "userID" }, function(data){
                    listIDforAttr = data;
            });

            setTimeout(function(){
                $("#todo form").last().after(
                        "<h1>" + holdText + "</h1>" +
                        "<form>" +
		                    "<ul data-listNum='" + listIDforAttr + "'></ul>" +

		                    "<label>Add a to-do:</label>" +
		                    "<input type='text' name='textToAdd" + listIDforAttr + "' value='' />" +
                            "<input type='button' name='addButton" + listIDforAttr + "' value='Add Item' />" +
	                    "</form>"
                    );
			$("#todo form").last().hide().fadeIn(1000);
            $("#todo h1").last().hide().fadeIn(1000);

			$("input[name='listTextToAdd']").attr("value", "");

            $("#todo ul").sortable({containment: 'parent'}, {tolerance: 'pointer'});
                    $("#todo ul").bind("sortstop",  function (event, ui){
                        var listID = ui.item.closest("ul").attr("data-listNum");
                        var itemID = ui.item.closest("li").attr("data-id");
                        var listNumberAfter = ui.item.index();
                        listNumberAfter++;

                        $.post("includes/functional/post.php", { send: listNumberAfter, send2: listID, send3: itemID , "func": "changePriority" });
                   });


            }, 100);


		};
	};


	function removeItem(){
		// "this" is the x button, input[name="completeButton"]
		$(this).parent().fadeOut("slow", function () {
            $(this).remove();
		});
	};

	function editItem(){
		// "this" is the p tag, which is being filled with an input tag
		if(!($(this).hasClass("editable"))){
			var holdText = $(this).html();
			$(this).removeClass("strikeout");
			$(this).html("<input type='text' name='edit' value='" + holdText + "' />");
			$(this).addClass("editable");
            $(":focus").focusout();
            $(this).children().focus();
  		};
	};


	function sortItem(){
			// "this" is the input:checkbox button
        var listID = $(this).closest("ul").attr("data-listNum");
        var itemID = $(this).closest("li").attr("data-id");

        if(($(this).is("input:checked")) && ($(this).closest("li").not(":first-child").length) ){
                $(this).parent().fadeOut("slow", function (){
                    // "this" is the li, which is the parent on the input button
                    $(this).insertBefore($(this).closest("ul").children("li").first());
                    $(this).fadeIn("slow");
                });
			} else if (!($(this).closest("li").is(":first-child"))){
				if(( $(this).closest("li").index() == ($(this).closest("ul").children("li").has("input:checked").last().index() + 1) ) ){

                } else{
                    $(this).closest("li").fadeOut("slow", function (){
                        // "this" is the li, which is the parent on the input button
                        $(this).closest("ul").children("li").has("input:checked").last().after($(this).closest("li"));
                        $(this).closest("li").fadeIn();
                    });
                };

			} else if((!($(this).is("input:checked"))) && ($(this).closest("li").is(":first-child")) && ($(this).closest("ul").children("li").has("input:checked"))){
				if(( $(this).closest("li").index() == ($(this).closest("ul").children("li").has("input:checked").last().index() + 1) ) ){

                } else{
                    $(this).closest("li").fadeOut("slow", function (){
                        // "this" is the li, which is the parent on the input button
                        $(this).closest("ul").children("li").has("input:checked").last().after($(this).closest("li"));
                        $(this).closest("li").fadeIn();
                    });
                };
			} else{
        };

	};



	/////////////////////////////////////////////////////////End of Functions


	//Add complete ("X") buttons
	$("#todo li").append("<input class='completeButton' type='button' name='complete' value='X' />");


	//Add checkboxes
	for(var i=0; i < $("#todo li").length ; i++){
		$("#todo li:eq(" + i + ")").append("<input class='priorityButton' type='checkbox' name='priority' value='" + i + "' /><label>high priority</					label>");
	};

    $("input:checkbox[data-checked='yes']").attr("checked", "checked");

	//Handle Strikeouts
	$("#todo ul li p").live('click', function (){
		$(this).addClass("strikeout");
		$(this).toggle(removeStrike, strikeout);
	});


	//Add items to the list using the text field at the bottom
	$("input[name^='addButton']").live("click", function(event){
        var listNumber = $(this).closest("ul").attr("data-listNum");
        addItem(listNumber);
    });
	$("input[name^='textToAdd']").focus().live("keypress", function(event) {
        var listNumber = $(this).siblings("ul").attr("data-listNum");
  	  if(event.keyCode==13){
  		addItem(listNumber);
  		};
  	});


    $("input[name='addListButton']").click(addList);
	$("input[name='listTextToAdd']").focus().keypress( function(event) {
        if(event.keyCode==13){
  		addList();
  		};
  	});


  	// Remove items with complete ("X") button
  	$("input[name='complete']").live("click", removeItem);

  	// Enable sorting when checkboxes are clicked
  	$("input:checkbox").live("click", sortItem);

	// Make items editable when doubleclicked
  	$("#todo li p").live("dblclick", editItem);

  	//Make list sortable with drag and drop
  	$("#todo ul").sortable({containment: 'parent'}, {tolerance: 'pointer'});
    $("#todo ul").bind("sortstop",  function (event, ui){
        var listID = ui.item.closest("ul").attr("data-listNum");
        var itemID = ui.item.closest("li").attr("data-id");
        var listNumberAfter = ui.item.index();
        listNumberAfter++;
    });

  	//Disable the form from submitting when you hit enter
  	$("#todo form").live("submit", function (){
  		return false;
  	});

    $("p>input").focus().live("keypress", function(event) {
	        // "this" is the input tag in the p tag
		    	if(event.keyCode==13){
                     var holdText = $(this).attr("value");
		            $(this).parent().removeClass("editable");
		            $(this).parent().hide().animate({"background-color": "yellow"}, 10).fadeIn("slow").delay(2000).animate({"background-color": 	 					"white"}, 1000);

                    var itemID = $(this).closest("li").attr("data-id");

                    $(this).parent().html(holdText);
		  		};
    });

    $("p>input").live("blur", function(){
                    var holdText = $(this).attr("value");
		            $(this).parent().removeClass("editable");
		            $(this).parent().hide().animate({"background-color": "yellow"}, 10).fadeIn("slow").delay(2000).animate({"background-color": 	 					"white"}, 1000);

                    var itemID = $(this).closest("li").attr("data-id");

                    $(this).parent().html(holdText);
    });

</script>

</body>
</html>
                    

View the code from the project.

TImeline animation made in Adobe Flash.

Interactive piece with timeline animation triggered by Action Script.

A short text-animation created to complement the Lorine Neidecker poem represented. The concept behind the animation was to emulate leaves falling into the water.

A longer animation created to visually complement recorded commentary about the life of Lorine Niedecker from 1931-1935.

A render of the three soldiers created for the "Jumper" project as a promotional image and title screen.

My original concept sketch for the orange soldier.

View a play-through of the "Jumper" demo.

"Super Mario Rehab," a stop-motion animation. Worked with fellow students Tim Brosius and Umar Shakir.

"Sole Mates," also stop-motion.

After Effects animaton project.

Video provided by the IRC's Vimeo channel.

An experimental animation created using zoetropes. I was involved in the conception, the creation of the zoetropes, and the editing of the video along with 9 other students.

An interactive exhibit. I was involved with the organization of the exhibit and the technical production of the interactive pieces. I also designed the postcard-sized invitation for the event shown above.

Video provided by the IRC's Vimeo channel.

Episode 1 of a series of 5 webisodes. I was greatly involved in the organization of the project and talent management. Continue the series with episode 2.