A realtime visual for Rocky Wood’s new single.
Watch it here:
Rocky Wood: Blind Hawaii
or just get the screen capture.

The idea was to contrast the warm voice of the singer with some cold geometric compositions.
In the beginning I built-in many features like webcam interaction, a micro video manager, a polymorphic tile manager, color blending/compositing, etc. but took out almost everything for the final release due to a rush moment in which I hadn’t time to manage the complexity of the compositions. The result is a song and some visuals which feel quite disconnected except for some moments, maybe.
In any case I wanted to build a tile system since playing Blood Money as a kid.
And of course Enzo Mari has a role in all this.

A cover for the new Novoline 7” and a micro site-for preorders with a video clip.
Watch the realtime video:
Novoline: Regress (Dichotomy (Freccia))
or the screen capture.

While designing the cover I was asked to leave a tiny white area somewhere on the back-cover to write the edition number from one to one-hundred, by hand.
Instead of putting just an empty square I started thinking about 100 tiny dots to black-out with a pencil, or some LCD like system to hand-color. Eventually this small aspect became the main idea for the cover which now hosts a big two-digits number.
The grid used to design the initial numbers became also the base for a whole character-set used in the animation.
Two versions of the characters were created: an obvious-one, a bit squared, and a more diversified-one with letters of different heights. I decided to use the squared one (less interesting in individual characters) because it worked better when used in the animation layout.
I wanted the animation to use all the available space (window or screen) and be independent from the aspect-ratio.
The animation is driven by a small JavaScript program and rendered on a html canvas; it consists of a grid of characters in motion.
Each letter has a few attributes like color, weight, position, rotation, etc. Some of those attributes get the values out of a small texture (a tiny off-screen canvas) which simplifies the animation and pattern creation process.
To create the airport-display-like animations strings are composed out of repeated character sequences which then build patterns and rhythms.
Randomness is part of Novoline’s process of creating music, so it became part of the clip too: specific cue points release more and more features which are then randomized: character rotation jumps in only after the first minute, stroke weight, colors and other patterns come afterwards.
A few hours were invested to build a small JavaScript cue point editor which permitted to adjust those timings on the fly. Sometimes I suspect that I spend more time to build the tools for a project than the project itself. I see them as alibis for my postponements.
Novoline 7”
by dasandereselbst.org




The tool used to create the image of a special edition of the The Puddle.
This edition of The Puddle will happen in Basel during the Art Basel week. All the 13 Puddle posters and three new T-shirts will be exhibited at the Platfon record store. Later the concerts will be held at Oslo 10 with custom Puddle visuals.
Silver screen printed on ultramarine blue paper.
Designed with Sidi Vanetti.
Built with Processing.
















A Processing workshop at Ecal, Lausanne.
During this one week workshop with the first year students a multiplayer game was built. Each student could program its own player and a related controller. The controllers were easily customizable HTML5 multitouch applications which connected to the game via web-socket. After the first day of experimentation, in which we quickly implemented a simple one-button catch-the-flag game, each group proposed a game type: several very interesting ideas came up but finally we decided to implement a socker-like ball game. At the end of the workshop it was time for the final match: the four teams played to conquer the title. It was interesting to note that the designs of the players (classes) revealed their potential during the team play: some shapes and behaviors were perfect for defense play, others were perfect for attack, while others added more a diturbing factor to the opposite (and sometimes to the own) team.


The tool used to create the image for the March edition of the Puddle flyer.
This edition of The Puddle, as edition 10 (May 2012), is not perfectly legal so the flyer is printed white on white, as opposed to the May edition which was black on black. In both cases the pattern is less detailed.
Designed with Sidi Vanetti.
Built with Processing.










A three days workshop in Paris.
In this intermediate workshop at Processing Paris 2013 I wanted again build a common project with the participants. Everybody could build a “scene” which would then be thrown into the “wormhole”… The idea was to build a visual system where it would be possible to swicth from one scene to the other by moving a camera in 3d space. Each scene could eventually be controlled over the network from the authors computer with a custom controller. The end result looked more like a colorful version of The Abyss with multiple instances of different smaller objects instead of more complex scenes. The controller part was also dropped because of time running out.



A workshop about networking at Ecal, Lausanne.
In groups, students were ask to build an audio sequencer distributed over several machines. After one week many interesting concepts (and implementations) came out.
See also computer-orchestra.com


A few examples that demonstrate the use of a slightly modified Processing PGraphicsPDF class which permits, among a few other things, to set colors in CMYK space.
This class was used used at a Resonate.io workshop in Belgrade, 2013

Download from github
View on github

  1. cmyk
    This example creates a four pages pdf document with CMYK and spot colors; overprint is demonstrated on page two. To preview the overprint you may need to print the document or to open it with software that allows overprint preview. Gradients are on page three and four.
    See comments in code for more details.

  2. preview
    An example which shows how to preview the graphics in RGB color space (monitor) before creating the CMYK output (pdf).


  3. template
    This example loads an existing PDF file and uses it as a template to create a series of business cards, each with a slightly different form. The output file is ready for (offset) print.


Posters and flyers for The Puddle, live electronic music and dj sets around 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 April edition of the Puddle flyer.
Designed with Sidi Vanetti.
Built with Processing.
























Some animated imagery for Kenzo’s new blog and website.
Five interactive headers and a customizable greetings card based on a fur pattern.
(Click on the images to play with the interactive versions).


A workshop about boxes.
In this workshop for the first and third year et Ecal I asked the students to build a (virtual, metaphorical or physical) box. A secret way to open the box had to be implemented. The subject was inspired by “trick boxes” (few examples here and here). It’s always a good exercise in communication design to build a trap or a trick as it involves the complete understanding of effectively communicating real and fake intentions.


A workshop about (almost) 3d.
Learning to program in three dimensional space is quite hard for the geometry and the transforms involved. In this workshop we explored several ways to simplify the approach in 3d space: we used depth maps, parallax techniques, fake 3d, slicing and curve levels to create new dimensions.



Live visual for “Il Domani” — The Tomorrow.
People could upload tagged pictures to instagram and see them displayed in the projection.
Made with Processing in an afternoon rush.

An animated alphabet.
This quite simple program permits to display image sequences associated to keystrokes. The program scans folders searching for sequences. It permits – but is not limited to – building animated alphabets, hence the name.
It was built many years ago for a quick two days workshop with beginner graphic designers at SUPSI, Lugano. It was rewritten from AS3 with cinder for best loading and playback performance.

Download the (far from perfect!) source and the binary for OS X and start building your own animated font.
Additional infos and special keystrokes in readme.txt

The tool used to create the image for the May edition of the Puddle flyer.
This edition will be held in a secret place. Black ink on black paper.
Designed with Sidi Vanetti.
Built with Processing.

A Processing workshop about fog.
Built and created for a workshop with 1st and 3rd year students at ECAL, Lausanne and refined with beginner students at ProcessingParis 2012, Paris

This quite simple program was built and used during a Processing workshop at ECAL with the third year and first year students. Programming neofites could build an image-scape just by adding textures to the program, displaying them in a 3D space and travel trough with a camera. Some basic camera movement is implemented and also some basic input (mouse and keyboard). The participants could customize the whole program, in particular the controls and the camera movement but also add some extra objects (for example 3d meshes) by extending the main Form class. The workshop was also repeated at ProcessingParis. It works well with beginners as they can focus on image and narrative. expert programmers can take the whole to a next level and build more complex experiences.

The idea was inspired
by Bruno Munari’s book “Nella Nebbia di Milano”
and by Disneys MultiPlane Camera.
See also the “Plexigram” series by John Cage
and Norman McLarnes C’est l’aviron.

Five basic example landscapes are included with the sketch;
press keys from 1 to 5 to switch from one to another.
check the keyPressed() method for more mapped keys.

Works only with Processing 1.5 (OpenGL fog functions)
A port to Processing 2.0 is planned
A WebGL port is also planned (maybe)
An interesting “accident” happened with James Paterson’s animations (contained in a Processing example) which we used as a demo sequence for animated textures – see example 4 below. I would like to explore this a bit more.

Feel free to use the concept and code for your own workshops or lectures:


The tool used to create the image for the April edition of the Puddle flyer.
Built with Processing and initially inspired by an engraving of Albers.
Designed with Sidi Vanetti.

Just a new video for an old project (as suggested by someone).
A permanent kinetic installation at the Administrative Building in Locarno, Switzerland.
The display measures 550✕120cm and is made of 112 moving elements with 62 screen-printed sheets each.
Every 15 minutes the composition changes with an animated transition. To achieve a dynamic effect the colors have been reduced to three.
On the upper-right side of the display one element is not working properly. It has been replaced.
2007, Gysin-Vanetti (Temporarly hosted here as our site is not up to date).

Minisite for the Puddle.
A quick job and a nice occasion to play a bit with the html canvas.
See what’s on at thepuddle.ch

A tiny JavaScript library to display fullscreen image sequences in the browser.
To keep the library light and simple there are actually 5 different versions
of it plus a benchmark test. They were built to test speed and will eventually
be dropped in future versions in favor of a single one.
The library consists of five files:

  1. sequencer.bg.js
    Displays the images as the body background. The images are stretched with
    the CSS “auto”, “cover” and “contain” modes.
    I didn’t find a way to pass an image object to the CSS background so this
    version relies heavily on the browser’s cache.
    Launch in a new window
  2. sequencer.div.js
    Displays the images as a stack of divs hiding and showing the corresponding
    layer. This version relies a bit on the browser cache, but once loaded
    the images are stored as a div background.
    Launch in a new window
  3. sequencer.canvas.js
    Displays the images on a canvas object the size of the browser window.
    The images are preloaded and then stretched and cropped on the canvas.
    Launch in a new window
  4. sequencer.canvas2.js
    Displays the images on a canvas object the size of the first loaded image.
    The canvas is then stretched and positioned correctly via css.
    Launch in a new window
  5. sequencer.canvas.async.js
    Loads the sequence asynchronously.
    It’s a messy work in progress right now, but loading times are 4-5 times faster.
    This will eventually become the final version.
    Launch in a new window
  6. sequencer.benchmark.js
    Image sequencer benchmark.
    Not sure if this is reliable: it looks as though some browsers skip frames
    to keep up with the interval event.

Best results so far on OS X are on Safari with the canvas version.
Firefox is very fast (99.8 fps!) with canvas on small windows sizes (smaller than 1000px wide); becomes very slow with bigger windows. It’s also slow with the background & div versions; slow DOM-manipulation I guess.
Chrome and Opera are surprisingly slow with both the canvas versions.

Some examples using Sequencer:
Stopmotion Experiments 1
Stopmotion Experiments 2

Download from github
View on github

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.



Paint a ball.
Canvas version of the 2006 program which was written in Lingo.
Also a first test of the excellent and lightweight Three.js Javascript 3D Engine.
Play little Buckminster Fuller and build your own ball.


First T-shirt series for the Puddle.
Silkscreen print.
Sold out.

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:

New website for Studio d’Architettura Martino Pedrozzi.
Visit pedrozzi.com.
Designed with Sidi Vanetti.