Month: September 2020

week03- Computational Fabrication

This picture is one from Iris Van Herpen’s fashion show.
Here is her website: https://www.irisvanherpen.com/

For a long time, fashion society is talking about modernity. When fine art has gone a long way explaining what is modernity, fashion professionals are still repeating themselves in some way.

Iris’s work and presentation is really eye opening. I doubt she uses a lot computational automation, but I think she uses a lot 3d and 3d printing in her work. Also, as far as I know, she uses a lot new fabrication materials and laser cutting technology.

I can not say for sure how she design her work, whether she did them all in 3d, or she uses automation to generate some basic variations of shapes them cut them into a real clothes piece. If I were her, I would use length, width, curve, size , and rotation to generate basic shapes.

The link I add below is her SS 2020 Haute Couture show. In the recent work, she uses more soft fabrications than, in her middle stage, hard and 3d printing-ish materials. She advances more in her design taste and also at the same time remains her pioneering spirit.

Project 03 – Dynamic Drawing

~click your mouse!~

This project was extremely intimidating because I didn’t even know where to begin, but after becoming more comfortable with implementing mouseX/mouseY and min/max, it was actually pretty fun. My composition consists of simple geometric shapes, however, the various changes in scale, angle of rotation, position, and color create different compositions depending on your mouse movement.

Maggie – Dynamic Drawing
//Maggie Ma
//Section D

//top left shapes
var blueSqSmall = {
	x: 31,
	y: 51,
	w: 39,
	h: 39
};
var greenSqSmall = {
	x: 70,
	y: 51,
	w: 39,
	h: 39
};
var yellowCircle = {
	x: 50,
	y: 130,
	w: 39,
	h: 39
};
var pinkCircle = {
	x: 89,
	y: 130,
	w: 39,
	w: 39
};


function setup() {
    createCanvas(370, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(255,255,255);
	strokeWeight(3.5);
	//noStroke();

	if (mouseIsPressed) {
		background(0);
	}

	//red rect top left
	fill(248, 64,0);
	rect(31, 51, 78 + mouseX*.08, 224 + mouseY/80);

	if (mouseX > width/2) {
		fill(255,209,0);
		rect(31, 51, 78 + mouseX*.08, 224 + mouseY/80);
	}

	//blue square top left
	bottombound = min(mouseY, 236);
	fill(40,44,147);
	rect(31, bottombound, 39, 39);

	//yellow circle top left
	fill(255,209,0);
	ellipse(yellowCircle.x, bottombound, yellowCircle.w, yellowCircle.h);

	if (mouseX > width/2) {
		fill(248, 64,0);
		ellipse(yellowCircle.x, bottombound, yellowCircle.w, yellowCircle.h);
	}

	//green square top left
	fill(0,164,82);
	rect(greenSqSmall.x, bottombound, greenSqSmall.w, greenSqSmall.h);

	//pink circle top left
	fill(255,185,200);
	ellipse(pinkCircle.x, bottombound, pinkCircle.w, pinkCircle.h);

	//pink rect bottom left
	fill(255,185,200);
	rect(31,275, 136,184);

	//blue rect bottom left
	fill(40,44,147);
	rect (31,343,68,116 + mouseY/4);

	//yellow circle bottom left
	fill(255,209,0);
	ellipse(99,343,136,136);

	if (mouseX > width/2) {
		fill(248, 64,0);
		ellipse(99,343,136,136);

	}

	//green semicircle bottom left
	fill(0,164,82);
	push();
	translate(99,343);
	rotate(radians(mouseY));
	arc(0,0,136,136, PI, 0, CHORD);
	pop();	

	//green circle middle
	fill(0, 164, 82);
	ellipse(139, 184, 60,60);

	//blue rect nub
	fill(255,209,0);
	rect(108, 215, 60, 60, 80, 0, 0, 0);

	//blue rect top right
	fill(40,44,147);
	rect(168, 138, 171, 137);

	//blue circle top right
	ellipse(253,136,171,171);

	if (mouseY>height/2) {
		fill(255,185,200);
		ellipse(253,136,171,171);
	}

	//yellow semicircle top right
	fill(255,209,0);
	push();
	translate(253,136);
	rotate(radians(mouseY));
	arc(0,0,172,172, PI+2, 2, CHORD);
	pop();	

	//line 1
	line(31, 134, 339, 134);

	//pink circle top right
	fill(255, 185,200);
	ellipse(255, 136, 84, 84);

	if (mouseY>height/2) {
		fill(40,44,147);
		ellipse(255, 136, 84, 84);
	}

	//red semi top right
	fill(248, 64,0);
	push();
	translate(255,136);
	rotate(radians(-mouseX));
	arc(0,0,84,84, 0, PI, CHORD);
	pop();	

	//line 2
	line(340, 459, 340, 275);

	//red circle bottom right
	fill(248,64,0);
	ellipse(262,370, min(mouseX,188), min(mouseX,188));

	//line 3
	line(167, 275,341,459);

	//white circle bottom left
	fill(255,255,255);
	ellipse(65 + mouseX, 459, 70, 70);

	//small rect pink
	fill(255,185,200);
	quad(226, 328, 217, 337, 262, 385, 271, 376);

	//small rect yellow
	fill(255,209,0);
	quad(277,382, 268, 391, 286, 410, 295, 401);

}

Below is my base sketch/composition done in Illustrator:

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 03 – Dynamic Drawing

peachp3
var angle = 0
var move = 0


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

function draw() {
  //background changes color
  background(217, (constrain(mouseY,200,450)), 250);
 
  //ring appears
    if (mouseY<height/2){
    noFill();
    stroke(255, 248, 156)
    ellipse(width/2, height/2, 300)
    }
  else {
    noFill();
    stroke(255,248,156);
    ellipse(width/2, height/2, 500);
  }
  //body
  noStroke()
    fill(32, 70, 133)
    triangle(width/2, height/2 - 70, 220, 400, 380, 400)
 
  //table
  fill(250, 204, 177);
    rect(0, height/4*3, width, height/4*3);
  fill(168, 112, 74)
    rect(0, 430, width, 20)
 
  //head
  fill(255, 235, 186);
    ellipse(width/2, 200, 170);
 
  //hair
  fill(0)
  arc(width/2, constrain(mouseY-100, 100, 170), 180,180, PI, 0)
 
  //left arm
  push();
    translate(width/2, height/2+70)
  fill(32, 70, 133)
    rotate(radians(mouseX/100*5))
      rect(-100,0, 100, 30);
  fill(255, 235, 186)
    ellipse(-100,15, 28)
  pop();
 
  //right arm
  push();
    translate(width/2, height/2+70)
  fill(32, 70, 133)
    rotate(radians(-mouseX/100*5))
      rect(0,0, 100, 30);
  fill(255, 235, 186)
    ellipse(100,15, 28)
  pop();
 
  //eyes
  noFill()
  stroke(0)
  strokeWeight(3)
    arc(width/2-35, 190, 40,40, PI, 0);
    arc(width/2+35, 190, 40,40, PI, 0);

//mouth
if (mouseY < height/2){
  push();
translate(300,240)
  scale (1.2)
    fill(0)
    ellipse(0,0, 60);
  fill(242, 117, 92)
  ellipse(0,10,40,20)
  pop();
}
  else {
    push();
    translate(300,240)
    scale(0.75);
  fill(0)
      ellipse(0,0,60);
  fill(242, 117, 92)
    ellipse(0,10,40,20)
    pop();
  }
//tomato
  if (mouseY<height/2){
    push();
      noStroke();
      fill(255,0,0)
        ellipseMode(CENTER)
      translate(480,150)
    scale(2.5)
      rotate(radians(angle));
        ellipse(0,0,30);
    noStroke();
      fill(0,255,0)
        ellipse(0,-10,10,5);
    pop();
    angle +=8
  }
   
  else {
 
    push();
    noStroke();
    fill(255,0,0)
      ellipseMode(CENTER)
    translate(480,350)
    scale(1.4)
    rotate(radians(angle));
      ellipse(0,0,30);
    noStroke();
    fill(0,255,0)
      ellipse(0,-10,10,5);
    pop();
      angle -=10
  }
//orange
    if (mouseY<height/2){
      push();
   translate(120,300)
    scale(2.0);
    noStroke();
    fill(245, 188, 103)
      ellipseMode(CENTER)

    rotate(radians(-angle));
      ellipse(0,0,30);
    noStroke();
    fill(150, 136, 114)
      ellipse(0,-10,5, 10);
      pop();  
    angle-=5
    }
 
    else {
      push();
    translate(120,100)
    scale(3.0);
      noStroke();
    fill(245, 188, 103)
      ellipseMode(CENTER)
    rotate(radians(-angle));
      ellipse(0,0,30);
    noStroke();
    fill(150, 136, 114)
      ellipse(0,-10,5, 10);

      pop();
      angle += 5
     
    }
  fill(250)
  noStroke()
  ellipse(move, 380, 70,30)
  noFill()
  strokeWeight(3)
  stroke(200)
  ellipse(move, 380, 50, 20)
  move = move + 10
  if (move>width){
    move = -move
  }
 
 
 
}

It was difficult creating this efficiently, and it was particularly hard for me personally to cause parameters to counter each other. Inspired by my little cousin who gets cranky when he is hungry.

LO 3 – Computational Fabrication

Silk Pavilion II

Neri Oxman (2020)

For this week’s Looking Outward post, I studied Silk Pavilion II (https://www.media.mit.edu/projects/silk-pavilion-ii/overview/) by Neri Oxman—a delicately woven silk structure examining the relationship between digital and biological fabrication. I was initially intrigued by the grand architectural scale and intricacies of the sculpture. The Pavilion is composed of three interconnected layers—the first layer is a web of steel-rope wires, the second layer contains fabric on which silkworms are positioned, and the third layer contains the visible Pavilion structure that is biologically spun by the 17,532 silkworms. After I studied the mechanics of the structure more, I was fascinated by the order and sequencing of the silkworms’ upward spinning motion, created by a mechanical top-down kinetic manipulation, which generates the spiral pattern. More importantly, I found the message and purpose of The Pavilion particularly interesting. In the textile industry today, silkworms are killed in their cocoon, dissolving the adhesive that connects one strand of silk to the below layers. This allows the silk strand to be extracted from the cocoon, but also harms the life cycle of the silkworm. The Silk Pavilion, however, demonstrates that artificial structures can influence silkworms to construct sheets instead of cocoons, and celebrates silkworms as designers of their own. Especially when guided by a human-made base structure and mechanism, the silkworms can weave beautifully elaborate forms and patterns.

Project-03 Dynamic Drawing

Because I had trouble figuring out where to begin on this project, I took a more structured approach and thought of a concept and composition beforehand. I chose to depict the rotting of a banana as time passes, an experience that is unfortunately all too familiar to me 🙁

zimmy banan
function setup() {
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background (255, 246, 234);
	fill (247, 210, 228);
	noStroke();
	rect (0, 330, 480, 310); // table

	fill(200, 138, 94);
	circle(100, 150, 145);
	fill(255, 255, 255);
	circle(100, 150, 130); // clock

	fill(14, 16, 51);
	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX/20)); // rotates at 1/60 of the speed of minute hand
    ellipse(0, -15, 4, 30); // hour hand 
	pop();

	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX*3)) // rotates 60x speed of hour hand
	ellipse(0, -25, 4, 50); // minute hand
	pop();

	stroke(140, 156, 190);
	strokeWeight(10);
	noFill();
	bezier(280, 208, 280, 100, 400, 100, 400, 208);
	line(400, 208, 400, 485);
	fill(140, 156, 190);
	noStroke();
	ellipse(400, 500, 105, 40); // banana hook

	fill(140, 156, 190, 50);
	ellipse(constrain(mouseX, 160, 235), 550, 200, 45); // right shadow; moves in a confined space with mouseX
	ellipse((320-(constrain(mouseX, 160, 220))), 550, 200, 45); // left shadow; moves opposite mouseX

	fill(254, 218, 65);
	stroke(228, 170, 36);
	strokeWeight(2);
	arc(80, 253, 400, 400, radians(-15), radians(105), CHORD); // leftmost banana
	arc(100, 280, 400, 400, radians(-25), radians(100), CHORD); // middle banana
	arc(120, 315, 400, 400, radians(-35), radians(90), CHORD); // rightmost banana
    noFill();
	arc(-9, 270, 600, 590, radians(-14), radians(50)); // detail on rightmost banana

	noStroke();
	fill(134, 92, 36, mouseX-40);
	ellipse(273, 286, 10, 8);
	ellipse(270, 326, 20, 33);
	ellipse(240, 420, 43, 45);
	fill(134, 92, 36, mouseX-100);
	ellipse(290, 360, 36, 45);
	ellipse(240, 375, 40, 40);
	fill(134, 92, 36, mouseX-200);
	ellipse(198, 460, 30, 20);
	ellipse(285, 400, 8, 12);
	arc(185, 368, 100, 100, radians(-50), radians(105), CHORD); // spots on rightmost banana appear at different times

	fill(134, 92, 36, mouseX-100);
	ellipse(140, 425, 28, 22);
    ellipse(190, 345, 14, 14)
	fill(134, 92, 36, mouseX-300);
	ellipse(150, 400, 30, 36) // spots on middle banana

	fill(134, 92, 36, mouseX-200);
	ellipse(80, 430, 14, 13);
	arc(80, 370, 80, 80, radians(-20), radians(110), CHORD); // spots on leftmost banana

    push();
    fill(254, 218, 65, mouseY-80);
    textSize(constrain(mouseY/3, 30, 70));
    textAlign(CENTER, CENTER);
    text("yummy", 330, 50);











}

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 


}

Project 3: Dynamic Drawing

For this project, I wanted to portray the vibrancy and health of a flower depending on the amount of water that is in a vase. The more water there is in the vase (controlled by your mouse’s Y value, the bigger and more colorful the flower appears to be!

sketchDownload
// Susie Kim
// Section A


function setup() {
    createCanvas(450, 600);
	background(255, 218, 185);
}

function draw() {
	// define variables
	var setVal = mouseY/6;
	var waterOpacity = mouseY/13;
	var leafVal = mouseY/15;
	var flowerVal = mouseY/20;
	if (setVal >= 150) {
		setVal = 150;
	}
	background(255, 218, 185);
	//table
	fill(255, 178, 102);
	rect(0, 525, 500, 100);
	// vase water
	fill(102, 178, 255, 150 - waterOpacity);
	noStroke();
	rect(150, 350 + setVal, 150, 175 - setVal, 20, 20);
	// flower stem that changes color
	stroke(0, 204- setVal, 0);
	strokeWeight(6);
	line(225, 200, 225, 520);
	// vase itself
	strokeWeight(4);
	stroke(51);
	noFill();
	rect(150, 275, 150, 250, 20, 20);
	// flower!
		// flower petals
    noStroke()
	fill(255 - setVal, 153 - setVal, 204 - setVal);
	ellipse(185, 170, 55, 55);
	ellipse(265, 170, 55, 55);
	ellipse(225, 140, 55, 55);
	ellipse(205, 215, 55, 55);
	ellipse(245, 215, 55, 55);
	    // flower center that expands
	fill(255 - setVal, 255 - setVal, 0);
	if(flowerVal >= 25) {
		flowerVal = 25;
	}
	ellipse(225, 180, 65 - flowerVal, 65 - flowerVal);
	    // leaves that grow
	fill(0, 204- setVal,0);
	if (leafVal >= 25) {
	    leafVal = 25;
	}
	ellipse(250, 325, 70 - leafVal, 40 - leafVal);
	ellipse(200, 325, 70 - leafVal, 40 - leafVal);
}

LookingOutwards-03

I admired the entry work by matsys for the Tulum Site Museum competition. I was fascinated by the creator’s ability to demonstrate depth within their works. With the inclusion of a person within their work, it was relatively easy to understand how large of a museum it would be. Immediately, I began seeing and thinking “that must be a window”, or “that must be a mirror.” 

As far as the algorithms, it was never explicitly stated but I would assume that it was done through 3D rendering, with the implementation of layers to show how the rooms within the museum should be arranged. Based on matsys’ previous works, I can see how their artistic sensibilities are manifested in this work. Most of their works include a porous material/texture, and appear almost sponge-like. In the entry work for the Tulum Site Museum competition, the walls have many holes/empty spaces in them. It seems so sponge-like that it reminds me of coral reefs. 

This is from mastys’ entry work for the Tulum Site Museum competition. Here, they have created a rendering of what they imagine the interior of the museum should look like. You can see how mastys has incorporated the porous-like appearance in the walls and the ceiling. With the inclusion of what appears to be a shadow of a person, it is useful in making a judgment of how large the museum would be.

https://www.matsys.design/tulum-site-museum