Category: SectionC

Looking Outwards 3

Looking at Andrew Kudless’s works was very inspiring. Its complexity in its form, unity, and the pattern is very beautifully constructed. I love how computationally generated pattern can result in an amazing physical object. I am not sure of what kind of algorithms were used to generate these works, but I guess it would be the recursive one which generates pattern. I love how they are beautifully designed yet conceptual and abstract that it evokes curiosity. I was surprised how there are multiple layers of parameters that are used to create those works. One of his works, Honeycomb Morphologies, is beautifully executed. It “explores integration strategies for a particular industrially produced material system for use in architectural applications.” I love how it is theoretical, numerical, and patterned, yet it has architectural system to it.

https://www.matsys.design/honeycomb-morphologies

Project-3-Dynamic Drawing

I chose to show the clock and time with the day/night change, along with the alarm bell going on and off.

sketch 

//Jae Son, section C

var x = 0;
var y = 0;
var angle = 0;

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

function draw() {
  if(mouseX<320){ //when mouse is on the left side
  background(151,215,240); //it is during the day - light blue background
  noStroke();
  fill(255,150,60);
  ellipse(mouseX,80,100,100);  //orange sun is up
  } else { //when mouse is on the right side
  background(31,41,84); //it is during the night - dark blue background
  noStroke();
  fill(255,227,90);
  ellipse(mouseX,80,100,100); //yellow moon is up
  }
  fill(46,178,187);
  noStroke();
  quad(230,360,250,360,270,300,250,300); //clock leg
  quad(380,322,400,322,410,360,390,360); //clock leg
  push();
  translate(250,130); 
  rotate(PI*3/4); 
  rect(0,0,25,35); //bridge between the clock body and the bell
  translate(-70,-110);
  rotate(PI/2);
  rect(-5,25,25,35); //bridge between the clock body and the bell
  pop();
  arc(220,125,mouseY/3.5,mouseY/3.5,PI*3/4,PI*7/4); //alarm is on when mouse is on the bottom - bell is bigger
  arc(415,125,mouseY/3.5,mouseY/3.5,PI*5/4,PI/4) //alarm is on when mouse is on the bottom - bell is bigger
  ellipse(320,225,250,250); //clock body frame
  fill(255);
  ellipse(320,225,220,220); //clock body 
  fill(46,178,187);
  ellipse(320,225,20,20); //clock center
  push();
  fill(46,178,187);
  translate(318,225);
  rotate(radians(30)+mouseX/100); //clock hour hand rotates clockwise 
  rect(0,0,5,80);
  pop();

}

Looking Outwards 03

“India’s New Parametric Temple to Reinterpret Vernacular Design in Koppur”

I really admire how this project uses computational processes to design something in the real world. This kind of geometry is difficult to visualize and draw, but its regularity and symmetry makes it a perfect problem for parametric design. The designers used parametric software, like grasshopper, to influence the design based on specified constraints, such as volume or height. The designers’ commitment to using sacred geometry and symmetric forms resulted in a characteristically Indian temple despite using computational processes

Some different forms produced by the architects, rat[[LAB] studio and Shilpa Architects

https://www.archdaily.com/946233/indias-new-parametric-temple-to-reinterpret-vernacular-design-in-koppur?ad_source=search&ad_medium=search_result_all

Project_3_Dynamic_Drawing

Its an atom.

sketch
//andrewid rdrice
//section c

var bgV = 0
var fVr = 255
var fVg = 255
var fVb = 255
var angle = 0   //starting angle for the electron
var speed = 0.1

var x = 100     //photon position
var y = 100
var xVel = 1    //starting horizontal velocity of the photon
var yVel = 1    //starting vertical velocity of the photon
var bSize = 20  //diameter of the photon

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

function draw() {
    background(bgV);
    noStroke();
    fill(fVr, fVg, fVb);
    text("p5.js vers 0.9.0. rdrice. 'Hydrogen with Photon'", 10, 15);
    angleMode(DEGREES);

    var scale = dist(width/2, height/2, mouseX, mouseY); //scaling nucleus
    ellipse(width/2, height/2, min(scale, 250));

    x += xVel   //Reycled this script from assignment a
    y += yVel   //keeps the 'photon' moving
    ellipse(x, y, bSize);    //draws a circle at x, y

    if (x > width-bSize/2) {    //checks to see if photon is in x bounds
        xVel = xVel*(-1)        //reverses velocity if its not
    } else if (x < bSize/2) {
        xVel = xVel*(-1)}
    if (y > height-bSize/2) {   //does the same as above, but for y
        yVel = yVel*(-1)
    } else if (y < bSize/2) {
        yVel = yVel*(-1)}       //end recycled script

    translate(width/2, height/2);   //rotating electron
    angle = angle+speed
    rotate(angle);
        ellipse(100,100, min(500*(10/scale), 100));
}

function mousePressed() {
    if (bgV == 0){  //toggles bgV (background) between b&w
        bgV = 255;
    } else if (bgV == 255) {
        bgV = 0}

    if (fVr == 255 & fVg == 255 && fVb == 255){   //random fill value
        fVr = random(0,255);
        fVg = random(0,255);
        fVb = random(0,255);
    } else {    //toggles back to white
        fVr = 255
        fVg = 255
        fVb = 255}

    speed = random(-1, 1);  //new random speeds for moving objects
    xVel = random(-10,10);
    yVel = random(-10,10);
}

click to change colors and particle velocities.

Project-03- Dynamic Drawing

sp17 03 project

//Project 3 - Dynamic Drawing
//sp17
//Section C


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

function draw() {
    background(215, 195, 215);

    if (mouseY < height/2) {
        background(0); 
    } else {
        background (215, 195, 215);
    }

    //SUN 
    fill(235,206,117); // yellow
    stroke(235,206,117); // yellow
    var y = min(mouseY, 620);
    var diam= 230; // diameter


    // if mouse moves towards the center of the sun, the sun shrinks
    // if mouse moves away from the sun it is big

    if (dist (mouseX, mouseY, width/2, y) < diam/4) {
        diam = 50;
    } 
    ellipse(width/2, y, diam, diam); // sun


    //if the mouse Y is above the middle, the sun turns white moon:
    if (mouseY < height/2) {
        fill(255);
        stroke(255);
        ellipse(width/2, y, diam, diam); 
    }


    // if mouse around the centerpoint of the canvas, the sun/moon has rays show up
    if (dist(width/2, height/2, mouseX, mouseY) < 10) {
        strokeWeight(10);
        line(width/2, height/2- 50, width/2, height/2 - 70); 
        line (width/2, height/2 + 50, width/2, height/2 + 70);
        line (width/2 - 50, height/2, width/2 - 70, height/2);
        line (width/2 + 50, height/2, width/2 + 70, height/2);
    }

    //CLOUDS
    // if mouse moves to the right, clouds move right

    fill(137,183,172); // light teal
    stroke(137,183,172) // light teal

    var x = min (mouseX, 500);
     // left cloud 
    ellipse(x, height/4*3, 230, 170);
    ellipse(x - 100, height/4*3, 150, 100);
    ellipse(x + 100, height/4*3, 150, 100); 

    //right cloud
    ellipse(x+ 200, height/4, 230, 170); // middle
    ellipse(x + 100, height/4, 150, 100); // left bump
    ellipse(x + 300, height/4, 150, 100); // right cloud, right bump 


}

Looking Outwards 03- Computational Fabrication

Kinematics Petal Dress by Nervous System.

A project that I found to be an inspiration under the topic of generic artwork is the Kinematics Petal Dress (https://n-e-r-v-o-u-s.com/projects/albums/kinematic-petals-dress/), designed by the company Nervous System, a generative design studio that takes ideas from natural phenomenons and implements them into their work. This particular dress which is 3D printed, is created to be a continuous textile with interlocking parts and components. I find this piece of work interesting because it represents how the worlds of technology and fashion can combine to create customizable clothing. In terms of the algorithms that generated the work, I think that the aspect of variability makes it so that the length, width and shape of each component can be altered and have dynamic aspects that change with the changing data about the body type of specific person. This makes the work customizable, and designed to suit the needs of a variety of people. Additionally, this design firm believes in reflecting natural properties in their fashion pieces, and in this dress, that vision is manifested because the 1600+ overlapping pieces and hinges create the effect of flower petals layering and blooming. This dress is also compressible and foldable, which takes into consideration efficiency, and I find this really unique.

Looking Outwards 03 – Computational Fabrication

A work of computational fabrication which I find interesting is the Winery Gantenbein, by Gramazio & Kohler + Bearth & Deplazes.

This is an addition to an existing winery and is an open air fermentation room.
Here, the architects used a brick laying robot to attain great precision for these brick walls, but were able to stay playful with the material and keep the project feeling “human”. The pattern laid by the robot went brick by brick, and laid the bricks so the pattern could be read, while the design also allowed for fresh air
during fermentation, without allowing for direct sunlight. Here I think that the architects have done a great job, as they used computational fabrication in order to augment a design which may have otherwise ended up much more boring.

Project 3 – Dynamic Drawing

For this project I created a nautical scene that has many changing/moving elements that simulate the change from sunrise to sunset.

sketch

//Helen Cheng - helenc1
//Section C

var waterLevel=400

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

function draw() {
  strokeWeight(0);
  //sky gradients from dark to light along x
  var skyG = 136-mouseX/6
  var b = 255-mouseX/6
  background(0,skyG,b)
  //sun gradients from red to yellow along x
  var g = 255-(mouseX/6)
  fill(255, g, 10);
  circle(600-mouseX, 200, 100);
  //water level rises and falls along y
  fill(141,206,238);
  rect(0,waterLevel-mouseY/4,600,450);
  //sailboat moves with your cursor along X
  fill(230,62,54);
  arc(mouseX,400,200,100,0,PI);
  //sail
  fill(255);
  triangle(mouseX,375,mouseX,300,mouseX+75,350);
  strokeWeight(5);
  stroke(56,56,56);
  line(mouseX,400,mouseX,300);
}

Project-03-Dynamic-Drawing

DDDownload
var r = 254;
var g = 247;
var b = 255;
var angle = 0;

function setup() {
    createCanvas(600, 450);
    background(220);
    frameRate(20);
}

function draw() {
    //bg color change
    background(r, g - (mouseX / 15), b - (mouseY / 20));
    //spinning rect
    push();
    fill(225, 250, 220, 50);
    rectMode(CENTER);
    translate(300, 225);
    rotate(radians(angle));
    rect(0, 0, 800, 20);
    rect(0, 0, 20, 800);
    pop();
    angle += 5;
    //rotating stars
    push();
    translate(width / 2, height / 2);
    rotate(radians(mouseX / 7));
    //blue stars
    fill(227, 252, 250);
    for (let i = 0; i < 6; i++){ 
        push();
        rotate(radians(60 * i));
        translate(200 , 0);
        star();
        pop();
    }
    //pink stars
    fill(255, 240, 240);
    for (let i = 0; i < 6; i++){ 
        push();
        rotate(radians(60 * i + 30));
        translate(200 , 0);
        star();
        pop();
    }
    pop();
    
    //back circle
    noStroke();
    fill(255, 247, 204, 30);
    circle(width / 2, height / 2, min(mouseX, 350));
    fill(255, 247, 204, 70);
    circle(width / 2, height / 2, min(mouseX, 300));
    fill(240, 230, 122);
    circle(width / 2, height / 2, 230);
  
    //Drawing Grandma
    //body
    push();
    var y = constrain(mouseY, 200, 400);
    noStroke();
    fill(247, 126, 142);
    rect(width/2 - 120, y + 30, 240, y + 200, 80);
    fill(245, 238, 164);
    circle(width/2, y + 120, 10);
    circle(width/2, y + 150, 10);
    circle(width/2, y + 180, 10);
    //head
    noStroke();
    fill(250, 231, 217);
    ellipse(width/2, y, 200, 200);
    //ears
    ellipse((width/2)-90, y, 50, 50);
    ellipse((width/2)+90, y, 50, 50);
    //glasses
    strokeWeight(1);
    noFill();
    stroke(30);
    arc(width/2, y, 20, 20, PI, 0);
    fill(235, 241, 255);
    ellipse(width/2 - 20, y, 25, 25);
    ellipse(width/2 + 20, y, 25, 25);
    //nose
    stroke(240, 208, 189);
    strokeWeight(20);
    strokeJoin(ROUND);
    fill(240, 208, 189);
    triangle(width/2, y + 5, width/2 - 10, y+20 ,width/2 + 10, y+20);
    //hair
    fill(214);
    noStroke();
    ellipse(width/2, y - 130, 60, 65);
    push();
    translate (width/2 + 50, y - 80);
    rotate(radians(120));
    ellipse (0, 0, 50, 130);
    pop();
    push();
    translate (width/2 - 50, y - 80);
    rotate(radians(-120));
    ellipse (0, 0, 50, 130);
    pop();
    pop();
   
}

function star() {
    //drawing the star
    push();
    rectMode(CENTER);
    square(0, 0, 20);
    rotate(radians(45));
    square(0, 0, 20);
    pop();
}

LO-03: Computational Fabrication

Designer Michael Schmidt and architect Francis Bitonti collaborated to create this 3D printed gown that is specifically designed for the model Dita Von Teese. They enforced the spiral formula to the computer rendering of the dress that would emphasize femininity qualities of her body. This was something that interested me as a design major, since I didn’t really connect fashion with coding. By learning about this project, I realized that computational art is a broad field that can be applied to anything related to design or art. The idea of bringing digital design into a physical form was fascinating. In addition, the complicated process of creating this dress highlights its beauty. The floor-length nylon gown was made using selective laser sintering (SLS), which builds up the material in layers from plastic powder fused together with a laser. The rigid plastic components are completely articulated to create a netted structure for fluidity and movement. Also they applied spirals based on the Golden Ratio to the computer rendered Von Teese’s body so that the garment would fit her perfectly. The dress has 4000 articulative joints and all were written into CAD code so that they can be printed. 

3D-printed dress for Dita Von Teese
Image of Dita Von Teese wearing 3D printed gown