Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
Presentation at Siggraph 2021 on September 9, 2021, by Damon Leverett, AIA
p5.js demo
https://preview.p5js.org/leverett22/present/OYChxwzvg
https://preview.p5js.org/leverett22/present/7bw-3_K9T
Special thanks to:
SOM Chicago
Lawrence Technological University
Page 1 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
Biomimetic Generative Design in Symmetrical Grid Systems
Background
Architect and designer Walter Netsch practiced in the Chicago area with Skidmore Owens and Merrill (SOM) during the 1960’s and 70’s.
He is best known for the United States Air Force Academy Cadet Chapel in Colorado Springs and his work the University of Illinois at
Chicago campus. Netsch explored geometric grid systems and utilized them in his work which he called “field theory”. The system can
be seen in the Behavioral Sciences Building at the University of Illinois at Chicago and other works throughout his career. The
Chrysanthemum as a geometric form is indeed a fractal as defined as a self-repeating geometry that is visibly similar at many scales.
Netsch described the base geometry as a Chrysanthemum, referring to the flower’s disc floret, the heart of a flower which expresses a
natural geometric order related to its biological process and success as an organism. Netsch’s chrysanthemum as a mathematical model
approximate the natural one and opens up our view into how geometry and natural systems are related. Many attributes of both standout
including (a)the reduction in disc floret pedal size as they approach the flower center, (b)the alternating position of floret pedals from ring
to ring and (c) the perceived visual spiral affect.
This is better observed in a different flower, the Daisy where the disc florets are more defined and easier to examine and compare to
the geometric model.
Page 2 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
As a student of Netsch in the 1980’s, I continued investigating field theory both in art and architecture. 40 years later, algorithms reveal
the dynamics of this biomimetic form and highlights special properties of its twelve-pedal iteration. The mathematical version also
contains attributes of the natural version and can be expressed in an equation where the size of disc floret is directly proportional to the
disc radius, and further detailed in the explanation below.
Mathematical Analysis
𝒓𝒓 = 𝒇𝒇 𝐭𝐭𝐭𝐭𝐭𝐭 ∠𝑪𝑪
Given (s) is equal to the length of the side of the regular quadrilateral (q) with vertices of (cdef), where length (f) is the distance from any
corner to its center at 45 degrees to point (e) forming the 45-degree right triangle (ceb), the radius of rotation (r) of the square from point
(p) to the center of the square point (e) is directly proportional to length of side (s). Only one radius (r) exists for each length of side (s).
Each reductive iteration is represented by levels (h) that produces square (q1’) that is proportions to the preceding square (q1).
Axioms:
t = 180 degrees in a triangle
m = 360 degrees in a circle
Given:
q1, q2, q3………. qi, each pedals
Variables:
s = the length of the side of the initial square
h = the number of reductive pedals levels
n = number of pedals
Page 3 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
The angle of rotation between each pedal is the number of degrees in
a circle (m) divided by the number of pedals (n):
∠𝐴𝐴 = 𝑚𝑚/𝑛𝑛.
∠B is one half ∠A and is useful as it bifurcates the square at its center
point (e) and is colinear with the center of rotation point (p). ∠B in
correlation with point (e) form a right triangle (peb) where ∠C is
represented by:
∠𝐶𝐶 = 90 − (180/𝑛𝑛).
The length of leg (f) from the 45-degree right triangle (bce) where:
𝒇𝒇 = 𝒔𝒔/√𝟐𝟐,
Given an arc with center point (e) and radius (f) and through point (d) and point (a) intersects segment (pd) to form new point (c′) and
creates Isosceles triangle (c′ed) with base (c′d) whose vertex angle is ∠D =∠A, and adjacent Isosceles triangle (aec′) with base (ac’)
and whose vertex angle is 90˚- ∠D = ∠E.
The radius of rotation (r) from square (q1) to (q2) by ∠A from point(p) where:
m = 360 ,
Page 4 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
𝑓𝑓 = 𝑠𝑠/√2
Damon Leverett | August 9, 2021
and
𝑚𝑚
∠𝐶𝐶 = 180 − ��2𝑛𝑛� + 90� →
∠𝐶𝐶 = 90 − (𝑚𝑚 𝑛𝑛)/2 and
𝒓𝒓 = 𝒇𝒇 𝐭𝐭𝐭𝐭𝐭𝐭 ∠𝑪𝑪
whose alternate form is:
𝒓𝒓 = �
𝒔𝒔
� 𝐭𝐭𝐭𝐭𝐭𝐭(∠𝑪𝑪)
√𝟐𝟐
For the length (s′) of the next level reductive square
(q1′):
𝑠𝑠
𝑠𝑠 ′ = 2 ∗ � � ∗ �cos �1/2
√2
180−(90−∠𝐴𝐴)
2
�� →
whose alternate form is:
𝟗𝟗𝟗𝟗 + ∠𝑨𝑨
�
𝟐𝟐
𝒔𝒔′ = √𝟐𝟐 𝒔𝒔 𝐜𝐜𝐜𝐜𝐜𝐜 �
and as a plot:
Page 5 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
Conversely, if the radius (r) is given then only one length of side (s) exist for each radius (r),
Derived above:
𝒓𝒓 = 𝒇𝒇 𝐭𝐭𝐭𝐭𝐭𝐭 ∠𝑪𝑪
and that
𝒇𝒇 = 𝒔𝒔/√𝟐𝟐 →
𝑠𝑠
𝑟𝑟 = � � tan(∠𝑪𝑪)
√2
Then solved for (s)
𝒓𝒓 √𝟐𝟐
Chrysanthemum examples
𝒔𝒔 = �𝒕𝒕𝒕𝒕𝒕𝒕 (∠𝑪𝑪)�
12-pedal special case. n-Field with the number of pedals (n) = 12 and the number of levels (h) = 4:
Page 6 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
n-Field with the number of pedals (n) = 18 and the number of levels (h) = 5:
Page 7 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
n-Field with the number of pedals (n) = 17 and the number of levels (h) = 5
Processing Algorithm
Variable
n
s
h
r
q
∠A
∠B
Code Variable
numPedals
lenSideS
numLevels
pedalRadius
pedalShape
baseAng
halfAng
import processing.pdf.*;
import controlP5.*;
ControlP5 cp5;
//
PImage grid;
PShape pedalShape;
float trangleDegrees = 180;//axiom
float numPedals =0; //constant number of pedal
float rotAngle = 360/numPedals;//axiom - anlge of pedal rotaion is 360 degrees divided by the number of pedals (n)
float halfAng =rotAngle/2;
float deg = trangleDegrees-(rotAngle/2);
int numLevels = 0; //number of reductive iteration
float lenSideS=0;
float lenSideF= lenSideS/(sqrt(2));
float pedalRadius = (lenSideS/(sqrt(2)))*(2+sqrt(3));
//
int addLine= 180;
//
int myColor = color(255, 0, 0);
int pedalNumValue = 12;
int sideLenNumValue = 250;
int levelNumValue = 6;
//
int sliderTicks1 = 100;
int sliderTicks2 = 30;
//********************************************************************************
void setup() {
//
size(1600, 1600);
smooth();
Page 8 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
surface.setTitle("nField - D.Leverett 4/3/2021");
surface.setResizable(true);
surface.setLocation(20, 20);
//
PFont font = createFont("Swiss 721 Light Condensed BT", 28);
//
cp5 = new ControlP5(this);
//
cp5.setFont(font);
cp5.addSlider("pedalNumValue")
.setLabelVisible(false)
.setPosition(50, 40)
.setSize(250, 45)
.setRange(2, 120)
;
cp5.addSlider("sideLenNumValue")
.setLabelVisible(false)
.setPosition(450, 40)
.setSize(250, 45)
.setRange(10, 200)
;
cp5.addSlider("levelNumValue")
.setLabelVisible(false)
.setPosition(850, 40)
.setSize(250, 45)
.setRange(1, 30)
;
cp5.addButton("export.pdf")
.setValue(0)
.setPosition(1250, 40)
.setSize(200, 45)
.plugTo(this, "export")
;
//
rectMode(CORNER);
ellipseMode(CENTER);
//------------------------------------------------------------------------------stroke(180);
textFont(font);
}//end setup
//------------------------------------------------------------------------------//
void draw() {
background(215);
fill(125, 125, 125, 127);
Page 9 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
rect(0, 0, width, 100);
//centerGrid();//center grid line
makePedals();
//
}//end draw()
//
void centerGrid() {
// screen center grid
//background(200);
stroke(250, 0, 0);
line(0, height/2, width, height/2);
line(width/2, 0, width/2, height);
ellipse(width/2, height/2, 10, 10);
//end center grid
}
//
void rotRadius() {
//
line(-pedalRadius, 0, pedalRadius, 0);
line(0, -pedalRadius, 0, pedalRadius);
//background(200);
}
//
void makePedals() {
//**************************************************************************************
fill(70);
float numPedals=pedalNumValue; //constant number of pedal
float lenSideS=sideLenNumValue;// the dimension of the Chrys is determined//by the length of the side of the first pedal
int numLevels =levelNumValue ; //number of levels
//
text("Number of Pedals", 50, 130);
text("Side Length of Initial Pedal", 450, 130);
text("Number of Levels", 850, 130);
//
text(pedalNumValue, 310, 73);
text(sideLenNumValue, 710, 73);
text(levelNumValue, 1110, 73);
//
float rotAngle = 0;
float baseAng = 360/numPedals;
float halfAng = baseAng/2;
float levelIncAng = 0;
//
//
for (int i = 0; i < numLevels; ++i) {
//
for (int p = 0; p < numPedals; ++p) {
//
lenSideF= lenSideS/(sqrt(2));
Page 10 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
pedalRadius =(lenSideS/sqrt(2))* tan(radians(90-(180/numPedals) ));
pedalShape = createShape();
pedalShape.setStroke(color(90, 90, 90));
pedalShape.beginShape();
//
pedalShape.fill(0, 255, 185, 127);
pedalShape.vertex(0, -lenSideF);
pedalShape.vertex(lenSideF, 0);
pedalShape.vertex(0, lenSideF);
pedalShape.vertex(-lenSideF, 0);
pedalShape.endShape(CLOSE);
//
pushMatrix();
translate(width/2, height/2);
rotate(radians((rotAngle+levelIncAng )));//
stroke(127);
shape(pedalShape, 0, -pedalRadius);
popMatrix();
rotAngle += baseAng;
}//end for p
//lenSideS=sqrt(2)*lenSideS*cos(radians(((90+baseAng)/2)));
lenSideS=2*(lenSideS/(sqrt(2)))*(cos(radians( (180-(90-baseAng))/2)));
levelIncAng += halfAng;
//for(int j = 0; j < levelNumValue; ){
// text("side (s) = ", 50, addLine);
// text(lenSideS, 160, addLine);
// addLine = addLine +30 ;
// }
//
}//end for i
//
}//************************************************************************
//
public void export() {
//
println("button cliked");
//**************************************************************************************
fill(255);
float numPedals=pedalNumValue; //constant number of pedal
float lenSideS=sideLenNumValue;// the dimension of the Chrys is determined//by the length of the side of the first pedal
int numLevels =levelNumValue ; //number of levels
//
text(pedalNumValue, 310, 73);
text(sideLenNumValue, 810, 73);
text(levelNumValue, 1310, 73);
//
float rotAngle = 0;
Page 11 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
}
Damon Leverett | August 9, 2021
float baseAng = 360/numPedals;
float halfAng = baseAng/2;
float levelIncAng = 0;
//
beginRecord(PDF, "101.pdf");
for (int i = 0; i < numLevels; ++i) {
//
for (int p = 0; p < numPedals; ++p) {
//
lenSideF= lenSideS/(sqrt(2));
pedalRadius =(lenSideS/sqrt(2))* tan(radians(90-(180/numPedals) ));
pedalShape = createShape();
pedalShape.setStroke(color(127, 255, 0));
pedalShape.beginShape();
//
pedalShape.fill(0, 0, 0, 127);
pedalShape.vertex(0, -lenSideF);
pedalShape.vertex(lenSideF, 0);
pedalShape.vertex(0, lenSideF);
pedalShape.vertex(-lenSideF, 0);
pedalShape.endShape(CLOSE);
//
pushMatrix();
translate(width/2, height/2);
rotate(radians((rotAngle+levelIncAng )));//
stroke(127);
shape(pedalShape, 0, -pedalRadius);
popMatrix();
rotAngle += baseAng;
//
}//end for p
//
lenSideS=2*(lenSideS/(sqrt(2)))*(cos(radians( (180-(90-baseAng))/2)));
levelIncAng += halfAng;
//
}//end for i
//
endRecord();
exit();
//
Page 12 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
Connecting Chrysanthemum into a Mesa
Mesa by adjacent squares.
Mesa by overlapping transverse squares
By overlapping lateral squares.
Page 13 of 14
Biomimetic Generative Design in Symmetrical Grid Systems
Damon Leverett | August 9, 2021
Wide field Mesa by adjacent squares.
Page 14 of 14