I recently got a tweet from a Processing student asking me if I could tell a little bit about myself.

So this is my little Vita, with a focus on how I got into Processing and Computational Craft…

«House of Cards» by Charles and Ray Eames

When I was a kid I spend a lot of time on my own, because my dad was busy being a mathematician and my mom was busy with self-realization following some kind of late 1970s hippie movement.

I grew up playing a lot with LEGO: I could sit for hours building things, that my older brother would then destroy with great pleasure within seconds.

Another childhood toy that I loved very much were slotted cards. Those are basically playing cards with slots on the sides, that can be arranged into all kinds of architectural structures. I recently found out that this toy was created by Charles and Ray Eames, the work of whom I only learned to admire much later.

My parents' style of education was really very anti-authoritarian. I loved to find out things for my self, and even as a grown-up I am mostly self-taught. When I went to school, I was very excited about all the things you could learn, but the teachers got often very angry about the kind of questions I asked.

School can be a little bit boring at times, but I somehow managed to survive spending most of the time drawing doodles on the borders of my notebooks.

I started to like the doodling, and once I finished school, I thought I'd like to become a graphic designer. I created a portfolio with drawings of couples engaging in Tantra-like activities on different types of gymnastic apparatus, such as parallel bars, still rings and the pommel horse. The second part of the portfolio were computer graphics that I had created in Corel Draw.

My application was rejected based on the explanation that my drawings were “adolescent daubery” and that computer drawings are rubbish by definition because you can't see if their creator has any real talent.

Since this didn't work out as planned, I decided to study Media-Technology carried by the hope to somehow conciliate my passions for graphic design and computers. I was very much influenced by Artificial Intelligence and was obsessed by the idea of creating imagery and decorative arts with the computer.

«Borderbuilder» – top and bottom border mode

One thing that I did in school with an early version of Corel-Draw was an ornamental Border-Generator. I was – and still am – deeply impressed by the beauty featured in «The Grammar of Ornament» by Owen Jones.

When I was a student I thought it would be fantastic if websites featured borders that would automatically adapt to the dimensions of the screen. So I created a flexible Border-generator back in 1999 using Javascript and dynamic HTML, effectively creating my first online generative work.

I also created what I called the «Text und Bild Explorer» or simply the «TUBE» – a web page, that would generate drawings using Postscript. The Interface would let you change parameters using menus and a server-side perl-script replaced variables inside the postscript code, rendered it to PDF, and displayed the result in the browser.

You have to know that Postscript is really a fully fledged computer language that is used inside printers and has been a great inspiration to the Processing language. But even though Ben Fry and Chris Reas released the first Version of Processing as early as 2001, I really only got into Processing about 8 years later…

A tool for Interactive Evolutionary Design

In 1999 I realized that Media-Technology was all about Tech, and not as much about human perception as I would have liked. So I also picked up studying Cognitive Science.

I was very fascinated by harnessing natural processes, such as evolution and neural computation for computational design. I created a plugin for a 3D modeling system, that would enable automatic and interactive breeding of transformations for 3D shapes. My biggest inspiration was the thesis of Christian Jacob and the work of Peter Bentley on Evolutionary Design. Both have since published excellent books on those topics, which I highly recommend.

First «rule 110» garment. Model: Sarah Flannery

While studying Cognitive Science, I somehow stumbled upon a course on machine knitting with home knitting machines. Suddenly I realized that there was a possibility to create evolutionary design, that would be available in a world outside the computer, a world that could be accessible to people like my grand-mother, and not just computer-geeks like me.

Then in 2002, I started using Cellular Automata to create patterns on my knitting machine. I presented them at the first «New Kind of Science» workshop in Boston, a workshop that was held by Stephen Wolfram, to promote his idea of a New Kind of Science, based on his book.

To me Wolfram's Book was really just an endless source of knitting patterns, and In my mind a world of Knitting Automata unfolded. I started to wonder if I was alone with my crafty obsession, and started «k2g2» an online community for Knitting Knerds and Geek Girls.

K2g2 turned into a wiki with a craftopedia and a video blog of its own. But even though a couple of people contributed over time, it never really took off, the way I always hoped it would.

In the meantime I was dreaming of a platform allowing people to evolve their own clothes and patterns, using modules that would transform simple patterns into ever more and more complex ones. I knew that those modules had to be programmable using some kind of language that was easily accessible to designers. And this was when I discovered Processing.

My sketches at OpenProcessing.org

I first tried Processing in 2009 and discovered, that even though it is loaded with all the ugliness and awkwardness that is known as «Java», it is really good at keeping the ugly parts hidden away.

I got sucked into the Processing cosmos and found a new home in the OpenProcessing community. I uploaded a couple of sketches and got amazing feedback. People seemed to like what I did, and this felt really good.

When I joined the OpenProcessing community there was a tiny sketch competition that was about getting as much as possible out of 200 chars of code. This was really a good way, to get to know Processing inside out. I loved the spirit; it was both competitive and cooperative at the same time.

But I also love to create sketches that are almost application-like. Little universes, that let the user explore a complex parameter space, using only the mouse and the keyboard. In the beginning I expected the lack of a user interface with buttons and menus to be a show stopper, but I think it really helps to keep the sketch focused, keeping everything clean and simple.

When I began to use Processing, I started the «bit.craft» blog. The original idea was to create little experiments in computational craft, publish them on OpenProcessing, and then write about those on this very blog.

I must admit that I got side-tracked by all kinds of projects, both private and professional. And there was not too much feedback on this blog either, apart from the usual spam-bots. So if there is anyone out there, who cares about computational craft:

Please drop me a line in the comments, and I will promise to share my crafty experiments with all of you!

I recently had the pleasure to collaborate with media artist Ursula Damm on a project called Transits that uses neural networks implemented as OpenGL fragment shaders for generative video processing. The artwork is currently shown in the Sensing Place Exhibition in Basel.

Since Transits is only remotly related to my explorations in computational craft, I decided to host it over at Perceptify.com.

You can now find the Transits Interview on the NeuroVision Page

Identicons are those little icons that are used in forums and blogs to visually identify the persons posting in a discussion thread.

There are services such as Gravatar that allow you to use your own icon across websites, and some sites use a generative process to create identicons for those who don't have one.

Some time ago I designed generative identicons called stitchies, that combine high information density with the simplistic beauty of hungarian cross-stitch patterns. So here are a couple of stitchies generated from the periodic table of elements:

Periodic Table of Stitchies

If every chemical element can have its own stitchy, so can you. Just enter a unique id (such as your email address) into this processing sketch. Your email address is automagically turned into a very much unique pattern — your personal stitchy identicon.

cc-licensed at OpenProcessing.org

Generative identicons usually have a colorful geek chic, which can almost compete with that of rotating GIFs from the glorious days of the early web.

However their anarchic wild-wild-web style does not go along nicely with websites that follow the cult of the Web 2.0, and that's pretty much every professional website these days.

That's where stitchies come to the rescue:

• Unlike other icons, stitchies can easily be color-adjusted to match the design of any website.
• Stitchies work perfectly at even the smallest scale, unlike user photos which often become indiscernible when too small, or distract you from the text when too large.
• Stitchies are essentially two-color QR-codes optimized for the the human brain by taking principles of symmetry and heraldry into account.

I created a stitchy plugin for dokuwiki — the wiki software that powers this very blog and the k2g2 craftopedia — but I haven't found the time to publish the code, so if anyone is interested, please let me know. It's plain PHP, so it can easily be turned into a Wordpress plugin.

Once I was captivated by the flow of brush strokes created by Flowfield Driven Drawing it was only a small step to explore which other flowfields might evoke beautiful drawings.

cc-licensed at OpenProcessing.org

[space] switch flow map
[0] reset flow map position
[s] save image to disk

[d] dodge on/off
[b] brush on/off
[g] grain fine/rough
[l] lines short/long

[c] colors (daVinci, blackboard, crayons …)
[w] whirl direction
[i] isolines

[x] more x-hatch
[z] less x-hatch

Codex Processianus I

Codex Processianus III

Codex Processianus IV

Check out the Codex Processianus Flickr Set for more results.

Since I have a long standing fascination with fractals, accompanied by a natural repulsion towards those rainbow colour palettes, that were so popular in the fractal art scene, I decided to use flow field driven design to create fractal drawings, in the style of Leonardo Da Vinci's Studies of water and flow.

Leonardo Da Vinci: Deluge

Leonardo Da Vinci: Studies of Water passing Obstacles and falling

Flow Map underlying the Mandelbrot Design

The underlying flow fields were created using the same kind of trans- formations that are used in calculating the Mandelbrot and Julia set in fractal geometry.

Since flow fields are sampled at the pixel level, they can be saved as images or flowmaps, which represent the direction of flow as the hue of a pixel, and the speed of flow as saturation or brightness.

Jason Stephens has used the Codex Processianus source code to create his own flow map based artworks.

Jason Stephen's Flow Map based Art

You can find them on the Jason's blog or his Flickr stream

In Flowfield Driven Drawing the computer creates a drawing where the lines follow a predetermined invisible flow field or flow map, very much like ink following the fibres of a highly effective blotting paper.

Even though the flow field is predefined, the user may have some influence on the drawing process.

This blog post explains the mechanism behind Flowfield Driven Drawings (or f2d2 for short) and provides a couple of Open Source examples to get you started rolling your own.

Hair Flow, my first exploration in flow fields was a very simple sketch submitted for the tiny sketch competition in 2009. It is quite impressive what you can get out of Processing, with as little as 200 characters of code. I highly recommend checking out the tiny sketch collection at Open Processing for more examples of Processing madness.

cc-licensed at OpenProcessing.org

Doodle 3 (2009) was my first sketch using flow fields to control the drawing process, rather than just visualizing the fields.

cc-licensed at OpenProcessing.org

[s] soft mode on/off
[d] dodge mode on/off
[c] crayon mode on/off

[f] forward (next doodle)
[+] and [-] to zoom
[space] to redraw


The stunning beauty of the result is really due to the ability of Processing, to control the opacity of the lines.

In soft mode the opacity of the lines is controlled by the flow field itsself: lines are drawn vigorous in regions of intense flow, while fading out in silent waters. In hard mode the opacity is controlled by the the drawing tool: opacity increases towards the middle of each stroke, then decreases again.

Like in the Hair Flow sketch the underlying flow field is generated by the Perlin noise function that comes with Processing.

My approach to Flowfield Driven Drawings has successfully been used to create a vivid windmap of the United States by Fernanda Viégas and Martin Wattenberg in 2012.

Windmap Visualizationusing Flowfield Driven Drawing