The most recent workshop took place at Metropolitan Works, the London Metropolitan University’s digital fabrication facility. Under the overarching theme of digital fabrication, initially this workshop was focused almost exclusively on geometry aspects and how to use various toxiclibs classes to construct shapes & forms and solve problems in this domain. During the 2nd workshop session, I wanted to combine several related topics into a single large exercise and we started building a little hypothetical facade design tool.

Over the past couple of weeks I squeezed in some extra time to finish cleaning up and adding comments (lots of!) to the source code of that tool with some further descriptions below…

Facade designs generally require to take into account the varying light conditions & requirements of the space sections on the inside of the building. Using strategically placed particles & attractors we can model & modulate these different spatial densities on the facade surface…

Step 1: Strategically place some attractors & particles to modulate the spatial density of the facade

Step 2: Connect particles into a 2D mesh using Delaunay triangulation...

Step 2a: ...or use Voronoi to create more cell like patterning

Step 3: Map the 2D mesh onto the extruded profile of the facade

Step 4: Apply & tweak surface deformation along normal vectors

Step 5: Produce a water tight Iso-surface mesh of the wireframe structure and export as STL for 3D printing

Result of using a more complex profile spline

Since we didn’t fully get to finish everything as a group, I have added several more features (some on popular demand):

• Allow for selecting, repositioning & adjusting of particle attractors
• Produce 3d iso surface of facade wireframe/lattice mesh and export as STL
• Allow selecting & moving of points in spline editor component (incl. realtime updates in 3d wireframe preview)
• Added user adjustable 3D surface deformation using simplex noise
• Added toggle to switch between Delaunay & Voronoi shapes
• Adding arc ball controller to more naturally change 3D view orientation
• Integrating mouse wheel to adjust zooming in 3D
• Generally improved usability and made ControlP5 GUI more dynamic (some controllers are now context sensitive and only visible in certain display/edit modes)

It’s almost a proper little tool now and should provide a lot of food for thought for the dear students (and maybe give them something to do over the holidays :)

You can download the entire Eclipse project from here: learn.postspectacular.com/hg/metworks-2011-facade/

Please note, this project is a plain Java project (no Processing Eclipse plugin required) and contains all required libraries in the project’s /lib folder:

• Processing 1.5.1 + JOGL (only with OSX & Win32/64 binaries)
• ControlP5 0.5.4
• pre-release of toxiclibs-0021

Below are some quick steps to import the project into your Eclipse workspace:

• Download via the .zip link in the top toolbar…
• Unzip to anywhere on your disk
• Rename resulting folder into “metworks-2011-facade” (all lower case, use dashes, no quotes)
• In Eclipse, choose File > Import… > General > Existing projects into workspace…

• In the import dialog use the “select root directory” option and navigate to the folder in step 3
• The project should now show up just below, make sure it’s ticked
• Press “Finish”

• Back in the Eclipse workbench, open up the project in the project explorer…
• Right click on the file “FacadeApp.launch” and choose “Run > FacadeApp”… Have fun! That is all, if you’re on OSX…

Windows users will have to do a few more additional steps and edit the location of the native library components first (used by JOGL):

• Right click on the “metworks-2011-facade” project and choose “Properties > Java Build Path > Libraries”.
• open the sub-tree for jogl.jar, select “Native library location” and then press the “Edit…” button

• Now choose the /lib/windows64 (or 32) folder inside your project folder and then confirm all changes. Then you can have fun too! :)

Some more brief overview of the different classes in the project’s /src folder:

• FacadeApp – main application (extends PApplet)
• ParticleSystem – physics based particle simulation & simple editor features for attractors
• SplineEditor – simple 2D curve editor for designing the facade profile
• FacadePoint – extension of Vec3D to include surface normal and normalized 2D position (needed for displacement)
• DisplacementStrategy – interface definition for defining concrete displacement operators (applied to FacadePoints)
• NoiseDisplacement – the currently sole available implementation of DisplacementStrategy, using 2d simplex noise
• ArcBall – re-usable arc ball view component for easier navigation/rotation of the 3D view

Last, but definitely not least: Many, many dear thanks to Arthur Mamou-Mani and Marcus Bowerman for organising, your hospitality, 3d printing and making everything happen… We all hope to repeat something similar in the next year. You’ve been (and will be again) warned! :)

The Gray-Scott reaction diffusion model is a member of a whole variety of RD systems, popular largely due to its ability to produce a very varied number of biological looking (and behaving) patterns, both static and constantly changing. Some patterns are reminiscent of cell devision, gastrulation or the formation of spots & stripes on furry animals. As with all RD models, these patterns are the result of an iterative process evaluating each cell of the simulation space based on the concentrations of the two main parameters (for Gray-Scott usually named f and K) of the reaction equation as well as taking into account the concentrations of these 2 substances in neighboring cells. So conceptually the reaction diffusion system lies somewhere between the isolated DLA process working with individual particles and the entirely rulebased evaluation of a cell’s neighborhood in traditional cellular automatas, which we will deal with in the next post.

The image below, by Robert Munafo, is a fantastically helpful map of possible patterns resulting from various combinations of the f and K coefficients. Click the image to go to his website and explore the parameters in more detail (there’re close-ups and videos of all interesting combinations).

As with the other classes of the simutils package, the GrayScott implementation comes with several small demos to help you get started. The most basic use case (HelloGrayScott) is just setting up a simulation with default parameters and then allows you to draw in the simulation space with the mouse. Each frame, the reaction is updated, its new state translated into grayscale pixels and then rendered to the screen. The important thing to know here is that there’re 2 separate results states available, normally called the u and v buffers.

GrayScott gs;

// create a new simulation instance
// the "false" refers to a non-tiled space with walls
// set to true to create tiling patterns
gs=new GrayScott(width,height,false);

// configure the simulation params to:
// f=0.023, K=0.074
// diffusion speed for u buffer = 0.095
// diffusion speed for u buffer = 0.03
gs.setCoefficients(0.023,0.074,0.095,0.03);

The main draw() loop then just does this:

void draw() {
  if (mousePressed) {
    // set cells around mouse pos to max saturation
    gs.setRect(mouseX, mouseY,20,20);
  }
  loadPixels();
  // update simulation by 10 time steps per frame
  for(int i=0; i<10; i++) gs.update(1);
  // read out the v buffer and translate into grayscale colors
  for(int i=0; i<gs.v.length; i++) {
    float cellValue=gs.v[i];
    // the cell values in v are usually in the range 0.0 .. 0.33
    int col=255-(int)(min(255,cellValue*768));
    // use the col value for red, green and blue and set alpha to full opacity
    pixels[i]=col<<16|col<<8|col|0xff000000;
  }
  updatePixels();
}

To avoid this manual pixel pushing and enable us to make some of the subtle changes of densities more obvious, we can also use the handy (and also new) ToneMap class of the colorutils package. This allows us to map a number range to different positions (colors) on a multi-color gradient and so potentially better visualize the different densities. The basic usage of this class is shown below:

import toxi.color.*;

ToneMap toneMap;

// define a color gradient by adding colors at certain key points
// a gradient is like a 1D array with target colors at certain points
// all inbetween values are automatically interpolated (customizable too)
// this gradient here will contain 256 values
ColorGradient gradient=new ColorGradient();
gradient.addColorAt(0, NamedColor.BLACK);
gradient.addColorAt(128, NamedColor.RED);
gradient.addColorAt(192, NamedColor.YELLOW);
gradient.addColorAt(255, NamedColor.WHITE);

// now create a ToneMap instance using this gradient
// this maps the value range 0.0 .. 0.33 across the entire gradient width
// a 0.0 input value will be black, 0.33 white
toneMap=new ToneMap(0, 0.33, gradient);

Now we can refactor our Gray-Scott rendering code into something even simpler:

for(int i=0; i<gs.v.length; i++) {
    // take a GS v value and turn it into a packed integer ARGB color value
    pixels[i]=toneMap.getARGBToneFor(gs.v[i]);
}

Btw. The ToneMap class is a nice example of the whole reusable “building block philosophy” of toxiclibs (and the object oriented approach in general). The class is simply a composition of other library classes and under the hood delegates everything to these elements:

All other GrayScott demos, as well as all Cellular Automata examples, make use of this ToneMap class, so do have a look at those for more reference…

Since a homogeneous configuration of the entire sim grid will always just provide one particular character/patterning, the GrayScott class has been designed with extension in mind. The CustomGrayScott demo shows how to impose a pattern on the actual simulation parameters themselves, so that cells at different positions are evaluated using different parameters:

class PatternedGrayScott extends GrayScott {

  // our constructor just passes things on to the parent class
  PatternedGrayScott(int w, int h, boolean tiling) {
    super(w,h,tiling);
  }

  // this function is called for each cell
  // to retrieve its f coefficient
  public float getFCoeffAt(int x, int y) {
    // here we only take the x coordinate
    // and choose one of 2 options (even & odd)
    x/=32;
    return 0==x%2 ? f : f-0.005;
  }

  // this function is called for each cell
  // to retrieve its K coefficient
  public float getKCoeffAt(int x, int y) {
    // here we only use the y coordinate
    // and create a gradient falloff for this param
    return k-y*0.00004;
  }
}

Instead of using the default GrayScott class, we only need to change one line in the setup() method to use our extended version instead:

GrayScott gs;

void setup() {
	size(200,200);
	gs=new PatternedGrayScott(width,height,false);
	...
}

The result of this is shown below… Easy, huh? :)

Having this mechanism in place, it can be also used to create more interesting types of masking. For a commission to produce a cover design for Print Magazine in 2008, I generated a type face from simple line & arc segments and used it as mask to manipulate the concentrations of the f & K parameters to achieve two different types of patterning: one for the inside of the letter shapes, the other for the outside…

The frames of that animation were then stacked up along the Z axis in 3D space and with the help of the volumeutils classes turned into 3D mesh, exported as STL format (also see TriangleMesh.saveAsSTL()) and finally fabricated into the physical, 3D printed sculpture shown below. In a way, the sculpture can be seen as a map of its entire creation process…

Here’re some more rendered detail shots of the sculpture. More information about this project is here and the related flickr set.

Finally, the GrayScottImage demo shows another supported technique of using the library: the seeding of the simulation using a bitmap image.

By Joe Turner

By DieTapete

By Stefan Mylleager

By Lia

I especially like the amount & colours of the contour layers used to visualize different densities. A similar (only in principle) thought also lead to the concept for the V&A Decode Identity completed recently. Just create a VolumetricSpace instance, use one of the preset VolumetricBrushes (or create your own one through sub-classing), use it to manipulate the “density” in the space and then pass the space instance to a IsoSurface to turn it into a TriangleMesh. Et voila! Example code for this basic approach comes with the volumeutils library download.

UPDATE: There’s also an older, alternative version which is using sensor inputs to control its growth (so maybe the above process is related or even the same)…

“this rhizome grows only if PIR sensor doesn’t detect movement [either nobody is in the room, or you stay still] amount of light measured by photocell influences branches girth. in this way, resulting form is a diagram of changing environmental conditions.”

To make the project as widely accessible as possible to people, it was built in Processing, but obviously with a major helping of various toxiclibs too(core, color & volumeutils).

You can download, remix & recode the original piece and turn it into your own original artwork by downloading the app and/or source code from:

decode.googlecode.com

Some of these recoded versions might then even become the new Decode identity. Media partner, CBS Outdoor will be promoting the exhibition using the original piece across its large HD projection screens in platforms on the London Underground from Monday, November 30, 2009. All recoded works submitted via the V&A website before January 11, 2010 will then be put forward into a competition to appear in an advert on CBS Outdoor’s XTP screens, further promoting the exhibition.

UPDATE: I’ve posted some of my favourite “recodes” over here.

Some more images of the whole design journey are on flickr…