Generative Design Systems: Instances

Semantic Structures:

Transformation(s) Parameters Iterations Instances

Instances

Instances are the temporary results ouf of a transformation with fixed values from each parametric range. One could thinkg of instances similar to weather patterns: They result from the complex interplay of temperature, humidity, air pressure and oher parameters. Such result do not last forever, it changes constantly and its parameters are readjusted to create new form of weathers.

As with the grid example, every object in a transformation can be replaced without altering the interaction (replacing an ellipse shape for an image file for example). Instances allow us to change the variables being transformed, thus enabling quick design generations from systems that stay consistent.

Instances in motion

An instance within a generative design system in motion works similar. Instances in motion are not a single frame but rather a group of frames that compose a loop. The shapes inside the motion transformation keep interacting and functioning regardless of the parameters given. Below are different instances with the parameters width, height, speed on the X axis, speed on the Y axis, object diameter (size), and width ratio.

 
           

            var posX;
            var posY;
            var speedX;
            var speedY;
            
            //change the object size, which affects its behaviour
            var diameter =40
            
            // change the width ratio aspect
             var factor = 0.5;
            
            //change the speed of either moving object
            var globalSpeedX =7;
            var globalSpeedY = 7;
             
            
            var valHeight = 200;
            var valWidth = 700;
            
            function setup() {
              // change the responsive dimensions
              createCanvas(valWidth, valHeight);
              
              posX = 0;
              posY = diameter;
              speedX = globalSpeedX;
              speedY = 0;
            
              valHeight = height;
              valWidth = width;
            }
            
            function draw() {
              background(255);
              fill(0);
            
            
              var factormapped = map(factor, 0.0, 1.0, 1.0, 0.0);
            
              stroke(255);
              strokeWeight(2);
            
              rect(0, 0, valWidth * factor, valHeight, 20);
              rect(valWidth * factor, 0, valWidth * factormapped, valHeight, 20);
            
              noStroke();
              fill(255);
              textSize(diameter);
              text("A", posX, valHeight / 2);
              text("B", valWidth - (valWidth * factormapped) / 2, posY);
            
              posX += speedX;
              posY += speedY;
            
              if (posX >= valWidth * factor - diameter) {
                speedX = 0;
                speedY = globalSpeedY;
              }
            
              if (
                posY >= valHeight - diameter / 4 &&
                posX >= valWidth * factor - diameter
              ) {
                speedY = 0;
                speedX = -globalSpeedX;
              }
            
              if (posX < diameter / 2 && posY >= valHeight - diameter) {
                speedX = 0;
                speedY = -globalSpeedY;
              }
            
              if (posX < diameter / 2 && posY < diameter) {
                speedY = 0;
                speedX = globalSpeedX;
              }
            }