Parameters
The second aspect in building generative design systems are parameters. Parameter is the range of a specific quality, a trait, a behavior, or an appearance. A human is a good way to think of parameters. It has a certain height, certain legs-to-body proportion, and a certain hair density, but also a certain number of meals per day, or a certain average of sleep hours. Those are all parameters, with a certain minimum and maximum value for each parameter. The range of some parameters can be fixed, others are in a constant state of change. Parameters are important in generative design systems because they provide boundaries to transformations.
Numeric parameter
A good way to understand them, is by thinking in numbers first. A range that has 1 as a minimum value, and 10 as the maximum value is a numeric parameter. We can then fill that numeric parameter in different ways.
Also, it is important to label parameters according to what they represent, sp that they adquire a semantic meaning in the generative design system. This parameter can be called “density” because we are defining how dense the content between 1 and 10 can be. The last density example decreases exponentially from 10 to 0.1.
1 , 2, 3, 4, 5, 6, 7 ,8, 9, 10.
0.1, 0.2, 0.3, 0.4 . . . 9.9, 10.0.
1, 3.3, 6.6, 10.
10,5,2.5,1.25,0.625 . . . 0.1.
We could take the grid transformation and add a parameter to it. As previously, explained, each cell of the grid can be accessed, and can also be replaced for any other type of content. The new parameter for the grid is called “displacement”, because it defines how much offset each shape has from its origin position on each cell. The parameter loops through each object along the X-axis and Y-axi.
Relevating coding functions:
function setup() {
createCanvas(600, 600);
background(0);
var diameter = 50;
var margin = diameter / 2;
for (var y = diameter; y < width - margin; y += diameter) {
for (var x = diameter; x < height - margin; x += diameter) {
//parameter: displacement
var disp =10;
ellipse(random(x - disp, x + disp), random(y - disp, y + disp), diameter);
}
}
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Parameters in motion
We could take the transformation in motion and change the value of each of its parameters. We get therefore a new result with new dimension without altering its core functionality.
//parameter: object size
var diameter = 80;
// parameter: width ratio aspect
var factor = 0.5;
//parameter: A speed
var globalSpeedX = 14;
//parameter: B speed
var globalSpeedY = 2;
// parameter: total width
var valHeight = 300;
//parameter: total height
var valWidth = 600;
var posX;
var posY;
var speedX;
var speedY;
function setup() {
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;
}
}