back on the 1bpp gif trail!
originally i was using noise to warp text in a attempt to make captcha animations until this minimal aesthetic took my fancy. trick was to make the noise field loop on itself and i got there in the end by sampling two positions in the field at different times and blending them together.

horizons is an interactive sound toy for the iPhone + iPad. it is an exploration of colour, sound and form. the design of the piece focuses on creating subtle colour refractions in a rich colour scape using an algorithmic process known as triangulation. fluidity of interaction is achieved using real-time physics made using the box2d library. as always, made in openframeworks.

the project was a collaboration with eli murray (gentleforce) who worked on the amazing sound design. one comment on the app said, “its looks like it sounds” which i really enjoyed and think is a testement to eli’s great work in making the sound so tightly woven around the visuals.

suprisingly the app did really well in the app store seeing as it had no real purpose apart from being a pretty thing to look at and listen to. it made it to the featured section of the app store which needless to say boosted sales significantly and even though it didn’t come near to paying off the amount of effort that went into making it, it was actually nice to get paid for creating art once in a while!

here are some blogs and online publications that featured the horizons app,
http://www.creativeapplications.net/iphone/horizons-iphone-ipad-of/
http://www.lostateminor.com/2010/11/01/horizons-iphone-and-ipad-app/
http://www.desktopmag.com.au/project-wall/horizons/

dusk is an interactive installation exhibited at the underbelly arts festival which draws upon the connections between people, technology and environment. participants engage with tiny creatures of light which respond to movement, flock around to avoid rocks, follow the queen and take refuge in a tree.

ive been doing a bit of work lately with the chaps from angryPixel (scott brown and eli murray) and this has been the first interactive installation we’ve worked on collectively. we all have our own individual skill sets and have been able to contribute to the project in unique and complemantry ways. everything was tied together through the magic of OSC allowing for communication between openFrameworks <=> max msp <=> ableton live.

we had great luck with the space allocated for our installation, a disused warehouse large enough to facilitate a top-down projection. you can see the dimensions in the photo above, with eli included for scale (he is quite tall). there was also a very convenient mezzanine level where we were able to set up our control center and have a good view when testing the projection.

the tracking of people walking around in the space was done using openFrameworks with simple background subtraction + blob detection. the camera we used for the task was a point grey firefly mv with IR pass filter which did a beautiful job of capturing a crisp image with little to none noise.

the input from people walking around was then used to steer a flock of fireflies which flew around the space avoiding people and rocks. there was also a queen firefly which had a love / hate relationship with the rest of the colony. she followed her minions around but would scare them off if she got too close. the position of the queen in the space also controlled the direction of artificial shadows being cast by the rocks and panning of sound through the surround sound system.

the fireflies were also able to take refuge in a tree, backlit by DMX controlled LED lights. the tree would give off a stronger glow depending on how many fireflies were taking refuge in it at the one time.

in the end it was great seeing people chase the fireflies around the space and gang up to heard them into the tree. kids especially took to this activity and i think thats always a good indicator of a success interactive installation… if kids understand and enjoy it then the kid inside of us all will enjoy it too.

over the last week ive been playing around with openFrameworks on the iphone and getting a handle on openGL ES for a work project. its been lots of fun and suprisingly tricky to find decent resources, especially when mapping textures and geo coordinates onto a sphere. ive developed a nice basic example which i think is a good start for anyone tackling an earth application on the iphone using openFrameworks or even working with Objective C.

the example contains code for drawing a sphere in openGL ES and giving it an earth texture which is provided in the source. theres a Trackball class which allows you to intuitively rotate the textured sphere and a CurveHop class which draws a curved ribbon from location to location as it hops along on the surface of the earth. theres a cool little trick you can do in google maps to get the latitude and longitude of any location, so you can add it into the curve hop chain. just search for a location in google maps and copy the following code into your address bar,

javascript:void(prompt(”,gApplication.getMap().getCenter()));

this will bring up a popup with the latitude and longitude of the center of the map.

download the source code.

my two favorite things, abstract geometry and audio reactive visuals.
working on the new beck’s beer site was a treat with a great base design and massive scope for innovation.

i won’t bang on about the creation process but i will say that the cube was modeled using blender, exported as a DAE file, painlessly plugged into papervision and off we went…
if you are new to blender like i was i recommend reading through the manual, its the best place to start and will allow you to tinker and create as you are learning.

had a few days spare towards the end of the project so thought it would be nice to add an audio reactive element to the site. it is the beck’s beer brand and it is heavily associated with electronic music so i reproduced the geometry of the cube segments and added them to a 3d backdrop layer… the space junk fragments float in darkness, illuminated and pushed on by the beat of the music.

still trying to work out what to make open source from this project so if theres anything you’d like me to release, please let me know and ill do my best to post it on here.

on the weekend i started working on my latest piece in processing titled cilindrico collapse. had a good run, getting everything done i had planned to do. main things were, coding the 3D motif which ive named arc bars, and after many painful attempts ive finally worked out how to use pure opengl lights inside a processing sketch. so now i can have all the pretty shapes and colours, with shading!

ive also inculded the ability to export the sketch to a amazingly large proportions using marius watz’s tile saver class. perfect if you want to print your work.

thought id make the source code available now, before it gets messy with experimentation.
you will also need toxiclibs to get it running.
enjoy.

had the opportunity to exhibit the latest dear samantha work at the dark hall exhibition yesterday as part of the glorious undead festival. marcel and bronwyn did a great job transforming the kudos gallery into a forest of digital glow spotted with iridescent installations. the most impressive was a sculptural video installation by daniel kirkwood titled ‘dc city, glistening (a seasonal cycle)‘ using projection mapping, shown in the gif animation above. i’ve seen a lot of projection mapping on the interweb but this was the first time to witness it first hand and it was a real treat.
have to try it out myself very soon.

in short, they allow for intuitive rotation around each axis.
normally if you rotate around one axis and then around another, you get a combination of those two rotations and its not really where you want to be.
quaternions allow to rotate around each axis without effecting the rotation of the other axis, so imagine a orientating a aeroplane model in a 3D flying game…
an aeroplane can be rotated around each axis and these angles are referred to as roll (x-axis), pitch (y-axis) and yaw (z-axis).

roll is then the aeroplane direction moving up and down.
pitch is the aeroplane direction moving left to right.
and yaw is the aeroplane swaying from side to side.

so finally worked out the mathematics behind this by reverse engineering some existing arcball code.
below is the processing implementation done with pure opengl, it is using some handy classes in toxi’s geomutils.

the steps are,
1) work out the rotation vectors around each axis, simply by rotating the vector around an axis.
2) work out the rotation quaternion for each axis, by getting the dot and cross product of each rotation vector from its origin.
3) multiply the rotation quaternions of each axis. – this will give you the overall rotation quaternion.
4) convert the rotation quaternion into a matrix and apply that rotation matrix.
5) draw your aeroplane! done.

[sourcecode language='java']

float DEGTORAD = PI / 180;

Vec3D xrot, yrot, zrot;
Quaternion xrotQuat, yrotQuat, zrotQuat, rotQuat;
Matrix4x4 m;
float angleX, angleY, angleZ;

angleX = angleDegreesX * DEGTORAD;
angleY = angleDegreesY * DEGTORAD;
angleZ = angleDegreesZ * DEGTORAD;

xrot = Vec3D.Z_AXIS.copy().rotateX( angleX );
yrot = Vec3D.X_AXIS.copy().rotateY( angleY );
zrot = Vec3D.X_AXIS.copy().rotateZ( angleZ );

xrotQuat = new Quaternion( 1, new Vec3D( 0, 0, 0 ) );
xrotQuat.set( xrot.dot( Vec3D.Z_AXIS.copy() ), xrot.cross( Vec3D.Z_AXIS.copy() ) );

yrotQuat = new Quaternion( 1, new Vec3D( 0, 0, 0 ) );
yrotQuat.set( yrot.dot( Vec3D.X_AXIS.copy() ), yrot.cross( Vec3D.X_AXIS.copy() ) );

zrotQuat = new Quaternion( 1, new Vec3D( 0, 0, 0 ) );
zrotQuat.set( zrot.dot( Vec3D.X_AXIS.copy() ), zrot.cross( Vec3D.X_AXIS.copy() ) );

rotQuat = xrotQuat.multiply( yrotQuat ).multiply( zrotQuat );
m = rotQuat.getMatrix();

FloatBuffer rotMatrix;
rotMatrix = ByteBuffer.allocateDirect(4 * 4 * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
rotMatrix.put
(
new float[]
{
(float)m.matrix[0][0], (float)m.matrix[0][1], (float)m.matrix[0][2], (float)m.matrix[0][3],
(float)m.matrix[1][0], (float)m.matrix[1][1], (float)m.matrix[1][2], (float)m.matrix[1][3],
(float)m.matrix[2][0], (float)m.matrix[2][1], (float)m.matrix[2][2], (float)m.matrix[2][3],
(float)m.matrix[3][0], (float)m.matrix[3][1], (float)m.matrix[3][2], (float)m.matrix[3][3]
}
);
rotMatrix.flip();

gl.glPushMatrix();

gl.glTranslatef( loc.x, loc.y, loc.z );
gl.glMultMatrixf( rotMatrix );
gl.glTranslatef( -loc.x, -loc.y, -loc.z );

// draw here.

gl.glPopMatrix();

[/sourcecode]

the installation was for our xmas party themed gotham so i thought id put my flocking code to some good use and apply it to some winged rodents… no, to be fair i really like bats… have masses of them flocking over my house each evening to their nightly feeding spots and always enjoy the spectacle.

bats_01 from lukasz on Vimeo.

back to code speak, getting the bats to orientate towards the direction of flight was a tricky exercise in opengl.
in theory all i wanted to do was to rotate the bat around the Y axis (left or right) and around the Z axis (up or down)… easy enough, but that’s not the way it works in opengl. if you rotate the coordinate space around one axis, then all the other axis are also rotated.
with help from flashmonkey the solution was found in using a rotation matrix and a few other vector calculations.
there are probably many ways of arriving at the same result but this is what worked for us.

here is the source
also will need toxi’s geomutils library if you haven’t got it already.

here are some of the results, the first one is using my favourite jelly video that i break out at every occasion.

ribbon jelly from julaps on Vimeo.

this one was using a vj loop of space invaders, strong primary colours and you can see how it creates a completely different texture.

ribbon invaders from julaps on Vimeo.

thought id also share the source and really like to hear from you if you do something cool with it. ive exported the source straight out of eclipse which is my IDE of choice for working with processing, so it might take a few minutes to copy and paste it into the processing IDE but its pretty straight forward.
im also using toxi’s awesome geomutils library which you’ll need to run the sketch.