Category Archives: Code

A Quick Recap – Part 1

So I guess i’ll finally get this started.

The last year has been pretty wild. We’ve moved into the new office at LBi exactly one year ago and it has felt like a whole new job.

But right before we moved, I actually had some fun in the penthouse at the Puck Building with the rest of the tech team. Paolo (boss man) gave us a couple weeks to play with a few Kinects and see what we could come up with. Being a flash dev i’d never played much with any other languages so it was fun/insane diving right into C/C++.

Hole in the Wall

I ended up figuring out the basics of OpenFrameworks and understanding enough of the API and beta kinect drivers to get a couple demos together. I first figured out how to use OpenCV to grab my outline from the kinect data, then figured out how to interact with a simple game mechanic.

I don’t have any footage of the final product, but it had an awesome title board and some sweet music courtesy of Mega Man 2. People had a ton of fun with it at beer fridge.

Smack My Pidge Up

Playing with the Kinect was fun so I kept up with it after we moved into the new building. This is about when I got sick of C++ and moved over to Java and, more importantly at the time, Processing. Processing/Java had a few super solid Kinect libraries that let me prototype and play a bunch, and soon I was tasked with ‘make something cool for internet week/webbys’.

With a two week timeline and breaking balls to find a budget, I built Smack My Pidge Up, a simple game/twitter wall installation that was displayed at Internet Week in NYC. Here’s the making of video, and you can find the source here – altho it is a pain to install due to the random experimental NITE builds I was using at the time.

Here’s a couple videos of the project as it grew: test 1, test 2, test 3, test 4.

Best of all? Smack My Pidge Up was a finalist for an award at SXSW! I was super proud of my work, and much props to Julie for designing it last minute with the help of Andy and Martine to realize it on 20 foot projector screens that looked super dope. A lot of stress but a ton of fun.

More posts to come (very) soon!

First Processing Test – updated!

Now, with interactivity! 🙂

Click on the image to start the applet, and then move the mouse around to interact with the circles. You might have to click and drag around to get it working the first time. I switched from sphere to ellipse solely so I could add many more connections and still smooth the lines without taking a hit in framerate. So much fun! Lemme know what you think! Hit me up – @trippedout.

[processing width=”545″ height=”500″ file=”” method=”onclick”][/processing]

Also (somewhat ridiculously) simple source can be found here!

Finally some free time… Processing!

Two posts in a week(ish)? ASTONISHING.

Last night I had some free time to see what all the fuss my coworkers were making about Processing and I’m glad I did. Essentially, processing makes programmatic ‘sketching’ a rather simple task. The reference guides and tutorials are great, and the code is super easy to follow. And ever since I saw Jared Tarbell speak at Geeky By Nature, I’ve been dying to play around. So obviously, this was inspired by browsing his site whenever I got a chance for the last couple weeks. Eventually I promise I’ll make something cool to call my own. I want to turn this into something fun and interactive for my company’s new office.

Click on the image to start the applet, and then click again to reset the spheres. Lemme know what you think! Hit me up – @trippedout.

[processing width=”545″ height=”500″ file=”” method=”onclick”][/processing]

(Ridiculously) Simple source can be found here.

Animate any Quadratic BezierLine with me

Wow, it’s been a while. Regardless, let’s get right into it shall we?

So, my code sucks, so feel free to let me know what I could do better, but made this simple class for a project I’m working on now. Hit me up on twitter (@trippedout) if you have any questions.

Fairly simple – pass it two anchor points and two control points, optional threshold and linestyle objects (feel free to change). Threshold controls the amount of times a line is broken down into smaller segs if you’re animating your line quickly and it isn’t smooth enough (smaller is smoother).

Use your favorite tweening engine to tween the ‘time’ attribute and shazam – animated quad beziers!

[cc lang=”php” width=”545″]
var bezLine:BezierLine = new BezierLine( anchor1, control1, control2, anchor2 );
addChild( bezLine ) bezLine, .35, { time:1, ease:Cubic.easeOut } );

[cc lang=”php” width=”545″]
package utils
import flash.display.Shape;
import flash.geom.Point;

public class BezierLine extends Shape
private var _time :Number = 0;
private var _prevTime :Number = 0;
private var _threshold :Number;
private var _frozen :Boolean = true;

private var anchor1 :Point;
private var anchor2 :Point;
private var control1 :Point;
private var control2 :Point;

private var _lineStyle :Object = { thickness:2, color:0xffffff, alpha:.35 };

public function BezierLine( $anchor1:Point, $control1:Point, $control2:Point, $anchor2:Point, $threshold:Number = .025, $lineStyle:Object = null )
anchor1 = $anchor1;
anchor2 = $anchor2;
control1 = $control1;
control2 = $control2;

_threshold = $threshold;

if( $lineStyle ) $lineStyle.thickness, $lineStyle.color, $lineStyle.alpha );
else _lineStyle.thickness, _lineStyle.color, _lineStyle.alpha ); anchor1.x, anchor1.y );

private function updateLine():void
if( _frozen ) return;

var len:int = 1, i:int, dif:Number,
posx:Number, posy:Number, u:Number;

if( _time < 1 ) { dif = _time - _prevTime; //check to see if the difference between last frame and this is under //the threshold, if it is, change the length of the for loop for //how many segments the current line will be broken in to if( dif > _threshold ) len = Math.ceil( dif / _threshold );

for( i = 0; i < len; ++i ) { //if on last loop (or first of len=1) set to time, else //increment thru the time by the threshold amount, making smoother lines if( i == len - 1 ) u = _time; else u = _prevTime + ( i * _threshold ); //draw lines based on posx = Math.pow(u,3)*(anchor2.x+3*(control1.x-control2.x)-anchor1.x) +3*Math.pow(u,2)*(anchor1.x-2*control1.x+control2.x) +3*u*(control1.x-anchor1.x)+anchor1.x; posy = Math.pow(u,3)*(anchor2.y+3*(control1.y-control2.y)-anchor1.y) +3*Math.pow(u,2)*(anchor1.y-2*control1.y+control2.y) +3*u*(control1.y-anchor1.y)+anchor1.y;,posy); } } else,anchor2.y); _prevTime = _time; } public function clear():void { _frozen = true;; } public function get time():Number { return _time; } /** * Tween this value from 0-1 to animate the line in and out. */ public function set time(value:Number):void { _time = value; _frozen = false; updateLine(); } } } [/cc] Be sure to leave a comment if you have any questions/ideas/tell me i suck!