Interactive Motion Detection Installation

http://vimeo.com/moogaloop.swf?clip_id=2300282&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=00ADEF&fullscreen=1
Interactive Motion Detection Installation from chris teso on Vimeo.

Interface and motion design idea for future interactive installation using motion detection.

Words are chosen at random from a random pool of Flickr tags. The words are then broken down into individual characters. These characters are then animated based on the location of user interaction.

Picture this large. Now take that image and double it’s size. Picture it large enough to where you’d have to jump to reach different ‘doors’. That’s how I envision it.

Try it for yourself : Interactive Motion Detection Installation [webcam es necessitous]

Permalink: http://www.christeso.com/index.php/lab/interactive-motion-detection-installat…

Equilibrium The Human Mashup: A Follow Up

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/

Actionscript Sound Visualization with Drawing Api

Media_httpfarm4static_djggr

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

AS3 Sound Visualization Engine

Media_httpfarm4static_wwwak

, originally uploaded by NymphoBrainiac.

Remember when I used to take photographs and post them on flickr?

Well, I guess I’ve been distracted making things, rather than just recording them.

This is one of those things. A sound visualization engine built in Actionscript. It works by analyzing the raw data of an mp3 file, taking a snapshot of its sound wave every 31 milliseconds and placing it into a ByteArray. The ByteArray is fixed to 512 floating-point values, where the first 256 values represent the left channel, and the second 256 values represent the right channel of audio. I then loop through all 512 channels and assign animations based on each (again every 31 milliseconds). The animation effects are assigned randomly applying blurring, scaling, motion and sizing based on the sound wave values. For added effect I added a photo of cannon beach I took and masked it with the sound wave. After all the song is about a beach.

Check it out here: AS3 Sound Visualization Engine.

Music: Beachcomber Blues – Dolorean

Permalink: http://www.christeso.com/index.php/lab/as3-sound-visualization-engine/as3-sou…

AS3 Motion Detection Drawing Installation

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…

Minority Report Actionscript Webcam Interface

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…

Actionscript Aurora Borealis

Media_httpfarm3static_jmlgg

The following is experimental drawing done for North. The idea was to recreate a tree line resembling the pacNW, and an aurora borealis. For inspiration I watched several youtube videos of a real aurora borealis. Everything on the screen is drawn on the fly with code and math. Nothing is ‘hand drawn’, right down to the branches on the trees.

View : Actionscript Aurora Borealis

The aurora and trees are autonomous and random within the following effective ranges.

// trees
var treeDistanceApart:Number = 30
var numBuds:Number = 4
var numTreeBurst:Number = 10
var maxSubBranch:Number = 3;
var maxSubAngle:Number = .07//4*Math.PI/4;
var maxSize:Number = 6;
var branchLenMax:Number = 65;
var branchLenMin:Number = 40;
var minAlpha:Number = 70
var maxAlpha:Number = 100

// aurora
var maxLines:Number = 40;
var minLines:Number = 1;
var trailSpeed:Number = 5
var maxLineHeight:Number = 150;
var lineXrange:Number = 70;
var lineYrange:Number = 50;
var lineAlphaMax:Number = 70;
var lineThickMax:Number = 20;
var maxInt:Number = 200
var minInt:Number = 10
var maxFade:Number = 30
var minFade:Number = 1
var minBlur:Number = 30
var maxBlur:Number = 100
var minGlow:Number = 1
var maxGlow:Number = 10

Permalink: http://www.christeso.com/index.php/lab/actionscript-aurora-borealis/actionscr…

Health eCards

Media_httpwwwchristes_zjdfb

Designed and developed fully customizeable flash eCard application for Blue Cross Blue Shield in conjunction with NORTH.

Site features:

  • Streaming video server
  • Dynamically generated customized eCards
  • SQL server
  • 3 Dedicated server setups
  • Email and advanced reporting functions
  • Advanced tracking for campaign targets

Visit site

Permalink: http://www.christeso.com/index.php/portfolio/health-ecards/health-ecards/

Call and Response Movie

Media_httpwwwchristes_tyqqd

Designed and developed website to promote a film called “Call & Response – Concert to End Slavery” in conjunction with NORTH.

It’s part concert, part documentary film that dissects the modern day slave trade. The website allows users to voice their opinion on slavery and then aggregate, sort and filter the data in various data visualizations. The creative concept is a growing unified voice on slavery to raise awareness and promote a response.

Visit site

Permalink: http://www.christeso.com/index.php/portfolio/fair-trade-films/call-and-respon…

ESPN Sporture Chamber

Media_httpwwwchristes_vwcws

Designed and developed Flash Game and ministe for ESPN Mobile in conjunction with Arnold Worldwide. The game was promoted nationally and had thousands of users competing. All user data had to be stored in a Dataabase using Flash as the front end. All questions and answered were delivered via XML to Flash.

Site features:

  • Green Screen Video
  • Dynamic data sorting
  • Advanced animation via AS
  • Object oriented XML integration
  • Full CMS integration

Visit site

Permalink: http://www.christeso.com/index.php/portfolio/espn-sporture-chamber/espn-sport…