Portland Photographer – Chris Teso


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.

Chris Teso – Portland Photographer



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.

Check out the new site here : http://www.christeso.com.

Permalink: http://www.christeso.com/index.php/portfolio/istream-a-flickr-vimeo-wordpress…

Interactive Motion Detection Installation

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…

Actionscript Sound Visualization with Drawing Api


, 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 Flash Flickr Widget

Developed and designed Flash Flickr widget [I hate the word widget] slideshow thingy that pulls a users latest flickrstream photos using the Flickr API.

[flash /flash/flickrWidget.swf w=280 h=320 mode=1]

Yea, it’s the same thing as over there on the right… but it needed its own post!

If you want one for your blog leave a comment below. I plan to automate that, but for now I’ll take requests.

Permalink: http://www.christeso.com/index.php/lab/flash-flickr-widget/flash-flickr-widget/

Actionscript Aurora Borealis


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…