September 2016 – Page 18 – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

Yugyeong Lee Looking Outwards 03

Joris Laarman, a Dutch designer, known for his experimental designs studying variety of shapes, worked on the microstructures series—Soft Gradient Chair, Aluminum Gradient Chair, and Adaptation Chair. The first chair of the project used polyurethane in furniture design by intergrating 3D printing technology in cellular level to specify functions for different needs. Utilizing algorithm based program, Grasshopper in Rhino as shown in the image below, Joris Laarman Lab designed part of the chair to be structurally stable while the rest—more open—acted to give comfort in one print. The second chair is made out of aluminum through Laser Sintering—a generative design tool. Similar to the first chair, the furniture was designed also to specify functions for different needs. Lastly, the third chair known as the Adaptation chair is made out of vertical long module that, like a tree, branch out to form into different geometric shapes to also serve the different needs of the chair. This chair is 3D printed by a SLS machine then coated with metallic material. Through these project, the artist articulate the change of form/shape to adapt to the different needs of a chair allowing comfort as its priority of design.

gradient_soft_gh3-845x684 gradient_chair11-1500x630

Soft Gradient Chair

bone-armchair-side_site2-1500x889 schermafbeelding-2014-03-26-om-13-36-18-845x684

Aluminum Gradient Chair adaptation-chair_first-845x684 adaptation-chair_close11-1500x630

Adaptation Chair

http://www.jorislaarman.com/

Jessica Medenbach – Dynamic Drawing

dynamicdrawing

var x= 320;
var y= 240;
var d=200;
var ballR= 238;
var ballB= 135;
var ballG= 131;
var ball2=2;
var ball3=4;

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

function draw() {
    background(232, 167, 0);
    noStroke(0);

    //eye

    fill(255);
    ellipse(x,y,2*d,2*d);
    fill(ballR,ballB,ballG);
    ellipse(x,y,d,d);
    fill(ball2*ballR,ball2*ballB,ball2*ballG);
    ellipse(x,y,d/3,d/3);

}
 function mousePressed() {
  if (dist(mouseX, mouseY, x, y) < d/2) {
    ballG=random(50,250);
  }

 if (dist(mouseX, mouseY, x, y) < d/2) {
    ballR=random(50.250);

}
 
 if (dist(mouseX, mouseY, x, y) < d/2) {
    ballB=random(50,250);
}

 if (dist(mouseX, mouseY, x, y) < d/2) {
    d=random(20,400);
}

 if (dist(mouseX, mouseY, x, y) < d/2) {
 	x=(random(200,400));

}


 if (dist(mouseX, mouseY, x, y) < d/2) {
 	y=(random(0,480));

}

}

Exploring randomizing color and position through mouse control while keeping an object in tact.

LookingOutwards-3 sehenry

The reason why I chose the project below as my focal point for LookingOutwards-3 is because the sculpture speaks to me. It is a computer generated sculpture of 4 separate but aligned pieces. Each piece has ripples through and through and when you take a step back and look at the sculpture as a whole, it looks very similar to a blanket or sheets on a bed. The ripples within each piece look to be randomly placed so I would have to guess that the algorithm used for this portion of the sculpture would have had a lot of random variables include. Just like I can make a background produce random colors with background(random(30,200), 50, random(40,150)). I also admire how simple this sculpture is. Not every computer generated piece of work has to be filled to the brim with colors and shapes. This one was simple with complicated algorithms. If you click on the link you will actually see that the sculpture is made of tiny little bristles. This really shows the artist’s sensibilities. There is more to see, the closer you get.

lookingoutwards-3

Creator: BREAD
Project Name: Cilia

Dynamic Drawing – sehenry

While working on this project, I had a lot of trouble figuring out what the boundaries and positions of my shapes would be and which actions should they do. With a couple of restarts, I finally decided what my art would look like and I am very happy with the result. It took me a little bit but I got it done!

sketch

//Seth Henry

//Section B 10:30 Tuesday

//sehenry@andrew.cmu.edu

//Assignment- Dynamic Drawing





var cirDiam = 200
var sqLength = 200
var B = 100
var sizeR = 60
var sizeE =60



function setup() {
    createCanvas(640, 480);
    
    text("p5.js vers 0.5.2 test.", 10, 15);
}

function draw() {
	colR = map(mouseX, 0, width, 0, 100); //sliding left and right will change background from black to blue
	colG = map(mouseX, 0, width, 20, 150);
	colB = map(mouseX, 0, width, 10, 200);
	background(colR, colG, colB);


	if (mouseX > width/2) { //if mouse is on the right half of the screen, an ellipse will apear
		fill(B);
		ellipse(width/2, height/2, cirDiam, cirDiam);
	} 

	if (mouseX < width/2){ //if mouse is on the left half of the screen, a rect will appear
	fill(B); 
	rectMode(CENTER);
	rect(width/2, height/2, sqLength, sqLength);
	}


push(); //small circle spinning clockwise
	fill(random(0,255));
	rotate(millis()/1000);
	ellipse(160, 360, sizeE, sizeE);
	pop(); 

	push(); //small circle spinning counterclockwise
	fill(random(0,255));
	rotate(-millis()/1000);
	ellipse(480, 360, sizeE, sizeE);
	pop();
	  

	var oppositeX = width-mouseX //Similar to old project (Allows circles and rectangles to be placed opposite of one another)
	var oppositeY = height -mouseY
 
    fill(255); //opposite X rectangle
    rect(mouseX, height/2, sizeR, sizeR);
 
    fill(0); //opposite X ellipse
    ellipse(oppositeX, height/2, sizeE, sizeE);

    
    fill(255); //opposite Y rectangle
   	rect(width/2, mouseY, sizeR, sizeR);
	

    fill(0); //opposite Y ellipse
    ellipse(width/2, oppositeY, sizeE, sizeE);

    textAlign(CENTER); //allows my name to follow the mouse and grow or shrink depending on placement
    textStyle(BOLD);
    textSize(mouseY-mouseX);
    text("SethHenry", mouseX, mouseY);


    push(); //rotates the rectangle found in the middle
    fill(B);
    translate(width/2, height/2);
    rotate(radians((mouseX/2)%180));
    rect(0,0, 50, 50);
    pop();

}

function mousePressed() { //if mouse is pressed...
	if (dist(mouseX, mouseY, width/2, height/2) < 100 ) {
		B=random(0,255); //the color of the non spinning circles and the rectangles will change color
		sizeR=random(10,100); // the size of the opposite rectangle will change size
		sizeE=random(10,100); // the size of the opposite ellipse will change color


		
	}

}

ShanWang-Project-03-Dynamic-Drawing

Slide the mouse left to right to change the color and the size of the circles.

Slide the mouse up and down to change the speed of the rotation.

In this project I created a series of circles that rotates around the previous one.

The color, size and therefore position of the circles are controlled by the change in x coordinate of the mouse.
The speed of rotation is controlled by the the change in y coordinate of the mouse.

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-03-Project



var radius1 = 200
var angle1 = 0
var angle2 = 0
var angle3 = 0
var angle4 = 0
var angle5 = 0
var angle6 = 0
var angle7 = 0
var angle8 = 0
var angle9 = 0
var angle10 = 0
var speed = 128
var fillColor = 0


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

function mousePressed(){
    if (width/2-radius1 <= mouseX <= width/2+radius1){
        bgColor = 255-bgColor
    }
}
 
function draw() {
    background(255);
    noStroke();

    //control the speed of spining with the change in y coordinate of the mouse
    speed = map(mouseY,0,height,64,192);

    //control the color of circles with the change in x coordinate of the mouse
    bgColor = map(mouseX,0,width,0,255);

    //control the size of all the circles with the change in x coordinate of the mouse
    radius1 = map(mouseX,0,width,100,200);

    //position of first big circle
    var cenX1 = width/2;
    var cenY1 = height/2;
    fill(bgColor);
    ellipse(cenX1, cenY1, radius1*2, radius1*2);

    //draw second circle
    translate(cenX1,cenY1);
    fill(255-bgColor);
    angle1 += PI/speed;
    var radius2 = 2/3*radius1;
    var dis2 = radius1 - radius2;
    var cenX2 = dis2*cos(angle1);
    var cenY2 = dis2*sin(angle1);
    ellipse(cenX2, cenY2,radius2*2, radius2*2);

    //draw third circle
    translate(cenX2,cenY2);
    fill(bgColor);
    angle2 += PI/(0.5*speed);
    var radius3 = 2/3*radius2;
    var dis3 = radius2 - radius3;
    var cenX3 = dis3*cos(angle2);
    var cenY3 = dis3*sin(angle2);
    ellipse(cenX3, cenY3, radius3*2,radius3*2);

    //draw 4th circle
    translate(cenX3,cenY3);
    fill(255-bgColor);
    angle3 += PI/((0.5*speed));
    var radius4 = 2/3*radius3;
    var dis4 = radius3 - radius4;
    var cenX4 = dis4*cos(angle3);
    var cenY4 = dis4*sin(angle3);
    ellipse(cenX4, cenY4, radius4*2,radius4*2);

    //draw 5th circle
    translate(cenX4,cenY4);
    fill(bgColor);
    angle4 += PI/(0.4375*speed);
    var radius5 = 2/3*radius4;
    var dis5 = radius4 - radius5;
    var cenX5 = dis5*cos(angle4);
    var cenY5 = dis5*sin(angle4);
    ellipse(cenX5, cenY5, radius5*2,radius5*2);


    //draw 6th circle
    translate(cenX5,cenY5);
    fill(255-bgColor);
    angle5 += PI/(0.375*speed);
    var radius6 = 2/3*radius5;
    var dis6 = radius5 - radius6;
    var cenX6 = dis6*cos(angle5);
    var cenY6 = dis6*sin(angle5);
    ellipse(cenX6, cenY6, radius6*2,radius6*2);

    //draw 7th circle
    translate(cenX6,cenY6);
    fill(bgColor);
    angle6 += PI/(0.25*speed);
    var radius7 = 2/3*radius6;
    var dis7 = radius6 - radius7;
    var cenX7 = dis7*cos(angle6);
    var cenY7 = dis7*sin(angle6);
    ellipse(cenX7, cenY7, radius7*2,radius7*2);

    //draw 8th circle
    translate(cenX7,cenY7);
    fill(255-bgColor);
    angle7 += PI/(0.125*speed);
    var radius8 = 2/3*radius7;
    var dis8 = radius7 - radius8;
    var cenX8 = dis8*cos(angle7);
    var cenY8 = dis8*sin(angle7);
    ellipse(cenX8, cenY8, radius8*2,radius8*2);

    //draw 9th circle
    translate(cenX8,cenY8);
    fill(bgColor);
    angle8 += PI/(0.125*speed);
    var radius9 = 1/2*radius8;
    var dis9 = radius8 - radius9;
    var cenX9 = dis9*cos(angle8);
    var cenY9 = dis9*sin(angle8);
    ellipse(cenX9, cenY9, radius9*2,radius9*2);

    //draw 10th circle
    translate(cenX9,cenY9);
    fill(255-bgColor);
    angle9 += PI/(0.125*speed);
    var radius10 = 1/2*radius9;
    var dis10 = radius9 - radius10;
    var cenX10 = dis10*cos(angle9);
    var cenY10 = dis10*sin(angle9);
    ellipse(cenX10, cenY10, radius10*2,radius10*2);

    //draw 11th circle
    translate(cenX10,cenY10);
    fill(bgColor);
    angle10 += PI/(0.25*speed);
    var radius11 = 1/2*radius10;
    var dis11 = radius10 - radius11;
    var cenX11 = dis11*cos(angle10);
    var cenY11 = dis11*sin(angle10);
    ellipse(cenX11, cenY11, radius11*2,radius11*2);

}

zhuoyinl looking outward 03

brick
Those polybrick use digital technology like three dimensional printing, and advanced shapes and different material. It is an ongoing project in the Sabin Design at Cornell Architecture. The project makes use of algorithmic design techniques to make those nonstandard ceramic bricks and then fired them into stable shapes. By using digital data to control the shaping of clays from the earth, people are able to make dynamic wall shapes and facades like this with low cost printing materials. Also this kind of brick could be highly customized and spread across the field. I found this project especially interesting because it digs into the possibility of future architectural structures and creates a brand new way to think of customized building materials. What’s more, the hollow structure of each brick gives the material more possibility in environmental aspect.

Link:

Rachel Griswold – LookingOutwards-03

The Elytra Filament Pavillion is located in the Victoria and Albert Museum in London. It is kept in the John Madejski Garden where it will be on display from May 18th – November 6th, 2016. It is made by a robot called KUVA, which was programmed by a team from the University of Stuttgart. The robot weaves fibers across hexagonal structures, the weaving on the hexagons being denser in the center of the overall structure and lighter on the edges. It is incredibly lightweight and waterproof, and resembles a real-life spiderweb. Its design is inspired by the elytra beetle.

Each piece of the hexagon takes around 3 hours to create, and the robot continues to build the canopy even as the exhibit is open to the public. Sensors are placed in the canopy fibers, allowing the robot to collect data and monitor how visitors use the pavilion, which will influence how the canopy grows. This means that everyone who visits the pavilion actually takes part in how the art develops, intentionally or not. The team’s goal was to create an “urban greenspace” that can “evolve, reconfigure, and adapt with the use of the courtyard.”

Here’s a link to the museum’s official page on the project. The page also includes the video below, which gives more information about the project and how it was created. I could not find any information about the algorithm that they used, except that they created it themselves.

Jihoonp_Project_03

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-03

var x = 0;
var y = 0;
var dirL = 1;
var dirC = 1;
var speedL = 1;
var speedC = 1;
var w = 30; // size of big squares
var v = 10; //size of intermittent squares
var s = 30; //space between squares
var r = 0;
var g = 100;
var b = 200;


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

function draw () {
	background(r,g,b);
	r+=dirC*speedC;
	g+=dirC*speedC;
	b+=-dirC*speedC;
	if (r>255||r<0) {
		dirC=-dirC;
	}
	if (g>255||g<0) {
		dirC=-dirC;
	}
	if (b>255||b<0) {
		dirC=-dirC;
	}
	//sets colors for squares, that periodically change

    for (var i=0 ;i < 10; i++) {
    	var yPos = ((s*2)*i)+(w/2);

    	for (var j=0; j<13;j++){
    		var xPos = ((s*2)*j)+(w/2);
    		noStroke();
    		fill(g,b,r);
    		rectMode(CENTER);
			rect(xPos,yPos,w,w);
	//creates primary squares
		}

    }
    
    fill(g,b,r);
    strokeWeight(20);
    line(0,0,0,640);

    for (var l=0; l<10 ; l++) {
    	var Ypos = ((s*2)*l)-(.5*s);

    	for (var k=0;k<13;k++) {
    		var Xpos = ((s*2)*k)-(.5*s);
    		noStroke();
    		fill(b,r,g);
    		rectMode(CENTER);
    		rect(Xpos, Ypos,v,v);
    //creates secondary squares	
    	}
    }
    


	stroke(g,b,r);
   	strokeWeight(w/2);
    line(x,y,x,height);
    line(x+(w*2),y,x+(w*2),height);
    line(x+(w*4),y,x+(w*4),height);
    line(x+(w*6),y,x+(w*6),height);
    line(x+(w*8),y,x+(w*8),height);
    line(x+(w*10),y,x+(w*10),height);
    line(x+(w*12),y,x+(w*12),height);
    line(x+(w*14),y,x+(w*14),height);
    line(x+(w*16),y,x+(w*16),height);
    line(x+(w*18),y,x+(w*18),height);
    line(x+(w*20),y,x+(w*20),height);
    line(x+(w*22),y,x+(w*22),height);
    line(x+(w*24),y,x+(w*24),height);
    line(x+(w*26),y,x+(w*26),height);
    line(x+(w*28),y,x+(w*28),height);
    line(x+(w*30),y,x+(w*30),height);

    line(x-(w*2),y,x-(w*2),height);
    line(x-(w*4),y,x-(w*4),height);
    line(x-(w*6),y,x-(w*6),height);
    line(x-(w*8),y,x-(w*8),height);
    line(x-(w*10),y,x-(w*10),height);
    line(x-(w*12),y,x-(w*12),height);
    line(x-(w*14),y,x-(w*14),height);
    line(x-(w*16),y,x-(w*16),height);
    line(x-(w*18),y,x-(w*18),height);
    line(x-(w*20),y,x-(w*20),height);
    line(x-(w*22),y,x-(w*22),height);
    line(x-(w*24),y,x-(w*24),height);
    line(x-(w*26),y,x-(w*26),height);
    line(x-(w*28),y,x-(w*28),height);
    line(x-(w*30),y,x-(w*30),height);
    speedL = mouseX/50;
    x += dirL*speedL;
    //makes lines move


    if (x>width) {
    	x=0;
    //makes lines repeat
	}
	
}

function mouseDragged() {
	v = (mouseX+mouseY)/s;
	w = s-v;
	//changes square sizes when mouse dragged
}

I figured out a way to draw multiple objects in different location with one function called for loop. I incorporated it to draw squares that change according to the location of the mouse when clicked.

Rachel Griswold – Project 03

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 03
*
*/

var x1w = 220;
var y1w = 140;
var x2w = 320;
var y2w = 40;
var x3w = 420;
var y3w = 140;
var x4w = 320;
var y4w = 240;

var x1y = 120;
var y1y = 240;
var x2y = 220;
var y2y = 140;
var x3y = 320;
var y3y = 240;
var x4y = 220;
var y4y = 340;

var x1b = 320;
var y1b = 240;
var x2b = 420;
var y2b = 140;
var x3b = 520;
var y3b = 240;
var x4b = 420;
var y4b = 340;

var x1p = 220;
var y1p = 340;
var x2p = 320;
var y2p = 240;
var x3p = 420;
var y3p = 340;
var x4p = 320;
var y4p = 440;

var fade = 0;

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

function draw() {
	background(0);

//creates a square in the center that rotates and fades in and out of view
	fill(fade + mouseX);
	angleMode(RADIANS);
	var r = (mouseX, mouseX);
	push();
	translate(width/2, height/2);
	rotate(r);
	rect(0, 0, 60, 60);
	pop();

//creates similar circles, only they don't rotate but do change position
	ellipse(width/2 - mouseX, height/2 - mouseX, 30, 30);
	ellipse(width/2 + mouseX, height/2 + mouseX, 30, 30);
	ellipse(width/2 - mouseX, height/2 + mouseX, 30, 30);
	ellipse(width/2 + mouseX, height/2 - mouseX, 30, 30);

	fill(255); // white diamond, moves with mouseX
	noStroke();
	quad(x1w + mouseX, y1w - mouseX, x2w, y2w, x3w - mouseX, y3w - mouseX, x4w, y4w - mouseX * 2);

	fill(247, 249, 157); // yellow diamond, moves with mouseX
	noStroke();
	quad(x1y, y1y, x2y - mouseX, y2y + mouseX, x3y - mouseX * 2, y3y, x4y - mouseX, y4y - mouseX);

	fill(172, 217, 253); // blue diamond, moves with mouseX
	noStroke();
	quad(x1b + mouseX * 2, y1b, x2b + mouseX, y2b + mouseX, x3b, y3b, x4b + mouseX, y4b - mouseX);

	var pinkR = 216;
	var pinkG = 164;
	var pinkB = 221;

// makes pink diamond disappear in relation to mouseY (if in bottom half of canvas)
	if(mouseY > height/2){
		var pinkR = pinkR - mouseY + 240;
		var pinkG = pinkG - mouseY + 240;
		var pinkB = pinkB - mouseY + 240;
	}

	fill(pinkR, pinkG, pinkB); // pink diamond, moves with mouseX
	noStroke();
	quad(x1p + mouseX, y1p + mouseX, x2p, y2p + mouseX * 2, x3p - mouseX, y3p + mouseX, x4p, y4p);

}

For this project I was inspired by a design from a show called Steven Universe. It was a lot of fun to play with fading colors and changing the shapes of the quadrilaterals. I included my original sketches at the bottom, and although the finished project is different from my original idea, I think I like how it turned out.

14339207_687662721382921_631824638_o

GarrettRauck-Project-3

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-03

/////////////////////////////
//GLOBAL VARS
/////////////////////////////
//colors
var positive, negative, hold;
// triangles
var triangle1LegLength, triangle1P1X, triangle1P1Y, triangle1P2X, triangle1P2Y,
    triangle1P3X, triangle1P3Y;
// lines
var linesPerQuadrant, lineSpacingX, lineSpacingY, x1, y1, x2, y2;

/////////////////////////////
//HELPER FNS
/////////////////////////////
function mousePressed() {
	hold = positive;
	positive = negative;
	negative = hold;
}

/////////////////////////////
//RUN!
/////////////////////////////
function setup() {
	//canvas setup
    createCanvas(640, 480);
    textFont("Courier New");
    textAlign(CENTER);

    //init vars
    positive = 255;
    negative = 0;
    linesPerQuadrant = 10;
    lineSpacingX = (width/2)/linesPerQuadrant;
    lineSpacingY = (height/2)/linesPerQuadrant;
}

function draw() {
	//clear drawing
	background(negative);

	// draw triangles
	fill(positive);
	triangle1LegLength = height-mouseY;
	triangle1P1X = mouseX;
	triangle1P1Y = height-triangle1LegLength;
	triangle1P2X = mouseX - triangle1LegLength;
	triangle1P2Y = height;
	triangle1P3X = mouseX + triangle1LegLength;
	triangle1P3Y = height;
	triangle(triangle1P1X, triangle1P1Y,
		     triangle1P2X, triangle1P2Y,
		     triangle1P3X, triangle1P3Y);
	triangle2LegLength = mouseY;
	triangle2P1X = mouseX;
	triangle2P1Y = triangle2LegLength;
	triangle2P2X = mouseX - triangle2LegLength;
	triangle2P2Y = 0;
	triangle2P3X = mouseX + triangle2LegLength;
	triangle2P3Y = 0;
	triangle(triangle2P1X, triangle2P1Y,
		     triangle2P2X, triangle2P2Y,
		     triangle2P3X, triangle2P3Y);

	stroke(positive);
	//vary stroke weight based on mouse distance from center
	strokeWeight(dist(mouseX,mouseY,width/2,height/2)/height);
	// draw lines
	for (var i = 0; i < linesPerQuadrant + 1; i++) {
		x1 = width/2;
		y1 = height/2 - i*lineSpacingY;
		x2 = width/2 - (mouseX/lineSpacingX/2-i)*lineSpacingX;
		y2 = height/2;
		line(x1,y1,x2,y2); //quadrant 1
		line(x1,y1,width-x2,y2); //quadrant 2
		line(x1,height-y1,x2,height-y2); //quadrant 3
		line(x1,height-y1,width-x2,y2); //quadrant 4
	};

	// text
	fill(negative);
	push(); //isolate transformations for upper text
		translate(mouseX, mouseY-height/2);
	    rotate((mouseX/width)*TWO_PI);
	    text("click to invert", 0, 0);
	pop();
	push(); //isolate transformations for lower text
		translate(mouseX, mouseY+height/2);
	    rotate((mouseX/width)*TWO_PI);
	    text("click to invert", 0, 0);
	pop();
}

After viewing some examples of dynamic drawings online, I decided that I wanted to use strictly black and white artwork and use the geometry to create dynamism in the drawing. I did a did some scratch-work in my sketchbook to try to figure out some of the math behind the geometry I wanted to create; however, to be honest, I was not able to get the “string art” to transition exactly as I wanted it to. After spending a good chunk of time trying to figure it out, I decided to just roll with it. Cheers.

Scratch-work done in my sketchbook as I attempted to work out some of the math behind the graphic.