lately ive been fascinated with gif animations that ive seen popping up online which employ tiny colour palettes, mostly just black and white, and use dithering as a technique of creating the appearance of more colours being used then there actually are. in particular ive been enjoying the work of francoise gamma from the computers club net art collective. its a lovely blend of highly detailed 3d animations but then rendered down into a old low-fidelity format you’d more likely see on a old Apple SE/30 then a modern computer.

there are a few different methods for dithering a image, ordered dithering of which has to be my favourite purely for its structured, crosshatch aesthetic. the appeal for the pattern is probably the result of endless hours playing early games like monkey island and space quest and now its permanently etched into my visual cortex.

i put together a ofxDither addon which is now on github. at the moment the addon supports ordered, floyd–steinberg and atkinson dithering algorithms. i had some help from jesús gollonet whos also done some experiments with dithering in openFrameworks. his addon ofxHalftoner is also on github.

the aim while exploring these dithering algorithms was to create 1-bit gif loops, one a day for a week. i got up to four and then some other work got in the way and spoiled the plan but it was good to work on short generative animations instead of usually spending days on trying to create more complex visual effects. ive included the code for these gifs which you can download here. there are three examples which you can swap out in the main.cpp file.

triangle field started as a simple sketch put together in a few hours on a sunday and its been good to see it evolving since. there’s that power of the triangle combined subtle shading that gives the impression of viewing something in 3d. its very simple and visually stunning. originally, i came across andy gilmore’s work on flickr and thought his geometric designs using triangles were beautiful and i couldn’t help to imagine what it would look like in motion. the shading between the triangles had to be smooth for it to maintain the illusion of 3d, so naturally if i ever want to create anything smooth looking or moving, i throw in some of the ol’ perlin noise.

triangle field :: 01 from lukasz on Vimeo.

the app is built in openframeworks, and along the way i wrote some life-hacker addons so i could have more control over the app at run-time with the idea that it will eventually become a live visual tool.

before writing the color picker addon, i would have to go into photoshop, select a colour i liked and manually copy the colour values into my code. you can imagine what a pain in the arse that was and not too mention time consuming. the colour picker is a replica of the mac osx colour picker in the way it looks with a couple extra modes. you can set it to automatically traverse through the colour spectrum – guess this is handy when you want a smooth colour transition to happen over a period of time. also there is a mode for random walk, where its kinda like watching an insect crawl around over the colour spectrum – where ever the inspect walks, the colour changes to its position.

ofxColorPicker

making visuals react to music is a pretty tricky thing to set up. firstly you need to do a fft analysis on the audio and apply windowing so that the lower parts of the spectrum look like they have the same sort of intensity as the higher frequencies. then you want to normalise the data so that values you get back fall between the range of 0 and 1 – this ensures you have the audio data under control.
i have now come to the conclusion that the fft analysis doesn’t have to be super accurate just as long as it looks good and is clear. my code is based on avsys and dave bollinger’s fft octana processing example (more on the OF forum). at the moment, the ofxFFT addon does two useful things, returns the normalised average audio power and returns a manipulated array of audio bands which ive used for distorting the triangle field.

in the openframeworks core (exculding addons) there are two possible ways of receiving audio data, one is from an audio file like an mp3 or wav and the other is through the microphone jack. the methods for getting this data are different but they both return the same type of information, so i created an abstract class called AudioAbstract which both AudioFileSpectrum and AudioLiveSpectrum extend. the idea is to be able to use file audio data and live audio data as if it was the same thing and be able to swap them out at run-time.

ofxFFT

triangle field :: 02 from lukasz on Vimeo.

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.

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.