Puddle Builder 12

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.

The Puddle

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.

Kenzo

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).

Antoine Déprez

A quick and small website for my neighbor and illustrateur extraordinaire.
Easter-egg: press ‘g’ to display the underlying grid.
Visit antoinedeprez.com

Puddle Builder 10

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.

Puddle Builder 09

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.

The Puddle

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

Sequencer

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

Puddle Builder 07

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.

Puddle Tees

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

Puddle Builder 06

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.

Studio Pedrozzi

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

Puddle Builder 05

The new tool used to create the image for the May edition of the Puddle flyer.
Built with Processing and Toxi’s Voronoi class (part of the huge toxiclibs compilation).
To avoid the usual organic feel of the Voronoi diagrams we decided to snap the points to a grid; we intentionally left some little asymmetries, tough.
The final results reminds me of some afghan carpet designs.
Designed with Sidi Vanetti.

Puddle Builder 03

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).

Civimatic

The new 2010 edition of Civimatic has just been published.
Civimatic outlines, in form of graphs, the mechanism of swiss civics.
The view-detail can be adjusted as the amount of information for each node.
More than 100 diagrams on three levels (federal, cantonal and municipal) are featured.
The project has been commissioned by the swiss-italian government.
With Sidi Vanetti.
Order a cd-rom copy (italian only): www.ti.ch/civica

Wish

Website for the Workshops on International Social Housing of the Accademia di Architettura, Mendrisio
The site was designed in 2003 and is updated since then once a year with the workshop description and results.
Each year fits in one huge page. The background colors are derived from the colors of the actual nation’s flag.
Visit wish.arch.unisi.ch.

Processing book–covers

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.

Studio Vacchini

New website for Studio di Architettura Vacchini.
Founder of the studio was architect Livio Vacchini but the studio is now ruled by his daughter Eloisa and the former team.
The site features thirty-six projects and complete bibliography and project lists.
With Sidi Vanetti.
Visit: studiovacchini.ch

Un vero amico

A website for a campaign which aims to protect the ears of the youngsters.
Visit: unveroamico.ch

C’era due volte una nonna

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.

Mae

A website for swiss-belt-manufacturer mae.
I wanted to display the feel of the exclusive fabric by reproducing the belts in actual size.
If you lost some weight order a new belt at maemade.ch.

Processing flyers

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.

EBSCO visual-search prototypes

I was asked to create two prototypes to graphically display the search results of the powerful EBSCOhost online research databases.

“Blocks” prototype:








“Columns” prototype:

VW Golf

The idea of the dashed trace left by the the car has made it trough for the launch campaign of a new VW Golf in Brazil.
The website opened with a 3d interactive animation, featuring a Golf and, of course, the black dashes.
Drive a non-polluting VW Golf.

Stopmotion experiments

Proof of concept for a series of 360° stopmotion animations for an interactive exhibition-installation.
Several very little archeological objetcs and jewels where physically showcased at the exhibition. A huge projection on a wall acted as a magnifying glass: users could select an object and observe it at different angles. The final objects where still photographed on the same turntable but with better lights and camera.
Below some toy prototypes with 75 frames each, realized in 2006 for theredbox
protog1
protog2
protog3
protog4
protog5
protog6
protog7

Homedrive

A mini-racing game developed for Radix. Features 9 levels, lo-fi vector graphics and a global high-score table.
Written in Lingo and published as a bonus for a “don’t drink&drive” campaign.
The name of the game was inspired by a computer virus.