theGOOD Uploadr is a desktop application built on Adobe Air. The application is currently in alpha with a push to release beta around the first of the year 2010.
theGOOD Uploadr aims to improve and augment the Flickr experience by adding many features to the uploading process.
Originally posted @ http://www.thegood.com/social/index.php/category/blog/industry/thegood-com/
We’re pretty proud of our new site, so we thought we’d give some technical deets for all of our geek readers. We do hope the rest of you can appreciate it on a more laymen level.
The site is an aggregation engine that acquires feeds from both Wordpress and Yahoo Pipes. Pipes delivers Twitter and other social media feeds in a nice JSON wrapper to Flash. Wordpress data is acquired via XMLRPC. We made some custom modifications to enable it to deliver some specificity, however most of it was right there for the taking. A tip of the cap to Wordpress and its open source goodness.
We’re able to administer the entire site content using Wordpress as the CMS talking nicely with its Flash front. Given this, the site can function as our portfolio, social aggregate, blog, and company profile all wrapped up in a of sweet.
If you find any bugs or ideas for improvement we’d love to hear from you. More selfishly, If you’re a potential client and dig what we’re layin’ down, don’t hesitate to drop us a line. We’d love to get in bed with you.
So, you’ve got a client that wants to manage their website content. They want to be able to update every field on their Flash website, er I mean “experience”. But there’s a catch… they FEAR technology and complex interfaces. They feel that Wordpress is too complex, never mind a proprietary custom build CMS.
What’s a developer to do?
THIS:
1. Create a Google Docs Spreadsheet – For this example I’m using row 1 to hold the field vars.
2. Set it to publish as a webpage – Be sure to select CSV format. Be sure to set it to re-publish when any editing occurs.
3. Set up Yahoo Pipes to fetch the CSV data – Set appropriate data mapping, renaming and use Regex to ensure data is proper.
4. Publish Pipe as your favorite data feed – For this example I chose JSON.
5. Load JSON into your Flash app. BOOM!
Bladow, your client can now go on doing what they’ve always done — edit an excel doc ( Google Doc ). They make changes there, it changes on their fancy experiential website.
Consider this beta, and not heavily tested. Just wanted to get it out there while I’m still working on it.
For a recent project a client wanted more control over the display of their Wordpress navigation. They wanted to be able to use any font. They also wanted a dynamic fold-able navigation that enables access to all categories without re-loading the page. This was a perfect project for me since I use Wordpress all over the mofo place. For example, you can see the navigation in use over there to the right. Also, as I’ve stated previously, I’m a big fan of leveraging the many publishing outlets I already use. So, I buit the nav in Flash connecting to Wordpress via XMLRPC using some classes from http://mattism.com/. This essentially allows me to use Wordpress as a content management system for Flash. You could obviously see how this could be applied to entire sites, like I have with my homepage. I’ve thought about building this a Wordpress plugin, and maybe down the road I will, but I doubt it as I’ll probably jump ship and start another project per usual. Besides, everyone knows you can’t make money writing Wordpress plugins.
How It Works:
Flash calls _rpc.call(”wp.getCategories”) to xmlrpc.php which returns an array of categories. I use this array to create a bunch of MovieClip()s. These clips add TextFields as children, are sorted and have events applied to them that enable the interactions. Two fonts reside in the library. One for the top node and one for the child and grandchildren nodes.
Features [the current goods]:
Dynamic – Works dynamically with Wordpress categories. You update your categories in Wordpress, they show properly in Flash
Sorting – Dynamically sorts top nodes. Controlled by Wordpress plugin my category order. For this to work I had to make a small addition to the Wordpress xmlrpc.php, located in your Wordpress root folder, to return the category term order. Added line 2776 – $struct['order'] = $cat->term_order;
Page recognition – Recognizes the page you’re on and dynamically opens navigation to the parent node of said page onload. I could have used XMLRPC tomake this call, I’m sure. However, I opted to pass in the page url via Flashvars and run a check to find a match. When a match is found the nav opens to it’s parent node.
Folding – Uses Grant Skinner GTween for interactions.
Multiple – Allows posts to live under multiple category nodes.
Wish List [the future goods]:
Multiline – Currently only supports single line category titles, so you’re limited in char length
Scrolling – Currently the length of your category list is limited to the length of the swf. I plan to add functions to enable scrolling of the list based on mouseY. This will free up the nav to be as long as you desire.
Post count – Do people really use this though? Probably not as its annoying.
Levels – Currently the nav only supports 3 levels. It would be nice to be infinite.
Build in the rest of Wordpress feature support for tag cloud, recent comments etc.
Total devel time: 2 days, or about 12 hours.
I’d love to see where other people take the code and what people build with it.
Source Code:
wpNavMain.as
/**
* wpNavMain by Chris Teso. Mar 19, 2009
* Visit www.christeso.com/blog for documentation, updates and more free code.
*
*
* Copyright (c) 2009 Chris Teso
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/
package
{
import flash.display.*;
public class wpNavMain extends Sprite
{
/*
========================================================
| Constructor
========================================================
*/
public function wpNavMain ()
{
stage.align = StageAlign.TOP_LEFT;
// add nav
var wp:Wp = new Wp()
addChild( wp )
}
}
}
Wp.as
/**
* Wp by Chris Teso. Mar 19, 2009
* Visit www.christeso.com/blog for documentation, updates and more free code.
*
*
* Copyright (c) 2009 Chris Teso
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/
package
{
import com.gskinner.motion.*
import com.mattism.http.xmlrpc.*;
import com.mattism.http.xmlrpc.util.*;
import flash.filters.*;
import flash.media.*;
import flash.ui.*;
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.utils.*;
import flash.geom.*;
import flash.text.*;
import fl.transitions.*;
import fl.transitions.easing.*;
import flash.system.SecurityPanel;
import flash.system.Security;
public class Wp extends Sprite
{
/*
========================================================
| Private Variables | Data Type
========================================================
*/
private var _navArray:Array = new Array();
private var _rpc:Connection;
private var _topFont:Font = new topFont();
private var _roadSign:Font = new roadSign();
private var _topFmt:TextFormat = new TextFormat()
private var _currUrl:String = ""
private var _hideTimer:Timer
private var _textYPad:int = 16
private var _navSpeed:Number = .2
/*
========================================================
| Constructor
========================================================
*/
public function Wp ()
{
loadRpc()
}
private function checkPage()
{
// load in title
var paramList:Object = this.root.loaderInfo.parameters;
// set var to hold text
var _currUrl:String = paramList["url"]
//_currUrl = "http://www.christeso.com/index.php/category/portfolio/truth/truth-found/"
// scan through array and open nav to that one
for( var i=0;i<_navArray.length;i++ )
{
//trace( "_currUrl = "+_currUrl+" - "+_navArray[i].link )
if( _navArray[i].link == _currUrl )
{
//trace( "found match!" )
// open it
if( _navArray[i].childMc != null )
{
showGrandChildren( MovieClip( _navArray[i].childMc ) )
}
if( _navArray[i].grandChildMc != null )
{
showGrandChildren( MovieClip( _navArray[i].grandChildMc.parent ) )
}
}
}
}
private function showGrandChildren( mc:MovieClip )
{
//trace( "opening grandchildren" )
// amount to go down
var yLeap:Number;
// total that will be open as long as the node is not already open
var _totOpen:int = mc.numChildren-1
//trace( "_totOpen = "+_totOpen )
// ok we can prob do this in one big loop
for( var i=0;i<_navArray.length;i++ )
{
// push down top nodes as long as they are below the top node you're on
if( _navArray[i].mc != null )
{
if( _navArray[i].mc.origY > MovieClip(mc.parent).origY )
{
yLeap = _navArray[i].mc.origY + ( _totOpen*_textYPad )
new GTween( _navArray[i].mc, _navSpeed, {y:yLeap} )
}
else
{
yLeap = _navArray[i].mc.origY
new GTween( _navArray[i].mc, _navSpeed, {y:yLeap} )
}
}
// push down child nodes as long as they are below the node you're on and are a child of the node you're on
if( _navArray[i].childMc != null )
{
if( _navArray[i].childMc.parent == mc.parent )
{
if( _navArray[i].childMc.origY > mc.origY )
{
yLeap = _navArray[i].childMc.origY + ( _totOpen*_textYPad )
new GTween( _navArray[i].childMc, _navSpeed, {y:yLeap} )
}
else
{
yLeap = _navArray[i].childMc.origY
new GTween( _navArray[i].childMc, _navSpeed, {y:yLeap} )
}
}
}
// make grandchildren visible
if( _navArray[i].grandChildMc != null )
{
if( _navArray[i].grandChildMc.parent == mc )
{
_navArray[i].grandChildMc.visible = true
new GTween( _navArray[i].grandChildMc, _navSpeed, {alpha:1} )
}
else
{
new GTween( _navArray[i].grandChildMc, _navSpeed/2, {alpha:0, autoHide:true} )
}
}
}
}
private function hideGrandChildren( e:Event )
{
// amount to go down
var yLeap:Number;
// ok we can prob do this in one big loop
for( var i=0;i<_navArray.length;i++ )
{
// push up top nodes
if( _navArray[i].mc != null )
{
yLeap = _navArray[i].mc.origY
new GTween( _navArray[i].mc, _navSpeed, {y:yLeap} )
}
// push up child nodes
if( _navArray[i].childMc != null )
{
yLeap = _navArray[i].childMc.origY
new GTween( _navArray[i].childMc, _navSpeed, {y:yLeap} )
}
// make grandchildren visible
if( _navArray[i].grandChildMc != null )
{
new GTween( _navArray[i].grandChildMc, _navSpeed/2, {alpha:0, autoHide:true} )
}
}
}
private function childClick( e:Event )
{
var i:int = e.currentTarget.indexNum
var srcRequest:URLRequest = new URLRequest( _navArray[i].link );
navigateToURL( srcRequest, "" );
}
private function childOver( e:Event )
{
trace( "mouse over "+MovieClip( e.currentTarget ).name )
// remove parent events
MovieClip( e.currentTarget ).parent.removeEventListener( MouseEvent.CLICK, childClick )
// stop close timer
_hideTimer.stop()
// show grandkids
showGrandChildren( MovieClip( e.currentTarget ) )
}
private function childOut( e:Event )
{
trace( "mouse out "+MovieClip( e.currentTarget ).name )
// add parent events
MovieClip( e.currentTarget ).parent.addEventListener( MouseEvent.CLICK, childClick )
// start timer for close
_hideTimer.start();
}
private function grandChildOver( e:Event )
{
trace( "mouse over "+MovieClip( e.currentTarget ).name )
// remove parent events
MovieClip( e.currentTarget ).parent.removeEventListener( MouseEvent.CLICK, childClick )
// handle its events
MovieClip( e.currentTarget ).addEventListener( MouseEvent.CLICK, childClick )
}
private function grandChildOut( e:Event )
{
trace( "mouse out "+MovieClip( e.currentTarget ).name )
// remove parent events
MovieClip( e.currentTarget ).parent.addEventListener( MouseEvent.CLICK, childClick )
// handle its events
MovieClip( e.currentTarget ).removeEventListener( MouseEvent.CLICK, childClick )
}
private function orderTop()
{
var yPos:int = 0;
var topCount:int = 0
// first we need to find all unique parents
for( var i=0;i<_navArray.length;i++ )
{
//
if( _navArray[i].mc != null )
{
// place the top
_navArray[i].mc.y = yPos
_navArray[i].mc.origY = yPos
// calculate the next Y pos
yPos = _navArray[i].mc.y + ( _navArray[i].mc.numChildren*_textYPad )+_textYPad
}
}
}
private function makeTopNode( i:int )
{
trace( "making top node "+_navArray[i].title+" id = "+_navArray[i].id+" parent id = "+_navArray[i].parentId )
// create an mc holder
var mc:MovieClip = new MovieClip()
mc.name = _navArray[i].title
// create a text field
var t:TextField = new TextField()
t.mouseEnabled = false
t.name = "text"
t.autoSize = TextFieldAutoSize.LEFT
t.selectable = false
t.embedFonts = true
t.antiAliasType = flash.text.AntiAliasType.ADVANCED
t.htmlText = _navArray[i].title.toUpperCase()
_topFmt.size = 13;
_topFmt.font = _roadSign.fontName;
_topFmt.color = 0x666666
//_topFmt.letterSpacing = .5
_topFmt.kerning = true;
t.setTextFormat( _topFmt )
mc.addChild( t )
addChild( mc )
_navArray[i].mc = mc
// events
mc.indexNum = i
mc.origY = mc.y
mc.buttonMode = true
mc.addEventListener( MouseEvent.CLICK, childClick )
// now loop through this level and populate kids
findChildren( _navArray[i].id, mc )
}
private function makeChild( i:int, par:MovieClip )
{
trace( " making child "+_navArray[i].title+" id = "+_navArray[i].id+" parent id = "+_navArray[i].parentId )
// create an mc holder
var mc:MovieClip = new MovieClip()
mc.name = _navArray[i].title
// create a text field
var t:TextField = new TextField()
t.mouseEnabled = false
t.name = "text"
t.autoSize = TextFieldAutoSize.LEFT
t.selectable = false
t.embedFonts = true
t.antiAliasType = flash.text.AntiAliasType.ADVANCED
t.htmlText = _navArray[i].title.toUpperCase()
_topFmt.size = 10;
_topFmt.font = _topFont.fontName;
_topFmt.color = 0xffffff
_topFmt.letterSpacing = .5
_topFmt.kerning = true;
t.setTextFormat( _topFmt )
_navArray[i].childMc = mc
mc.y = par.numChildren*_textYPad
mc.addChild( t )
par.addChild( mc )
// now loop through this level and populate kids
findGrandChildren( _navArray[i].id, mc )
// events
mc.indexNum = i
mc.origY = mc.y
mc.buttonMode = true
mc.addEventListener( MouseEvent.CLICK, childClick )
mc.addEventListener( MouseEvent.MOUSE_OVER, childOver )
mc.addEventListener( MouseEvent.MOUSE_OUT, childOut )
}
private function makeGrandChild( i:int, par:MovieClip )
{
trace( " making grandchild "+_navArray[i].title+" id = "+_navArray[i].id+" parent id = "+_navArray[i].parentId )
// create an mc holder
var mc:MovieClip = new MovieClip()
mc.name = _navArray[i].title
// create a text field
var t:TextField = new TextField()
t.mouseEnabled = false
t.name = "text"
t.autoSize = TextFieldAutoSize.LEFT
t.selectable = false
t.embedFonts = true
t.antiAliasType = flash.text.AntiAliasType.ADVANCED
t.htmlText = _navArray[i].title.toUpperCase()
_topFmt.size = 10;
_topFmt.font = _topFont.fontName;
_topFmt.color = 0x999999
_topFmt.letterSpacing = 0
_topFmt.kerning = true;
t.setTextFormat( _topFmt )
_navArray[i].grandChildMc = mc
mc.alpha = 0
mc.visible = false;
mc.x = 5
mc.y = par.numChildren*_textYPad
mc.addChild( t )
par.addChild( mc )
// events
mc.indexNum = i
mc.buttonMode = true
//mc.mouseChildren = false
//mc.addEventListener( MouseEvent.CLICK, childClick )
mc.addEventListener( MouseEvent.MOUSE_OVER, grandChildOver )
mc.addEventListener( MouseEvent.MOUSE_OUT, grandChildOut )
}
private function findGrandChildren( id:int, par:MovieClip )
{
for( var i=0;i<_navArray.length;i++ )
{
// hunt for children of the parent
if( _navArray[i].parentId == id )
{
//trace( "-- found child "+_navArray[i].title+" | id = "+_navArray[i].id+" | parent = "+_navArray[i].parentId )
// found one, now make a grandchild
makeGrandChild( i, par )
}
}
}
private function findChildren( id:int, par:MovieClip )
{
for( var i=0;i<_navArray.length;i++ )
{
// hunt for children of the parent
if( _navArray[i].parentId == id )
{
//trace( "-- found child "+_navArray[i].title+" | id = "+_navArray[i].id+" | parent = "+_navArray[i].parentId )
// found one, now make a child
makeChild( i, par )
}
}
}
private function findParents()
{
// first we need to find all unique parents
for( var i=0;i<_navArray.length;i++ )
{
// analyze the node... is it a top node?
if( _navArray[i].parentId == 0 && _navArray[i].title != "Uncategorized" )
{
//trace( "-- found parent "+_navArray[i].title )
// create a top node container
makeTopNode( i )
}
}
}
private function loadRpc()
{
_rpc = new ConnectionImpl('blogaddress/xmlrpc.php');
_rpc.addEventListener(Event.COMPLETE, rpcCompleteHandler);
_rpc.addEventListener(ErrorEvent.ERROR, rpcErrorHandler);
_rpc.addParam(0, XMLRPCDataTypes.INT); // Blog Id
_rpc.addParam("blogusername", XMLRPCDataTypes.STRING); // Username
_rpc.addParam("blogpassword", XMLRPCDataTypes.STRING); // Password
getCategories()
}
private function getCategories():void
{
_rpc.call("wp.getCategories")
}
private function rpcCompleteHandler(evt:Event):void
{
var response:Object = _rpc.getResponse();
for(var i:String in response)
{
// need to first grab all the top nav categories
trace( response[i].categoryName )
trace( response[i].htmlUrl )
trace( response[i].parentId )
trace( response[i].categoryId )
trace( response[i].order )
trace( "------------------" )
_navArray.push( { title:response[i].categoryName, link:response[i].htmlUrl, id:response[i].categoryId, parentId:response[i].parentId, order:response[i].order } )
}
// Sort the array according to your category order setting in WP
_navArray.sortOn( "order", Array.NUMERIC )
// setup close timer
_hideTimer = new Timer( 500, 1 );
_hideTimer.addEventListener( TimerEvent.TIMER, hideGrandChildren );
findParents()
orderTop()
checkPage()
}
private function rpcErrorHandler(evt:ErrorEvent):void
{
var fault:MethodFault = _rpc.getFault();
}
}
}
Over the last couple of years my addiction to taking pictures every day has grown in intensity. More recently this addiction has heightened my curiosity to a point of seriousity. You do realize that seriousity should have inclusion confirmation from Merriam-Webster. If truthiness can make in, seriousity should. Seriously. Ok, back to the point. I’m getting more serious about photography. I even purchased a serious camera. Along with this serious camera, and an overabundance of seriousity about it’s use, I’ve gone and constructed myself a website dedicated to my photography. It is my hope that this will inspire and urge potential clients to contact me about my services.
The concept of the site is to take as much distraction out of the interface as possible to allow all focus on the content, the photography. I decided the entire site could be controlled by a small non intrusive control. I also wanted users to be able to interact with the photography by zoom and panning. Users also have the option to zoom out to see the full photo. Finally, I wanted a super easy way to content manage the site. Since I’m an avid Flickr user, its API was a natural CMS choice. I merely have to tag my photos in Flickr and they show up categorized on my site. I’m a big fan of leveraging the many publishing outlets I already use.
If you are a photographer, and are interested in owning a site similar to this one, chirp me.
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.
When I lived in AS2land I was extremely fond of Keith Peter’s Particle class. It was so easy to implement and get things moving. It helped me build sweet node movement in Call and Response and mock up various other interfaces requiring physics engines. His class was simple but performed many cool particle animations with minimal effort and thus low cpu intensity. Moving to AS3 I’ve tried various other particle classes such as Flint . I really dig Flint but it’s a tad bulky for rapid prototyping or those situations where you don’t need a heavy class. Therefore, I’ve rewritten Keiths partcle class ported from AS2 to AS3. I saw that Eric had tried to rewrite it but had some errors. Enjoy, and thanks Keith.
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 )
}
City of Portland Downtown Marketing Initiative in conjunction with North.
Project Goal
Create an outdoor reactive environment in which passersby could interact, based on their location and movements, with artists interpretations of snowfall in Portland.
Project Strategy and Equipment
Display – Custom made acrylic panels lined with photosensitive film built and erected to exact dimensions of installation window Projection – Rear projection with flipped signal using a 5200 lumen Sanyo PDG-DXT10L Projector Video Capture – Logitech QuickCam® Vision Pro CPU – Mac Pro Quad Application – Flash AS3 Industrial Design – Two large tarps sewn together to create light blocking canopy. Lining to seal off windows and acrylic. A shitload of Velcro.
Project Synopsis
As part of a larger campaign to brand Downtown Portland North was charged with creating an outdoor reactive environment in which passersby could interact, based on their location and movements, with artists interpretations of snowfall in Portland. Three traditional artists were commissioned by The Portland Institute for Contemporary Art to create their interpretation of snowfall in downtown Portland. These pieces were then transformed for use with my motion detection and tracking application built entirely in actionscript. The application was built to display 3 different scenes with randomly generated snowfall. The three scenes were set to rotate on a time interval. The application used motion detection to make the falling snowfall react and animate based on the location of an individuals movement. The application also incorporated and automated snapshot function that took a photo every 10 minutes and posted it to a private flickr account. This function was implemented solely for remote monitoring, ensuring the application was up and running. After going to the installation location and taking careful measurement of everything from window frame to projector distance, the installation was built and staged at North. We built a ‘to scale’ model of the window in the back of the office. This was necessary for accurate calibration of projector, and optimization of motion detection and tracking code. The staging was an extremely helpful and necessary step in eliminating early stage bugs such as projector calibration and camera positioning. We quickly learned the maximum distance for a USB signal, the proper use of DVI vs. DHMI to projector and the challenges of doing motion detection in every possible light range from complete darkness to bright sunshine. After testing stage was complete we moved the entire rig over to the installation spot located at 6th and Alder in Downtown Portland. We went about setting up a canopy to block out all extraneous light leak. The interior of the installation space was two stories of extremely large windows. The canopy we chose was a homemade compilation of two tarps strung up to the surrounding walls with rope. Since there was very expensive equipment residing under the canopy, the fear lingered of canopy failure collapsing down, resulting in devastating loss. We next set out to install the panels into the window frame. Since they were pre-cut to exact dimensions these flowed right in smoothly with only small light leaks needed to be sealed. We then hooked up the projector, cpu, camera, monitor, and application and set to testing. Testing in a staging environment is one thing. However, most tests are rendered moot when on-site. I quickly learned that reactive environments are just that, entirely dependent on their environment and all the challenges that come along with it. The motion detection is to run 24/7 for six weeks during all weather, lighting situations, and process location accurately with varying levels of distractions. Since the installation is located on an extremely busy downtown street corner, distractions ranged from traffic movement, pedestrians, bikers, storefront lights and weather. For testing purposes I built many functions that allows the system to be calibrated without actually going into the code, but rather using an external UI to update blurring, light detection levels, contrast, and other variables. After several days of calibration, code tweaks and testing the application has been running uninterrupted and has gained quality exposure for Downtown Portland. Many fine citizens of Portland have had a unique interactive experience, and have consequently spread kind words about the project. Furthermore, the project is a successful case study on the implementation of new technology and reactive medium into a larger branding campaign.
Project Challenges
Development – Create a motion detection application that worked in every possible light and weather condition. Design – Making traditional raster art work work in a complex location detection application and animation. Industrial Design – Create an environment that optimized presentation and functionality in varying environmental variables.
photo by .:9:.
With just a couple days until the launch of the interactive installation in Downtown Portland I’ve been going mad tweaking code and functionality to run motion detection in rain, darkness and direct sunlight, with multiple object motion distractions such as pedestrians, bikers, segways and automobile headlights stopped at the traffic light precariously located directly in front of the installation camera. Simultaneously we’ve been crazy busy setting up the environment. Designing and developing the application for motion detection has kept me busy enough and has been an awesome learning experience using Flash as an interactive installation platform.
What I’ve underestimated are the challenges and learning curve associated with the industrial design end of the project. The challenges the environment has placed on us have been many. I’ve mentioned the lighting situation and the application challenges of varying weather, lighting and motion objects. There have also been other challenges such as getting the lens and projector right to cover the entire store front window from an elevation, keystoning [ keystonery? keystoningness? ] focal and clarity perspective. Properly aligning the webcam for best motion detection and display results within the application. [ viewers will be video overlayed in the application ].
Sewing together multiple tarps and hanging them one story above the installation to block out extraneous light that would dull the projection. Major issues with using an AT&T 3G card for connectivity in the absence of any wifi. [ the application takes a snapshot and posts the image to a private flickr account every 10 minutes so I can ensure the app. is up and running ]. Dealing with not being able to use an internal monitor while running the app with the projector. Adhering the specialized light sensitive acrylic pieces properly into each of the six window frames. The list goes on and is still mounting.
All this said, testing is moving along nicely. As you can see from the images below there have been people using the app. in its beta stage already. The feedback has been amazing. Standing on the street corner and watching people interact with the snowflakes and move around the area waving their hands and legs has been great. It’s been especially cool pretending to be an innocent onlooker to overhear the conversations and guessing of how the entire thing may be working. I saw more than a few people physically touching the glass guessing that they could effect the display ala touch screen. Several people danced in front of it. A few people looked semi frightened by the whole scenario. The best quote of the night came from a man who was simply amazed by the display. After carrying on about how cool it was he wrapped up the rant by exclaiming “this is downright amazing… but pfft… they’ve probably had this in Tokyo for the last 10 years”.
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.
After much back and forth to the drawing board I’ve come up with an idea for my new site that satisfies several needs. Furthermore, I’ve gone ahead and built it. The two main needs for the site are as follows:
1. Maintain the ability to update the site easily by leveraging the many publishing outlets I already use.
2. Aggregate all of the content I create across multiple platforms into one simple easy to use interface.
The solution for number one was to use Yahoo Pipes to aggregate RSS feeds from the various publishing platforms I already use. These platforms are as follows:
1. Wordpress – runs my blog, my portfolio and my flash lab experiments
2. Flickr – my photography
3. Vimeo – my movies
4. Google Reader – what I read
Solution #1
Pipes allowed me to marry each disparate RSS feed into one long feed. This essentially allows me to use each platform as a content management system. I had to write a few ASP scripts to enable wordpress specific posts to be translated into an RSS feed before sending it off to Pipes to be assimilated.
Solution #2
I created a simple flash application that hit the Pipes feed and displayed content in an animation that resembled a stream of data or consciousness. Within flash I had to do some custom String manipulation to identify where the various pieces of content may be originating. Once these were classified it was as simple as building out the classes that would run the content manipulation. It was also nice to get to play around with the new 3D api built into Flash 10.
All and all I’m very pleased with the site. It will allow me to continue to use the publishing platforms I like, the platforms that are best at housing content, and still display the content in one central stream.
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.
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’.
In continuing exploration into motion tracking using flash and a webcam I’ve created an application that enables you to track multiple objects based on color. The holy grail of the application is of course to track multiple objects without specifying color. However, this is a good step forward and actually opens up many other avenues for use. Color, after all, is ubiquitous.
The truly useful part of the code is getColorBoundsRect. If you’re unfamiliar with this function, it determines a rectangular region that either fully encloses all the pixels of a specified color within a BitmapData object, or fully encloses all pixels that do not include the color. The function returns a rectangle around the color area. You can then reference this rectangles x and y respectively.
var areaColor:Rectangle = SomeBitmapData.getColorBoundsRect( 0xFFFFFFFF, _colorArray[i].color, true );
The function is rather finicky about the depth of where the object is. Since it’s only searching for a certain RGB value it tends to lose it if the lighting or the object gets too small in the camera’s depth of field. To overcome this you could search for similar colors. Soulwire has written a sweet Color utility class that can aid you in this endeavor. However, searching for a range of colors will also come with it’s challenges, as the more range of color you search on the tougher it will be to pinpoint the exact object you want to track.
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.
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.
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.
Developed and designed Flash Flickr widget [I hate the word widget] slideshow thingy that pulls a users latest flickrstream photos using the Flickr API.
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.
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.
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
Both are completely run from Flickr. Simply specify the categories you want, tag your photos appropriately, and they will show up on your website in the order you specify.
More customized designs can be obtained for a fee. [see below or Contact me for more information.]
Customization Options:
There are different customization options available. For example, in option 1 you can either have a ’search tags option’ or remove it if you wish. Also, option 1 will allow you to send someone directly to certain photos by adding a simple parameter to the url like this
Base price = $500
Comes with all files, category navigation and instructions on tagging.
