BIT.CRAFT is a blog on computational craft that uses Processing to explore the convergence of craft and computation. 1)

Codex Processianus

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.

Key Map

[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 Maps

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.

Codex Processianus inspired Art

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

· 2012/06/06 18:27 · 0 Comments

Flowfield Driven Drawing

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.

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

Key Map

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

Flowfield Driven Drawing in Visualization

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

· 2012/06/06 18:09 · 0 Comments

Make Art 2009 Posters

Make Art 2009 - a week dedicated to the world of free software and digital art is getting all knerdy and krafty!

German Media Art collective LAFKON has created a framework for generative poster design, based on artworks from OpenProcessing. The framework is the result of some shell scripting magic, TeX and Processing working nicely together. And of course it's all free and open source!

Generative Poster Design

Here you can see two posters based on Shodo - a tiny sketch submitted by bit.craft to OpenProcessing:

Check out more posters at the Make Art Poster Page.


· 2009/12/07 15:04 · 0 Comments

Superdupershape Explorer


The Superdupershape Explorer is a tool to navigate the space of surfaces that result when applying the superduperformula to the superformula published by Johan Gielis.



The superformula can be turned into a 3d object (Supershape) using the spherical product of two superformulas.


When applying a toroidal rather than a spherical mapping, various kinds of donut-shaped forms result (Superdonuts). Things get even more twisted, if you add some torsion to the toroidal tube. Now you can create variations of the moebius strip and the umbilic torus.


If you gradually change the radius and the diameter of the toroidal tube, as well as the offset along the rotation axis, a variety of shell-like forms arise.


The superduperformula is a unified formula that allows for the creation of all kinds of 3d-objects described above. You can also chose the parameters to extrude a thin strip rather than a completely closed tube. By adding a twist and some additional rotations, you can obtain a closed torus covered by a moebius strip.

Key Mapping


[h] help panel on/off
[i] info panel on/off
[p] param info: shape info / render info
[x] xchange help and info panels


[m] mode : lores/dynamic/hires
[c] color on/off
[l] lighting on/off
[g] grid view / surface view


[space] next shape
[u] undo (reset shape params)
[o] output mesh or image



Use the mouse while pressing one of the param keys to change shape parameters. The mapping of param keys to shape parameters is always displayed inside the help panel.

Mouse Buttons

The mouse is used for navigation and for changing shape params. The effect of each mouse button is always displayed inside the help panel.

File Formats


There is no supershape file format, but if you happen to find a supershape that you like, you can always reconstruct it by directly entering the supershape parameters.


Once you have obtained a shape you like, you can:

  • save a screenshot (as PNG, JPG, GIF or any other image format supported by Processing)
  • save a screenshot as PDF (this may require a lot of memory, so you may need to increase your java memory settings)
  • Export the 3d-Mesh as DXF


· 2009/07/08 21:07

<< Newer entries

1) All examples are open source. Most code snippets are developed in Processing and hosted at openprocessing - the Flickr of computational art. If you have created a Processing sketch for computational craft, or use our code or algorithms in one of your projects, please let us know, so we can feature it here at BIT.CRAFT
blog/bit.craft.txt · Last modified: 2012/06/06 18:16 by magisterludi
Creative Commons License Knitting Knerds Geek Girls Stitching Bitches Purling Pimps Driven by DokuWiki