TSWARSTA-Section A-LookingOutwards-03

As soon as I saw “Rottlace” created by the MIT Media Lab I knew where it was from. Rottlace is a series of masks created for Bjork and inspired by Bjork’s music. I enjoy the intricacy of the masks and how they seam to be in motion, as well as the technical quality they have. The ideas of self-healing and having a skinless face align well with the visual style of the mask.

This parametric object was 3D printed using multi-material printing, which allows the elaborate combinations of different properties and variables to be produced. The properties are distributed complex structures, in this instance Bjork’s face, allowing the mask to fit perfectly as well as allowing the structure and shape of the mask to coexist with Bjork’s face, causing both elements to complement each other. The technology utilized in the printing of this mask has allowed the design to be fluid and has allowed for the combination of elements with different transparencies and generated modules to coexist in a single form. The simulation that generated the code and creation of this piece is mimicking that of both lace but something of vein structure as well.

https://www.media.mit.edu/projects/rottlace/overview/

TSWARSTA-Section A-LookingOutwards-02

Leander Herzog’s “Extruder”, 2015 was something I gravitated towards upon closer encounter. At first I was intrigued by the opacity and shapes of the forms that were being presented – visually. I did not know it was a generated typeface and that these were letters, which is what I found extremely interesting. I hope to build a type that is altered by code as soon as I learn the capabilities. I enjoy seeing design work that integrates code because I can see its benefits. Visually, it is also interesting to see how code creates as it is generated and the motions and shapes that are produced are very distinct.

D3.js was utilized in the creation of this piece – D3 assists users in utilizing data and visualizing it through code. Clipper.js was also used, which allows one to modify the path and geometry of shapes. Data also had to be pulled somehow – some sort of api? Mouse hover and mouse click are also used. Variables must have also been created for the different shapes to be able to be interacted with, and to be able to effect each other.

https://leanderherzog.ch/extruder/

aerubin-LookingOutwards-03-Section-C

KINEMATIC PETALS DRESS
Museum of Fine Arts (MFA), Boston
Project by: Nervous System

The Kinematic Petals Dress explores the “synergy between fashion and technology” by creating 3D printed clothing utilizing an algorithm that can be altered based on the wearer and designer. Individually customizable, the dress can be manipulated through a computer program that adjusts sizing through a 3D scan. The shape of the interlocking petals that create the material can also be tailored to the designer’s liking. When the design is complete, it is then sent to the 3D printer and the 1600+ unique pieces and 2600+ hinges are fabricated and the dress is complete.

I think it is a very unique approach to traditional attire. There are plenty of pros and cons to this design as although it can be completely devised through a computer program and printed instead of sewn like traditional clothing, however, shell structures can only move in one direction which has its limitations and prevents the 360 degrees of movement other fabric has. Another feature of the Kinematic Dress is its customizability as it is tailored for each customer based on their 3D scan. In addition, the pattern of the scales, shape of the scales, and the length of the dress can be altered. The algorithm created probably forms the base that the dress begins at when beginning the design process, with uniform scales over a standard body type. This could then be changed to the designers liking and the base form is still generally represented in the final design. It is amazing how innovative designers have become to arrive at the stage where it is feasible to design and print clothing from a computer.

More information at: http://n-e-r-v-o-u-s.com/blog/?p=7162

TSWARSTA- Section A- Project-03-Dynamic-Drawing

swarstad-dynamic-drawing


var sizex = 0;

function setup() {
	createCanvas(640, 480);
}

function draw() {
	rectMode(CENTER);
    noStroke();
R=(640-mouseX)/2;
G=(480-mouseY)/2;
B=mouseX*(0,255);
//Altering color based on mouse position

background(B,R,G);
//altering background color based on mouse position

sizex=mouseX/2;
if (sizex>160){
	sizex=mouseX/-2;
};
//altering position and size based on x mouse position


sizey=mouseY/2;
if(sizey>120){
	sizey=mouseY/-2;
};
//altering position and size based on y mouse position

rot=PI/(640/mouseX);
//altering rotation based on x position

	fill(R, G, B);
    translate(mouseX, mouseY);
    rotate(rot);
	rect(0, 0, sizex, sizey);
 

}


I was inspired by Jamie XX’s “In Colour” album artwork and visuals. I created a square that is drawn on a background where the color is altered based on mouse location – this is to mimic the spectrum in the album artwork’s background. The shape itself is a square and is altered by the mouse x and y, depending on the quadrant it is in (if you divide the canvas size into 4 parts) as I wanted the location of the shape to respond to the mouse placement as well.

serinal – Looking Outwards 03 (section C)

Trussfab is an extremely cool platform, created by Robert Kovacs and his HCI team at Hasso Plattner Institute in Germany, that allows users to design something that can be fabricated into large structures using recycled bottles and 3D printed joints.

Personally, I think the very coolest part of this is that the user doesn’t need to have any outstanding knowledge on engineering or have certain materials/equipment, but still can produce these large structures. You design your structure via Trussfab and then they will generate all the 3D files for all the hinges and joints that are needed to complete the structure.

In Trussfab application

The idea of Trussfab being an easy to use platform for people to create structures and prototype different things is really great. What is even cooler is how much you can manipulate the structure (with decorations, small details, etc) and the fact that it can even support human weight. I am extremely interested in seeing where this will take a lot of designers and architects with their ideas and whether or not it will become a part of some people’s practices.

Chair made via Trussfab

I am not completely sure what the algorithms for the actual Trussfab extension are, but I am sure that there was a lot of complex thinking behind it. Robert Kovacs and his HCI team are definitely more into the background, the actual algorithm and the coding that goes into it, because it is meant to serve the artistic sensibilities of other people. I think it’s really cool because it directly relates to design being a “service industry” and they have created a platform that conveys this idea. I am excited to see the future of Trussfab.

Read more about Trussfab via this article!

mjnewman LookingOutwards-03, Section A

SILK PAVILION from Mediated Matter Group on Vimeo.

MIT Media Lab’s Mediated Matter group (Neri Oxman, Jorge Duro-Royo, Markus Kayser, and Jared Laucks) created a structure that naturally and robotically mimicked the weaving patterns of silk worms. They initially started by tracking individual silkworms’ movements by attaching small magnets to their heads. The data and movements collected from those sessions were then translated into code so that a robot arm could weave different simplified versions across 26 panels that would eventually be formed into an elevated dome. However, they tie back in their original inspiration for the last step by putting the silkworms back on the threaded structure and integrating their natural silk. That is probably what I admire the most, the fact that they took the next step and incorporated silkworms after they could have easily stopped and left it at the threaded structure.

In terms of algorithms, they used the tracked movements of the silkworms and translated that into a single route the CNC machine would trace with a single white thread. But incorporating the silkworms as the last step really changed the final form and emphasizes the creator’s artistic intention of magnifying the silkworm phenomenon.

Here is another informative article

Project 3-Dynamic Art

Dave Dynamic

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Assignment-03-B
//variable for Bezier curvature 
var Curv;
//variable for Red, Green, Blue color. 
  var R = 0;
  var B = 0;
  var G = 0;
  function setup() {
  createCanvas(640, 480); //setting Canvas size to 600x480
  //No fill for any geometry
  noFill();
  //initializing Curv 
  Curv = 0;
}
function draw() {
  //adding random number to Red for change of color when it is < 255 
  
  //adding random number to Blue for change of color when it is < 255 
 
   //adding random number to Green for change of color when it is < 255  

  //When any of R,G,B elements are over 255, it resets to 0.
  if (R >= 255){
    R = 0;
  }
  if (G >= 255){
    G = 0;
  }
  if (B >= 255){
    B = 0;
  }
  //variable for color c
  var c = color(R,B,G);
  //continuously assign color variable to stroke
  stroke(c, 10);
  //setting up standard place for x and y coordinate. 
  var x = width/2;
  var y = height/2;
  //Dividing the canvas into four difference quadrant. 
  if (mouseX > x & mouseY < y ) { //when mouse is on right top quadrant
    Curv += mouseX/60; //Curv value goes up randomly from 1 to 5
    R += mouseX/120 + mouseY/50;// Red is sum of differenct X and Y value
   }
   if (mouseX < x & mouseY < y){//when mouse is on left top quadrant
    Curv -= mouseY/30; //Curv value goes down randomly from 4 to 12
    B += mouseX/40 + mouseY/80;// Blue is sum of differenct X and Y value
   }
   if (mouseY > y & mouseX > x){//when mouse is on right bottom quadrant
    Curv += mouseY/60;//Curv value goes up randomly from 4 to 12
   }
   if (mouseY > y & mouseX < x){//when mouse is on left bottom quadrant
    Curv -= mouseX/30;//Curv valvue goes down randomly from 1 to 5
    G += mouseX/70 + mouseY/100;// Green is sum of differenct X and Y value
   }
   //when Curv is larger than height or width, or less than 0 , it will reset to 0.
  if ( Curv > height || Curv < 0 || Curv > width){ 
    Curv = 0;
   }
   //setting background to black 
  background(0);
  //bezier curves.
  //each for statement is used to generate multiple bezier curve based on increment of i value
  //bezier curve assigns, anchor points and control points to create paramatric curve. 
  //bezier(anchor pts, anchor pts, control pts, control pts, control pts2,control pts2, anchor pts2,anchor pts2)
  for (var i = 0; i < mouseX; i += 30){
    bezier(mouseX-(Curv+i/2.0), mouseY-Curv+i, Curv*2, Curv, Curv*2, Curv*2, mouseX, 0);
  }
  //based on the i and z constraint, number of lines are decided. 
  // i or z's constraints are defined by mouse X adn Y position
  // all the position of the anchor points are based on the mouse X and Y 
  for (var z = 200; z < mouseY; z += 30){
    bezier(mouseX-(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width-mouseX, 0);
  }
 for (var i = 0; i < height-mouseY; i += 30){
    bezier(mouseX+(Curv+i/2.0), mouseY+Curv+i, Curv*2, Curv, Curv*2, Curv*2, 0, mouseY);
  }
  for (var z = 200; z < width-mouseX; z += 30){
    bezier(mouseX+(Curv+z/2.0), mouseY-Curv+z, Curv*4, Curv/6, Curv*3, Curv*2, width, height-mouseY);
  }
  

}

For this Dynamic art project, I focused on the movement of line in a curve form. At first, I wanted to express very light wing like motion based on the mouse position. I abstracted the initial concept and created the following digital illustration of movement. Fortunately, I found a example at p5js website that resembles part of what I imagined. I took that example and modified to create my own dynamic art.

Jihee_SectionD_Project-03-Dynamic-Drawing

jiheek1_project3

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project3 dynamic drawing
//section D


var backgroundRed = 124;
var backgroundGreen = 124;
var backgroundBlue = 124;
var angle = 0;
var move = 0;
var wbSize = 100;


function setup() {
    createCanvas(640, 480);
}


function draw() {
    //the background gets lighter in grayscale from left to right
    background(backgroundRed, backgroundGreen, backgroundBlue);
    backgroundRed = map(mouseX, 0, width, 0, 124);
    backgroundGreen = map(mouseX, 0, width, 0, 124);
    backgroundBlue = map(mouseX, 0, width, 0, 124);

    if (mouseX > width) {
        backgroundRed = 0;
        backgroundGreen = 0;
        backgroundBlue = 0;
    }

    if (mouseX < 0) {
        backgroundRed = 124;
        backgroundGreen = 124;
        backgroundBlue = 124;
    }

    //draw debris from destyoed buildlings floating, rotating in the air
    fill(255);
    noStroke();
    push();
    translate(100, 100);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2); //particle rotates
    pop();
    angle = angle + 2;
    move = move + 0.04;

    push();
    translate(280, 190);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 3, 3);
    pop();

    push();
    translate(25, 60);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    translate(500, 20);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    translate(320, 20);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    translate(50, 20);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    translate(555, 175);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 3, 3);
    pop();

    push();
    translate(545, 172);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 1, 1);
    pop();

    push();
    translate(530, 172);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 1, 1);
    pop();

    push();
    translate(190, 140);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    translate(185, 110);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 4, 4);
    pop();

    push();
    translate(20, 400);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 5, 5);
    pop();

    push();
    translate(400, 320);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 5, 5);
    pop();

    push();
    translate(375, 335);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 5, 5);
    pop();

    //add some randomness to the particles
    //position of the mouse will determine some particles' speed
    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(50, 100);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(50, 20);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(310, 55);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(310, 200);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 5, 5);
    pop();

    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(550, 170);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 3, 3);
    pop();

    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(510, 140);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 1, 1);
    pop();

    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(165, 135);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 2, 2);
    pop();

    push();
    if (mouseY >= 240) {
        rotate(millis()/100); //bottom half of canvas = fast spinning speed
    }

    if (mouseY <= 240) {
        rotate(millis()/500); //top half of canvas = slow spinning speed
    }
    translate(150, 300);
    rotate(radians(angle));
    translate(move, 0);
    ellipse(0, 0, 5, 5);
    pop();

    //a wrecking ball swings across the canvas and breaks buildings
    //draw the chain (an array of same sized ellipses or 'beads')
    //the swinging range beads increases from top to bottom
    fill(0);
    var bx1 = map(mouseX, 0, width, 100, 420); //limit of swing in x direction
    var by1 = map(mouseY, 0, height, 0, 20);
    ellipse(bx1, by1, 20, 20); //draw the first (top) bead of the chain
    var bx2 = map(mouseX, 0, width, 98, 424);
    var by2 = map(mouseY, 0, height, 20, 40);
    ellipse(bx2, by2, 20, 20); //draw second bead of the chain
    var bx3 = map(mouseX, 0, width, 95, 428);
    var by3 = map(mouseY, 0, height, 40, 60);
    ellipse(bx3, by3, 20, 20); //draw third bead of the chain
    var bx4 = map(mouseX, 0, width, 92, 432);
    var by4 = map(mouseY, 0, height, 60, 80);
    ellipse(bx4, by4, 20, 20); //draw fouth bead of the chain
    var bx5 = map(mouseX, 0, width, 88, 440);
    var by5 = map(mouseY, 0, height, 80, 100);
    ellipse(bx5, by5, 20, 20); //draw fifth bead of the chain
    var bx6 = map(mouseX, 0, width, 84, 452);
    var by6 = map(mouseY, 0, height, 100, 120);
    ellipse(bx6, by6, 20, 20); //draw sixth bead of the chain
    var bx7 = map(mouseX, 0, width, 79, 468);
    var by7 = map(mouseY, 0, height, 120, 140);
    ellipse(bx7, by7, 20, 20); //draw seventh bead of the chain
    var bx8 = map(mouseX, 0, width, 74, 480);
    var by8 = map(mouseY, 0, height, 140, 160);
    ellipse(bx8, by8, 20, 20); //draw eighth bead of the chain
    var bx9 = map(mouseX, 0, width, 68, 502);
    var by9 = map(mouseY, 0, height, 160, 180);
    ellipse(bx9, by9, 20, 20); //draw ninth bead of the chain
    var bx10 = map(mouseX, 0, width, 62, 528);
    var by10 = map(mouseY, 0, height, 180, 200);
    ellipse(bx10, by10, 20, 20); //draw tenth bead of the chain
    var bx11 = map(mouseX, 0, width, 56, 555);
    var by11 = map(mouseY, 0, height, 200, 220);
    ellipse(bx11, by11, 20, 20); //draw eleventh bead of the chain

    //draw the wrecking ball
    var wbx = map(mouseX, 0, width, 50, 595);
    var wby = map(mouseY, 0, height, 220, 265);
    ellipse(wbx, wby, wbSize, wbSize);

    //the wrecking ball gets bigger as it approaches both extremes of width
    if(mouseX < width/2) {
        wbSize = ((-mouseX+30) & (mouseY)); //gets bigger by left edge
    }
    if(mouseX > width/2) {
        wbSize = ((mouseX*0.5+50) & (mouseY)); //gets bigger by right edge
    }

    //draw the buildings
    //make so that buildings shrink when touched by wrecking ball
    //building 1
    if(mouseX > 0 & mouseX < 45) {
        fill(255);
        noStroke();
        rect(0, height-165, 45, 165); //building before being touched by ball
    }
    else{
        fill(255);
        noStroke();
        rect(0, height-180, 45, 180); //building gets shorter by 15
    }
    //draw windows
    fill(0);
    rect(5, height-175, 5, 10); //row1
    rect(15, height-175, 5, 10);
    rect(25, height-175, 5, 10);
    rect(35, height-175, 5, 10);

    rect(5, height-155, 5, 10); //row2
    rect(15, height-155, 5, 10);
    rect(25, height-155, 5, 10);
    rect(35, height-155, 5, 10);

    rect(5, height-135, 5, 10); //row3
    rect(15, height-135, 5, 10);
    rect(25, height-135, 5, 10);
    rect(35, height-135, 5, 10);

    rect(5, height-115, 5, 10); //row4
    rect(15, height-115, 5, 10);
    rect(25, height-115, 5, 10);
    rect(35, height-115, 5, 10);

    rect(5, height-95, 5, 10); //row5
    rect(15, height-95, 5, 10);
    rect(25, height-95, 5, 10);
    rect(35, height-95, 5, 10);

    rect(5, height-75, 5, 10); //row6
    rect(15, height-75, 5, 10);
    rect(25, height-75, 5, 10);
    rect(35, height-75, 5, 10);

    rect(5, height-55, 5, 10); //row7
    rect(15, height-55, 5, 10);
    rect(25, height-55, 5, 10);
    rect(35, height-55, 5, 10);

    //draw building 2
    if(mouseX > 55 & mouseX < 100) {
        fill(255);
        noStroke();
        rect(55, height-145, 45, 145);
    }
    else{
        fill(255);
        noStroke();
        rect(55, height-160, 45, 160); //building gets shorter by 15
    }
    //draw windows
    fill(0);
    rect(60, height-155, 5, 10); //row1
    rect(70, height-155, 5, 10);
    rect(80, height-155, 5, 10);
    rect(90, height-155, 5, 10);

    rect(60, height-135, 5, 10); //row2
    rect(70, height-135, 5, 10);
    rect(80, height-135, 5, 10);
    rect(90, height-135, 5, 10);

    rect(60, height-115, 5, 10); //row3
    rect(70, height-115, 5, 10);
    rect(80, height-115, 5, 10);
    rect(90, height-115, 5, 10);

    rect(60, height-95, 5, 10); //row4
    rect(70, height-95, 5, 10);
    rect(80, height-95, 5, 10);
    rect(90, height-95, 5, 10);

    rect(60, height-75, 5, 10); //row5
    rect(70, height-75, 5, 10);
    rect(80, height-75, 5, 10);
    rect(90, height-75, 5, 10);

    rect(60, height-45, 5, 10); //row6
    rect(70, height-45, 5, 10);
    rect(80, height-45, 5, 10);
    rect(90, height-45, 5, 10);

    rect(60, height-25, 5, 10); //row7
    rect(70, height-25, 5, 10);
    rect(80, height-25, 5, 10);
    rect(90, height-25, 5, 10);

    //draw building 3
    if(mouseX > 110 & mouseX < 160) {
        fill(255);
        noStroke();
        rect(110, height-95, 50, 95);
    }
    else{
        fill(255);
        noStroke();
        rect(110, height-130, 50, 130); //building gets shorter by 35
    }
    //draw windows
    fill(0);
    rect(115, height-125, 10, 10); //row1
    rect(130, height-125, 10, 10);
    rect(145, height-125, 10, 10);

    rect(115, height-110, 10, 10); //row2
    rect(130, height-110, 10, 10);
    rect(145, height-110, 10, 10);

    rect(115, height-90, 10, 10); //row3
    rect(130, height-90, 10, 10);
    rect(145, height-90, 10, 10);

    rect(115, height-75, 10, 10); //row4
    rect(130, height-75, 10, 10);
    rect(145, height-75, 10, 10);

    rect(115, height-55, 10, 10); //row5
    rect(130, height-55, 10, 10);
    rect(145, height-55, 10, 10);

    rect(115, height-40, 10, 10); //row6
    rect(130, height-40, 10, 10);
    rect(145, height-40, 10, 10);

    rect(125, height-10, 20, 10); //row7

    //draw building 4
    if(mouseX > 170 & mouseX < 210) {
        fill(255);
        noStroke();
        rect(170, height-105, 40, 105);
    }
    else{
        fill(255);
        noStroke();
        rect(170, height-120, 40, 120); //building gets shorter by 15
    }
    //draw windows
    fill(0);
    rect(173, height-115, 5, 10); //row1
    rect(183, height-115, 5, 10);
    rect(193, height-115, 5, 10);
    rect(203, height-115, 5, 10);

    rect(173, height-100, 5, 10); //row2
    rect(183, height-100, 5, 10);
    rect(193, height-100, 5, 10);
    rect(203, height-100, 5, 10);

    rect(173, height-85, 5, 10); //row3
    rect(183, height-85, 5, 10);
    rect(193, height-85, 5, 10);
    rect(203, height-85, 5, 10);

    rect(173, height-70, 5, 10); //row4
    rect(183, height-70, 5, 10);
    rect(193, height-70, 5, 10);
    rect(203, height-70, 5, 10);

    rect(173, height-55, 5, 10); //row5
    rect(183, height-55, 5, 10);
    rect(193, height-55, 5, 10);
    rect(203, height-55, 5, 10);

    //draw building 5
    if(mouseX > 225 & mouseX < 280) {
        fill(255);
        noStroke();
        rect(225, height-90, 55, 90);
    }
    else{
        fill(255);
        noStroke();
        rect(225, height-100, 55, 100); //building gets shorter by 10
    }
    //draw windows
    fill(0);
    rect(230, height-95, 5, 5); //row1
    rect(240, height-95, 5, 5);
    rect(250, height-95, 5, 5);
    rect(260, height-95, 5, 5);
    rect(270, height-95, 5, 5);

    rect(230, height-85, 5, 5); //row2
    rect(240, height-85, 5, 5);
    rect(250, height-85, 5, 5);
    rect(260, height-85, 5, 5);
    rect(270, height-85, 5, 5);

    rect(230, height-75, 5, 5); //row3
    rect(240, height-75, 5, 5);
    rect(250, height-75, 5, 5);
    rect(260, height-75, 5, 5);
    rect(270, height-75, 5, 5);

    rect(230, height-65, 5, 5); //row4
    rect(240, height-65, 5, 5);
    rect(250, height-65, 5, 5);
    rect(260, height-65, 5, 5);
    rect(270, height-65, 5, 5);

    rect(230, height-55, 5, 5); //row5
    rect(240, height-55, 5, 5);
    rect(250, height-55, 5, 5);
    rect(260, height-55, 5, 5);
    rect(270, height-55, 5, 5);

    rect(230, height-45, 5, 5); //row6
    rect(240, height-45, 5, 5);
    rect(250, height-45, 5, 5);
    rect(260, height-45, 5, 5);
    rect(270, height-45, 5, 5);

    rect(230, height-35, 5, 5); //row7
    rect(240, height-35, 5, 5);
    rect(250, height-35, 5, 5);
    rect(260, height-35, 5, 5);
    rect(270, height-35, 5, 5);

    rect(230, height-25, 5, 5); //row8
    rect(240, height-25, 5, 5);
    rect(250, height-25, 5, 5);
    rect(260, height-25, 5, 5);
    rect(270, height-25, 5, 5);

    rect(230, height-15, 5, 5); //row9
    rect(240, height-15, 5, 5);
    rect(250, height-15, 5, 5);
    rect(260, height-15, 5, 5);
    rect(270, height-15, 5, 5);

    //draw building 6
    if(mouseX > 290 & mouseX < 355) {
        fill(255);
        noStroke();
        rect(290, height-100, 65, 100);
    }
    else{
        fill(255);
        noStroke();
        rect(290, height-120, 65, 120); //building gets shorter by 20
    }
    //draw windows
    fill(0);
    rect(295, height-95, 15, 10); //row1
    rect(315, height-95, 15, 10);
    rect(335, height-95, 15, 10);

    rect(295, height-80, 15, 10); //row2
    rect(315, height-80, 15, 10);
    rect(335, height-80, 15, 10);

    rect(295, height-65, 15, 10); //row3
    rect(315, height-65, 15, 10);
    rect(335, height-65, 15, 10);

    rect(295, height-45, 15, 10); //row4
    rect(315, height-45, 15, 10);
    rect(335, height-45, 15, 10);

    rect(295, height-30, 15, 10); //row5
    rect(315, height-30, 15, 10);
    rect(335, height-30, 15, 10);

    rect(295, height-15, 15, 10); //row6
    rect(315, height-15, 15, 10);
    rect(335, height-15, 15, 10);

    //draw building 7
    if(mouseX > 370 & mouseX < 415) {
        fill(255);
        noStroke();
        rect(370, height-90, 45, 90);
    }
    else{
        fill(255);
        noStroke();
        rect(370, height-100, 45, 100); //building gets shorter by 10
    }
    //draw windows
    fill(0);
    rect(374, height-95, 7, 5); //row1
    rect(384, height-95, 7, 5);
    rect(394, height-95, 7, 5);
    rect(404, height-95, 7, 5);

    rect(374, height-85, 7, 5); //row2
    rect(384, height-85, 7, 5);
    rect(394, height-85, 7, 5);
    rect(404, height-85, 7, 5);

    rect(374, height-75, 7, 5); //row3
    rect(384, height-75, 7, 5);
    rect(394, height-75, 7, 5);
    rect(404, height-75, 7, 5);

    rect(374, height-65, 7, 5); //row4
    rect(384, height-65, 7, 5);
    rect(394, height-65, 7, 5);
    rect(404, height-65, 7, 5);

    rect(374, height-55, 7, 5); //row5
    rect(384, height-55, 7, 5);
    rect(394, height-55, 7, 5);
    rect(404, height-55, 7, 5);

    rect(374, height-45, 7, 5); //row6
    rect(384, height-45, 7, 5);
    rect(394, height-45, 7, 5);
    rect(404, height-45, 7, 5);

    rect(374, height-35, 7, 5); //row7
    rect(384, height-35, 7, 5);
    rect(394, height-35, 7, 5);
    rect(404, height-35, 7, 5);

    rect(374, height-25, 7, 5); //row8
    rect(384, height-25, 7, 5);
    rect(394, height-25, 7, 5);
    rect(404, height-25, 7, 5);

    rect(374, height-15, 7, 5); //row9
    rect(384, height-15, 7, 5);
    rect(394, height-15, 7, 5);
    rect(404, height-15, 7, 5);

    //draw building 8
    if(mouseX > 425 & mouseX < 466) {
        fill(255);
        noStroke();
        rect(425, height-95, 41, 95);
    }
    else{
        fill(255);
        noStroke();
        rect(425, height-110, 41, 110); //building gets shorter by 15
    }
    //draw windows
    fill(0);
    rect(428, height-105, 5, 10); //row1
    rect(438, height-105, 5, 10);
    rect(448, height-105, 5, 10);
    rect(458, height-105, 5, 10);

    rect(428, height-88, 5, 10); //row2
    rect(438, height-88, 5, 10);
    rect(448, height-88, 5, 10);
    rect(458, height-88, 5, 10);

    rect(428, height-71, 5, 10); //row3
    rect(438, height-71, 5, 10);
    rect(448, height-71, 5, 10);
    rect(458, height-71, 5, 10);

    rect(428, height-54, 5, 10); //row4
    rect(438, height-54, 5, 10);
    rect(448, height-54, 5, 10);
    rect(458, height-54, 5, 10);

    //draw building 9
    if(mouseX > 479 & mouseX < 530) {
        fill(255);
        noStroke();
        rect(479, height-105, 51, 105);
    }
    else{
        fill(255);
        noStroke();
        rect(479, height-140, 51, 140); //building gets shorter by 35
    }
    //draw windows
    fill(0);
    rect(482, height-135, 5, 10); //row1
    rect(492, height-135, 5, 10);
    rect(502, height-135, 5, 10);
    rect(512, height-135, 5, 10);
    rect(522, height-135, 5, 10);

    rect(482, height-115, 5, 10); //row2
    rect(492, height-115, 5, 10);
    rect(502, height-115, 5, 10);
    rect(512, height-115, 5, 10);
    rect(522, height-115, 5, 10);

    rect(482, height-95, 5, 10); //row3
    rect(492, height-95, 5, 10);
    rect(502, height-95, 5, 10);
    rect(512, height-95, 5, 10);
    rect(522, height-95, 5, 10);

    rect(482, height-75, 5, 10); //row4
    rect(492, height-75, 5, 10);
    rect(502, height-75, 5, 10);
    rect(512, height-75, 5, 10);
    rect(522, height-75, 5, 10);

    rect(482, height-55, 5, 10); //row5
    rect(492, height-55, 5, 10);
    rect(502, height-55, 5, 10);
    rect(512, height-55, 5, 10);
    rect(522, height-55, 5, 10);

    rect(482, height-35, 5, 10); //row6
    rect(492, height-35, 5, 10);
    rect(502, height-35, 5, 10);
    rect(512, height-35, 5, 10);
    rect(522, height-35, 5, 10);

    rect(495, height-10, 20, 10); //row7

    //draw building 10
    if(mouseX > 540 & mouseX < 585) {
        fill(255);
        noStroke();
        rect(540, height-120, 45, 120);
    }
    else{
        fill(255);
        noStroke();
        rect(540, height-150, 45, 150); //building gets shorter by 30
    }
    //draw windows
    fill(0);
    rect(545, height-145, 20, 10); //row1
    rect(570, height-145, 10, 10);

    rect(540, height-130, 15, 10); //row2
    rect(560, height-130, 10, 10);
    rect(575, height-130, 10, 10);

    rect(540, height-115, 5, 10); //row3
    rect(550, height-115, 10, 10);
    rect(565, height-115, 20, 10);

    rect(540, height-100, 10, 10); //row4
    rect(555, height-100, 20, 10);
    rect(580, height-100, 5, 10);

    rect(540, height-85, 5, 10); //row5
    rect(550, height-85, 10, 10);
    rect(565, height-85, 20, 10);

    rect(540, height-70, 15, 10); //row6
    rect(560, height-70, 10, 10);
    rect(575, height-70, 10, 10);

    rect(545, height-55, 20, 10); //row7
    rect(570, height-55, 10, 10);

    rect(540, height-40, 15, 10); //row8
    rect(560, height-40, 10, 10);
    rect(575, height-40, 10, 10);

    rect(540, height-25, 5, 10); //row9
    rect(550, height-25, 10, 10);
    rect(565, height-25, 20, 10);

    rect(540, height-10, 10, 10); //row10
    rect(555, height-10, 20, 10);
    rect(580, height-10, 5, 10);

    //draw building 11
    if(mouseX > 595 & mouseX < 640) {
        fill(255);
        noStroke();
        rect(595, height-110, 45, 110);
    }
    else{
        fill(255);
        noStroke();
        rect(595, height-135, 45, 135); //building gets shorter by 25
    }
    //draw windows
    fill(0);
    rect(602, height-125, 10, 10); //row 1
    rect(622, height-125, 10, 10);

    rect(602, height-105, 10, 10); //row2
    rect(622, height-105, 10, 10);

    rect(602, height-85, 10, 10); //row3
    rect(622, height-85, 10, 10);

    rect(602, height-65, 10, 10); //row4
    rect(622, height-65, 10, 10);

    rect(602, height-45, 10, 10); //row5
    rect(622, height-45, 10, 10);
}

sketch

For my project, I made a dynamic drawing that is controlled by the mouse, or the user. I varied several elements, including size, color, rotation and position.

The user can move the wrecking ball to wherever in the canvas and manipulate the size of the buildings. One can see that the size of the ball itself changes, according to position as well. The size of the wrecking ball is largest when the mouse is located on both extremes of the width. The height of the buildings decreases when approached by the ball.

As for colors, as you move the mouse from left to right, the background changes from dark to light.

Another element that the mouse controls is the particles floating in air. It could be considered stars or dust. When the mouse is in the bottom half of the canvas, the particles rotate at a faster pace than they do when the mouse is in the top half of the canvas.

I would say that some challenges came from how tedious my design was. I also wish that I could have made the windows on the buildings to change color in the same fashion that the background does to keep it more consistent.

Jihee Kim (Section D)– LookingOutwards-03.

A design based on algorithms that interested me is the auditorium in the Elbphilharmonie, which is a concert hall in Hamburg designed by an architecture firm called Herzog and de Meuron and opened in 2017. The Elbphilharmonie is a complex that resembles a city; it offers many different attractions, such as the main philharmonic hall, music hall and restaurants.

construction of the main auditorium
a closeup of individual, unique cells

TThe building complex as a whole is extremely intricate, with its many geometries and attractive materiality but an area that is more impressive in regards to its use of technology would be the largest concert hall. The concert hall was created based on algorithms. Over 10 years, architects Jacques Herzog and Pierre de Mueron created about 10,000 gypsum fiber acoustic panels that cover the walls. Basically, the entire auditorium is covered in algorithmic, NURBS-based cells that look like shallow dugouts in the sand. The concave cells look like they were hand-carved, but were actually milled with CNC milling machines, based on precise calculations made computationally. The algorithm that lies underneath varies the characteristic of each cell so that individual cells play their unique role in handling the sounds and perfectly fill up the walls. Some of the variables here are depth, radius and splits, as seen in the image directly below.

variables of each carved cell

With the help of an acoustician (Yasuhisa Toyota) the architects were able to create and fabricate a space that insures the highest acoustic qualities that a music hall can ask for. The variations that the algorithm randomly creates within its parameters significantly affect the sound in the auditorium. Depending on the shape of the surface that sound waves hit, the sound gets manipulated differently: some are absorbed by the surface, while others are disseminated, ultimately creating a balanced harmonic sound.

Algorithms in this case allowed the firm to manifest its style of conveying through materials and complex geometries and suggest at infinite possibilities of creating structures that require such finesse that might not be achievable through manual work.

Official Webpage of Project