Semantic Structures:

Transformation(s) Parameters Iterations Instances

Iterations

A generative design system is not developed as a whole in one coding session, nor does it happen overnight. It needs to be taken care of in small steps, because each time we try to run a code, it might not work as previously seen. Each step is a new exploration of a previous step. In the context of computation, this is called an iteration. Basically speaking, the process of repeating a mathematical or computing process or set of instructions again and again, each time applying it to the result of the previous stage. Due to its nature, the process of iterating is closely intertwined with trial & error.

Nesting parameters

When iterating, we might start adding more parameters to our transformation. If we take the previous grid and nest the parameter density and the parameter displacement with each other, we get an even greater number of possible results. In the following example, the parameters density has not only been divided into two dimensions but also combined with the parameter displacement to create a new iteration of the grid transformation.

 
           
  var diameter = 50;
  var densX = 1.5;
  var densY = 0.8
            
  function setup() {
  createCanvas(600, 600);
  background(0);

  var margin = diameter;

  for (var y = margin; y < width - margin; y +=diameter*densX){
    for (var x = margin; x < height - margin; x +=diameter*densY) {
      
      var disp = 10;
      
      ellipse(random(x - disp, x + disp), random(y - disp, y + disp), diameter);
    }
  }
}                       
                        
Grid Variation 1
displacement value = 2
X density value = +40
Y density value = *1.2
Grid Variation 18
displacement value = 4
X density value = +100
Y density value = +100
Grid Variation 17
displacement value = 6
X density value = *1.9
Y density value = +30
Grid Variation 16
displacement value = 0
X density value = +100
Y density value = +6
Grid Variation 15
displacement value = 9
X density value = +200
Y density value = +400
Grid Variation 14
displacement value = 15
X density value = +10
Y density value = +200
Grid Variation 13
displacement value = 10
X density value = +12
Y density value = +50
Grid Variation 12
displacement value = 1
X density value = *1.15
Y density value = *1.15
Grid Variation 11
displacement value = 14
X density value = *1.2
Y density value = *1.15
Grid Variation 10
displacement value = 4
X density value = *1.2
Y density value = *1.2
Grid Variation 9
displacement value = 3
X density value = +2
Y density value = *1.2
Grid Variation 9
displacement value = 6
X density value = *1.2
Y density value = *1.7

NEXT:

Learn instances

Use the tools↗

Applied structures

Watch use cases

Hello fellow friend!

Transform, Learn, Liberate: Building generative design systems for the web is a programming project and generative tool that isn’t fully optimized for mobile screens yet.

It's best experienced on larger displays, like desktops or laptops, since the generative tool requires different input formats such as text input and file uploads. Additionally, it uses coding technologies that might run considerably slower on mobile devices at this time. For the best experience, it is recommended switching to a laptop or desktop!