Chapter 6. DIYbiomimicry

Luis D. Rodriguez

Biomimicry is the design and production of materials, structures, and systems that are modeled on biological entities and processes. For about 50 years now, scientists and engineers in the relatively young engineering field of biomimicry have been formally copying nature’s models to improve existing machines and innovate new products. One famous example is the boxcar modeled after the boxfish, in which engineers copied the low drag properties of the fish to make the vehicle more energy-efficient (Figure 6-1).

Boxfish (left), box concept car (right). Photo source: http://www.greencarcongress.com.
Figure 6-1. Boxfish (left), box concept car (right). Photo source: http://www.greencarcongress.com.

Biomimicry is not normally associated with the DIYbio community, as it is principally the domain of multimillion-dollar corporations and military research for aiding war efforts. Still, my honest endeavor to empower as many designers, programmers, and bio artists through biomimicry as possible has initially been well received in web conferences around the world.

Nature’s managing of complexity and achieving of harmony can be understood with mathematical formulas beneath complicated systems. These processes have been extracted into mathematical proportions and patterns such as the Fibonacci sequence, and I dare to demonstrate its application to digital design and web programming much as scientists and engineers do with complex engineering solutions from the natural world.

When artists and designers look at nature, it’s easy for them to get hung up on aesthetics. However, given the recent demand for designers to learn to program, it is now more desirable to use nature’s code as expressed in mathematical arrays. Artists and designers can start by extracting “design thinking” from nature’s cycles, letting that information affect the creative process, and taking chances. Ultimately, artists, designers, and programmers can make their own personal connections with nature.

"It’s Pretty Much Stealing from Nature" (Joanna Aizenberg)

The Fibonacci sequence (0,1,1,2,3,5,8,13,21,34,55,89,144…), which is evident in many forms in nature, from the number of petals in a flower to the number of spirals in DNA (shown in Figure 6-2 and Figure 6-3, respectively), is a largely untapped source of art direction for digital designers and makers to literally “steal.” For more information, see Joanna Aizenberg’s TEDx talk, "Extreme Biomimetics".

Various examples of the Fibonacci sequence found in flower petals. Photo source: http://www.maths.uq.edu.au/~infinity.
Figure 6-2. Various examples of the Fibonacci sequence found in flower petals. Photo source: http://www.maths.uq.edu.au/~infinity.
Example of the Fibonacci sequence found in DNA spirals. Graphic source: http://goldenratiomedia.com.
Figure 6-3. Example of the Fibonacci sequence found in DNA spirals. Graphic source: http://goldenratiomedia.com.

The same mechanisms found in the natural world to achieve beauty in organic materials, as shown above, can be applied to digital designs. Specifically dealing with box model issues, which are at the core of the design language for laying out web applications, the Fibonacci sequence found across the natural world can save UI developers a lot of time and make interfaces feel visually and structurally “natural.” Applying code from biological settings to user interfaces contributes to aesthetically pleasing, usable, cross-device user experiences. See Figure 6-4 for an example of a box model.

Box model diagram consisting of content, padding, border, and margin, which affect the proportions of web page elements. Graphic source: http://www.w3schools.com.
Figure 6-4. Box model diagram consisting of content, padding, border, and margin, which affect the proportions of web page elements. Graphic source: http://www.w3schools.com.

A Practical Example

A tile interface is a common way to present atomic units of information. This tutorial covers how to build a bare-bones tile interface using HTML5/CSS3/JavaScript and assumes you have basic web design skills such as writing markup and linking external files. However, source code for this example is available at the codePen.

All JavaScript in this example uses jQuery and should be included in a snippet in the body after jQuery has been loaded.

Set up an array of numbers that will contain the first 18 digits of the Fibonacci sequence:

fibArr = [00, 01, 01, 02, 03, 05, 08, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597];

Insert (or append) into the DOM a div element (or tile) for each digit in the Fibonacci sequence with jQuery’s each function:

 $.each(fibArr,function(){
    $('body').append('<div></div>')
  });

Set the initial dimensions of each tile based on the box model properties (width, padding, border, and margin—fw, fp, fb, and fm, respectively) corresponding to the first four places in the Fibonacci array:

  var fw = 1
  var fp = 2
  var fb = 3
  var fm = 4

Next, implement an event handler that iterates through the array in sets of four ([00,01,01,02][08,13,21,34][377,610,987,1597]…) and increases or decreases the values using the operands ++ or --:

  fw++ || fw--
  fp++ || fp--
  fb++ || fb --
  fm++ || fm--

In the same event handler, modify the style properties of the tiles using jQuery’s css method:

  $('div').css({
    width: fibArr[fw],
    padding: fibArr[fp],
    borderWidth: fibArr[fb],
    margin: fibArr[fm]
  })

Watch the tile layout adapt by iterating through fibArr when the handler is invoked by HTML events in Figure 6-5, Figure 6-6, and Figure 6-7.

Interface tiles at [08,13,21,34].
Figure 6-5. Interface tiles at [08,13,21,34].
Interface tiles at [377,610,987,1597].
Figure 6-6. Interface tiles at [377,610,987,1597].
Interface tiles at [00,01,01,02].
Figure 6-7. Interface tiles at [00,01,01,02].

These figures show just one simple way to solve a common problem for an HTML5 web interface using a mechanism “stolen” from biological settings. It’s an approach to expedite development that looks to an organic design language that has been adapting across different environments for aeons. A more detailed explanation and source code for this and other examples of animation, grid systems, and JavaScript functions are available in the codePen collection “Fibonacci Sequence in Open Web Standards”.

As artists, designers, programmers, and strategists look ahead, there is a lot to be defined and discovered in systems aiming to develop organic user interfaces[2] and find solutions to the world’s most pressing problems. Intently observing the natural world and embracing its interconnectedness can give us a lot of innovative ideas for design, bio art, and beyond.



[2] Rachel Hinman. "The Emergent Mobile NUI Paradigm," in The Mobile Frontier: A Guide to Designing Mobile Experiences. (New York: Rosenfeld Media, 2012.)