Month: September 2017

hqq-secE-LookingOutwards3

Courtesy of Epiphyte Lab, 2009

 

The M-House was designed by Epiphyte Lab, led by my studio professor, Dana Cupkova. The project considers a traditional building type called a Butler building, where the roof is pitched to a single spine concave to the interior of the building. The practice expanded on this by first conceiving a structural transformation to allow the structure to collect snow, providing greater thermal insulation during the winter.

Then it gets interesting.

A number of computations derived from algorithms that reposition the specific sectional guide points of the structure allow the structure to reposition itself along specific site lines. It then undergoes another transformation to accommodate programmatic requirements relating to any specific needs for interior space, outdoor spaces, larger rooms, etc.

Finally, the structure undergoes computations developed through climate data. This helps determine the number of ribs and panels, the conditions of the site, and other environmental parameters that can help the housing style adapt to the needs of specific requirements of a site.

I appreciate this project a lot because it provides an adaptable solution to a common problem in the northern United States and Canada and poses the possibility of replication anywhere beyond its intended site in Buffalo, New York.

Bettina-Project03-SectionC

sketch
To interact: slowly move mouse Y up and down the top half of the image.
I was interested in experimenting with color palettes I usually don’t use in my work for this project. After making the code, I realize my approach doesn’t quite take advantage of “code’s grain”– that is, this interaction may have been better executed in a platform that uses keyframes such as after effects. While the growth of blocks are smooth, the color change is abrupt because I couldn’t quite math out how to change the particular RGB values to match mouse Y.

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

//colors
var ochre='#D0B268'
var LightSalmon='#F8ADA3'
var DarkSalmon='#D06870'
var Navy='#213468'
var Navy9='#213468'
var Green='#084E5A';
var Navy10=Navy;
var DarkSalmon31315=DarkSalmon;
var LightSalmon12=LightSalmon;
var LightSalmon4=LightSalmon;
var LightSalmon2=LightSalmon
var rectXone=0;
var ochre17=ochre;
var rectXtwo=480;
var ochreStripe=LightSalmon;

//shape variables
var rectX=0;
var rectY=0;

function draw() {
  var myc= constrain(mouseY,0,142.5);
  var rectX=myc/.53;
  var rectY=myc*2.5;
  var rectXone=myc*.753;
  var rectXtwo=480-(myc*1.495);
  noStroke();
  rectMode(CORNER);
  fill(ochre);
  rect(0,0,267,71); //box 1
  fill(LightSalmon2);
  rect(267,0,273,284); //box 2
  fill(DarkSalmon31315);
  rect(0,71,160,143); //box 3
  fill(LightSalmon4);
  rect(160,71,53,71); //box 4
  fill(Navy);
  rect(213,71,54,71); //box 5
  rect(0,214,160,71);//box 6
  fill(255);
  rect(160,142,107,142);
  fill(ochre);
  push();
  rect(160,160,107,13); //box 7 stripe 1
  translate(0,30);
  rect(160,160,107,13); //box 7 stripe 2
  translate(0,30);
  rect(160,160,107,13); //box 7 stripe 3
  translate(0,30);
  rect(160,160,107,13); //box 7 stripe 4
  pop();
  fill(LightSalmon); 
  rect(0,284,160,213.5) //box 8
  fill(Navy9);
  if (mouseY>142.5) {
    Navy9='#86B5C6';
    Navy10=ochre;
    DarkSalmon31315='#ECA1C0';
    LightSalmon12=ochre;
    LightSalmon4=Green;
    DarkSalmonGreen=Green;
    LightSalmon2=Green;
    ochre17='#ECA1C0';
    ochreStripe=Navy;
  }
  if (mouseY<=142.5) {
    Navy9=Navy;
    Navy10=Navy;
    DarkSalmon31315=DarkSalmon;
    LightSalmon12=LightSalmon;
    LightSalmon4=LightSalmon;
    DarkSalmonGreen=DarkSalmon;
    LightSalmon2=LightSalmon;
    ochre17=ochre;
    ochreStripe=LightSalmon;
  }
  push();
  translate(0,-myc);
  rect(160,284,214,142.5); //box 9
  pop();
  push();
  fill(Navy10);
  rect(397,284,18,70.5); //box 10 stripe 1
  translate(40,0);
  rect(397,284,18,70.5); //box 10 stripe 2
  pop();
  fill(ochre);
  rect(160,426,107,71.5); //box 11
  fill(LightSalmon12);
  rect(267,426,107,142); //box 12
  fill(DarkSalmon31315);
  rect(374,354.5,107,213.5); //box 13
  fill(Navy);
  rect(0,497,267,143); //box 14
  fill(DarkSalmon31315);
  rect(267,568,107,72); //box 15
  fill(Navy);
  rect(374,568,107,72); //box 16
  fill(DarkSalmonGreen);
  rect(0,284,rectX,rectY);
  fill(ochre17);
  rect(267,71,rectXone,71);
  fill(255);
  rect(rectXtwo,0,213.5,71);
  fill(ochreStripe);
  rect(285,0,18,71);
  push();
  translate(50,0);
  rect(285,0,18,71);
  translate(50,0);
  rect(285,0,18,71);
  translate(50,0);
  rect(285,0,18,71);
  translate(50,0);
  rect(285,0,18,71);
  
  
}

project3-keuchuka

project 3

//Fon Euchukanonchai
//15-105 SECTION A
//keuchuka@andrew.cmu.edu
//Project-03

//variables for face
var eyeX = 314;
var righteyeY = 132;
var lefteyeY = 305;
var eyeWidth = 100;

var smileAngle1 = -50;
var smileAngle2 = smileAngle1 - 260;

//variables for bankground
var leftrectX = 128;
var rightrectX = 384;
var rectY = 0;
var rectWidth = 148;
var rectHeight = 480;



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

// constraining eye width, right eye and left eye Y and X axis positions, 

	var eyeWidth = constrain(mouseX/100, 20, 150);
	var conrighteyeY = constrain(righteyeY, 190, 220);
	var conlefteyeY = constrain(lefteyeY, 280, 300);
	var coneyeX = constrain(eyeX, 40, 600);
	var conmouseX = constrain(mouseX, 40, 450);

// base yellow background

	background(255, 233, 141);


// when mouse moves past first recteangle to the right, the eyes increase in size and the
// distance between them increases, but is constrained to not fall of the canvas

 	if (mouseX>256) {
 		eyeWidth = eyeWidth + mouseX/10;
 		righteyeY = conrighteyeY - mouseX/300;
 		lefteyeY = conlefteyeY + mouseX/300;
 		lefteyeY = conlefteyeY - mouseX/200;
 	}
 		
 // configures the smile arc angle runs freely wehn mouse is moving in between the two ends
 	if (256<mouseX<600) {
 		smileAngle1 = mouseX;

 	}

// fixes larger smile arc angle when mouse is on the right

 	if (mouseX>600) {
 		smileAngle1 = -50;
 	}
 	
 // fixes smaller smile arc angle when mouse is on the left

 	if (mouseX<130) {
 		smileAngle1 = 165;
 		smileAngle2 = 195;
 	}

 // when mouse moves past the rectangle to the left

 	if (mouseX<256) {
 		eyeWidth = eyeWidth - mouseX/100;
  		righteyeY = conrighteyeY + mouseX/200;
 		lefteyeY = conlefteyeY - mouseX/200;

 	}


// variables to change colors on face and rectangle
	
 	R=(480-mouseX)/3;
	G=(mouseY)/3;
	B=mouseY*(100,255);


//eye graphic configurations
	strokeWeight(10);
	stroke(R, G, B, 150);
	fill(R, G, B, 150); 

//left eye
 	ellipse(eyeX, lefteyeY, eyeWidth/2, eyeWidth/2);

//right eye
 	ellipse(eyeX, righteyeY, eyeWidth/2, eyeWidth/2);

//mouth graphic configurations
	angleMode(DEGREES)
	noFill();
	strokeWeight(25);

//mouth
	stroke(R, G, B, 150);
	arc(330, 240, 480, 480, smileAngle1, smileAngle2);

//rectangle graphic configurations
	strokeWeight(25);
	stroke(R, B, G, 100);
	fill(B, R, G, 150);

//rectangles
	rect(leftrectX, rectY, rectWidth, rectHeight);
	rect(rightrectX, rectY, rectWidth, rectHeight);

//eyes move 
 	eyeX = conmouseX;
 	smileAngle2 = smileAngle1 - 260;


}

I wanted to create an understandable narrative using primitive shapes, which led to me to using the arc command. With the set idea of turning a frown upside down, I then proceeded to vary different variables within the face itself as well as the background.

Project 3

sketch

var radius=40;
var shape="cir";
var startX = 120;
var startY = 40;
var coorX = 0;
var coorY = 0;
var radChange = 0;
var shade = 255;

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

function draw() {
	background(0);
	//rectangle mode
	if (shape == "rect"){
		//make a grid
    	for(var row=0;row<10;row++){
   			for(var col=0;col<10;col++){
   				coorX=startX+radius*col
           		coorY=startY+radius*row
           		//the mouse inside control the size and the color of the rectangle
 				if(mouseX<520 & mouseX>120 && mouseY<440 && mouseY>40){
 					dis = dist(coorX,coorY,mouseX,mouseY)
 					radChange = dis*0.08
 					shade = dis*0.4
 				}else{
 					radChange = radius
 					shade=shade+20
 					if (shade>=230){
 						shade=0
 					}
 				}
 				fill(shade,shade,255)
   				rect(coorX,coorY,radChange,radChange);
           	}
        }
    //circle mode
    }else{
    	for(var row=0;row<10;row++){
   			for(var col=0;col<10;col++){
           		coorX=startX+radius/2+radius*col
           		coorY=startY+radius/2+radius*row
           		//the mouse inside control the size and color of the circle
 				if(mouseX<520 & mouseX>120 && mouseY<440 && mouseY>40){
 					dis = dist(coorX,coorY,mouseX,mouseY)
 					radChange = dis*0.08
 					shade = dis*0.4
 				}else{
 					radChange = radius
 					shade=shade+20
 					if (shade>=230){
 						shade=0
 					}
 				}
 				fill(shade,shade,255)
 				ellipse(coorX, coorY,radChange);
 			}
 		}
 	}
}
    

function mousePressed() {
	//mouse press control the shape of the objects
    if (shape != "rect"){
        shape = "rect";
    } else{
        shape = "cir";
    }
}

 

I was inspired by the grasshopper plug-in in rhino that we are learning right now in architecture generative modeling class. Therefore, I made this interactive drawings.

hqq-secE-project03-dynamic-drawing

hamza

//hamza qureshi
//section e
//project 03
//hqq@andrew.cmu.edu

var newX = 320;  //starting point at center
var newY = 240;
var dirX = 1; //directional vector
var speedX = 3; //horizontal speedX
var dirY = 1;
var speedY = 2; //vertical speed
var eyeDy = 0; //additive value for pupil position
var eyeDx = 0;
var drag = false; //calls drag abilities

function setup(){
    createCanvas(640,480);
    //noCursor();
    angleMode(DEGREES);
    cursor(CROSS); //preferred cursor
}

function draw(){
    background(0);
    noStroke();
    rectMode(CORNER);
    ellipseMode(CENTER);
    var newColor1 = mouseX/1;  //these variables are to be used
    var newColor2 = mouseX/2;  //to control how the color changes
    var newColor3 = mouseX/3;  //relative to the mouse position
    var newColor4 = mouseX/4;
    var newColor5 = mouseY/1;
    var newColor6 = mouseY/2;
    var newColor7 = mouseY/3;
    var newColor8 = mouseY/4;

//row 1
    fill(newColor1, newColor2, newColor3);
    rect(0,0,40,40);
    fill(newColor4, newColor5, newColor6);
    rect(40,0,40,40);
    fill(newColor7, newColor8, newColor7);
    rect(80,0,40,40);
    fill(newColor6, newColor5, newColor4);
    rect(120,0,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,0,40,40);
    fill(newColor1, newColor8, newColor2);
    rect(200,0,40,40);
    fill(newColor7, newColor6, newColor6);
    rect(240,0,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,0,40,40);
    fill(newColor1, newColor8, newColor1);
    rect(320,0,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,0,40,40);
    fill(newColor3, newColor8, newColor3);
    rect(400,0,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,0,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,0,40,40);
    fill(newColor6, newColor3, newColor6);
    rect(520,0,40,40);
    fill(newColor7, newColor2, newColor7);
    rect(560,0,40,40);
    fill(newColor8, newColor1, newColor8);
    rect(600,0,40,40);
    fill(newColor1, newColor7, newColor1);
    rect(640,0,40,40);

//row 2
    fill(newColor2, newColor2, newColor3);
    rect(0,40,40,40);
    fill(newColor1, newColor5, newColor6);
    rect(40,40,40,40);
    fill(newColor1, newColor8, newColor7);
    rect(80,40,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(120,40,40,40);
    fill(newColor1, newColor4, newColor1);
    rect(160,40,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,40,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(240,40,40,40);
    fill(newColor1, newColor5, newColor8);
    rect(280,40,40,40);
    fill(newColor2, newColor8, newColor1);
    rect(320,40,40,40);
    fill(newColor1, newColor7, newColor2);
    rect(360,40,40,40);
    fill(newColor1, newColor3, newColor3);
    rect(400,40,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(440,40,40,40);
    fill(newColor1, newColor4, newColor5);
    rect(480,40,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(520,40,40,40);
    fill(newColor1, newColor2, newColor7);
    rect(560,40,40,40);
    fill(newColor1, newColor1, newColor8);
    rect(600,40,40,40);
    fill(newColor2, newColor6, newColor1);
    rect(640,40,40,40);

//row 3
    fill(newColor8, newColor2, newColor3);
    rect(0,80,40,40);
    fill(newColor2, newColor5, newColor6);
    rect(40,80,40,40);
    fill(newColor2, newColor8, newColor7);
    rect(80,80,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(120,80,40,40);
    fill(newColor2, newColor2, newColor1);
    rect(160,80,40,40);
    fill(newColor2, newColor8, newColor2);
    rect(200,80,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,80,40,40);
    fill(newColor2, newColor5, newColor8);
    rect(280,80,40,40);
    fill(newColor3, newColor8, newColor1);
    rect(320,80,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,80,40,40);
    fill(newColor2, newColor6, newColor3);
    rect(400,80,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(440,80,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,80,40,40);
    fill(newColor2, newColor3, newColor6);
    rect(520,80,40,40);
    fill(newColor2, newColor2, newColor7);
    rect(560,80,40,40);
    fill(newColor2, newColor1, newColor8);
    rect(600,80,40,40);
    fill(newColor3, newColor7, newColor1);
    rect(640,80,40,40);

//row 4
    fill(newColor8, newColor2, newColor3);
    rect(0,120,40,40);
    fill(newColor3, newColor5, newColor6);
    rect(40,120,40,40);
    fill(newColor3, newColor8, newColor7);
    rect(80,120,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(120,120,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,120,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,120,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,120,40,40);
    fill(newColor3, newColor5, newColor8);
    rect(280,120,40,40);
    fill(newColor4, newColor8, newColor1);
    rect(320,120,40,40);
    fill(newColor3, newColor7, newColor2);
    rect(360,120,40,40);
    fill(newColor3, newColor6, newColor3);
    rect(400,120,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(440,120,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,120,40,40);
    fill(newColor3, newColor3, newColor6);
    rect(520,120,40,40);
    fill(newColor3, newColor2, newColor7);
    rect(560,120,40,40);
    fill(newColor3, newColor1, newColor8);
    rect(600,120,40,40);
    fill(newColor4, newColor7, newColor1);
    rect(640,120,40,40);

//row 5
    fill(newColor5, newColor2, newColor3);
    rect(0,160,40,40);
    fill(newColor8, newColor5, newColor6);
    rect(40,160,40,40);
    fill(newColor4, newColor8, newColor7);
    rect(80,160,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(120,160,40,40);
    fill(newColor4, newColor2, newColor1);
    rect(160,160,40,40);
    fill(newColor4, newColor8, newColor2);
    rect(200,160,40,40);
    fill(newColor4, newColor3, newColor6);
    rect(240,160,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,160,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(320,160,40,40);
    fill(newColor4, newColor7, newColor2);
    rect(360,160,40,40);
    fill(newColor4, newColor6, newColor3);
    rect(400,160,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,160,40,40);
    fill(newColor4, newColor4, newColor5);
    rect(480,160,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(520,160,40,40);
    fill(newColor4, newColor2, newColor7);
    rect(560,160,40,40);
    fill(newColor4, newColor1, newColor8);
    rect(600,160,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(640,160,40,40);

//row 6
    fill(newColor6, newColor2, newColor3);
    rect(0,200,40,40);
    fill(newColor5, newColor5, newColor6);
    rect(40,200,40,40);
    fill(newColor5, newColor8, newColor7);
    rect(80,200,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(120,200,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(160,200,40,40);
    fill(newColor5, newColor8, newColor2);
    rect(200,200,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(240,200,40,40);
    fill(newColor5, newColor5, newColor8);
    rect(280,200,40,40);
    fill(newColor6, newColor8, newColor1);
    rect(320,200,40,40);
    fill(newColor5, newColor7, newColor2);
    rect(360,200,40,40);
    fill(newColor5, newColor6, newColor3);
    rect(400,200,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(440,200,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,200,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(520,200,40,40);
    fill(newColor5, newColor2, newColor7);
    rect(560,200,40,40);
    fill(newColor5, newColor1, newColor8);
    rect(600,200,40,40);
    fill(newColor6, newColor7, newColor1);
    rect(640,200,40,40);

//row 7
    fill(newColor6, newColor2, newColor1);
    rect(0,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(40,240,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(80,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(120,240,40,40);
    fill(newColor5, newColor2, newColor2);
    rect(160,240,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(200,240,40,40);
    fill(newColor5, newColor3, newColor1);
    rect(240,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(280,240,40,40);
    fill(newColor6, newColor8, newColor2);
    rect(320,240,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(360,240,40,40);
    fill(newColor5, newColor6, newColor1);
    rect(400,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(440,240,40,40);
    fill(newColor5, newColor4, newColor1);
    rect(480,240,40,40);
    fill(newColor5, newColor3, newColor1);
    rect(520,240,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(560,240,40,40);
    fill(newColor5, newColor1, newColor1);
    rect(600,240,40,40);
    fill(newColor6, newColor7, newColor2);
    rect(640,240,40,40);

//row 8
    fill(newColor6, newColor2, newColor3);
    rect(0,280,40,40);
    fill(newColor5, newColor5, newColor6);
    rect(40,280,40,40);
    fill(newColor5, newColor8, newColor7);
    rect(80,280,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(120,280,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(160,280,40,40);
    fill(newColor5, newColor8, newColor2);
    rect(200,280,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(240,280,40,40);
    fill(newColor5, newColor5, newColor8);
    rect(280,280,40,40);
    fill(newColor6, newColor8, newColor1);
    rect(320,280,40,40);
    fill(newColor5, newColor7, newColor2);
    rect(360,280,40,40);
    fill(newColor5, newColor6, newColor3);
    rect(400,280,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(440,280,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,280,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(520,280,40,40);
    fill(newColor5, newColor2, newColor7);
    rect(560,280,40,40);
    fill(newColor5, newColor1, newColor8);
    rect(600,280,40,40);
    fill(newColor6, newColor7, newColor1);
    rect(640,280,40,40);

//row 9
    fill(newColor5, newColor2, newColor3);
    rect(0,320,40,40);
    fill(newColor8, newColor5, newColor6);
    rect(40,320,40,40);
    fill(newColor4, newColor8, newColor7);
    rect(80,320,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(120,320,40,40);
    fill(newColor4, newColor2, newColor1);
    rect(160,320,40,40);
    fill(newColor4, newColor8, newColor2);
    rect(200,320,40,40);
    fill(newColor4, newColor3, newColor6);
    rect(240,320,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,320,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(320,320,40,40);
    fill(newColor4, newColor7, newColor2);
    rect(360,320,40,40);
    fill(newColor4, newColor6, newColor3);
    rect(400,320,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,320,40,40);
    fill(newColor4, newColor4, newColor5);
    rect(480,320,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(520,320,40,40);
    fill(newColor4, newColor2, newColor7);
    rect(560,320,40,40);
    fill(newColor4, newColor1, newColor8);
    rect(600,320,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(640,320,40,40);

//row 10
    fill(newColor8, newColor2, newColor3);
    rect(0,360,40,40);
    fill(newColor3, newColor5, newColor6);
    rect(40,360,40,40);
    fill(newColor3, newColor8, newColor7);
    rect(80,360,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(120,360,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,360,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,360,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,360,40,40);
    fill(newColor3, newColor5, newColor8);
    rect(280,360,40,40);
    fill(newColor4, newColor8, newColor1);
    rect(320,360,40,40);
    fill(newColor3, newColor7, newColor2);
    rect(360,360,40,40);
    fill(newColor3, newColor6, newColor3);
    rect(400,360,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(440,360,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,360,40,40);
    fill(newColor3, newColor3, newColor6);
    rect(520,360,40,40);
    fill(newColor3, newColor2, newColor7);
    rect(560,360,40,40);
    fill(newColor3, newColor1, newColor8);
    rect(600,360,40,40);
    fill(newColor4, newColor7, newColor1);
    rect(640,360,40,40);

//row 11
    fill(newColor8, newColor2, newColor3);
    rect(0,400,40,40);
    fill(newColor2, newColor5, newColor6);
    rect(40,400,40,40);
    fill(newColor2, newColor8, newColor7);
    rect(80,400,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(120,400,40,40);
    fill(newColor2, newColor2, newColor1);
    rect(160,400,40,40);
    fill(newColor2, newColor8, newColor2);
    rect(200,400,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,400,40,40);
    fill(newColor2, newColor5, newColor8);
    rect(280,400,40,40);
    fill(newColor3, newColor8, newColor1);
    rect(320,400,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,400,40,40);
    fill(newColor2, newColor6, newColor3);
    rect(400,400,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(440,400,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,400,40,40);
    fill(newColor2, newColor3, newColor6);
    rect(520,400,40,40);
    fill(newColor2, newColor2, newColor7);
    rect(560,400,40,40);
    fill(newColor2, newColor1, newColor8);
    rect(600,400,40,40);
    fill(newColor3, newColor7, newColor1);
    rect(640,400,40,40);

//row 12
    fill(newColor2, newColor2, newColor3);
    rect(0,440,40,40);
    fill(newColor1, newColor5, newColor6);
    rect(40,440,40,40);
    fill(newColor1, newColor8, newColor7);
    rect(80,440,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(120,440,40,40);
    fill(newColor1, newColor4, newColor1);
    rect(160,440,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,440,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(240,440,40,40);
    fill(newColor1, newColor5, newColor8);
    rect(280,440,40,40);
    fill(newColor2, newColor8, newColor1);
    rect(320,440,40,40);
    fill(newColor1, newColor7, newColor2);
    rect(360,440,40,40);
    fill(newColor1, newColor3, newColor3);
    rect(400,440,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(440,440,40,40);
    fill(newColor1, newColor4, newColor5);
    rect(480,440,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(520,440,40,40);
    fill(newColor1, newColor2, newColor7);
    rect(560,440,40,40);
    fill(newColor1, newColor1, newColor8);
    rect(600,440,40,40);
    fill(newColor2, newColor6, newColor1);
    rect(640,440,40,40);

//row 13
    fill(newColor1, newColor2, newColor3);
    rect(0,480,40,40);
    fill(newColor4, newColor5, newColor6);
    rect(40,480,40,40);
    fill(newColor7, newColor8, newColor7);
    rect(80,480,40,40);
    fill(newColor6, newColor5, newColor4);
    rect(120,480,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,480,40,40);
    fill(newColor1, newColor8, newColor2);
    rect(200,480,40,40);
    fill(newColor7, newColor6, newColor6);
    rect(240,480,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,480,40,40);
    fill(newColor1, newColor8, newColor1);
    rect(320,480,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,480,40,40);
    fill(newColor3, newColor8, newColor3);
    rect(400,480,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,480,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,480,40,40);
    fill(newColor6, newColor3, newColor6);
    rect(520,480,40,40);
    fill(newColor7, newColor2, newColor7);
    rect(560,480,40,40);
    fill(newColor8, newColor1, newColor8);
    rect(600,480,40,40);
    fill(newColor1, newColor7, newColor1);
    rect(640,480,40,40);

//allows newX and newY to be changed to the mouse position when dragged
    if (drag){
      newX = mouseX;
      newY = mouseY;
    }

    ellipseMode(CORNER);
//draws body and eyes of carl
    fill(32,120,240);
    ellipse(newX,newY,100,100);
    ellipseMode(CENTER);
    fill(255);
    stroke(0);
    strokeWeight(2);
    ellipse(newX+30,newY+30,15,15);
    ellipse(newX+70,newY+30,15,15);
    fill(0);
    ellipse(newX+30+eyeDx,newY+27+eyeDy,6,6);
    ellipse(newX+70+eyeDx,newY+27+eyeDy,6,6);
  //divides canvas into quadrants and shifts pupils based on
  //which quadrant it's in
    if (newY < 240){
      eyeDy = 6;
    }
    if (newY > 240){
      eyeDy = 0;
    }
    if (newX < 320){
      eyeDx = 2;
    }
    if (newX > 320){
      eyeDx = -2;
    }
//drawing the mouth and speech bubble
    fill(190,20,86);
    strokeWeight(3);
    stroke(235,30,100);
    rect(newX+20,newY+50,60,10,5);
    fill(255);
    noStroke();
    triangle(newX-10,newY+10, newX-10,newY,newX-20,newY);
    rect(newX-120,newY-40,110,40);

//creating directional text
    fill(0);
    textSize(20);
    text("press any key to accelerate!", 30, 455);
    text("drag carl for a new starting point!", 30, 475);
    textSize(15);

//changes speech bubble statement based on where he is
    if (newY >240){
      text("wow so pretty",newX-110,newY-18);
    }
    if (newY <= 240){
      text("cool, i guess",newX-110,newY-18);
    }
//allows carl to bounce off edges of canvas
    newX += dirX * speedX;
    if (newX > width - 100 || newX < 0){
      dirX = -dirX;
    }
    newY += dirY * speedY;
    if (newY > height - 100 || newY < 0){
      dirY = -dirY;
    }
//accelerates when any key is pressed.
    if (keyIsPressed){
        speedX = speedX + 0.25;
    }

}

//allows carl to be draged to slow him down
function mousePressed(){
    if (dist(newX, newY, mouseX, mouseY) < 150){
    drag = true;
    }
}
function mouseReleased(){
    drag = false;
    speedX = speedX*0.4;  //deccerates
    speedY = speed*0.4;
}

Carl’s back and ready to play in a colorful landscape. Wave your mouse around to adjust the color while Carl bounces around to observe. Press any key to accelerate Carl, and stop and drag him to tell him to slow down.

LookingOutwards-03

For my computational digital fabrication project, I found a 3D printing self-folding electronics project. As the name explains, the project focuses on 3D printing structures that can fold up on their own.

They use various techniques such as a structure that folds as a reaction to water or a structure that buckles and compresses due to changes in membrane of material in certain areas. The point of the project is that the mechanisms causing the material to fold are introduced during the 3D printing process. Once 3D printed, the piece already has the ability to self-fold. I find it interesting how the self-folding aspect is integrated into the piece as it is printed. A more robotic self-folding mechanism would be made up of multiple pieces with complex structures, electronics and programming. However, this is a much more advanced, intricate alternative. It introduces more scientific aspects, looking in depth at the formation and structure of the material and experimenting with various ingredients.

link

mstropka-Looking Outwards-03-Section E

In this Ted Talk Neri Oxman talks about using computation to drive the design of physical things. The Ted talk includes 3D animations of the generative algorithms that her team then 3D printed to make wearables. I think it is fascinating that this team is using computers to generate forms that are both organic in their appearance and function. It is very inspiring to see that computers and rapid prototyping technologies, the epitome of the artificial, are helping designers and engineers to create products that are meant to emulate natural processes. Moving forward I think that this type of research will inspire people to develop technologies that are more connected to the natural world.

NatalieKS-Looking-Outwards-03

A team of researchers from MIT and UMass Amherst have created a 3D printed product that is able to fold itself up. These self-folding structures are made using a 3D printer and a special ink that expands once it solidifies, thus forcing the “legs” of the structure to fold themselves up. Due to its self-folding capabilities, these devices are also able to contain functional electronics. These researchers were inspired to create a material with complex, programmed shapes – not much is mentioned about the algorithm used, but it does mention that they programmed specific shapes for specific purposes – in order to further research into robotics and sensing.

This is inspiring because it broadens the opportunities and sources of material for other structures. Since other structures require heat or some other external stimulus to do this kind of behavior (which can be detrimental and degrade the material), this product can accomplish the same thing without using those additional resources and without the potential danger of those external resources. It’s exciting to see new forms of pre-existing material being made into something that is better for human action/interaction as well as the environment.

This project was completed and published in 2017. This video demonstrates the device and talks more in detail about its properties.

sketch

//Dana Kim
// danakim@andrew.cmu.edu
//Section D
// Project-03

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

var x = 320;
var y = 240;
var w = 4;
var angle = 0;

function draw() {
  //ColorChoice1
  if ((mouseY < y) & (mouseX < x)){
    c1 = "#FFA977"; //color for left cube
    c2 = "#FF3C38"; //color for top cube
    c3 = "#FF8D38"; //color for right cube
  }
  //ColorChoice2
  if ((mouseY > y) & (mouseX > x)){
    c1 = "#7A5C61";
    c2 = "#FF3C38";
    c3 = "#A23E48";
  }
  //ColorChoice3
  if ((mouseY > y) & (mouseX < x)){
    c1 = "#BB7279";
    c2 = "#68282E";
    c3 = "#A23E48";
  }

  //Rectangles change size, angle, and color
  push();
  noStroke();
  fill(c1);
  rotate(radians(angle));
  rect(318, 225, w, 30);
  translate(0, 100);
  fill(c2);
  rect(318, 225, w, 30);
  translate(0, -200);
  fill(c3);
  rect(318, 225, w, 30);
  pop();
  angle = angle + 50;

  //width of rectangles change
  if(mouseX>320){
    w = mouseX-300;
  }
  //circles change color and size
  if(mouseX < 320){
  fill(mouseX-200, mouseX+100, mouseY-200);
  stroke(265);
  ellipse(160, mouseY, mouseX-10, mouseX-10);
  }



}

I had originally planned on making a sandwich that would come apart and rotate. However, due to time constraints I decided to go with something simpler. The only problem I really bumped into was that the script kept redrawing the shapes. However, I thought it looked better with the redrawn parts.

atraylor – Project 03 – section B

At first I really wanted to make something symmetrical but that just wasn’t working for me. So I decided to make a scribble star. It was a challenge working with the curves. I find myself constantly comparing the capabilities of p5 with Photoshop, which just makes me miss Photoshop. I did my best to hint at the qualities of stars while constrained to childlike scribbles.

sketch


// atraylor@andrew.cmu.edu
// Project 03 section B 


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

}

function draw() {

    var color1 = color(255, 249, 0); //first color for background
    var color2 = color(101, 25, 204); // second color
    var num = map(mouseX, 0, width, 0, .80); // making a number based on mouse
    var backColor = lerpColor(color1, color2, num); // lerp between color 1 and 2

    background(backColor); // color from above

    // first squiggle star
    var bend = map(mouseX, 0, width, -5, 5); //setting the mouseX output to a new scale from -5 to 5
    curveTightness(bend); // a value from -5 to 5 determines curve for vertex points
    noFill();
    stroke(255, 249, 0);
    beginShape();
    curveVertex(204,89);
    curveVertex(102, 515);
    curveVertex(462, 251);
    curveVertex(102, 515);
    curveVertex(204, 89);
    curveVertex(378, 515);
    curveVertex(18, 251);
    curveVertex(462, 251);
    curveVertex(102, 515);

    endShape();

    //second star
    push();
    var sScale = map(mouseX, 0, width, 0, -60);
    var bend2 = map(mouseX, 0, width, 5, -5); //setting the mouseX output to a new scale from -5 to 5
    curveTightness(bend2); // a value from -5 to 5 determines curve for vertex points
    noFill();
    stroke(255, 249, 0);
    beginShape();
    curveVertex(204,89 - sScale); //transforming points based on sScale variable
    curveVertex(102 - sScale, 515 + sScale);
    curveVertex(462 + sScale, 251);
    curveVertex(102 - sScale, 515 + sScale);
    curveVertex(204, 89 - sScale);
    curveVertex(378 + sScale, 515 + sScale);
    curveVertex(18 - sScale, 251);
    curveVertex(462 + sScale, 251);
    curveVertex(102 - sScale, 515 + sScale);
    endShape();
    pop();

    // first square
    push();
    var rot = map(mouseY, 0, height, 45, 360); // rotation based on mouseY
    var recScale = map(mouseX, 0, width, 1, .75); // scale from 1 to .75 based on mouseX
    stroke(255, 249, 0);
    rectMode(CENTER);
    translate(240, 320);
    scale(recScale);
    rotate(radians(rot));
    rect(0,0,400,400);
    pop();
    //second square
    push();
    var rot2 = map(mouseY, 0, height, -45, -360);
    stroke(255, 249, 0);
    rectMode(CENTER);
    translate(240, 320);
    scale(recScale);
    rotate(radians(rot2));
    rect(0,0,400,400);
    pop();
    // ellipse
    push();
    var cScale = map(mouseX, 0, width, 1, .75);// scale based on mouseX
    stroke(255, 249, 0);
    fill(255, 249, 0, 40);
    translate(240, 320);
    scale(cScale);
    ellipse(0, 0, 410, 410);
    pop();



}