130 seconds of a music visualization engine and generative drawing built in AS3 using particles and physics engine.

See it in it’s 4:02 entirety HERE.

512 particles are released with instructions to randomly disperse throughout the scene. Variants include friction and wander. Particle location is constantly tracked and more particles are drawn at that location. These particles are sized and alpha’d according to stage location creating a “corridor”.

Music visualization occurs by looping through SoundMixer.computeSpectrum and creating a ByteArray. Each of the 512 particles are controlled the ByteArray which conveniently contains 512 bytes of data. Each byte contains a floating-point value. This value determines the individual particles scale and glow.

I hope to make this more interesting if/when I get some free time.

Music: All Mine | Portishead

Many times I’ve set up interfaces where I need to place different objects equidistant around a central object. The solution to this problem is to first calculate the angle of each object by converting Radians to Degrees. This can be expressed by the following formula

So, you simply need to loop through your collection of objects and assign each a different angle. After that you plug that angle into a new Polar Point.

for(var i=0;i<array.length;i++)
{
	var angle:Number = i*( 180/Math.PI )
	var coord:Point = Point.polar( circumference, angle )
}

Here’s the complete source: radians.zip

package
{
	import flash.ui.*;
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;

	public class Main extends Sprite
	{

		/*
		========================================================
		| Private Variables                         | Data Type
		========================================================
		*/

		private var array:Array = new Array()
		private var circumference:int;

		/*
		========================================================
		| Constructor
		========================================================
		*/

		public function Main ()
		{
			stage.align = StageAlign.TOP_LEFT;

			// make some balls
			addParticle( 100 )

			menu.txtParticles.text = 'Particles: 100';

			stage.addEventListener( Event.ENTER_FRAME, runParticle )

			menu.slideCircumference.addEventListener( Event.CHANGE, changeCircumference );
			menu.particles.addEventListener( Event.CHANGE, changeParticles );

		}

		private function addParticle( num )
		{
			stage.removeEventListener( Event.ENTER_FRAME, runParticle )

			var tot:Number = array.length

			// kill mc's
			for( var t=0;t<tot;t++ )
			{
				removeChild( array[t].mc );
			}

			// kill array
			for( var r=0;r<tot;r++ )
			{
				array.shift();
			}

			trace( 'removed particles '+array.length )

			for( var d=0;d<num;d++ )
			{
				var c:MovieClip = new MovieClip()
				c.name = "particle"
				c.graphics.beginFill( 0xffffff, 1 )
				c.graphics.drawCircle( 0, 0, 1 )
				c.graphics.endFill()
				addChild( c )

				array.push( { mc:c } )
			}

			trace( 'added particles '+array.length )

			changeCirc( circumference )

			stage.addEventListener( Event.ENTER_FRAME, runParticle )
		}

		private function runParticle( e:Event )
		{
			//trace( 'running' )
			graphics.clear()
			graphics.lineStyle( 1, 0xffffff, .1 )

			for(var i=0;i<array.length;i++)
			{
				graphics.moveTo( stage.stageWidth/2, stage.stageHeight/2 )
				graphics.lineTo( array[i].mc.x, array[i].mc.y )
			}

		}

		private function changeCirc( c:int )
		{
			for(var i=0;i<array.length;i++)
			{
				var angle:Number = i*( 180/Math.PI )
				var coord:Point = Point.polar( c, angle )

				array[i].mc.x = ( stage.stageWidth/2 ) + coord.x
				array[i].mc.y = ( stage.stageHeight/2 ) + coord.y
			}

			circumference = c
		}

		private function changeCircumference( e:Event ):void
		{
			menu.txtCircumference.text = 'Circumference: ' + e.target.value;
			changeCirc( e.target.value )
		}

		private function changeParticles( e:Event ):void
		{
			menu.txtParticles.text = 'Particles: ' + e.target.value;
			addParticle( e.target.value )
		}
	}
}

Permalink: http://www.christeso.com/index.php/lab/as3-polar-coordinates-and-radians

You can see the drop down in use on my homepage.

Edit [ 12.16.08 ] : added directional code.

//usage
// array for drop
var dropOtherArray:Array = new Array()
dropOtherArray.push( {title:"iWork", name:"folio"} )
dropOtherArray.push( {title:"iExperiment", name:"lab"} )
dropOtherArray.push( {title:"iWrite", name:"blog"} )
dropOtherArray.push( {title:"iPhotograph", name:"photo"} )
dropOtherArray.push( {title:"iFlickr", name:"flickr"} )
dropOtherArray.push( {title:"iRecord", name:"vimeo"} )
dropOtherArray.push( {title:"contactMe", name:"contact"} )

fmat.color = 0xffffff
fmat.font = font.fontName
fmat.size = 11

addChild( _dropOther = new DropDown( 180, 25, "iLiveElsewhere:", fmat, 0x000033, dropOtherArray, "down", other ) )

package com.teso.ui
{
	import com.gskinner.motion.*
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.utils.*;
	import flash.text.*;
	import fl.transitions.*;
	import fl.transitions.easing.*;

	public class DropDown extends Sprite
	{
		private var _items:Array = new Array()
		private var _overC:uint;
		private var _backC:uint;
		private var _w:Number;
		private var _h:Number;
		private var _timer:Timer;
		private var _open:Boolean = false;
		private var _defaultText:TextField;
		private var _title:String;
		private var _direction:String;
		private var _fmt:TextFormat;

		public function DropDown( w:Number, h:Number, title:String, fmt:TextFormat, colorBack:uint, itemArray:Array, direction:String, callback )
		{
			// timer
			_timer = new Timer( 300 );
			_timer.addEventListener( TimerEvent.TIMER, closeDrop )

			// vars
			_w = w
			_h = h
			_backC = colorBack
			_items = itemArray
			_title = title
			_direction = direction
			_fmt = fmt

			// create a back for the holder
			var holder:MovieClip = new MovieClip();
			holder.name = "holder"
			holder.graphics.beginFill( _backC, 1 );
			holder.graphics.drawRoundRect( 0, 0, _w, _h, 2, 2 )
			holder.graphics.endFill()

			// add the drop
			addChild( holder )

			// set listeners
			holder.buttonMode = true;
			holder.addEventListener( MouseEvent.MOUSE_OVER, openDrop )
			holder.addEventListener( MouseEvent.MOUSE_OVER, cancelClose )
			holder.addEventListener( MouseEvent.MOUSE_OUT, startClose )

			// create a text field
			var t:TextField = new TextField()
			t.name = "holderText"
			t.selectable = false;
			t.autoSize = TextFieldAutoSize.LEFT;
			t.htmlText = title
			t.setTextFormat( fmt )
			t.y = ( holder.height/2 ) - ( t.height/2 )

			_defaultText = t

			// add the text
			holder.addChild( t )

			// create children
			for( var i=0; i<_items.length; i++ )
			{
				// create a back
				var back:MovieClip = new MovieClip()
				back.name = _items[i].name;
				back.graphics.beginFill( _backC, 1 )
				back.graphics.drawRoundRect( 0, 0, _w, _h, 10, 10 )
				back.graphics.endFill()

				// create a text field
				t = new TextField();
				t.name = "t"
				t.x = 5
				t.selectable = false;
				t.autoSize = TextFieldAutoSize.LEFT;
				t.htmlText = _items[i].title;
				t.setTextFormat( fmt )
				t.y = ( back.height/2 ) - ( t.height/2 )

				if( _items[i].d )
				{
					_defaultText.htmlText = _title+" "+_items[i].title
					_defaultText.setTextFormat( _fmt )
				}

				// make them invisible for now
				back.visible = false;

				// set a listener
				back.buttonMode = true;
				back.addEventListener( MouseEvent.CLICK, closeDrop )
				back.addEventListener( MouseEvent.CLICK, setDefaultText )
				back.addEventListener( MouseEvent.CLICK, callback )
				back.addEventListener( MouseEvent.MOUSE_OUT, startClose )
				back.addEventListener( MouseEvent.MOUSE_OVER, cancelClose )

				// add the text
				back.addChild( t )

				// add it to the holder
				addChildAt( back, 0 )

				_items[i].mc = back
			}
		}

		private function openDrop( e:Event )
		{
			if( !_open )
			{

				for( var i=0; i<_items.length; i++ )
				{
					// set a var
					var item:DisplayObject = _items[i].mc

					// set the items alpha to zero
					item.alpha = 0;

					// make the item visible
					item.visible = true

					// fade it in
					var tweenIn:GTween;

					if( _direction == "down" )
					{
						tweenIn = new GTween( item, .3, {y:_h + ( _h * i ),  alpha:1} )
					}
					else
					{
						tweenIn = new GTween( item, .3, {y:-_h - ( _h * i ),  alpha:1} )
					}
					tweenIn.ease = Regular.easeOut
				}
			}
			_open = true;

		}
		private function cancelClose( e:Event )
		{
			if( e.currentTarget.name != "holder" )
			{
				e.currentTarget.alpha = .8
			}
			_timer.stop()
		}
		private function startClose( e:Event )
		{
			e.currentTarget.alpha = 1
			_timer.start()
		}
		private function setDefaultText( e:Event )
		{
			_defaultText.htmlText = _title+" "+e.currentTarget.getChildByName( "t" ).text
			_defaultText.setTextFormat( _fmt )
		}
		private function closeDrop( e:Event )
		{
			closeIt()
		}
		private function closeIt()
		{
			if( _open )
			{
				for( var i=0; i<_items.length; i++ )
				{
					// set a var
					var item:DisplayObject = _items[i].mc

					// make the item visible
					item.visible = true

					// fade it in
					var tweenOut:GTween = new GTween( item, .3, {y:0, alpha:0}, {completeListener:done, data:item} )
					tweenOut.ease = Regular.easeOut
				}
			}

			_timer.stop()

			_open = false;
		}
		private function done( e:Event )
		{
			e.currentTarget.data.visible = false

		}

	}
}
Permalink:
http://www.christeso.com/index.php/lab/as3-drop-down-menu-classas3-drop-down-menu-class/

Equilibrium The Human Mashup: A Follow Up, originally uploaded by NymphoBrainiac.

Equilibrium: A Follow Up

Last week I had a showing at Equilibrium, the Human Mashup. The show’s goal was to ask “How can art and technology and the synergy of the two address humanity’s next evolutionary step?”. Being a staunch singularitarian this was right up, or is it down, my proverbial alley. I built an application that allows a user to take a self portrait photograph and then draw themselves on a wall simply by using and moving their hand. The premise was to use the human as the sole interface to draw themselves, exploring the convergence of man and technology. A one day only installation, I didn’t have to high of hopes for it’s exposure. On the flip side, this being my first showing ever I was like a greedy 8 year old on Christmas morning, and extremely anxious to see how people would interact and respond to the installation. The methodology of controlling an interface without the normal peripherals such as a mouse, keyboard, touch screen, kiosk, or otherwise was foreign to all that attended. What transpired blew me away. The attendance, response and exposure far exceeded my hopes. I barely had to explain at all to users how to run the application. People just stepped right up to the installation and began to interact with it. They were actually learning on their own while performing the drawing. People were actually converging with the technology. Furthermore, those that were done performing their drawing became evangelists, telling those who followed them their idea of how best to use the application. At that moment it became cemented in my mind that I had succeeded in my experiment. People had invested themselves in the piece to the point of bringing out their own inner artist. Several times I stepped in to ‘coach’ people on how to get the most out of the motion detection while drawing their portrait. The response I got was unexpected. People took personal offense that I was pushing my artistic ideas on their own drawing. Again, success. I was also sent to the floor several times by attendees who said they had come to the event specifically to see my work which they had been following online. There were even several people who mentioned that they had hooked my work up to projectors at parties they were holding. Wha?! Seriously, amazed.

I’d like to thank several people for the night. Steve Benoit for all his help with testing the application, videography and film editing of the event. The result is the shweet movie posted above. Rachel Kjack and Adrienne Fritze from SAO and Working Artists Online respectively for their organization and inviting me to submit my work. All that attended, I met some inspirational folk. And finally, my wife Lisa for her unending support and diggin’ me even when I have late night dreaded ‘code eyes’.

Looking forward to the next event.

Related:

the online version of the installation

the flickr gallery of finished drawings

previous blog post

working artists online

software association of oregon

Permalink: http://www.christeso.com/index.php/lab/equilibrium-the-human-mashup-a-follow-up/

drawn entirely with code, with an assist from radiohead.

Think of code as the ‘painter’. The ‘painter’ analyzes the the color of each pixel in the image you pass it. Other code analyzes Mp3 data and controls the ‘painter’. Thus, the ‘painting’ is performed using music as the artist.

go here to draw your own

Permalink: http://www.christeso.com/index.php/lab/actionscript-sound-visualization-with-drawing-api/

You have to admire a job that allows you to make a bumble-bee/owl (a bumblowl?) fly around a mural merely by waving your finger… all while drinking beer.

This is an elaboration on my actionscript webcam motion detection experiments, built as an installation for the Inverge party hosted by North. The idea was to take motion detection and combine it with art in the form of digital drawing and 2d space in the form of a wall mural. The concept is to allow human interaction to affect physical space, freeing oneself from all traditional user interface. The application works by constantly monitoring a webcam, taking snapshots of each frame every millisecond. The pixels in the current frame are compared to pixels in the previous. The difference in brightness within each section determines whether or not motion had occurred in this area of the screen. If motion is detected the coordinates of a rectangular grid around said motion is recorded and the owl is ordered to go to that point. The line drawings begin and follow the owl recording a ‘flight path’. A mask is drawn to prevent the owl and its drawing trail from going in front of some of the trees giving the mural a sense of dimension.

Thanks to the great Eric Natzke for the drawing inspiration and open source, and NORTH for being forward thinking enough to encourage digital experimentation.

Permalink: http://www.christeso.com/index.php/lab/as3-motion-detection-drawing-installation/

Expanding on my Actionscript Webcam Motion Detection experiments, I’ve built a rudimentary ‘Minority Report’-inspired interface.

The concept is to create a new type of user interface rebuking the typical peripherals of the keyboard and mouse. Instead, a user would merely stand in front of a wall and control the interface with their movements. I’ve seen other attempts at doing this. See Microsoft Surface, iphone, this thing et. al. All cool for sure, but all done using touch screens. Touch screens are so 2006. Even Tom Cruise used gloves. Pfft. The idea is to free oneself from all physical interface. To use human gestures.

I haven’t tried it properly installed and projected on a wall yet.

You can try it here: actionscript webcam minority report interface (webcam required obv)

Like everything that exists, this is a work in progress.

Permalink: http://www.christeso.com/index.php/lab/minority-report-actionscript-webcam-interface/