LO-03: Computational Fabrication

The project I chose was Cumulus from the SOFTlab. This project first captured my attention because of its intricate design and overall aesthetic use of lighting. Upon learning more about Cumulus, I admired how interactive it was and how it is able to link sound and light together. I thought it was a unique aspect since it blends two of the five human senses, hearing and seeing. To create this installation, the creator pieced together over 200 acrylic segments with over 100 3D printed joints into a cloud-like shape with a network of LED strands inside. The interactiveness, that is linking sound to light, was achieved by building a user interface programmed with Processing. Like other projects from SOFTlab, Cumulus also takes on a unique, complex shape and is enhanced by lighting but this time with a combination of sound to achieve its final outcome.

Cumulus (SOFTlab, 2015) is an interactive installation that reacts to sound with light.

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)

Dynamic Drawing

sketch In this program, I decided to play with parameters for the panda and background. The most challenging and interesting part was getting the moon and sun to move in a curved path instead of just across the screen. Along with that I changed background colour, rotated the stars and added clouds. For the panda the expression changes when the bamboo shoot comes by and the eyes change shape based on the y position of the mouse.
//Aadya Bhartia 
//Section A

var t = 0;
var angle = 0;
function setup() {
    createCanvas(600, 480);
    //background(220);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
	background(120, 200, 220);
	//sun to moon 
    var x1 = 250*cos(PI - t) + 300; // using a curve to map the moon and sun to look like it is rising and setting 
    var y1 = 480 - 420*sin(t);
    //clouds 
    fill(255);
    ellipse(70, 40, 30, 30, 30);
    ellipse(40, 50, 40);
    ellipse(60, 70, 45);
    ellipse(55, 65, 25);
    ellipse(30, 75, 45);
    ellipse(90, 75, 45);
    ellipse(95, 49, 25);
    push();
    translate(380, 30);
    scale(2.0);
    ellipse(70, 40, 30, 30, 30);
    ellipse(40, 50, 40);
    ellipse(60, 70, 45);
    ellipse(55, 65, 25);
    ellipse(30, 75, 45);
    ellipse(90, 75, 45);
    ellipse(95, 49, 25);
    pop();
    push();
    translate(300, 300);
    scale(0.75);
    ellipse(70, 40, 30, 30, 30);
    ellipse(40, 50, 40);
    ellipse(60, 70, 45);
    ellipse(55, 65, 25);
    ellipse(30, 75, 45);
    ellipse(90, 75, 45);
    ellipse(95, 49, 25);
    pop();
    fill(250, 250, 0);
    ellipse(x1, y1, 120);
    if(mouseX>=width/2){ // night time moon and stars 
        background(72, 91, 115);
        ellipse(x1, y1, 120);
    	var moonC = map(x1, 0, height, 80, 0);
    	fill(72, 91, 115);
    	noStroke();
    	ellipse(x1 - moonC - 30, y1, 120);
        //stars 
        push();
        fill(255);
        translate(20, 40);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(320, 150);
        scale(1.5);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(400, 350);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(500, 240);
        scale(0.75);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(560, 70);
        scale(1.20);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
        push();
        fill(255);
        translate(150, 80);
        scale(0.7);
        rotate(radians(mouseX));
        ellipse(0, 0, 5, 20);
        rotate(radians(mouseX+5));
        ellipse(0, 0, 20, 5);
        pop();
    }
    t = mouseX*(PI/600);
    //panda figure 
    noStroke();
    fill(0);//ears 
    ellipse(70, 200, 80,80);
    ellipse(230, 200, 80,80);
    ellipse(150, 400, 280);//body
    fill(255);
    ellipse(150, 400, 230, 260);//body
    fill(0);
    ellipse(150, 340, 0.3*mouseX, 130); // patch on body chnage with mouseX
    fill(255);
    ellipse(150, 240, 190);//face
    //eye rotating with size depending on mouseY
    fill(0);
    push();
    translate(110, 223);
    rotate(radians(angle));
    ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
    pop();
    push();
    translate(190 , 223);
    rotate(radians(angle));
    ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
    pop();
    angle += 5;
    //face smile when mouse comes with bamboo shoot
    if(mouseX>30 & mouseX<=200 && mouseY>=180&& mouseY<=310){
        fill(242, 120, 120);
        ellipse(110, 250, 20);
        ellipse(190, 250, 20);
        fill(245, 80, 70);
        arc(150, 260, 50, 50, 0, PI);
    }
    else{ // general smile and nose 
        fill(0);
        beginShape();
        curveVertex(150, 180);
        curveVertex(130, 270);
        curveVertex(170, 270);
        curveVertex(130, 190);
        endShape();
        noFill();
        stroke(0);
        strokeWeight(3);
        arc(138, 280, 25, 20, 0, PI);
        arc(161, 280, 25, 20, 0, PI);
    }
    //bamboo for mouse
    noStroke();
    fill(20, 220, 100);
    rect(mouseX, mouseY, 10, 50);
    fill(20, 250, 100);
    rect(mouseX, mouseY+55, 10, 20);
    fill(10, 220, 20);
    push();
    translate(mouseX + 25, mouseY + 10);
    rotate(radians(-20));
    ellipse(0, 0, 15, 5);
    ellipse(0, 15, 15, 5);
    pop();
}

Looking Outwards – 3

Neri Oxman and MIT developed a collection of Programmable Water-Based Biocomposites for Digital Design and Fabrication across Scales called Aguahoja. This is a project that explored how natural materials that have been put to waste by humans can be digitally designed and computationally fabricated by 3D printers or other robots. Through this project, Oxman and her team hoped to develop a solution to the vicious cycle of material extraction and obsolescence through the creation of biopolymer composites.
This collection is digitally designed and computationally fabricated by 3D printers or other robots made with available materials on earth- materials within trees, insect exoskeletons , apples, and bones- in hopes of avoiding depleting more of Earth’s materials.
https://www.media.mit.edu/projects/aguahoja/overview/


I admire this project for its mindfulness towards the environment and the effort and dedication that has been put into creating each piece and subpart in order to think of a more sustainable tomorrow

Project 03 – Dynamic Drawing

sketch
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var x = 0; 
var y = 0; 

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

function draw() {
	noStroke(); 
	background((constrain(mouseY,200,210)),(constrain(mouseY,220,240)),constrain(mouseY,190,210)); 

	// - CLOUDS - //

	//EllipseX variable is to expand or contract ellipse width 
	var ellipseWidth = constrain(mouseY,100,150); 

	//Variables for cloud on left side 
	var positionY = constrain(mouseY,100,150);
	var positionY2 = constrain(mouseY,50,100);
	var positionX = constrain(mouseX,80,100); 

	//Cloud on left side moves side to side 
	fill(constrain(mouseY,230,255));
	ellipse(positionX,positionY,ellipseWidth,100); 
	ellipse(positionX+50,positionY2,100,100); 
	ellipse(positionX+100,positionY,100,100); 
	ellipse(positionX+150,positionY2,100,100); 
	ellipse(positionX+200,positionY,ellipseWidth,100); 

	//Variables for cloud on right side 
	var positionY3 = constrain(mouseY,300,350);
	var positionY4 = constrain(mouseY,250,300);
	var positionX2 = constrain(mouseX,50,120); 

	//Cloud on right side moves side to side 
	fill(constrain(mouseX,200,230)); 
	ellipse(positionX2+200,positionY3,ellipseWidth,100); 
	ellipse(positionX2+250,positionY4,100,100); 
	ellipse(positionX2+300,positionY3,100,100); 
	ellipse(positionX2+350,positionY4,100,100); 
	ellipse(positionX2+400,positionY3,ellipseWidth,100); 

	//Yellow circles as stars in the background
	push(); 
	rotate(radians(mouseX*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	push(); 
	rotate(radians(mouseY*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	//Mountains
	fill(148,171,146); 
	triangle(270,490+mouseY,330,330+mouseY,390,490+mouseY); 
	triangle(330,490+mouseY,430,330+mouseY,520,490+mouseY); 
	triangle(0,490+mouseY,200,250+mouseY,400,490+mouseY); 
	triangle(400,490+mouseY,500,300+mouseY,600,490+mouseY);  

	//Flower in the center 
	push();  
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	for (let r = 0; r < 10; r++){
	ellipse(0,0,20,80); 
	rotate(PI/5);
	}
	pop(); 

	//sun 
	push(); 
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	pop(); 


}


I was inspired by nature and weather. I tried to depict the sun, mountains, stars, and clouds in my piece.

Project 03 – Interactive Flower

flowergrowDownload
var h = 10
var angle = 0
var color = 0
var clouda = -100
var cloudb = clouda + 100

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

function draw() {
	if (color == 0) {
		background(255, 128, 188);
	} else {
		background(0, 154, 255);
	}
	if (mouseIsPressed) {
        fill(255);
        ellipse(clouda, 100, 150, 75);
        ellipse(cloudb, 250, 110, 90);
        clouda = clouda + 2
        cloudb = cloudb + 2
        if (clouda >= 450) {
            clouda = -100
            cloudb = clouda + 100
        }
	}
	strokeWeight(h);
	stroke(0, 255, 0);
	line(225, 600, 225, max(mouseY, 200)); //stem gets taller as mouseY gets lower
	if (mouseY < 500) {
		fill(0, 255, 0);
		ellipseMode(CORNER);
		ellipse(225, max(mouseY, 300), min(600 - mouseY, 200), constrain(600 - 2*mouseY, 50, 100));
		//leaf grows as the stem grows
	}
	fill(255, 0, 119);
	noStroke();
	if (mouseY >= 200) {
		ellipseMode(CENTER);
	    ellipse(225, max(mouseY, 200), max(min(600 - mouseY, 200), 0));
	    //flower bud grows as mouseY gets lower
	} else {
		push();
		translate(225, 200);
		rotate(radians(angle));
		fill(255, 0, 119);
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(-100, -30);
		curveVertex(-30, -100);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(30, -100);
		curveVertex(100, -30);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(100, 30);
		curveVertex(30, 100);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		beginShape();
		curveVertex(0, 0);
		curveVertex(0, 0);
		curveVertex(-30, 100);
		curveVertex(-100, 30);
		curveVertex(0, 0);
		curveVertex(0, 0);
		endShape();
		pop();
        angle = angle + 5
        //spinning flower petals are pretty!
	}
}

function mousePressed(){
    if (dist(mouseX, mouseY, 225, 200) <= 100) {
    	color = 1
    } else {
    	color = 0
    }
}

Project-03-Dynamic-Drawing

dynamicdrawing

function setup() {
    createCanvas(600, 450,);
    background(220);
}
function draw() {
    var x = mouseX
    var y = mouseY
    var g = 0
    var b = 0
    //background
    background(0)

    push();
    translate(mouseX-750,0)
    stroke(255,)
    strokeWeight(2)
    scale(3,1)
    line(0,20,50,20)
    line(120,40,130,40)
    line(60,50,130,50)
    line(300,80,350,80)
    line(300,90,380,90)
    line(100,100,170,100)
    line(230,130,280,130)
    line(200,160,210,160)
    line(40,170,90,170)
    line(400,200,420,200)
    line(340,220,370,220)
    line(220,230,310,230)
    line(420,270,440,270)
    line(80,280,180,280)
    line(160,290,150,290)
    line(370,320,420,320)
    line(10,330,90,330)
    line(140,350,170,350)
    line(40,370,60,370)
    line(320,390,330,390)
    line(80,400,120,400)
    line(210,430,260,430)
    line(400,440,450,440)
    pop();
    // spinning arcs
    strokeWeight(1+y/50);
    noFill();
    //transformations
    translate(300,225);
    rotate(radians(x/2));
    cony = max(y,.5);
    scale(cony/200);
    
    noStroke();
    fill(0);
    circle(0,0,270);
    g = g + x/3
    b = b + x/8
    //arcs (smallest to largest)
    noFill();
    stroke(255,0+g,0+b);
      arc(0,0,140,140,-PI/4,4*PI/5);
    rotate(radians(x/2));
      arc(0,0,180,180,PI/2,4*PI/3);
    rotate(radians(x/5));
      arc(0,0,200,200,PI,9*PI/4);
    rotate(radians(x/7));
      arc(0,0,270,270,11*PI/6,5*PI/6);
}

I incorporated two animated ideas into one which creates a different dynamic on motion, one moving horizontally and the other moving within itself while changing size position and color.

project-03

sketchDownload
var angle=0;
var boxWidth = 80;
var boxX = 30;
function setup() {
    createCanvas(600, 450);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(205, 255, 0);
	if (mouseY>height/2){
		background(139, 171, 14);
	}
    //changing color of background
	noStroke();
	 fill(105, 93, 34);
    if (boxX>width){
    	boxX=-boxWidth;
    }
    boxX=boxX+5;
    rect(boxX, height/2, boxWidth, 40);
    //moving rect
    fill(229, 163, 220);
	circle(mouseX, mouseY, 100);
	//pink circle
    fill(255, 213, 0);
    circle(600-mouseX, mouseY*4/5, mouseX*2/3);
    //yellow circle
    fill(149, 120, 229);
    push();
    translate(100, 100);
    rotate(radians(angle));
    rectMode(CENTER);
    rect(0, 0, dist(mouseX, mouseY, width/2, height/2), dist(mouseX, mouseY, width/2, height/2));
    pop();
    angle += 3;
    //rotating square
    fill(243, 142, 220);
    rect(width/2, mouseY, mouseX*3/8, 90);
    //pink rect
}

Looking Outwards 03: Computational Fabrication

G3DP2 is a newly designed additive manufacturing technology that is 3D printed to be a revolutionary instability and optical implementations. This new glass takes away uncertain variables and gives users and designers greater control of material and experience. G3DP2 is able to be altered for users’ needs in terms of thermal control to molding. To advance a traditional material such as glass is easily overlooked because of the long satisfaction we’ve already had with the material. However, with this, there is greater “flow control, spatial accuracy and precision, and faster production rates with continuous deposition of up to 30kg of molten glass”.

The algorithm and idea behind the new design and structure of G3DP2 are based on the preferences which are the manufacturing platform and structural system. The “geometric expression” is the column surface area, number of lobes, and the turning radius of the printer. A lighting system inside the column is also programmed to move with kaleidoscope-like patterns. The work of The Mediated Matter group is very similar to projects like this. They are inspired for natural design in nature and use computational design and various digital fabrication skills to mimic natural patterns and processes. G3DP2 is an accurate depiction of The Mediated Matter group’s goals and focus.

Newly developed synthetic glass (G3DP2)

PROJECT-03 (dynamic drawing)

SEAN SKETCH 03
// SEAN CHEN
// 15-104 A

var size = 125; // overall size of graphic
var flip = 1; // val to control rotation direction
var angle = 1; 
var angle2 = 1;
var angle3 = 1; // individual speed
var diff = 0 // shift from center circle

function setup() {
    smooth();
    createCanvas(400, 400);
    background(255,219,88);
}

function spin(speed, vari) { // white orbiting circles
    push();
    noStroke();
    rotate(radians(angle));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6); // each big stationary orbit circle
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // mouse further from center smaller size
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200); // mouse further from center distance larger
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // each small moving circles
    angle += speed*flip;
    pop();
}

function spin2(speed, vari) { // same as 'spin' but cyan
    push();
    noStroke();
    fill(0,255,255);
    rotate(radians(angle2));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle2 += speed*flip;
    pop();
}

function spin3(speed, vari) { // same as 'spin' but magenta
    push();
    noStroke();
    fill(255,0,255);
    rotate(radians(angle3));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle3 += speed*flip;
    pop();
}

function draw() {
    var vari = dist(width/2, height/2, mouseX, mouseY) // distance from center to mouse
    background(0);
    translate(width/2, height/2); // new origin at center
    noStroke();
    circle(0, 0, size); // center circle
    spin3(1*vari/150, vari); // mouse closer to center slower, vice versa
    spin2(1.5*vari/150, vari); // for cyan
    spin(2*vari/150, vari); // for white
    if (mouseIsPressed) {
        flip = -1; // reverse rotation if pressed
    } else {
        flip = 1; // clockwise otherwise
    }
}