Posters and flyers for The Puddle, live electronic music and DJs at Stall 6, Zürich.
Processing was used for the production of the rasters.
Screen print on colored paper.
“The Puddle” was named by Elia Buletti, genius and poet.
Designed with Sidi Vanetti.
The tool used to create the image for the February edition of the Puddle flyer.
Built with Processing and inspired by the wooden parquet floor of the flat in Berlin I’m living in right now.
Designed with Sidi Vanetti.
Live visual for “Il Domani” — The Tomorrow.
People had access to a Monome and could draw their own shapes.
Written in an 8h rush, this version is still lacking the foreseen beat detection and a decent color management.
The last two columns of the Monome have been sacrificed for the interface: by pressing the buttons in the last column it was possible to choose the actual form, save the whole shape or eventually discard it. The second-last column was just turned off to designate a separation from the “draw area” and the “tools area”.
Thanks to @cyphunk for lending me his precious.
Below a little Processing snippet to add OpenGL fog to the scene (works on 1.5):
import java.nio.FloatBuffer;
import javax.media.opengl.GL;
import processing.opengl.*;
public void setup() {
size(1280, 720, OPENGL);
hint(DISABLE_DEPTH_SORT);
hint(DISABLE_OPENGL_ERROR_REPORT);
hint(ENABLE_OPENGL_4X_SMOOTH);
frameRate(100);
fog(100, 1200, 0.25f, color(0)); //just put the fog in the setup
}
public void draw() {
background(0); //same color of the fog
lights();
translate(width/2, height/2, -500);
rotateX(frameCount*0.011f);
rotateY(frameCount*0.012f);
rotateZ(frameCount*0.013f);
noStroke();
fill(255);
box(300,500,700);
}
void fog(float near, float far, float density, int col) {
float[] fogColor = new float[4];
fogColor[0] = (col >> 16 & 0xFF) / 255.0f; //R
fogColor[1] = (col >> 8 & 0xFF) / 255.0f; //G
fogColor[2] = (col & 0xFF) / 255.0f; //B
fogColor[3] = 1.0f; //A
PGraphicsOpenGL pgl = (PGraphicsOpenGL) g;
GL gl = pgl.beginGL();
gl.glEnable(GL.GL_FOG);
// gl.glFogi (GL.GL_FOG_MODE, GL.GL_EXP); // exp2 FOG
gl.glFogi(GL.GL_FOG_MODE, GL.GL_LINEAR); // Linear FOG
gl.glFogf(GL.GL_FOG_START, near);
gl.glFogf(GL.GL_FOG_END, far);
gl.glFogfv(GL.GL_FOG_COLOR, FloatBuffer.wrap(fogColor));
gl.glFogf(GL.GL_FOG_DENSITY, density);
gl.glHint(GL.GL_FOG_HINT, GL.GL_NICEST);
pgl.endGL();
}
The tool used to create the image for the August edition of the Puddle flyer.
Built with Processing and inspired by the chess game.
After all the tests we did the final image was built by hand (adapted from a real game).
In the editor (below): knight trails.
Designed with Sidi Vanetti.
An (attempt of an) interactive particle system based music video.
Peter Kernel asked me to build an interactive video for their upcoming album.
I was really tempted to write the program in JavaScript (Canvas or WebGL) but I didn’t feel agile enough to deliver in a very short time so I decided to build it up with Processing and to depoly it via the crippled Java plugin (a decision which I now regret, for the plugin part—not Processing!).
And yes: sound and Java always sucked.
But I didn’t think so badly.
I had so many problems by embedding the fullscreen applet on different browsers and platforms without dramatic frame-rate drops and sound hick-ups that at the end I decided to abandon the project without any time left for a new one. We (the band and I) also felt that the whole project didn’t really take off, so any extra effort to make it run seemed useless. Sorry guys.
Anyway: it was fun to rewrite the particle engine I was working on and to test different behaviors and colorings. I tried to overcome the “organic” feel of force driven systems with grid snapping and other “smart” distribution rules.
It was interesting to sync the animation to the sound. I also tried to sync videos with a constant framerate to the main system: it worked quite well but later I abandoned the whole idea of working with video feeds.
The main idea was to visualize the word-lists in the song but I didn’t want to introduce a font directly into the scene so it was kind of obvious to form words with the particles… as in any dot-matrix display.
Oh and the particles: simple (bitmap-cached) circles. I tried different shapes and always came back to a plain circle. But in a moment I tested with donut kind of shapes and the result was simple but interesting:
The only part where I had time to implement the sum of those shapes was in the beginning sequence.
The choreography is unfinished (especially at the end), the color-scheme is inaccurate, the mouse interaction is kind of dull, and there is (or was) still work to do but you can enjoy my failure by watching the captured frames on Vimeo if you feel brave enough:
A simple, easy to implement and very fast particle system.
Old school effects built on the two days workshop at Processing Paris 2011 with Hartmut Bohnacker.
Click images for Vimeo video.
A workshop about interaction.
After last year’s One Button Workshop (with mouse-hacking) we tried a new approach with very constrained interaction: “design a game with zero buttons”. Good projects emerged featuring audio input, accelerometer (both: from iPhone or the computer itself), mouse and multiple-mice, analog-sticks, trackpads, cameras, etc.
Focus was on interaction so the first two days were used to experiment with different input devices and on how to smooth noisy signals (for example data coming from accelerometer inputs).
Very handy came AccSim for iPhone-computer communication.
The tool used to create the image for the March edition of the Puddle flyer.
Built with Processing and a modified version of Toxi’s cp5magic.
Try the applet version of the Puddle Builder 03 (PDF export is disabled).
A Processing workshop about polymorphism and reflection.
The idea behind The Abyss project was to build a system and then let everyone contribute, with a good balance between individual and collaborative work.
Students could build new creatures or expand features of the abyss itself. For beginners it was easy enough to contribute with a basic creature, more advanced students could train their graphic skills or even build creatures which interacted with other creatures.
After several requests I decided to publish the (far from perfect) source code of The Abyss.
I left a few of my own example creatures but student’s creatures are not included as I didn’t ask their permission to publish the code.
Feel free to use the concept and code for your own workshops or lectures or contribute with your own leviathan on github:
github.com/ertdfgcvb/TheAbyss
Rules:
During a workshop in december 2010, students of the 1st and 3rd year at ECAL in Lausanne learned how to create and then extended a generic “SuperCreature” class. A creature manager took care of the creatures (via Java reflection) and added them to The Abyss. 52 different types of creatures populated the deep waters at the end of the five days workshop.
A quick fullscreen-physics test with the excellent Fisica JBox2D wrapper.
Enjoy joy.
Press ‘1’ for some options.
.
A five days workshop at doc:LAB in Istanbul.
“In how many ways and with what techniques can one produce variations on the human faces seen from the front? The graphic designer works without set limits and without rejecting any possible combinations and methods in order to arrive at the precise image he needs for the job in hand, and no other.
Looking at the technique of the past we notice that a human face made in mosaic has a different structure from one painted on the wall, drawn in chiaroscuro, carved in stone, and so on.
The features—eyes, nose and mouth—are ‘structured’ differently. In the same way if one is thinking of making a face out of glass, wire, folded paper, woven straw, inflatable rubber, strips of woods, plastic, fiberglass, or wire netting.
The relationship between the features will have to be adapted to each material.”
in Bruno Munari, Arte come mestiere, 1966
(english version, Design as Art, Penguin Books)
For the first three days we (Alain Bellet from ECAL and me) used processing to build some very basic (almost trivial) tools to cover a set of six topics we identified around the human face:
In the last two days students were then asked to explore one of the subjects and to develop a personal project around it.
For more images and an overview of the five workshops held visit doc:LAB’s blog.
Fresh out of print the new book for the Museo Cantonale d’Arte of the “Sguardi” series.
Every book features works from the collection of the museum.
The semi-irregular background patterns are generated with the aid of Processing.
2 colors offset print on colored paper.
With Sidi Vanetti.
Second edition of the Race! workshop. This time for three days in a beautiful villa in Vico-Morcote over the lake.
Thanks to all the participants, to MAInD for the organisation, to Renato and Serena.
Race! was a five days programming workshop at ECAL in Lausanne.
I asked the students to develop a race game. A video-game is a very good subject if you want to experiment with interaction, but I was scared about the complexity even a basic a.i. system could achieve. So the game had to be for two (or more) players, this simplified the code a lot and it also was a lot more fun.
I also didn’t want the students to invest too much time in developing graphics, sceneries, backdrops: we used real objects/architecture as “levels” and simply mapped the software around it. This approach is very fast and can produce some interesting concepts.
Technical aspects touched:
Input devices (joypads, keyboard, microphone, etc)
Video projection and mapping
Interactivity
Graphics and kinematics
As programming environment we used Processing.
Stage design for a piece written for children with one actor. The whole set had to fit in a car: 17 foldable cardboard boxes, a 5000 ansi-lumen projector, a laptop, clothes and a chair.
The software is written in processing and features 15 different realtime animated scenes with different transitions that are mapped on the boxes. Mapping settings can be stored on a text file and managed trough an integrated editor.
First of the electronic typewriter series.
Become hollywoodian with Kong.
Technical notes: the applet is embedded with Sun’s deployJava.js and is made with processing.
Series of 4 posters and event-programs. The motive of the first poster is inspired by—and is a hommage to—Nobuo Nakagaki’s experimental digital map of Africa.
The patterns are computed with Processing.
3 colors offset print, versions for A0 and A4.
With Sidi Vanetti.
A lot of black worms.
They are part of your life.
Once loaded press any key for slow-as-hell-anti-aliased graphics.
About me and my dumb face (of 2004).
Simply enjoying the smooth embedding of Processing applets via deployJava.js…
Come and play with me.
