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 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 ball game. At the end the four teams played a match to conquer the title.
A Processing workshop at Ecal, Lausanne.
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
This example creates a two pages PDF document with CMYK and Spot colors; overprint is also 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. The code is commented.
An example which shows how to preview the graphics in RGB color space (monitor) before creating the CMYK output (pdf).
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.
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.
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
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.
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:
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 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.
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:
- 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 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:
- Expression (not explored)
- 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.
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
Graphics and kinematics
As programming environment we used Processing.
A five days workshop at ECAL, Lausanne.
For my first workshop at the Media & Interaction design unit at ECAL in Lausanne I proposed a simple task to my new students: design a clock.
One of the many stereotypes of Switzerland is the “swiss punctuality” which somehow relates to the history of the swiss watch industry. The broader subject about time and time keeping permits an investigation and an approach in technological, historical, social, conceptual and philosophical domain.
I also came across of some of Yugo Nakamuras beautiful “Clock experiments” (Clockblock and Industrious Clock) and thought that the kinetic nature of the object but also it’s implicit simplicity made it a perfect subject to explore with the students.
Some interesting projects from the web:
a study of time
time twister (LEGO)
This Time Around
a dot for every second
swatch beat 2
verbal conversation clock
the clock clock by humans since 1982
qr code clock
south watergate clock