September 2022 – Page 20 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 03: Computational Fabrication

The project is called string art which is making use of automatic computation and digital fabrication to create artistic string images. Before the technology, artists usually create string images in a highly complicated and tedious process manually. For getting this outcome completely automatically, the artists in this project made use of a computational setup that was driven by a discrete optimization algorithm. The optimization algorithm received a chosen picture as input and converted the picture into a graph with connected strings which tried to reassemble the input image best possibly. The thing that I admire the most about this project is showing the computers’ ability to make abstract outputs. It is because computer outputs had been considered by most people as concrete and objective but this project showed that our computers had achieved another level (abstracts). In this project, the artists can potentially control how abstract the outcomes will be.

Refrence
Michael Birsak, Florian Rist, Peter Wonka, and Przemyslaw Musialski Computer Graphics Forum (Proceedings of Eurographics), 2018.

This video explains the process of using computational fabrication to make string art.

LO: Computational Fabrication

I’m not sure how much this counts, but I decided to look into the architectural aspect of the generative design question, because both of my parents are architects who have worked on many generative related projects. What I found was the Heydar Aliyev Center in Baku, designed by Zaha Hadid Architects. This structure, designed and built between 2007 and 2012, is a physical representation of the early integration of AI and generative design with standard architectural design and practice. It’s a gorgeous building, with an amazing fusion of traditional Islamic design concepts and a more organic and futuristic form, done mostly in white with the exception of the Theater I believe. It was in the geometry of the “skin” of the building, as in certain walls and the exterior, where AI was used to geometrically model based on certain parameters what the best position for say, an opening, would be, or the dimensions and shape of a tile of cladding to be manufactured.

The building structure itself is fascinating, and looks sleek and futuristic in classic Zaha Hadid style. What algorithms and how they were created and used I guess are trade secrets, but they must have really tweaked them, because this is the most elegant and efficient example of generated architecture that I have seen so far. I do know though that those algorithms seemed to be less in relation to the physical form of the building, and was only really mentioned in its external cladding and some of the internal features.

https://www.zaha-hadid.com/architecture/heydar-aliyev-centre/

Project 3: Dynamic Drawing

sketch

// Ana Furtado 
// Section E
// Project 3 -- Dynamic Drawing

var angle = 0;

function setup() {
    createCanvas(600, 450);
}

function draw() {
    background(max(mouseX, mouseY)); // gets lighter and darker 
    fill(255); //white center rectangle
    strokeWeight(mouseX); // gets bigger as moves to the right
    rotate(radians(angle)); 
    rectMode(CENTER);
    rect(300, 225, 200, 150); //center white rectangle
    angle += (min(mouseX, mouseY)); ///spins rectangles according to mouse
    fill(255);
    //outer rectangles grow bigger and smaller and overlap
    rect(100, 75, 200, mouseY); // outer rect L1
    rect(100, 375, 200, -mouseY); //outer rect L2
    rect(500, 75, 200, mouseY); //outer rect R1
    rect(500, 375, 200, -mouseY); //outer rect R2

}

I by thinking about what could change by moving mouseX and mouseY. The most difficult part was getting the rotating around the origin to work.

Project-03: Dynamic Drawing

sketch

var d= 100;//diameter of each circle

function setup() {
    createCanvas(600, 450);
}

function draw() {
    background(10);
    noStroke();
    
    d=min(mouseX,width);//d changes when the mouse moves
    fill("red");
    circle(width/4, height/4, d);//top left red circle
    fill("green");
    circle((width/4)*3, (height/4)*3, d);//bottom right green circle
  
    d=width-d;// d changes oppositely 
    fill("blue");
    circle(width/4, (height/4)*3, d);//bottom left blue circle
    fill("orange");
    circle((width/4)*3, height/4, d);//top right orange circle
    
}

When I was designing the graph, I was thinking about the idea of contrasting colors (red and green, blue and orange) and circles popping out.

LookingOutwards – 03

I like the wood bending project done by Sima Bdeir during Jeremy Ficca’s ASO studio as a part of the MAAD program at CMU. I admire how natural the structure appears. I admire how the light, material, and how it rests on ground were all taken into consideration. I believe some kind of generative software along with Rhino was used to generate the form and the structure was built using wood bending techniques, laser cutter, and metal supports. I think the creator’s artistic sensibilities come out in the unique form. I believe they took inspiration from nature and rethought how that could be practically used in this structure. Although, I do not understand the purpose of the curves near the back. They do not appear to seats, perhaps they could be to store things, or simply for design purposes. Overall, I believe the generative process used to create this structure makes it interesting to walk through.

Master of Advanced Architectural Design — CMU School of Architecture

SnP chair / project

The SnP chair by Daniel Widrig & Material Architecture Lab is an injection-molded recycled plastic sculpture of sorts. Its interlocking parts don’t require any additional fasteners, thus allowing the structural system to be disassembled and reassembled in any number of combinations, from the scale of a stool to an entire pavilion.

the SnP chair: just one configuration of the structural system

I admire the adaptability and wide applicability of this project, as well as the use of recycled material. With so many realized parametric projects, there is a tendency to disregard concerns of material use for the sake of the art.

Additionally, the interlocking “S” and “P”-shaped pieces are beautifully designed, with so many different configurations possible (as illustrated in the teams’ diagrams). The name “SnP” alludes to the s-traps and p-traps used in plumbing, though the project portfolio doesn’t elaborate much on the geometric reasoning of the individual module.

Looking Outwards 03: Computational Fabrication

https://www.behance.net/gallery/21605971/Wanderers
Christoph Bader, Dominik Kolb, William Patrick, Steven Keating, Sunanda Sharma, Prof. Neri Oxman
The “Wanderers”
2014

The “Wanderers” by MIT Media Lab professor Neri Oxman is an extraordinary and inspirational project.

The works integrate the themes of nature, life, fashion, and 3D design so perfectly. Through exploring the biological growth process and the elements that sustain life–“earth, water, air, and fire”, the works are not only full of vitality and connotation, but also they are very sophisticated and exquisite in terms of the aesthetic aspect.

As for the algorithms that generated the work, “phenotype” is transformed into “genotype”. The input geometric representations are repeatedly transformed and deformed to form various organic shapes that simulate the process of growth.

The colors in the wearables are well-combined. You can get an understanding of “life” through her designs–the organic shapes and forms, simulating the biological growth process in nature, remind the viewers of the constantly dividing cells, the sophisticated brain, and the marvelous and diverse plants.

project 3: dynamic drawing

I really wanted to make something that incorporated color changes without using a lot of colors. So I messed around with blend modes and created this!

isis-dynamic

// isis berymon section D

var x;
var y;
var bluex;
var bluey;
var greenx;
var greeny;
var d;

function setup() {
    createCanvas(500,500);
    background(0);
    d = 100;
    bluex = width/2;
    bluey = height/2;
    greenx = width/2;
    greeny = height/2;
}

function draw() {
    blendMode(BLEND); //makes bg opaque
    background(0);
    blendMode(SCREEN); //brightens overlapping colors
    fill(255,0,0);
    circle(width/2, height/2, d);
    fill(0,255,0);
    circle(greenx, greeny, d);
    fill(0,0,255);
    circle(bluex, bluey, d);
    //diameter scales with how far mouse is from center
    d = width/2-dist(width/2, height/2, mouseX, mouseY);
    //blue circle moves opposite the mouse
    bluex = width/2 + (width/2-mouseX);
    bluey = height/2 + (height/2-mouseY);
    //green circle moves with the mouse
    greenx = width/2 + (mouseX-width/2);
    greeny = height/2 + (mouseY-height/2);
}

project 03: cube-y

the hardest part for me was sticking with an idea, and resisting the urge to scrap my code constantly. it was also tricky to keep my variables in check without rewriting them with each function… anyway, try moving your mouse around the canvas and clicking!

sketch

// Jaden Luscher
// section A
// project 03

var x = 0;
var y = 0;
var square1 = 0;
var square2 = 0;
var rot1 = 0;
var rot2 = 0;
var col = 200;

function setup() {
    createCanvas(600, 450);
    background(200,200,100);
}

function draw() {
  background(200,200,100);
  rectMode(CENTER);
  noStroke();
  fill(col);
  translate(width/2, height/2); // move origin to center of canvas

  square1 = (mouseX + mouseY) / 2; // move mouse to change square size
  rot1 += 0.01; // makes square 1 spin
  rotate(rot1);
  rect(x, y, square1, square1); // center square (square 1)

  square2 = (mouseX - mouseY); // size of four squares differs from square 1
  if(mouseX > mouseY) {
    rot2 = 2 * rot1; // spins clockwise
  } else {
    rot2 = -2 * rot1; // spins counter clockwise
  }
  rotate(rot2);
  rect(x + square2, y + square2, square2, square2);
  rect(x - square2, y - square2, square2, square2);
  rect(x + square2, y - square2, square2, square2);
  rect(x - square2, y + square2, square2, square2); // four squares at corners

  if (mouseIsPressed) { // squares "jitter" & turn white
    rot1 *= -1;
    col = 255;
  } else {
    col = 0;
  }

  print("square2 = ", square2);

}

LO 03: Computational Fabrication

The Helix Bridge at Marina Bay Sands in Singapore was designed by Cox Architects and ARUP Engineers. I think it’s a really cool example of computational fabrication that took physical form and can be physically interacted with. It takes characteristics of DNA structure, is extremely efficient with the amount of material needed to build it, and can support the weight of 16 thousand people at a time.

The bridge was inspired by DNA structures and uses Euclid’s axioms algorithm which focuses on the interlocking relationships between points. The basic slice of the pattern of the bridge was most likely decided on and then rotated at regular intervals around a “spine” which runs through the center where the pavement would be. These were connected to one another using a ‘polyline’ variable that links and laces points from each of the slice patterns as it twists to create the DNA spiral-looking bridge. Triangular bracing to ensure structural stability and other components for the physical functionality of the bridge were computed by finding patterns that link certain points of the slice to others, pairing, and adding pieces to them.

Main source: http://asd.courses.sutd.edu.sg/cdt/parametric-modelling/