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

Project-06-Abstract Clock

For this project I wanted to create a hospital scene to demonstrate time, and how lucky we are to experience time and have a beating heart. The IV drip represents minutes with markers indicating mid and quarter points. The heart monitor represents seconds, and the window scene outside indicates if it is morning or evening. Additionally, I threw in some moving clouds and spinning stars to make the window view more dynamic! Below are also pictures of how it looks during day and night time.

graanak-06

//Graana Khan
// Section B
// graanak@andrew.cmu.edu
// Porject-06

/* Seconds is shown by the heart monitor, minutes are shown by the blood bag IV decreasing,
and hours are shown by whether the window displays a nighttime or daytime scene. */

function setup() {
    createCanvas(480, 480);
    background(220);
    var x = 0;   
}

function draw() {
    let h = hour();
    let m = minute();

	background(237, 237, 239);
	noStroke();
	fill(56, 46, 35);
	rect(0, 407, 481, 73);

	//window frame 
	noStroke();
	fill(190, 195, 198);
	rect(164, 268, 258, 20);
	rect(175, 30, 235, 241);

	//iv drip
	fill(216);
	rect(18, 457, 80, 5, 10);
	rect(56, 127, 5, 333, 10);
	rect(59, 134, 48, 5, 10);
	rect(103, 135, 4, 9, 10);

	//iv drip bag and wire  
	stroke(225, 224, 252);
	strokeWeight(2);
	noFill();
	rect(88.5, 144, 34, 62.5, 10);
	strokeWeight(1);
	fill(147, 6, 6);
	beginShape();
	curveVertex(103, 206);
	curveVertex(103, 206);
	curveVertex(103, 293);
	curveVertex(106, 322);
	curveVertex(128, 342);
	curveVertex(182, 357);
	curveVertex(291, 357);
	curveVertex(292, 353);
	curveVertex(182, 353);
	curveVertex(129, 338);
	curveVertex(109, 319);
	curveVertex(107, 293);
	curveVertex(107, 206);
	curveVertex(107, 206);
	endShape();

	//iv blood with changing minutes 
	noStroke();
	fill(147, 6, 6);
	rect(90, 145+m, 30, 60-m, 10);
   
    // iv bag lines showing mid points of the minutes
    stroke(225, 224, 252);
	strokeWeight(2);
	line(89, 160, 93, 160);
	line(89, 175, 99, 175);
	line(89, 190, 93, 190);

    //window appearance
	if(h < 18 & h > 5){
		daytime();
	} else{
		nighttime();
	}

	//table
	noStroke();
	fill(255);
	rect(92, 308, 6, 141, 10);
	rect(338, 308, 6, 141, 10);
	rect(92, 305, 252, 12, 10);

	//flower vase
	stroke(50, 132, 50);
	strokeWeight(2);
	line(312, 302, 312, 243);

	stroke(225, 224, 252);
	strokeWeight(1);
	noFill();
	rect(298, 263, 28, 46, 7);

    //water 
	fill(187, 201, 249, 100);
	noStroke();
	rect(298, 280, 28, 29, 7);

	//flower
	noStroke();
	fill(244, 132, 196);
	ellipse(307, 244, 11, 2);
	ellipse(318, 244, 11, 2);
	push();
	translate(308, 247);
	rotate(radians(-40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 247);
	rotate(radians(40));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 249);
	rotate(radians(-70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(314, 249);
	rotate(radians(70));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(308, 242);
	rotate(radians(20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(317, 242);
	rotate(radians(-20));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(310, 239);
	rotate(radians(60));
	ellipse(0, 0, 11, 2);
	pop();
	push();
	translate(320, 260);
	rotate(radians(-60));
	ellipse(0, 0, 11, 2);
	pop();
	fill(255, 223, 87);
	ellipse(312, 244, 4, 3);    

	//heart monitor 
	fill(255);
	rect(143, 202, 135, 103, 20);
	fill(49, 49, 51);
	rect(147, 206, 128, 97, 20);
	fill(194, 255, 69);
	rect(240, 290, 19, 8, 10);
	fill(72, 72, 255);
	ellipse(233, 294, 8, 8);

	//hospital bed 
	fill(180, 178, 191);
	rect(73, 364, 310, 16, 20);
	rect(73, 331, 15, 45, 20);
	push();
	translate(450, 268);
	rotate(radians(45));
	rect(10, 0, 18, 134, 20);
	fill(199, 221, 239);
	rect(-17, 15, 27, 117, 40);
	pop();
	fill(199, 221, 239)
	rect(89, 337, 285, 27, 20);

	fill(180, 178, 191);
	rect(80, 368, 5, 93, 10);
	rect(378, 368, 5, 93, 10);
	
	stroke(216);
	strokeWeight(3);
	fill(255);
	ellipse(82, 461, 18, 18);
	ellipse(380, 461, 18, 18);

	//heart monitor seconds tracker
	let sec = map(second(), 0, 60, 0, 120);
	var x = sec;
	heartmonitor(x);

}

function daytime(){
	noStroke();
	fill(213, 231, 247);
	rect(186, 42, 211, 217);
	fill(255, 255, 255, 150);
	rect(210 + (mouseX/50), 55, 52, 21, 20);
	rect(238 + (mouseX/50), 68, 39, 21, 10);
	rect(331 + (mouseX/50), 86, 48, 28, 10);
	rect(261 + (mouseX/50), 168, 38, 21, 10);
	rect(244 + (mouseX/50), 179, 38, 21, 10);
    fill(247, 221, 109, 100);
    circle(292, 80, 63);
    fill(247, 221, 109);
    circle(292, 80, 50);
}

function nighttime(){
	noStroke();
	fill(12, 33, 48);
	rect(186, 42, 211, 217);
	noFill();
	stroke(234, 234, 139, 200);
	strokeWeight(2);
	push();
	translate(360, 75);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(357, 166);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(226, 121);
	rotate(radians(mouseX));
	line(0, -5, 0, 5);
	line(-5, 0, 5, 0);
	pop();
	push();
	translate(292, 80);
	noStroke();
	fill(255, 255, 255, 100);
    circle(0, 0, 63);
    fill(255);
    circle(0, 0, 50);
    pop();
}

function heartmonitor(x){
	noStroke();
	fill(247, 8, 162);
	beginShape();
	curveVertex(149 + x, 255);
	curveVertex(149 + x, 255);
	curveVertex(148 + x, 254);
	curveVertex(147 + x, 255);
	curveVertex(149 + x, 258);
	curveVertex(151 + x, 255);
	curveVertex(150 + x, 254);
	curveVertex(150 + x, 254);
	endShape();
}

LO-06-Randomness

Jonathan McCabe, Instability Landscapes.

Jonathan McCabe creates a series of imaginary landscapes full of randomized textures, colors, and arrangements. McCabe uses Alan Turing’s reaction diffusion equations to generate these designs. This specific series additionally uses multi-scale Turing instability. This creates the mixing and merging of patterns and colors as it generates Turing patterns of spots and stripes. I find these computation arrangements inspiring in their ability to replicate familiar existing landforms but still manage to make it look like a fantasy with the psychedelic color pattern and mixture of texture. McCabe creates “algorithmic botany” through these formulaic computation operations to create an end result of an image that resembles biological forms.

As an architecture major, using computational randomization to create these landforms would be an interesting challenge for creating sites to build for. They also serve as good visualizations for collage or other methods for representing the landform. Having sources such as the Instability Landscapes for architectural exploration would be a unique way to design for formations that don’t exist in our real world, but are rather digitally man-made. McCabe’s use of shadows, color contrast, and twisting and shape of forms creates a set of stimulating and experimental images.

Project-05-Wallpaper

I was inspired by one of my favorite prints-cow print, and a fruit I love- cherries. Additionally, when you click on the image, the background will change.

graanak-05

//Graana Khan
//Section B
//graanak@andrew.cmu.edu
//Project-05

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

function draw() {
	
	//cow print backdrop 

	background(255);
	noStroke();
	fill(0);
	beginShape();
	curveVertex(40, 45);
	curveVertex(40, 45);
	curveVertex(46, 35);
	curveVertex(76, 26);
	curveVertex(139, 78);
	curveVertex(66, 141);
	curveVertex(36, 123);
	curveVertex(47, 83);
	curveVertex(47, 83);
	endShape();
	beginShape();
	curveVertex(180, 32);
	curveVertex(180, 32);
	curveVertex(197, 19);
	curveVertex(249, 23);
	curveVertex(255, 62);
	curveVertex(232, 62);
	curveVertex(232, 62);
	endShape();
	beginShape();
	curveVertex(276, 45);
	curveVertex(276, 45);
	curveVertex(307, 23);
	curveVertex(361, 26);
	curveVertex(375, 89);
	curveVertex(369, 126);
	curveVertex(318, 141);
	curveVertex(282, 82);
	curveVertex(282, 82);
	endShape();
	beginShape();
	curveVertex(156, 141);
	curveVertex(156, 141);
	curveVertex(152, 120);
	curveVertex(196, 82);
	curveVertex(256, 117);
	curveVertex(316, 197);
	curveVertex(259, 220);
	curveVertex(176, 187);
	curveVertex(176, 187);
	endShape();
	beginShape();;
	curveVertex(344, 182);
	curveVertex(344, 182);
	curveVertex(355, 199);
	curveVertex(355, 231);
	curveVertex(331, 196);
	curveVertex(331, 196);
	endShape();
	beginShape();
	curveVertex(83, 172);
	curveVertex(83, 172);
	curveVertex(56, 170);
	curveVertex(44, 200);
	curveVertex(52, 210);
	curveVertex(87, 200);
	curveVertex(87, 200);
	endShape();
	beginShape();
	curveVertex(168, 253);
	curveVertex(168, 253);
	curveVertex(175, 231);
	curveVertex(196, 228);
	curveVertex(218, 241);
	curveVertex(208, 273);
	curveVertex(180, 273);
	curveVertex(180, 273);
	endShape();
	beginShape();
	curveVertex(78, 253);
	curveVertex(78, 253);
	curveVertex(130, 247);
	curveVertex(180, 331);
	curveVertex(142, 369);
	curveVertex(78, 377);
	curveVertex(36, 317);
	curveVertex(36, 317);
	endShape();
	beginShape();
	curveVertex(250, 253);
	curveVertex(250, 253);
	curveVertex(311, 244);
	curveVertex(354, 259);
	curveVertex(369, 293);
	curveVertex(307, 321);
	curveVertex(237, 324);
	curveVertex(237, 324);
	endShape();
	beginShape();
	curveVertex(214, 341);
	curveVertex(214, 341);
	curveVertex(242, 345);
	curveVertex(248, 365);
	curveVertex(206, 377);
	curveVertex(195, 367);
	curveVertex(195, 367);
	endShape();
	beginShape();
	curveVertex(234, 400);
    curveVertex(234, 400);
    curveVertex(293, 349);
    curveVertex(369, 363);
    curveVertex(388, 400);
    curveVertex(388, 400);
    endShape();
    beginShape();
    curveVertex(23, 348);
    curveVertex(23, 348);
    curveVertex(44, 362);
    curveVertex(52, 388);
    curveVertex(10, 384);
    curveVertex(5, 374);
    curveVertex(5, 374);
    endShape();

    //red cherry columns 

    for(var x = -10; x <= 340; x += 100){
    	for(var y = -60; y <= 372; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(-15));
    		cherries();
    		pop();
    	}
    }


    // pink cherry columnns

    for(var x = 60; x <= 293; x += 100){
    	for(var y = 45; y <= 352; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(15));
    		pinkcherries();
    		pop();
    	}
    }
    noLoop();
}

function mousePressed(){
    background(213, 238, 247);
    for(var x = 0; x <= 360; x += 145){
        for(var y = 0; y <= 360; y += 105){
        	push();
        	translate(x,y);
        	clouds1();
        	pop();
    		
    	}
    }

    for(var x = 0; x <= 260; x += 145){
    	for(var y = 0; y <= 260; y += 105){
    		push();
    		translate(x,y);
    		clouds2();
    		pop();
    	}
    }

    //red cherry columns 

    for(var x = -10; x <= 340; x += 100){
    	for(var y = -60; y <= 372; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(-15));
    		cherries();
    		pop();
    	}
    }


    // pink cherry columnns

    for(var x = 60; x <= 293; x += 100){
    	for(var y = 45; y <= 352; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(15));
    		pinkcherries();
    		pop();
    	}
    }
    noLoop();    
}

//cherries pattern

function cherries(){

	//stems
	stroke(61, 130, 48);
	strokeWeight(2);
	line(35, 40, 44, 22);
	line(53, 40, 44, 22);
	
	//leaf
	noStroke();
	fill(61, 130, 48);
	beginShape();
	curveVertex(44, 22);
	curveVertex(44, 22);
	curveVertex(46, 19);
	curveVertex(50, 19);
	curveVertex(47, 22);
	curveVertex(47, 22);
	endShape();

	//cherry
	noStroke();
	fill(229, 14, 14);
	circle(35, 44, 15);
	circle(52, 44, 15);

}

function pinkcherries(){

	//stems
	stroke(61, 130, 48);
	strokeWeight(2);
	line(35, 40, 44, 22);
	line(53, 40, 44, 22);
	
	//leaf
	noStroke();
	fill(61, 130, 48);
	beginShape();
	curveVertex(44, 22);
	curveVertex(44, 22);
	curveVertex(46, 19);
	curveVertex(50, 19);
	curveVertex(47, 22);
	curveVertex(47, 22);
	endShape();

	//cherry
	noStroke();
	fill(255, 199, 227);
	circle(35, 44, 15);
	circle(52, 44, 15);

}


//clouds1 pattern 
function clouds1(){
	noStroke();
	fill(255);
	rect(21, 23, 51, 28, 30);
	rect(51, 40, 38, 18, 15);
}

//clouds2 pattern 
function clouds2(){
	noStroke();
	fill(255);
	rect(106, 76, 60, 24, 20);
	rect(103, 89, 33, 24, 10);
}

Looking Outwards-05

Air Max Campaign for Nike by ManvsMachine.

In this campaign, ManvsMachine created a series of 3d computer graphics that abstracted Nike’s Air Max sneaker into a layered composition. This project is admirable in its use of different textures to create variation between the abstracted shoes. Shading, transparency, and texture all help the graphics appear 3d. The textures he uses communicates the message of the shoe campaign as they demonstrate the airiness and lightness of the shoe, while his render of the shoe form composed from stones communicates a different aspect of the shoe’s performance.

The shadows casted on the graphics are what truly help make it appear 3d. It gives dimension to the illustration and generates surfaces that bend, fold, and capture the light differently. In the campaign video linked below, ManvsMachine animates the graphics in a way that responds to the textures of the graphics which additionally helps make them appear 3d and have qualities that are bound to the physics of our world like gravity.

Overall this project creatively uses all these methods to simulate the 3d experience of the graphic.

Project 04-String Art

I was inspired by Chiharu Shiota’s art installation called In Silence. I played around with having the lines in front or behind the piano and chair as the installation is 3D.

graanak-04

//Graana Khan 
// Section B

var dx1; 
var dy1;
var dx2;
var dy2;
var numLines = 30;

function setup() {
    createCanvas(400, 300);
    background(220);
}

function draw() {
	background(209, 209, 209);

	//background floor 
	noStroke();
	fill(49, 49, 49);
	beginShape();
	vertex(0, 152);
	vertex(370, 136);
	vertex(400, 150);
	vertex(400, 300);
	vertex(0, 300);
	endShape();

	//string art
	dx1 = (0)/numLines;
	dy1 = (150)/numLines;
	dx2 = (400)/numLines;
	dy2 = (0)/numLines;

	var x1 = 0;
	var x2 = 400;
	var y1 = 0;
	var y2 = 400;
	

	for (var i = 0; i <= numLines; i += 1){
		stroke(0);
		strokeWeight(0.25);
		line(x1, y1, x2, y2);
		line(x1, y1+100, x2-50, y2-200);
		line(x1, y1, x2-200, y2-300);


		x1 += dx1;
		x2 += dx2;
		y1 += dy1;
		y2 += dy2;
	}

	for(var i = 0; i <= numLines; i +=1){
		strokeWeight(0.25);
		line(x2, y1, x1, y2-200);
		line(x1, y2, x2, y1);

		x1 -= dx1;
		x2 -= dx2;
		y1 -= dy1;
		y2 -= dy2;

	}

	//chair seat
	noStroke();
	fill(33);
	beginShape();
	vertex(155, 192);
	vertex(174, 181);
	vertex(193, 186);
	vertex(174, 196);
	endShape();

	//chair back
	fill(22);
	push();
	translate(151, 162);
	rotate(radians(-7));
	rect(0, 0, 3, 33);
	rect(17, 3, 3, 33);
	pop();

	push();
	translate(151, 162);
	rotate(radians(7));
	rect(1, 3, 20, 2);
	pop();
    
    //chair base and legs
	fill(22);
	beginShape();
	vertex(156, 192);
	vertex(174, 195);
	vertex(193, 186);
	vertex(193, 191);
	vertex(174, 200);
	vertex(156, 197);
	endShape();
	rect(155, 194, 3, 26);
	rect(172, 198, 3, 28);
	rect(190, 190, 3, 23);

	//piano 
	beginShape();
	vertex(188, 173);
	vertex(183, 155);
	vertex(172, 153);
	vertex(171, 145);
	vertex(179, 142);
	vertex(177, 131);
	vertex(226, 113);
	vertex(236, 113);
	vertex(253, 115);
	vertex(260, 116);
	vertex(260, 121);
	vertex(253, 125);
	vertex(255, 128);
	vertex(267, 133);
	vertex(267, 153);
	vertex(258, 164);
	vertex(255, 189);
	vertex(252, 189);
	vertex(249, 170);
	vertex(191, 157);
	vertex(191, 174);
	endShape();

	fill(231);
	beginShape();
	vertex(178, 148);
	vertex(185, 143);
	vertex(250, 155);
	vertex(245, 161);
	endShape();
   
}

LO-04- Sound Art

Don Ritter’s Intersection. 2019 (reconstruction).

This installation takes place in a completely dark room with a light lock door and plays audio of 8 lanes of moving traffic sounds. The installation interacts with visitors walking through the room by having a car screeching to a stop noise when the visitor walks past it. If a visitor stands still for a few seconds, then they will hear cars smashing into the paused car. The installation uses infra-red sensors, feedback technology, and 8 or 16 channel audio to create the sounds of traffic.

This work is inspiring in how it addresses the power of simulation with technology and the generation of creating hypersensitivity to sound with the subtraction of sight. Arthur Kroker mentions how “we are always being smashed by the freeway traffic of high technology”. By having the high intensity audio interact with the visitor’s walking Ritter creates a fully immersive space that reacts to human motion. Ritter manifests a commentary on the advancing speed of growing technology portrayed through the speeding traffic as well as rendering the visitor’s blind in the dark space. The dichotomy of the installation lies in its dependency on these forms of advancing technologies to portray the sounds and interaction with the visitors, and at the same time is depicting ideas of the intimidating pace of growing technology.

Project-03-Dynamic Drawing

I chose to do the view from my window in NYC with the sun setting since I love to watch the sun set when I am home.

graanak-03-project

//Graana Khan
// Section B

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

function draw() {

	if(mouseX < width/2){
		background(207, 236, 246)
	} else if(mouseX >= width/2){
		background(10, 27, 51)
	}
	noStroke();

//sun
    fill(254, 229, 150);
    circle(303, 47 + (0.5 * mouseX), 77);

//moving clouds
    fill(255);
    rect(75 + (mouseX - 50), 47, 83, 36, 15);
    rect(318 + (mouseX - 50), 112, 37, 15, 10);
    rect(453 + (mouseX - 50), 57, 55, 32, 15);
    rect(490 + (mouseX - 50), 47, 84, 28, 15);


//buildings
    if(mouseX < width/2){
    	fill(197, 198, 200);
    } else if(mouseX >= width/2){
    	fill(0);
    }
    
    rect(0, 171, 17, 111);
    rect(3, 232, 50, 50);
    rect(25, 202, 50, 80);
    rect(38, 96, 22, 184);
    rect(49, 220, 115, 63);
    //building 1 with lights
    rect(94, 137, 24, 146);
    rect(155, 166, 58, 117);
    //empire state building with lights 
    rect(213, 105, 35, 177);
    triangle(213, 107, 231, 75, 248, 107);
    push();
    strokeWeight(2);
    if(mouseX < width/2){
    	stroke(197, 198, 200)
    } else if(mouseX >= width/2){
    	stroke(0)
    }
    line(231, 76, 231, 57);
    pop();
    rect(240, 257, 80, 25);
    rect(262, 196, 41, 87);
    rect(315, 153, 22, 130);
    rect(326, 188, 43, 94);
    //united nations building with lights
    rect(369, 157, 76, 126);
    //chrysler building
    rect(389, 121, 26, 40);
    triangle(389, 121, 402, 102, 415, 121);
    rect(414, 262, 98, 21);
    rect(456, 178, 28, 98);
    rect(508, 188, 36, 94);
    //building 2 with lights 
    beginShape();
    vertex(480, 280);
    vertex(480, 280);
    vertex(480, 121);
    vertex(513, 160);
    vertex(513, 280);
    vertex(513, 280);
    endShape();
    rect(538, 222, 44, 61);
    rect(565, 121, 40, 162);
    rect(240, 215, 75, 67);
    rect(444, 217, 22, 63);

//building lights
    if(mouseX < width/2){
    	fill(255, 255, 255, 150)
    } else if(mouseX >= width/2){
    	fill(253, 229, 150, 150)
    }
    // United Nations lights
    rect(373, 161, 69, 4);
    rect(373, 169, 69, 4);
    rect(373, 177, 69, 4);
    rect(373, 185, 69, 4);
    rect(373, 193, 69, 4);
    rect(373, 201, 69, 4);
    rect(373, 209, 69, 4);
    rect(373, 217, 69, 4);
    rect(373, 225, 69, 4);
    rect(373, 233, 69, 4);
    rect(373, 241, 69, 4);
    rect(373, 249, 69, 4);
    rect(373, 257, 69, 4);
    //empire state lights
    square(229, 85, 3);
    square(224, 91, 3);
    square(230, 91, 3);
    square(235, 91, 3);
    square(221, 96, 3);
    square(227, 96, 3);
    square(233, 96, 3);
    square(239, 96, 3);
    square(221, 101, 3);
    square(227, 101, 3);
    square(233, 101, 3);
    square(239, 101, 3);
    square(215, 107, 3);
    square(221, 107, 3);
    square(227, 107, 3);
    square(233, 107, 3);
    square(239, 107, 3);
    square(245, 107, 3);
    square(215, 112, 3);
    square(221, 112, 3);
    square(227, 112, 3);
    square(233, 112, 3);
    square(239, 112, 3);
    square(245, 112, 3);
    square(215, 118, 3);
    square(221, 118, 3);
    square(227, 118, 3);
    square(233, 118, 3);
    square(239, 118, 3);
    square(245, 118, 3);
    square(215, 123, 3);
    square(221, 123, 3);
    square(227, 123, 3);
    square(233, 123, 3);
    square(239, 123, 3);
    square(245, 123, 3);
    square(215, 128, 3);
    square(221, 128, 3);
    square(227, 128, 3);
    square(233, 128, 3);
    square(239, 128, 3);
    square(245, 128, 3);
    square(215, 133, 3);
    square(221, 133, 3);
    square(227, 133, 3);
    square(233, 133, 3);
    square(239, 133, 3);
    square(245, 133, 3);
    square(215, 138, 3);
    square(221, 138, 3);
    square(227, 138, 3);
    square(233, 138, 3);
    square(239, 138, 3);
    square(245, 138, 3);
    square(215, 143, 3);
    square(221, 143, 3);
    square(227, 143, 3);
    square(233, 143, 3);
    square(239, 143, 3);
    square(245, 143, 3);
    square(215, 148, 3);
    square(221, 148, 3);
    square(227, 148, 3);
    square(233, 148, 3);
    square(239, 148, 3);
    square(245, 148, 3);
    square(215, 153, 3);
    square(221, 153, 3);
    square(227, 153, 3);
    square(233, 153, 3);
    square(239, 153, 3);
    square(245, 153, 3);
    square(215, 158, 3);
    square(221, 158, 3);
    square(227, 158, 3);
    square(233, 158, 3);
    square(239, 158, 3);
    square(245, 158, 3);
    //building 1 lights
    square(484, 130, 3);
    square(484, 135, 3);
    square(484, 140, 3);
    square(484, 145, 3);
    square(484, 150, 3);
    square(484, 155, 3);
    square(484, 160, 3);
    square(484, 165, 3);
    square(484, 170, 3);
    square(489, 140, 3);
    square(489, 145, 3);
    square(489, 150, 3);
    square(489, 155, 3);
    square(489, 160, 3);
    square(489, 165, 3);
    square(489, 170, 3);
    square(494, 145, 3);
    square(494, 150, 3);
    square(494, 155, 3);
    square(494, 160, 3);
    square(494, 165, 3);
    square(494, 170, 3);
    square(499, 150, 3);
    square(499, 155, 3);
    square(499, 160, 3);
    square(499, 165, 3);
    square(499, 170, 3);
    square(504, 155, 3);
    square(504, 160, 3);
    square(504, 165, 3);
    square(504, 170, 3);
    //building 1 lights
    rect(132, 222, 20, 3);
    rect(132, 227, 20, 3);
    rect(132, 232, 20, 3);
    rect(132, 237, 20, 3);
    rect(132, 242, 20, 3);
    rect(132, 247, 20, 3);
    rect(132, 252, 20, 3);
    rect(132, 257, 20, 3);
    rect(132, 262, 20, 3);

//water
    if(mouseX < width/2){
    	fill(152, 179, 196)
    } else if(mouseX >= width/2){
    	fill(53,57, 79)
    }
	rect(0, 281, 600, 170);

	if(mouseX < width/2){
		fill(109, 137, 147, 45)
	} else if(mouseX >= width/2){
		fill(12, 23, 38, 45)
	}
	rect(0, 281, 600, 38);
	rect(337, 339, 262, 7, 5, 0, 0, 5);
	rect(0, 347, 270, 27, 0, 15, 15, 0);
	rect(-10, 392, 532, 10, 0, 8, 8, 0);
	rect(343, 407, 256, 44, 35, 0, 0, 35);

//moving water lines
    push();
    stroke(255);
    strokeWeight(3);
    line(100 - mouseX, 410, 201 - mouseX, 410);
    line(278 - mouseX, 314, 422 - mouseX, 314);
    line(369 - mouseX, 333, 425 - mouseX, 333);
    line(380 - mouseX, 420, 504 - mouseX, 420);
    line(532 - mouseX, 340, 579 - mouseX, 340);
    // ferry water lines
    strokeWeight(1.5);
    line(3 + mouseX, 337, 72 + mouseX, 337);
    line(42 + mouseX, 352, 85 + mouseX, 352);
    line(25 + mouseX, 366, 73 + mouseX, 366);
    pop();

//moving ferry 
    fill(26, 35, 58);
    rect(94 + mouseX, 353, 85, 8);
    fill(255);
    beginShape();
    curveVertex(94 + mouseX, 353);
    curveVertex(94 + mouseX, 353);
    curveVertex(94 + mouseX, 333);
    curveVertex(106 + mouseX, 331);
    curveVertex(121 + mouseX, 331);
    curveVertex(139 + mouseX, 335);
    curveVertex(156 + mouseX, 339);
    curveVertex(164 + mouseX, 342);
    curveVertex(174 + mouseX, 349);
    curveVertex(179 + mouseX, 353);
    curveVertex(179 + mouseX, 353);
    endShape();
    triangle(107 + mouseX, 331, 107 + mouseX, 321, 118 + mouseX, 331);
    stroke(255);
    strokeWeight(2);
    line(94 + mouseX, 338, 94 + mouseX, 328);
    line(94 + mouseX, 328, 107 + mouseX, 328);
    line(101 + mouseX, 333, 101 + mouseX, 328);
    noStroke();
    fill(132, 156, 208);
    circle(102 + mouseX, 342, 10);
    fill(0);
    beginShape();
    curveVertex(110 + mouseX, 345);
    curveVertex(110 + mouseX, 345);
    curveVertex(110 + mouseX, 338);
    curveVertex(122 + mouseX, 338);
    curveVertex(145 + mouseX, 341);
    curveVertex(157 + mouseX, 345);
    curveVertex(157 + mouseX, 345);
    endShape();

    if(mouseX >= width/2){

        //stars
    	stroke(254, 229, 150);
    	strokeWeight(1);
    	push();
    	translate(28, 72);
    	rotate(radians(mouseX));
    	line(-6, 0, 6, 0);
    	line(0, -6, 0, 6);
    	pop();
    	push();
    	translate(151, 135);
    	rotate(radians(mouseX));
    	line(-3, 0, 3, 0);
    	line(0, -3, 0, 3);
    	pop();
    	push();
    	translate(287, 32);
    	rotate(radians(mouseX));
    	line(-6, 0, 6, 0);
    	line(0, -6, 0, 6);
    	pop();
    	push();
    	translate(427, 14);
    	rotate(radians(mouseX));
    	line(-3, 0, 3, 0);
    	line(0, -3, 0, 3);
    	pop();
    	push();
    	translate(442, 108);
    	rotate(radians(mouseX));
    	line(-6, 0, 6, 0);
    	line(0, -6, 0, 6);
    	pop();
    	push();
    	translate(582, 110);
    	rotate(radians(mouseX));
    	line(-3, 0, 3, 0);
    	line(0, -3, 0, 3);
    	pop();
    	noStroke();

    	//moon
    	push();
    	fill(255);
    	translate(519, 57);
    	circle(0, 0, 40);
    	pop();
    	push();
    	fill(255, 255, 255, 100);
    	translate(519, 57);
    	if(mouseX < 500 || mouseX >= 400){
    		scale(0.25 * (mouseX/100))
    	}
    	circle(0,0, 50);
    	circle(0,0, 42);
    	pop();
    }
}

LO-03-Computational Fabrication

Neri Oxman’s Silk Pavilion. 2013.

Mediated Matter Group – *Silk Pavilion* on display.

The Silk Pavilion uses a combination of computational and biological fabrication to create a pavilion that articulates the beauty and structure of silk while using a sustainable method of gathering silk. The project addresses that about 1,000 silk cocoons are boiled per tshirt, which kill the larva in the process. The silk pavilion makes the silkworms spin in sheets rather than cocoons due to the human made structure and grid, thus allowing a more sustainable method of harvesting silk.

The primary structure uses a CNC (computer numerical control) machine to lay down 25 panels of silk thread. 6,500 silkworms were then used to finish the rest of the structure.

The algorithms that programmed the robotic arm to create the primary structure must have first analyzed the natural biological process and pattern that silkworms take when forming cocoons as the project wanted to replicate that process. Neri Oxman’s team attached small magnets on the heads of the silkworms to track their movements, and using that data they then created a path for the arm to move in ways like the worms.

I found this project fascinating for a multitude of reasons, the first being the combination of biological processes and digital processes. Additionally, the Silk Pavilion is able to achieve an architectural scale of a process that is done on a much smaller scale (silkworm cocoons). In this case, studying biological formations allows for us to vary scales of production of natural systems. By analyzing nature we can create complex parametric designs that allow us to reflect organic structures and designs with computer based methods of learning. Oxman’s ambition to combine the organic with computers reflects in the pavilion in its large form that displays the natural path of silkworms shown in varying patches of density.

Project-02-Variable-Face

I did a scene from Studio Ghibli’s Spirited Away where Kaonashi is sitting on a train. I found his face to be made of simple geometries that convey different expressions and emotions when the dimensions are adjusted.

project-02-face

//Graana Khan
// Section B

var eyeWidth = 14 
var eyeHeight = 8
var mouthWidth = 20 
var mouthHeight = 7
var eyebrowHeight = 111
var eyebrowHeightTop = 94
var cloud1 = 64
var cloud2 = 308
var cloud3 = 484

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

function draw() {
	background(255);
	noStroke();

//train backdrop 
    fill(66, 32, 18);
    rect(0, 0, 680, 235);
    fill(37, 17, 12);
    rect(0, 229, 680, 4);
    fill(114, 30, 21);
    rect(0, 234, 680, 100);
    fill(84, 22, 13);
    rect(0, 332, 680, 45);
    fill(56, 24, 14);
    rect(0, 373, 680, 65);
    fill(125, 75, 51);
    rect(0, 435, 680, 45);
    fill(78, 41, 22);
    rect(37, 18, 176, 211);
    rect(251, 18, 176, 211);
    rect(464, 18, 176, 211);
    fill(44, 19, 12);
    rect(0, 373, 680, 9);

//sky 
    fill(149, 178, 221);
    rect(45, 29, 160, 190);
    rect(259, 29, 160, 190);
    rect(472, 29, 160, 190);

    // clouds 
    fill(255, 255, 255, 100);
    rect(cloud1, 57, 85, 37, 20);
    rect(137, 162, 61, 32, 20);
    rect(cloud2, 101, 107, 59, 20);
    rect(cloud3, 60, 45, 30, 20);
    rect(525, 143, 91, 59, 20);

// train handles
    noFill();
    strokeWeight(8);
    stroke(98, 80, 56);
    ellipse(34, 29, 52, 52);
    ellipse(156, 29, 52, 52);
    ellipse(279, 29, 52, 52);
    ellipse(401, 29, 52, 52);
    ellipse(526, 29, 52, 52);
    ellipse(648, 29, 52, 52);
    noStroke();

//kaonashi body 
    fill(0, 0, 0, 150);
    beginShape();
    curveVertex(270, 432);
    curveVertex(270, 432);
    curveVertex(263, 379);
    curveVertex(258, 342);
    curveVertex(257, 330);
    curveVertex(258, 313);
    curveVertex(261, 298);
    curveVertex(263, 276);
    curveVertex(273, 234);
    curveVertex(280, 206);
    curveVertex(286, 186);
    curveVertex(291, 164);
    curveVertex(296, 137);
    curveVertex(298, 116);
    curveVertex(303, 94);
    curveVertex(312, 78);
    curveVertex(333, 69);
    curveVertex(351, 70);
    curveVertex(364, 77);
    curveVertex(373, 88);
    curveVertex(379, 109);
    curveVertex(382, 127);
    curveVertex(385, 152);
    curveVertex(393, 190);
    curveVertex(401, 217);
    curveVertex(410, 252);
    curveVertex(417, 285);
    curveVertex(421, 310);
    curveVertex(422, 343);
    curveVertex(420, 368);
    curveVertex(417, 284);
    curveVertex(414, 425);
    curveVertex(270, 432);
    curveVertex(270, 432);
    endShape();

//kaonashi head
    fill(221, 221, 219);
    rect(306, 80, 67, 116, 25, 25, 40, 40);

//kaonashi arms
    noFill();
    stroke(0, 0, 0, 140);
    strokeWeight(10);
    beginShape();
    curveVertex(288, 299);
    curveVertex(288, 299);
    curveVertex(285, 311);
    curveVertex(290, 321);
    curveVertex(307, 330);
    curveVertex(307, 330);
    endShape();
    beginShape();
    curveVertex(392, 299);
    curveVertex(392, 299);
    curveVertex(394, 311);
    curveVertex(390, 321);
    curveVertex(373, 330);
    curveVertex(373, 330);
    endShape();

//kaonashi face
    noStroke();
    fill(0);
    ellipse(323, 121, eyeWidth, eyeHeight); //left eye
    ellipse(357, 121, eyeWidth, eyeHeight); // right eye
    ellipse(323, 129, 9, 3);
    ellipse(357, 129, 9, 3);
    ellipse(340, 173, mouthWidth, mouthHeight);
    fill(111, 80, 61);
    triangle(318, 136, 328, 136, 325, 156);
    triangle(352, 136, 362, 136, 355, 156);
    ellipse(340, 181, 12, 4);
    triangle(318, eyebrowHeight, 328, eyebrowHeight, 326, eyebrowHeightTop); //left eyebrow
    triangle(352, eyebrowHeight, 361, eyebrowHeight, 353, eyebrowHeightTop); //right eyebrow

}

function mousePressed() {
	eyeWidth = random(8, 30);
	eyeHeight = random(5, 12);
	mouthWidth = random(10, 35);
	mouthHeight = random(5, 15);
	eyebrowHeight = random(100, 113);
	eyebrowHeightTop = random(87, 100);
	cloud1 = random(51, 120);
	cloud2 = random(262, 312);
	cloud3 = random(476, 562);

}

LO-02: Generative Art

#Deepdream is blowing my mind.

Memo Akten

2015.

Memo Akten’s #Deepdream is blowing my mind intrigued me by the way he used this project to reveal our confirmation biases and strong urge to reflect something familiar onto something that is simply “noise with particular distributions.” The combination of art, perception, and machine learning makes this project philosophical yet compelling and interactive. By watching the algorithm produce new combinations of patterns, it pushed me to seek familiarity in the array of colors and designs. Akten uses a video of his face, an unfamiliar image to the machine, which then uses familiar images to generate patterns that it perceives and recognizes in his face. In this way we can see the similarities and differences between machine biases and our human confirmation biases when presented with an unfamiliar image.

Akten manifests his ideas in the algorithm by revealing the poetry of the algorithm’s processes in comparison to how we as humans perceive and reflect on our world. Akten’s exploration of machine learning and its relationship to human learning allows us to understand different modes of thinking and how the process can be quite similar with different results.

The deepdream algorithm gives further insight to how we make meaning of the things around us by using the algorithm to show clearly how we engage and understand the images created by it, and how our biological neural network arrives at the conclusions it does. This project uses machine learning to help us better understand our own human learning process and consciousness.

Memo Atken’s #Deepdream is blowing my mind.