http://vimeo.com/moogaloop.swf?clip_id=3191128&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00adef&fullscreen=1
The Neural Orb from chris teso on Vimeo.

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

/flash/radians.swf

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

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

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

I briefly Googled for a drop down class to no avail. I say briefly as I only went one page deep. I’m sure there are others out there, but I instead got impatient as usual and just wrote my own. I thought I’d share it for other impatient people’s benefit. Without further ado here’s the AS3 Drop Down Class code. It’s a work in progress and most likely will be updated when I give it any more thought.

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; iPermalink:

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

http://vimeo.com/moogaloop.swf?clip_id=2334635&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1
Untitled from chris teso on Vimeo.

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/

, originally uploaded by NymphoBrainiac.

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-…

http://vimeo.com/moogaloop.swf?clip_id=2339145&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1
AS3 Webcam Drawing from chris teso on Vimeo.

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-installat…

http://www.flickr.com/apps/video/stewart.swf?v=63881

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-in…