Differences

This shows you the differences between two versions of the page.

Link to this comparison view

blog:bit.craft:flowfield_driven_drawing [2012/06/06 18:09] (current)
magisterludi created
Line 1: Line 1:
 +===== 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 [[http://www.openprocessing.org/collection/70|tiny sketch collection]] at Open Processing for more examples of Processing madness.
 +
 +{{ processing>4107}}
 +
 +**Doodle 3** (2009) was my first sketch using flow fields to control the drawing process, rather than just visualizing the fields. 
 +
 +{{processing>6742}}
 +
 +==== 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 \\
 +''
 +
 +==== About ====
 +
 +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 [[http://hint.fm/wind/|vivid windmap]] of the United States by [[http://fernandaviegas.com/|Fernanda ViĆ©gas]] and [[http://www.bewitched.com/|Martin Wattenberg]] in 2012.
 +
 +[{{ blog:bit.craft:flowmaps_windmap.png?380 | [[http://hint.fm/wind/|Windmap Visualization]]using Flowfield Driven Drawing }}]
 +
 +\\
 +
 +~~DISCUSSION~~
  
blog/bit.craft/flowfield_driven_drawing.txt · Last modified: 2012/06/06 18:09 by magisterludi
Creative Commons License Knitting Knerds Geek Girls Stitching Bitches Purling Pimps Driven by DokuWiki