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.
(Video doc. soon).
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
- 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.
-
preview
An example which shows how to preview the graphics in RGB color space (monitor) before creating the CMYK output (pdf).
-
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.
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.
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
Purpose
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.
Origins
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.
Examples
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.
Future
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:
→ github.com/ertdfgcvb/Brouillard
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 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.
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:
Another Abyss workshop at SUPSI, Lugano.
This workshop was 4 days long with international students.
For more information and source code please read the original Abyss post.
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:
- Extend the SuperCreature class and build your own creature.
- Allowed colors are white with alpha shades. Not a strict rule.
- Each creature must implement the “move()” and “draw()” methods. (see the SuperCreature class for details).
- Transforms should use the pos, rot, sca vectors.
- Animations can be timed with frames or actual time.
- The name of the new creature class is built with the authors initals and the creature name (not an optimal naming convention but it works with 10-20 people).
- The .pde file must have the same name of the class (for example: AGCubus.pde).
- Insert your name, the creature name and the version in the constructor (to do: annotations?).
- Break all rules and build something new.
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:
- Pareidolia
- Symmetry
- Expression (not explored)
- Proportion
- Mirror
- Mask (not explored)
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.
Second electronic typewriter.
Be romantic.
See also this scriptographer project.
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.
