SectionD – Page 35 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

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:

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

drawingtlourie


function setup() {
    createCanvas(500, 500);
    background(0);

}

function draw() {
	background(0);
	stroke(200, 0, mouseY);
    strokeWeight(mouseX/15); //vertical red lines
    line(25, 0, 25, 500);
    line(75, 0, 75, 500);
    line(125, 0, 125, 500);
    line(175, 0, 175, 500);
    line(225, 0, 225, 500);
    line(275, 0, 275, 500);
    line(325, 0, 325, 500);
    line(375, 0, 375, 500);
    line(425, 0, 425, 500);
    line(475, 0, 475, 500);


    noStroke();
    fill(0, 0, 200, mouseY/2 + 20); //circls
    ellipse(100, 100, pmouseX-mouseX/3);
    ellipse(100, 400, pmouseX-mouseX/3);
    ellipse(400, 100, pmouseX-mouseX/3);
    ellipse(400, 400, pmouseX-mouseX/3);



    fill(200, 200, 0, mouseX/2 + 20); //circles
    ellipse(100, 100, pmouseY-mouseY/3);
    ellipse(100, 400, pmouseY-mouseY/3);
    ellipse(400, 100, pmouseY-mouseY/3);
    ellipse(400, 400, pmouseY-mouseY/3);

    push();

    translate(width/2, height/2);
    rotate(radians(mouseX));
    fill(255, 255, 255, mouseX/2+15); //white piece
    rectMode(CENTER);
    rect(0, 0, 255-mouseY, 1000); 

    pop();

	stroke(200, 0, mouseY);
	strokeWeight(mouseY/15); //horizontal red lines
    line(0, 25, 500, 25);
    line(0, 75, 500, 75);
    line(0, 125, 500, 125);
    line(0, 175, 500, 175);
    line(0, 225, 500, 225);
    line(0, 275, 500, 275);
    line(0, 325, 500, 325);
    line(0, 375, 500, 375);
    line(0, 425, 500, 425);
    line(0, 475, 500, 475);


}

LO 3

“Fluorescence Zoetrope” is a 3D printed sculptural animation piece created by the design firm Nervous System (Jessica Rosenkrantz and Jesse Louis-Rosenberg.) They 3D modeled an organic growth loop algorithmically, then PLA printed each frame. Then they mounted them onto a rotating platform to animate the form.
I am drawn to this piece because of the impressive craft involved in it. The color gradient is eye catching and perfectly smooth, and the forms themselves are incredibly high-resolution. I think this project is a testament to the level of refinement that technologies such as computer generation and 3D printed can provide at times. The algorithms used to create this project are based on natural growth processes.

Dynamic Drawing

sketch

//Jasmin Kim
//Section D
var r=63;
var b=219;
var br=90;
var fishX=200;
var fishY=300;
var seaY=160;
var bubblebright=0;
var angle=0;

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

function draw() {
    //Sky
    //Changes Night to morning as mouseY moves downward
    let back=constrain(mouseY,70,height)
    background(back);

    //Stars & Sun
    //Star comes out during night time(mouse at the top right side)
    //Sun grows from 0 to 128 during the morning(mouse at the bottom right side)
    //Star rotates as mouseX increases(mouse at the topside)
    let op=constrain(mouseX,0,width/2);
    let sunsize=constrain(mouseX,0,129);
    if(mouseY<200){
        push();
        noStroke();
        push();
        translate(79,121);      //star1
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);
        ellipse(0,0,17,4);
        pop();
        push();
        translate(175,164);     //star2
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        push();
        translate(355,145);     //star3
        rotate(radians(mouseX));
        fill(230,219,57,op);
        ellipse(0,0,4,17);   
        ellipse(0,0,17,4);
        pop();
        pop();
    } else{
        push();
        noStroke();
        fill(247,212,40);
        circle(351,45,sunsize);
        pop();
    }


    //Sea
    //Color changes from deap sea color to shallow water level color
    //as mouseY moves downward
    let seaY = constrain(mouseY,180,300);
    let gr = constrain(mouseY,85,174);
    push();
    fill(r,gr,b);
    noStroke()
    square(0,seaY,width);            
    pop();

    //mouth
    fill(112,196,161);   
    //let animalY = constrain(mouseY,160,390);
    let fishY = constrain(mouseY,130,287);
    moveY=height-fishY
    push();
    noStroke();
    circle(fishX+91,moveY-5,13);
    circle(fishX+91,moveY+5,13);

    //Tail
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-86,moveY-4);
    curveVertex(fishX-122,moveY-13);
    curveVertex(fishX-114,moveY+1);
    curveVertex(fishX-120,moveY+22);
    curveVertex(fishX-86,moveY+12);
    curveVertex(fishX-86,moveY+12);
    endShape();
    pop();

    //fish body/eyes
    ellipse(fishX,moveY,181,85);
    fill(0);
    ellipse(fishX+70,moveY-11,16,14);
    fill(255);
    ellipse(fishX+74,moveY-13,5,4);
    pop();

    //fins
    push();
    fill(246,208,98);
    stroke(246,208,98);
    strokeWeight(3);
    beginShape();
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX+23, moveY-5);
    curveVertex(fishX-6, moveY-8);
    curveVertex(fishX-5, moveY+5);
    curveVertex(fishX-4, moveY+18);
    curveVertex(fishX+25, moveY+7);
    curveVertex(fishX+25, moveY+7);
    endShape();
    pop();

    //Bubbles
    //Bubble disappears as mouseY moves upwards
    push();
    if(mouseY<230){
        fill(31,131,172,0);
        strokeWeight(1);
        fill(31,131,172);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
        circle(fishX+114,moveY-31,5);
        circle(fishX+127,moveY-45,7);
    } else if(mouseY<280){
        fill(31,131,172,100);
        strokeWeight(1);
        fill(31,131,172,100);
        circle(fishX+102,moveY-2,4);
        circle(fishX+106,moveY-10,3);
        circle(fishX+118,moveY-13,4);
    } else{
        fill(0);
    }
    pop();

    //cloud color gets brighter as mouseY moves downward
    //cloud comes in as mouseX moves right
    //leftside cloud
    let skyX = constrain(mouseX,0,width/2);
    let rrr =constrain(mouseY,210,252);
    push();
    noStroke();
    fill(rrr,185,153);
    circle(skyX-64,43,50*1.5);        //big cloud
    circle(skyX-106,46,22*1.5);          //small cloud
    rectMode(CENTER);
    rect(skyX-72,64,99*1.5,30*1.5,30);
    pop();

    //rightside cloud
    //comes in from the left edge
    let skyyX =constrain(mouseX+30,0,width/2);        
    push();
    noStroke();
    fill(rrr,185,153);
    circle((width-skyX)+73,73,61*1.4);        //big cloud
    circle((width-skyX)+115,76,31*1.5);          //small cloud
    rectMode(CENTER);
    rect((width-skyX)+84,93,123*1.3,31*1.5,30);
    pop();
}

For created this idea, I had to let a lot of values into constrain so that the mouseX and the mouseY values does not get mixed up each other.

Project 3: Dynamic Drawing

dynamic drawing cb

var size = 100;
var diam = 50;
var dir = 1;
var speed = 2;

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

function draw() {
    //color-changing background and stroke
    background(10, 10, mouseX/2);
    stroke(255-mouseX/2, 255-mouseY/2, 255-mouseX/2);
    
    //center of canvas
    var x = width/2;
    var y = height/2;

    //constrain mouse position on canvas
    mouseX = constrain(mouseX, 0, width);
    mouseY = constrain(mouseY, 0, height);

    //inner flower circles rotate depending on mouseX
    strokeWeight(1.5);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 50);
    for (var i = 0; i < 5; i += 1) {
        push();
        translate(x, y);
        rotate((mouseX / 400) + radians(360 * i / 5));
        ellipse(50, 0, 100, 100);
        pop();
    }

    //outer flower circles rotate depending on mouseX
    strokeWeight(1);
    fill(255-mouseX, 255-mouseY/2, 255-mouseX/2, 30);
    for (var i = 0; i < 8; i += 1) {
        push();
        translate(x, y);
        rotate((-mouseX / 400) + radians(360 * i / 8));
        ellipse(50, 0, 250, 250);
        pop();
    }

    //outermost circles rotate and change size depending on mouseY
    strokeWeight(1);
    noFill();
    var m = max(min(mouseY, 600), 0);
    var size = m * 180 / 600 + 30;
    for (var o = 0; o < 50; o += 1) {
        push();
        translate(x, y);
        rotate((mouseY / 500) + radians(360 * o / 50));
        ellipse(300, 0, size, size);
        pop();
    }

    //center expanding contracting circle
    strokeWeight(3);
    noFill();
    ellipse(x, y, diam, diam);
    diam += dir * speed;
    if (diam > 400) {
        dir = -dir;
        diam = 400;
    } else if (diam < 0) {
        dir = -dir;
        diam = 0;
    }

    //converging lines that follow the mouse position
    //converging lines right
    strokeWeight(1);
    line(450, 0, mouseX, mouseY);
    line(450, 50, mouseX, mouseY);
    line(450, 100, mouseX, mouseY);
    line(450, 150, mouseX, mouseY);
    line(450, 200, mouseX, mouseY);
    line(450, 250, mouseX, mouseY);
    line(450, 300, mouseX, mouseY);
    line(450, 350, mouseX, mouseY);
    line(450, 400, mouseX, mouseY);
    line(450, 450, mouseX, mouseY);
    line(450, 500, mouseX, mouseY);
    line(450, 550, mouseX, mouseY);
    line(450, 600, mouseX, mouseY);

    //converging lines left
    strokeWeight(1);
    line(0, 0, mouseX, mouseY);
    line(0, 50, mouseX, mouseY);
    line(0, 100, mouseX, mouseY);
    line(0, 150, mouseX, mouseY);
    line(0, 200, mouseX, mouseY);
    line(0, 250, mouseX, mouseY);
    line(0, 300, mouseX, mouseY);
    line(0, 350, mouseX, mouseY);
    line(0, 400, mouseX, mouseY);
    line(0, 450, mouseX, mouseY);
    line(0, 500, mouseX, mouseY);
    line(0, 550, mouseX, mouseY);
    line(0, 600, mouseX, mouseY);

}

For this project, I was inspired by guided breathing/meditation animations and wanted to use motion/simple shapes to create something soothing and mesmerizing. I used circles to create a rotating flower and practiced using transformations, expanding/contracting, push/pop, and mouse interactions. Below are some inspiration images:

fireworks animation on SmaPhoArt website

LO 3 – Computational Fabrication

I am inspired by Elisa Stroyk’s “Wooden Carpet” (2009) because of the fascinating form, which is a hybrid surface that combines textiles and furniture. The form and material highly contrast each other, as a rug is typically thought of as soft and flexible while wood is more rigid and hard. I think that the way that these properties have blended in this project is quite interesting. In terms of the technical creation of the work, I believe that the geometric shapes were algorithmically developed, laser-cut out of wood, and then bonded to a textile backing.

Stroyk’s work is driven by her interest in material and presumptions about material, rethinking form and function in everyday objects. The flexibility and modularity of this project reflect that though parametric 3D fabrication involves rules, there are infinite possibilities and combinations.

Looking Outward 03 – ASOS

The project I am looking at is done by Advanced Synthesis Option Studios’s Dana Cupkova, in collaboration with Nina Schatz, Nana Choi, Kimberly McDonald, Gloriana Gonzales, and Avanti Dabholkar. The projects, “Epiflow: Towards Resiliency of Post-Soviet City Networks” and “Other Natures,” drew me in because of their attitude towards environment and ecological sustainability. I admire that they accept the damage to our biosphere and use it as an opportunity to better our architectural practices. Through simulation and iteration, they are able to test designs against the variables of the universe. I have no idea about the algorithms, although I would assume that they use them to simulate various conditionals: if “x” happens, then what? Each artist brings their own touch to the overall project. However, it seems that for the most part those indivdiual touches are more about the how each piece of the puzzle functions than about the pieces themselves.

https://soa.cmu.edu/asos-cupkova

OTHER NATURES (S14) | Nana Choi (B.Arch 2015) — **OTHER NATURES** (S14) | Nana Choi (B.Arch 2015)