![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
Rock, especially gravel, is not often considered a substantial building material on its own, and neither is string; however, when these two elements are combined by laying the string out and entangling it within a pile of rocks to create a solid yet temporary structure. The structure shown above seems to be quite fragile on the surface, but the core is extremely solid due to the tension in the string. Although the uses of this construction type seems quite ambiguous, the potential for temporary strong structures which can be constructed using rubble or scrap materials might be applicable in the future.
Category: SectionC
Joanne Chui – Project 03 – Dynamic Drawing
/*
Joanne Chui
Section C
Project 3
*/
function setup(){
createCanvas(480, 640);
}
var angle = 0;
var elbow = 215;
var wrist = 220;
var height = 20;
function draw(){
background(204, 166, 149);
strokeWeight(0);
//view
fill(215, 195, 210);
rect(130, 130, 200, 300);
fill(240, 220, 235);
ellipse(155, 190, 20, 20);//cloud1
ellipse(175, 190, 30, 30);
ellipse(195, 190, 25, 25);
ellipse(215, 190, 20, 20);
ellipse(250, 250, 15, 15);//cloud2
ellipse(270, 250, 35, 35);
ellipse(290, 250, 20, 20);
ellipse(305, 250, 15, 15);
//blinds
if(mouseY > 130 & mouseY < 430){
for(var i = 0; i < 30; i++){
if(i % 2 == 0){
fill(200, 186, 183);
}
else {
fill("white");
}
rect(130, 130 + i * ((mouseY - 130)/30), 200, (mouseY - 130)/30);
}
}
//windowsill
stroke(144, 120, 109);
strokeWeight(10);
line(130, 430, 130, 130);
line(115, 130, 345, 130);
line(330, 130, 330, 430);
line(345, 430, 130, 430);
strokeWeight(0);
if(mouseY > 430){
background(144, 120, 109);
fill(200, 186, 183);
rect(130, 130, 200, 300);
fill(150, 140, 140);
for(var i = 0; i < 30; i += 2){
rect(130, 130 + i*10, 200, 10);
}
//lighton
fill(252, 247, 187, 80);
beginShape();
vertex(360, 317);
vertex(290, 305);
vertex(270, 470);
vertex(375, 470);
endShape();
//windowsilldark
stroke(110, 88, 78);
strokeWeight(10);
line(130, 430, 130, 130);
line(115, 130, 345, 130);
line(330, 130, 330, 430);
line(345, 430, 130, 430);
strokeWeight(0);
}
//DESK
fill("black");
rect(30, 470, 400, 30, 7);
rect(40, 500, 30, 140);
rect(390, 500, 30, 140);
//LAMP
fill(170, 125, 125);
rect(340, 460, 80, 10, 3);
strokeWeight(13);
stroke(170, 125, 125);
line(380, 460, 360, 320);
strokeWeight(10);
line(360, 317, 290, 310);
//GIRL
//neck
strokeWeight(0);
fill(102, 83, 63);
stroke(102, 83, 63);
rect(135, 330, 40, 50);
//sweater
fill(102, 29, 53);
stroke(102, 29, 53);
rect(130, 365, 50, 20, 5);
rect(90, 380, 130, 40, 20);
//writing arm
strokeWeight(30);
line(210, 395, elbow, 470);
line(elbow, 470, wrist, 470);
stroke("black");//pen
strokeWeight(5);
line(wrist + 10, 410, wrist + 10, 470);
fill(102, 83, 63);//hand
strokeWeight(0);
ellipse(wrist + 10, 470, 35, 35);
if (mouseX > 210 & mouseX < 300){
wrist = mouseX;
elbow = .5 * (wrist - 215) + 215;
}
//chair
fill(40, 20, 15);
rect(80, 580, 25, 100);
rect(205, 580, 25, 100);
fill(43, 64, 69);
stroke(43, 64, 69);
rect(70, 400, 170, 130, 10);
fill(32, 48, 50);
rect(70, 525, 170, 60, 10);
//head
push();
translate(157, 315);
rotate(angle - QUARTER_PI);
stroke(102, 83, 63);//face
fill(102, 83, 63);
ellipse(0, 0, 70, 80);
strokeWeight(1); //bun
stroke(60, 38, 33);
fill(60, 38, 33);
ellipse(-7, -5, 80, 100);
fill(84, 53, 45);
ellipse(-27, -50, 50, 50);
fill(60, 38, 33);
strokeWeight(3);
ellipse(-37, -55, 20, 30);
noFill();
arc(-27, -54, 35, 40, PI + HALF_PI, PI);
fill(102, 83, 63);//ear
stroke(102, 83, 63);
ellipse(28, 5, 10, 22);
noFill();
stroke(60, 38, 33);
arc(37, -5, 10, 50, HALF_PI, PI); //hair tendril
fill(36, 24, 24); //bun
stroke(36, 24, 24);
ellipse(-32, -55, 8, 15);
stroke("white");//airpods
fill("white");
ellipse(30, 7, 3, 8);
line(28, 7, 30, 17);
//headbob
if (mouseX > 0 & mouseX < 480){
angle = mouseX * (1/280);
}
pop();
}I was interested in creating two different scenes, and having different parts of the drawing activated based on if the mouse was moving vertically or horizontally.
Taisei Manheim – 03 – Dynamic Drawing
//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-03
var angle = 0;
function setup() {
createCanvas(600, 480);
}
function draw() {
var speed = 3
noStroke();
background(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //sky color changes as mouse moves
//stars
fill("white");
if (mouseX > width / 2) {
fill("white"); //white if nighttime
}
if (mouseX <= width / 2) {
fill(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //color of sky if daytime
}
//stars rotate by their centers
push();
translate(30, 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(57, 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(21, 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(67, 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(90, 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(113, 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(113, 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(37, 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 30, 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 57, 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 21, 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 67, 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 +90, 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 113, 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 113, 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 37, 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 30, 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 57, 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 21, 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 67, 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 +90, 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 113, 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 113, 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 37, 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 30, 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 57, 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 21, 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 67, 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 +90, 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 113, 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 113, 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 37, 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 30, 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 57, 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 21, 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 67, 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 +90, 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 113, 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 113, 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 37, 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(30, 120 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(57, 120 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(21, 120 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(67, 120 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(90, 120 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(113, 120 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(113, 120 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(37, 120 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 30, 120 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 57, 120 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 21, 120 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 67, 120 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 +90, 120 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 113, 120 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 113, 120 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 37, 120 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 30, 120 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 57, 120 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 21, 120 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 67, 120 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 +90, 120 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 113, 120 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 113, 120 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 37, 120 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 30, 120 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 57, 120 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 21, 120 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 67, 120 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 +90, 120 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 113, 120 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 113, 120 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 37, 120 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 30, 120 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 57, 120 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 21, 120 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 67, 120 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 +90, 120 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 113, 120 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 113, 120 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 37, 120 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(30, 240 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(57, 240 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(21, 240 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(67, 240 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(90, 240 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(113, 240 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(113, 240 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(37, 240 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 30, 240 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 57, 240 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 21, 240 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 67, 240 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 +90, 240 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 113, 240 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 113, 240 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(120 + 37, 240 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 30, 240 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 57, 240 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 21, 240 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 67, 240 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 +90, 240 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 113, 240 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 113, 240 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(240 + 37, 240 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 30, 240 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 57, 240 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 21, 240 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 67, 240 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 +90, 240 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 113, 240 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 113, 240 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(360 + 37, 240 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 30, 240 + 40);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 57, 240 + 33);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 21, 240 + 60);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 67, 240 + 71);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 +90, 240 + 83);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 113, 240 + 111);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 113, 240 + 47);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
push();
translate(480 + 37, 240 + 104);
rotate(radians(angle));
rectMode(CENTER);
rect(0, 0 , 5, 5);
pop();
angle = angle + 5;
//sun
//sun moves twice the speed of mouse
fill('yellow');
ellipse(mouseX * 2, 50, 200 - mouseX / 3, 200 - mouseX / 3);
//moon
//moon moves twice the speed of mouse
ellipse((mouseX - 300) * 2, 50, 200 - mouseX / 3, 200 - mouseX / 3);
fill(135 - mouseX / 3, 206 - mouseX / 3, 235 - mouseX / 3); //fill for moon shadow
ellipse((mouseX - 325) * 2.19, 50, 200 - mouseX / 3, 200 - mouseX / 3);
//buildings
//buildings move in inverse direction of mouse
colorMode(RGB, 255);
fill(mouseX - 400); //buildings go from black to white as mouse moves
rect(1100 - mouseX / speed, 480 - 200, 50, 200);
rect(1050 - mouseX / speed, 480 - 50, 50, 50);
rect(950 - mouseX / speed, 480 - 150, 50, 150);
rect(900 - mouseX / speed, 480 - 250, 50, 250);
rect(850 - mouseX / speed, 480 - 100, 50, 100);
rect(800 - mouseX / speed, 480 - 200, 50, 200);
rect(750 - mouseX / speed, 480 - 50, 50, 50);
rect(700 - mouseX / speed, 480 - 150, 50, 150);
rect(650 - mouseX / speed, 480 - 300, 50, 300);
rect(600 - mouseX / speed, 480 - 200, 50, 200);
rect(550 - mouseX / speed, 480 - 100, 50, 100);
rect(500 - mouseX / speed, 480 - 250, 50, 250);
rect(450 - mouseX / speed, 480 - 150, 50, 150);
rect(400 - mouseX / speed, 480 - 200, 50, 200);
rect(350 - mouseX / speed, 480 - 300, 50, 300);
rect(300 - mouseX / speed, 480 - 175, 50, 175);
rect(250 - mouseX / speed, 480 - 225, 50, 225);
rect(200 - mouseX / speed, 480 - 100, 50, 100);
rect(150 - mouseX / speed, 480 - 200, 50, 200);
rect(100 - mouseX / speed, 480 - 300, 50, 300);
rect(50 - mouseX / speed, 480 - 175, 50, 175);
rect(0 - mouseX / speed, 480 - 50, 50, 50);
}For this project I was inspired by the New York City skyline from the Brooklyn side looking at Manhattan. I tried to show the change in time over the day through multiple changing elements, such as the color of the sky changing, the sun and then moon appearing and changing in size, and the rotating stars appearing at night. The most difficult part was getting the stars to rotate because when I tried putting them in the same push() function they would all rotate around one star so I had to separate them into different functions.
lee chu – project 03
// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 03
function setup() {
createCanvas(640, 480);
}
function draw() {
var topX = 0;
var topY = 0;
var widthE = width/12;
var heightE = height/7 - 30;
var topR = widthE/2;
var topH = heightE/2;
var top1X = topX;
var top2X = topX + widthE/2;
var top3X = topX;
var top4X = topX - widthE/2;
var top1Y = topY - heightE/2;
var top2Y = topY;
var top3Y = topY + heightE/2;
var top4Y = topY;
var spacingX = width/12;
var spacingY = height/7;
var color1 = 45 + (mouseX / width) * 30;
var color2 = 125 + (mouseY / height) * 50;
var color3 = 0;
background(color2);
// control
if (0 <= mouseX & mouseX <= width) {
top1X += sqrt(mouseX/width) * topR;
top1Y += pow(mouseX/width, 2) * topH;
top2X -= pow(mouseX/width, 2) * topR;
top2Y += sqrt(mouseX/width) * topH;
top3X -= sqrt(mouseX/width) * topR;
top3Y -= pow(mouseX/width, 2) * topH;
top4X += pow(mouseX/width, 2) * topR;
top4Y -= sqrt(mouseX/width) * topH;
}
for (var i = 0; i < 641; i += spacingX) {
//used this as reference
//ellipse(topX, topY, widthE, heightE);
strokeWeight(0.5);
stroke('red');
// cube side 1
fill('white');
beginShape();
vertex(top1X, top1Y);
vertex(top4X, top4Y);
vertex(top4X, top4Y + 30);
vertex(top1X, top1Y + 30);
endShape(CLOSE);
// cube side 2
fill(107, 37, 50);
beginShape();
vertex(top1X, top1Y);
vertex(top2X, top2Y);
vertex(top2X, top2Y + 30);
vertex(top1X, top1Y + 30);
endShape(CLOSE);
// cube side 3
fill(212, 75, 99);
beginShape();
vertex(top4X, top4Y);
vertex(top4X, top4Y + 30);
vertex(top3X, top3Y + 30);
vertex(top3X, top3Y);
endShape(CLOSE);
// cube side 4
fill(40, color1, 99);
beginShape();
vertex(top3X, top3Y);
vertex(top2X, top2Y);
vertex(top2X, top2Y + 30);
vertex(top3X, top3Y + 30);
endShape(CLOSE);
// cube top
fill(239, 240, 235);
beginShape();
vertex(top1X, top1Y);
vertex(top2X, top2Y);
vertex(top3X , top3Y);
vertex(top4X, top4Y);
endShape(CLOSE);
for (var k = 0; k < 481; k += spacingY) {
translate(0, spacingY);
// cube side 1
fill('white');
beginShape();
vertex(top1X, top1Y);
vertex(top4X, top4Y);
vertex(top4X, top4Y + 30);
vertex(top1X, top1Y + 30);
endShape(CLOSE);
// cube side 2
fill(107, 37, 50);
beginShape();
vertex(top1X, top1Y);
vertex(top2X, top2Y);
vertex(top2X, top2Y + 30);
vertex(top1X, top1Y + 30);
endShape(CLOSE);
// cube side 3
fill(212, 75, 99);
beginShape();
vertex(top4X, top4Y);
vertex(top4X, top4Y + 30);
vertex(top3X, top3Y + 30);
vertex(top3X, top3Y);
endShape(CLOSE);
// cube side 4
fill(40, color1, 99);
beginShape();
vertex(top3X, top3Y);
vertex(top2X, top2Y);
vertex(top2X, top2Y + 30);
vertex(top3X, top3Y + 30);
endShape(CLOSE);
// cube top
fill(239, 240, 235);
beginShape();
vertex(top1X, top1Y);
vertex(top2X, top2Y);
vertex(top3X , top3Y);
vertex(top4X, top4Y);
endShape(CLOSE);
}
translate(spacingX, 0);
translate(0, -k);
}
}
I started by creating a cube that could rotate 90 degrees as the mouse is dragged across the canvas By placing multiple cubes corner to corner, A sort of optical illusion happens.
Sarah Kang Looking-Outwards-03
Rottlace is a project fabricated by the Mediated Matter Group based at MIT. The series of masks is custom designed for the Icelandic singer-songwriter Bjork. From her newest album, Vulnicura, the Mediated Matter group drew inspiration from her messages of self-healing and portraying “the face without a skin”. The resulting product is a mask that encapsulates Bjork’s facial structure with a new layer of that represents a new identity.
The fiber tissues of the mask are computationally calculated with the curve directions of the point cloud data derived from Bjork’s facial scan. The bone-like locations are geometrically informed as another result from the data, but their material composition is graded from a spectrum of stiff to flexible, and from opaque to transparent-this information is derived as a function of geodesic distances given by the face scans.
What I admire about this work is how the project creates a collaboration between humanistic aspects and computational art. The world of generative, computational art opens many doors to encapsulating human elements and using digital technologies to convey it most accurately and elevate the information to new levels. The Mediated Matter Group combined both spectrums to fuse together a mask that encompasses this collaboration.
Fanjie Jin– Looking Outwards – 03
This char is designed by Zaha Hadid, who is a world renowned Pulitzer Prizer English architect. This chair was fabricated using 3D printer as the geometry of the chair is rather complicated and therefore it is not really possible to be fabricated by hand. When she was designing this chair, she has used the grasshopper modeling tool which is a language that is on Rhino platform. The chair is designed completely by script and therefore if there is some parameter for example the density of the mesh on the back of the chair changed, she can choose to whether apply that change to the other places for the chair. This is a great example of how coding and design are integrated and formed a new sense of ideality.
Ammar Hassonjee – Looking Outwards 03
Computer Aided Knitting by MIT CSAIL
The CSAIL lab at MIT recently completed a new project that develops systems for streamlining the process of automating knit garments. One of the systems developed is called “InverseKnit” in which photographs of knitted patterns are analyzed using a program to create instructions for robots to fabricate clothing.
According to the CSAIL website, researchers first started by creating a dataset of knitting instructions/patterns and then programmed a network to interpret these images into rules that can be used to fabricate clothing items such as a sock.
What I admire about this project is its goal to revolutionize an age old process of knitting and apply algorithims in order to streamline this process we’ve been using for thouasands of years to make clothes. The real world application of this project is incredible as it can potentially reduce the manufacturing cost of clothes by so much. I think the algorithms used are image based processors that use the knitting image patterns as inputs and then analyze the geometry in the patterns. The original intent of the project was acheived as the creators sought to craft a simple and straightforward knitting machine that fabricates with accuracy, and they accomplished that.
Joanne Chui – Looking Outwards 03
https://www.archdaily.com/804456/autodesks-generative-design-pavilion-plays-with-properties-and-fabrication-processes-in-stone-and-fabric
Autodesk’s Generative Design Pavilion was designed by architect Sean Ahlquist and research engineer Andrew Payne to explore materiality using stone and fabric. It is interesting in how it wants to compare the different material properties of stone and fabric, juxtaposing the strength of the limestone to the flexibility of the fabric, but also merge them to create similar forms. Not only was the form generatively designed, but the fabric was customized as well. Although the fabric and the stone created similar forms, the algorithms used to create them would have been extremely different. The algorithm for fabric would have worked to exploit how the fabric stretched, while the one for the stone would have worked to calculate its breaking points and subtraction of form. The designers’ artistic sensibilities arise in the final structure not only through the form, in which the completely different materials manifest the same form, but also in the joinery that connects them. Where the fabric and stone meets, they elegantly are able to describe both material properties with having the strength of the stone stretch the canopy of fabric above.
Kimberlyn Cho- Looking Outwards- 03
Iris van Herpen collaborated with various designers and architects to create 3D printed magnetic dresses and accessories called “Magnetic Motion”. Her inspiration for this SPRING/SUMMER 2015 collection came from a Swiss scientific research facility called CERN, which researches and manufactures magnetic fields in incredible scales. Herpen experimented with different metal-infused materials with magnets to avoid repetition in her designs, as well as techniques such as injection moulding and laser cutting to emphasize details and complexity. Her diversity in use of materials and minimal color palette give each piece a different focus while maintaining a cohesive story.
I was intrigued by the practical use of digital fabrication in every day life. Generative art, specifically digital fabrication, is often used in the context of installations due to its intricate process and limit in medium and form. However, Herpen uses the process in a more applicable approach for the general public. She shows the promising future of digital fabrication by using it to create something directly usable by people. I found this approach very practical, innovative, and suggestive of a future most definitely more reliant on digital fabrication than now.
Sean Meng – Looking Outwards 03
Link: https://www.oylerwu.com/projects
Oyler Wu Collaborative is a versatile design collaborative found by architects Dwayne Oyler and Jenny Wu. The firm focuse on architecture design and expand their unique design language and workflow to a broader design field. In their work, they frequently engage computational fabrication technique such as CNC routing and 3D printing to present their study model and other design collections. In their “Active Inlay” project, a set of art piece that discusses spatial condition such as line, surface and volume was generated and designed with computational modeling tool like grasshopper and Rhinoceros. And they are fabricated in CNC routed wood and 3D printed plaster. The final presentation of the work truly shows the expandable potential of architecture design and digital fabrication.