SectionD – Page 27 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

CJ Walsh – Project 3 – Dynamic Drawing

var radLarge = 37.797;
var radSmall = 20.643;

function setup() {
	createCanvas(640, 480);
	noStroke();
	colorMode(HSB, 480);
}

function draw() {
	// color changes as mouse moves in vertical directions
	background(mouseY);
	//controls the reverse of my mouse movement
	var reverseX = width - mouseX

// background circles to create changing backdrop
	fill('#71BCFF');
	ellipse(320, 240, mouseX, mouseY);
	ellipse(480, 240, mouseX, mouseY);
	ellipse(150, 240, mouseX, mouseY);

// left larger circles
	fill('#E83F63');
	ellipse(mouseX, 33, radLarge, radLarge);
	ellipse(mouseX, 108, radLarge, radLarge);
	ellipse(mouseX, 184, radLarge, radLarge);
	ellipse(mouseX, 260, radLarge, radLarge);
	ellipse(mouseX, 335, radLarge, radLarge);
	ellipse(mouseX, 410, radLarge, radLarge);

// left small circles 
	fill('#6171E5');
	ellipse(mouseX, 449, radSmall, radSmall);
	ellipse(mouseX, 373, radSmall, radSmall);
	ellipse(mouseX, 298, radSmall, radSmall);
	ellipse(mouseX, 222, radSmall, radSmall);
	ellipse(mouseX, 146, radSmall, radSmall);
	ellipse(mouseX, 70, radSmall, radSmall);

// right large circles
	fill('#E83F63');
	ellipse(reverseX, 449, radLarge, radLarge);
	ellipse(reverseX, 373, radLarge, radLarge);
	ellipse(reverseX, 298, radLarge, radLarge);
	ellipse(reverseX, 222, radLarge, radLarge);
	ellipse(reverseX, 146, radLarge, radLarge);
	ellipse(reverseX, 70, radLarge, radLarge);

// right smaller circles 
	fill('#6171E5');
	ellipse(reverseX, 33, radSmall, radSmall);
	ellipse(reverseX, 108, radSmall, radSmall);
	ellipse(reverseX, 184, radSmall, radSmall);
	ellipse(reverseX, 260, radSmall, radSmall);
	ellipse(reverseX, 335, radSmall, radSmall);
	ellipse(reverseX, 410, radSmall, radSmall);

// far left larger 
	fill('#E83F63');
	ellipse(mouseX - 100, 33, radLarge, radLarge);
	ellipse(mouseX - 100, 108, radLarge, radLarge);
	ellipse(mouseX - 100, 184, radLarge, radLarge);
	ellipse(mouseX - 100, 260, radLarge, radLarge);
	ellipse(mouseX - 100, 335, radLarge, radLarge);
	ellipse(mouseX - 100, 410, radLarge, radLarge);

	ellipse(mouseX - 300, 33, radLarge, radLarge);
	ellipse(mouseX - 300, 108, radLarge, radLarge);
	ellipse(mouseX - 300, 184, radLarge, radLarge);
	ellipse(mouseX - 300, 260, radLarge, radLarge);
	ellipse(mouseX - 300, 335, radLarge, radLarge);
	ellipse(mouseX - 300, 410, radLarge, radLarge);

// far left smaller
	fill('#6171E5');
	ellipse(mouseX - 200, 449, radSmall, radSmall);
	ellipse(mouseX - 200, 373, radSmall, radSmall);
	ellipse(mouseX - 200, 298, radSmall, radSmall);
	ellipse(mouseX - 200, 222, radSmall, radSmall);
	ellipse(mouseX - 200, 146, radSmall, radSmall);
	ellipse(mouseX - 200, 70, radSmall, radSmall);

	ellipse(mouseX - 400, 449, radSmall, radSmall);
	ellipse(mouseX - 400, 373, radSmall, radSmall);
	ellipse(mouseX - 400, 298, radSmall, radSmall);
	ellipse(mouseX - 400, 222, radSmall, radSmall);
	ellipse(mouseX - 400, 146, radSmall, radSmall);
	ellipse(mouseX - 400, 70, radSmall, radSmall);

// far right larger 
	fill('#E83F63');
	ellipse(reverseX + 100, 449, radLarge, radLarge);
	ellipse(reverseX + 100, 373, radLarge, radLarge);
	ellipse(reverseX + 100, 298, radLarge, radLarge);
	ellipse(reverseX + 100, 222, radLarge, radLarge);
	ellipse(reverseX + 100, 146, radLarge, radLarge);
	ellipse(reverseX + 100, 70, radLarge, radLarge);

	ellipse(reverseX + 300, 449, radLarge, radLarge);
	ellipse(reverseX + 300, 373, radLarge, radLarge);
	ellipse(reverseX + 300, 298, radLarge, radLarge);
	ellipse(reverseX + 300, 222, radLarge, radLarge);
	ellipse(reverseX + 300, 146, radLarge, radLarge);
	ellipse(reverseX + 300, 70, radLarge, radLarge);

// far right smaller
	fill('#6171E5');
	ellipse(reverseX + 200, 33, radSmall, radSmall);
	ellipse(reverseX + 200, 108, radSmall, radSmall);
	ellipse(reverseX + 200, 184, radSmall, radSmall);
	ellipse(reverseX + 200, 260, radSmall, radSmall);
	ellipse(reverseX + 200, 335, radSmall, radSmall);
	ellipse(reverseX + 200, 410, radSmall, radSmall);

	ellipse(reverseX + 400, 33, radSmall, radSmall);
	ellipse(reverseX + 400, 108, radSmall, radSmall);
	ellipse(reverseX + 400, 184, radSmall, radSmall);
	ellipse(reverseX + 400, 260, radSmall, radSmall);
	ellipse(reverseX + 400, 335, radSmall, radSmall);
	ellipse(reverseX + 400, 410, radSmall, radSmall);

// more right large
	fill('#E83F63');
	ellipse(reverseX - 100, 449, radLarge, radLarge);
	ellipse(reverseX - 100, 373, radLarge, radLarge);
	ellipse(reverseX - 100, 298, radLarge, radLarge);
	ellipse(reverseX - 100, 222, radLarge, radLarge);
	ellipse(reverseX - 100, 146, radLarge, radLarge);
	ellipse(reverseX - 100, 70, radLarge, radLarge);

	ellipse(reverseX - 300, 449, radLarge, radLarge);
	ellipse(reverseX - 300, 373, radLarge, radLarge);
	ellipse(reverseX - 300, 298, radLarge, radLarge);
	ellipse(reverseX - 300, 222, radLarge, radLarge);
	ellipse(reverseX - 300, 146, radLarge, radLarge);
	ellipse(reverseX - 300, 70, radLarge, radLarge);

// more right small 
	fill('#6171E5');
	ellipse(reverseX - 200, 33, radSmall, radSmall);
	ellipse(reverseX - 200, 108, radSmall, radSmall);
	ellipse(reverseX - 200, 184, radSmall, radSmall);
	ellipse(reverseX - 200, 260, radSmall, radSmall);
	ellipse(reverseX - 200, 335, radSmall, radSmall);
	ellipse(reverseX - 200, 410, radSmall, radSmall);

	ellipse(reverseX - 400, 33, radSmall, radSmall);
	ellipse(reverseX - 400, 108, radSmall, radSmall);
	ellipse(reverseX - 400, 184, radSmall, radSmall);
	ellipse(reverseX - 400, 260, radSmall, radSmall);
	ellipse(reverseX - 400, 335, radSmall, radSmall);
	ellipse(reverseX - 400, 410, radSmall, radSmall);

// more left larger 
	fill('#E83F63');
	ellipse(mouseX + 100, 33, radLarge, radLarge);
	ellipse(mouseX + 100, 108, radLarge, radLarge);
	ellipse(mouseX + 100, 184, radLarge, radLarge);
	ellipse(mouseX + 100, 260, radLarge, radLarge);
	ellipse(mouseX + 100, 335, radLarge, radLarge);
	ellipse(mouseX + 100, 410, radLarge, radLarge);

	ellipse(mouseX + 300, 33, radLarge, radLarge);
	ellipse(mouseX + 300, 108, radLarge, radLarge);
	ellipse(mouseX + 300, 184, radLarge, radLarge);
	ellipse(mouseX + 300, 260, radLarge, radLarge);
	ellipse(mouseX + 300, 335, radLarge, radLarge);
	ellipse(mouseX + 300, 410, radLarge, radLarge);

// more left smaller
	fill('#6171E5'); 
	ellipse(mouseX + 200, 449, radSmall, radSmall);
	ellipse(mouseX + 200, 373, radSmall, radSmall);
	ellipse(mouseX + 200, 298, radSmall, radSmall);
	ellipse(mouseX + 200, 222, radSmall, radSmall);
	ellipse(mouseX + 200, 146, radSmall, radSmall);
	ellipse(mouseX + 200, 70, radSmall, radSmall);

	ellipse(mouseX + 400, 449, radSmall, radSmall);
	ellipse(mouseX + 400, 373, radSmall, radSmall);
	ellipse(mouseX + 400, 298, radSmall, radSmall);
	ellipse(mouseX + 400, 222, radSmall, radSmall);
	ellipse(mouseX + 400, 146, radSmall, radSmall);
	ellipse(mouseX + 400, 70, radSmall, radSmall);
}

For my dynamic drawing I wanted to play with the creation of patterns. As you move the mouse in the x plane you can create different textures by positioning the circles. Additionally, you can use both x and y mouse movements to change the background circles, which I though added a nice element to help create more combinations of the image. This assignment was a little difficult to figure out at first, and I definitely want to keep playing with my code on this image to see what else I could do.

Jacky Tian’s Project 03

sketch

//Jacky Tian
//Section D
//yinjiet@andrew.cmu.edu
//Assignment-03-A

var unit = 50
var angle = 0
function setup() {
    createCanvas(640, 480);
    
}


function draw() {
    background(mouseX * 0.5, 70, 120);

    var len = 480 - mouseX
    var sta = 640 - mouseY 
    
    strokeWeight(4)
    stroke(170, mouseX * 0.1, 50);
    line(unit, sta * 0.1, unit, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.2, 50);
    line(unit * 2, sta * 0.2, unit * 2, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.3, 50);
    line(unit * 3, sta * 0.3, unit * 3, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.4, 50);
    line(unit * 4, sta * 0.4, unit * 4, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.5, 50);
    line(unit * 5, sta * 0.5, unit * 5, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.6, 50);
    line(unit * 6, sta * 0.6, unit * 6, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.7, 50);
    line(unit * 7, sta * 0.7, unit * 7, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.8, 50);
    line(unit * 8, sta * 0.8, unit * 8, len);

    strokeWeight(4)
    stroke(170, mouseX * 0.9, 50);
    line(unit * 9, sta * 0.9, unit * 9, len);

    strokeWeight(4)
    stroke(170, mouseX, 50);
    line(unit * 10, sta, unit * 10, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.1, 50);
    line(unit * 11, sta * 1.1, unit * 11, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.2, 50);
    line(unit * 12, sta * 1.2, unit * 12, len);

    strokeWeight(4)
    stroke(170, mouseX * 1.3, 50);
    line(unit * 13, sta * 1.3, unit * 13, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.1, mouseY* 0.1);
    line(unit + 25, sta * 0.1, unit, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.2, mouseY* 0.15);
    line(unit * 2 + 25, sta * 0.2, unit * 2, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.3, mouseY* 0.2);
    line(unit * 3 + 25, sta * 0.3, unit * 3, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.4, mouseY* 0.25);
    line(unit * 4 + 25, sta * 0.4, unit * 4, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.5, mouseY* 0.3);
    line(unit * 5 + 25, sta * 0.5, unit * 5, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.6, mouseY* 0.35);
    line(unit * 6 + 25, sta * 0.6, unit * 6, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.7, mouseY* 0.4);
    line(unit * 7 + 25, sta * 0.7, unit * 7, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.8, mouseY* 0.45);
    line(unit * 8 + 25, sta * 0.8, unit * 8, len);

    strokeWeight(2)
    stroke(70, mouseX * 0.9, mouseY* 0.5);
    line(unit * 9 + 25, sta * 0.9, unit * 9, len);

    strokeWeight(2)
    stroke(70, mouseX, mouseY* 0.55);
    line(unit * 10 + 25, sta, unit * 10, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.1, mouseY* 0.6);
    line(unit * 11 + 25, sta * 1.1, unit * 11, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.2, mouseY* 0.65);
    line(unit * 12 + 25, sta * 1.2, unit * 12, len);

    strokeWeight(2)
    stroke(70, mouseX * 1.3, mouseY* 0.7);
    line(unit * 13 + 25, sta * 1.3, unit * 13, len);

    fill(120, 80, mouseX * 0.5); // control rect color explicitly
    stroke(0);
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    rectMode(CENTER); // center rect around 0,0
    rect(0, 0, 50, 50);
    pop();
    angle = angle + mouseX * 0.05;


}

In this project, I explored the movement of a series of paired lines and as the mouse move across the screen, these vertex of the two paired lines move from the top of the screen to the bottom of the screen. The color of the components change from cold to warm as the mouth move from left to right as well. Moreover, there is a spinning square at the position of the mouse and the speed of the spinning varies as the mouse moves.

Cathy Dong-Looking Outwards-03

BUGA Fibre Pavilion 2019 | University of Stuttgart ICD | Project Photo

Concept and Fabrication Process Documentation

The BUGA Fibre Pavilion is designed by the Institute for Computational Design and Construction (ICD) and the Institute for Building Structures and Structural Design (ITKE) at University of Stuttgart. The pavilion design uses the most cutting-edge technologies. They use fibre composites and robotic technologies to build the load-bearing structure. Therefore, the project is extraordinary lightweight.

The pavilion mimics natural and biological structure. It is eventually made with 150,000 meters of spatially arranged glass- and carbon-fibers and the structure spans freely for more than 75 feet. With computational design and robots, fibrous filaments are freely placed between rotating winding scaffolds. Use of pioneered technologies broaden the possibility for form making.

Jacky Tian’s Looking Outwards – 03

Computational Design + Architecture

— The Moving Curtain

BUND FINANCIAL CENTER BY FOSTER + PARTNERS

I grew up in Shanghai, China, a city with plenty of modern architecture and technology. Computational design never lacks in a city like Shanghai. A new mixed-use complex called the Bund Finance Center has just finished its last construction phase. Designed by Norman Foster’s Architecture Firm and collabrated with Thomas Heatherwick’s design studio, The Bund Finance Center becomes a new landmark of The Bund in Shanghai.

Besides the functional spaces for banking services, the building also includes a traditional chinese theatre and combined with the most advanced curtain wall technology controlled by computer calculated programs. The facade of this three-story-height building is composed of curtain like wall of bronze tubes. These bamboo shaped bronze tubes are constructed in three layers, creating semi-transparent screen for the building. The architect in charge described the facade as a “moving veil”, which can adapt and transform based on the current use of the space.

As a fourth year student in architecture, I was inspired by the connection between architecture and computational fabricated technology. I personally utilized digital fabrication tools like laser cutting machine a lot for my projects. With the help from these tools, a lot of complicated and organic form can be achieved in a much easier manner.

Cathy Dong-Project-03-Dynamic Drawing

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 3-Dynamic Drawing
*/


var skyR = 139;
var skyG = 212;
var skyB = 229;
var moonCut = 0;
var sunDia = 100;
var starAngle = 0;
var starR = 249;
var starG = 215;
var starB = 81;
var starW = 10;
var starH = 12;

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

function draw() {
	background(skyR, skyG, skyB);
	var winR = 254;
	var winG = 221;
	var winB = 2;


	//stars
	noStroke();
	fill(starR,starG,starB);
	//star 1
	push();
	translate(640 - mouseX, 100);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 2
	push();
	translate(800 - mouseX, 150);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 3
	push();
	translate(760 - mouseX, 120);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 4
	push();
	translate(900 - mouseX, 20);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 5
	push();
	translate(500 -mouseX, 50);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 6
	push();
	translate(760 - mouseX, 80);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 7
	push();
	translate(1000 - mouseX, 60);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 8
	push();
	translate(1500 - mouseX, 50);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 9
	push();
	translate(1200 - mouseX, 30);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 10
	push();
	translate(320 - mouseX, 100);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();

	//star 11
	push();
	translate(200 - mouseX, 130);
	rotate(radians(starAngle));
	rectMode(CENTER);
	rect(0, 0, starW, starH);
	pop();


	//trinkle stars
	starAngle += mouseX;


	//night
	if (mouseX > width / 2) {
		//star size
		starW = 10;
		starH = 12;
		//show star
		starR = 249;
		starG = 215;
		starB = 81;
		//sky color
		skyR = 61;
		skyG = 80;
		skyB = 92;
		//moon
		noStroke();
		fill(255, 216, 0);
		ellipse(mouseX, mouseX - 200, 200,200);
		//moon change
		noStroke();
		fill(skyR, skyG, skyB);
		moonCut = map(mouseX, 240, 640, 0, 400);
		ellipse(mouseX - 75, mouseX - 200, moonCut, moonCut);
	}

	//morning
	else if (mouseX <= width / 2) {
		//hide star
		starR = 255;
		starG = 240;
		starB = 154;
		//star size
		starW = 42 - mouseX / 10;
		starH = 42 - mouseX / 10 + 2;
		//sky color
		skyR = 156;
		skyG = 215;
		skyB = 255;
		//window color
		winR = 255;
		winG = 240;
		winB = 154;
		//sun
		noStroke();
		fill(255, 240, 154);
		sunDia = map(mouseX, 0, 320, 30, 200);
		ellipse(mouseX, height - mouseX - 40, sunDia, sunDia);

	}



	//haunted house black
	noStroke();
	fill(0);
	beginShape();
	vertex(270, 416);
	vertex(253, 323);
	vertex(242, 323);
	vertex(269, 270);
	vertex(245, 257);
	vertex(235, 206);
	vertex(251, 206);
	vertex(254, 253);
	vertex(273, 264);
	vertex(284, 236);
	vertex(325, 273);
	vertex(324, 160);
	vertex(315, 159);
	vertex(333, 132);
	vertex(350, 93);
	vertex(354, 138);
	vertex(367, 166);
	vertex(358, 164);
	vertex(370, 238);
	vertex(375, 234); 
	vertex(384, 278); 
	vertex(353, 351);
	vertex(324, 415);
	endShape(CLOSE);



	//haunted house color left chimney
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(251, 206);
	vertex(254, 253);
	vertex(273, 264);
	vertex(275, 260);
	vertex(262, 250);
	vertex(266, 218);
	endShape(CLOSE);

	//haunted house color left roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(335, 310);
	vertex(398, 343);
	vertex(389, 344);
	vertex(320, 314);
	endShape(CLOSE);

	//haunted house color left wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(320, 314);
	vertex(389, 344);
	vertex(377, 420);
	vertex(325, 415);
	endShape(CLOSE);

	//haunted house upper color roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(350, 93);
	vertex(354, 138);
	vertex(367, 166);
	vertex(389, 176);
	vertex(372, 129);
	endShape(CLOSE);

	//haunted house color upper roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(367, 166);
	vertex(389, 176);
	vertex(379, 177);
	vertex (357, 164);
	endShape(CLOSE);

	//haunted house color upper roof wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(370, 238);
	vertex(353, 252);
	vertex(358, 164);
	vertex(378, 176);
	endShape(CLOSE);

	//haunted house color right roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(375, 234);
	vertex(384, 278);
	vertex(412, 306);
	vertex(401, 273);
	endShape(CLOSE);

	//haunted house color right roof side
	noStroke();
	fill(20, 53, 60);
	beginShape();
	vertex(384, 278);
	vertex(412, 306);
	vertex(407, 308);
	vertex(378, 278);
	endShape(CLOSE);

	//haunted house color right wall
	noStroke();
	fill(39, 83, 94);
	beginShape();
	vertex(407, 308);
	vertex(378, 278);
	vertex(366, 312);
	vertex(390, 337);
	endShape(CLOSE);


	//haunted house color left roof
	noStroke();
	fill(10, 24, 25);
	beginShape();
	vertex(284, 236);
	vertex(325, 273);
	vertex(398, 343);
	vertex(335, 310);
	endShape(CLOSE);

	//front ground
	noStroke();
	fill(0);
	beginShape();
	curveVertex(0, 640);
	curveVertex(0, 360);
	curveVertex(0, 360);
	curveVertex(68, 400);
	curveVertex(137, 412);
	curveVertex(183, 423);
	curveVertex(225, 413);
	curveVertex(295, 410);
	curveVertex(254, 413);
	curveVertex(320, 410);
	curveVertex(409, 423);
	curveVertex(477, 403);
	curveVertex(550, 400);
	curveVertex(640, 425);
	curveVertex(640, 480);
	endShape(CLOSE);

	//windows lights
	noStroke();
	fill(winR, winG, winB);
	//left long
	beginShape();
	vertex(279, 329);
	vertex(283, 364);
	vertex(298, 362);
	vertex(293, 331);
	vertex(288, 324);
	vertex(283, 324);
	endShape(CLOSE);
	//left ellipse
	ellipse(289, 286, 18, 22);
	//upper short
	beginShape();
	vertex(353, 272);
	vertex(368, 277);
	vertex(362, 293);
	vertex(351, 286);
	endShape(CLOSE);
	//upper long
	beginShape();
	vertex(331, 205);
	vertex(347, 207);
	vertex(347, 172);
	curveVertex(340, 166);
	curveVertex(333, 171);
	endShape(CLOSE);


	//window frame
	noFill();
	stroke(0);
	strokeWeight(1);
	//upper long
	line(333, 177, 348, 180);
	line(331, 186, 348, 188);
	line(332, 194, 349, 197);
	line(339, 166, 339, 206);
	//left long
	line(279, 335, 294, 332);
	line(281, 344, 296, 342);
	line(280, 354, 296, 351);
	line(284, 322, 292, 364);


	//window no lights
	noStroke();
	fill(0);
	//window 1
	beginShape(); 
	vertex(330, 323);
	vertex(330, 340);
	vertex(347, 348);
	vertex(348, 334);
	endShape(CLOSE);
	//window 2
	beginShape(); 
	vertex(329, 362);
	vertex(331, 376);
	vertex(348, 382);
	vertex(348, 368);
	endShape(CLOSE);
	//window 3
	beginShape();
	vertex(383, 293);
	vertex(378, 305);
	vertex(391, 317);
	vertex(398, 308);
	endShape(CLOSE);
	//window 4
	beginShape();
	vertex(364, 172);
	vertex(362, 205);
	vertex(370, 207);
	vertex(373, 182);
	endShape(CLOSE);
	//door outline
	beginShape();
	vertex(360, 370);
	vertex(357, 450);
	vertex(368, 450);
	vertex(376, 377);
	endShape(CLOSE);

	//door window light
	noStroke();
	fill(winR, winG, winB);
	beginShape();
	vertex(363, 375);
	vertex(363, 388);
	vertex(371, 391);
	vertex(371, 380);
	endShape(CLOSE);

	//upper chimney
	noStroke();
	fill(0);
	beginShape();
	vertex(356, 123);
	vertex(365, 114);
	vertex(368, 100);
	vertex(365, 98);
	vertex(376, 77);
	vertex(380, 102);
	vertex(376, 102);
	vertex(373, 119);
	vertex(363, 127);
	endShape(CLOSE);
}

In this Dynamic Drawing project, I made a haunted house. I used color shades to add a 3D effect. By moving mouse left and right, the scene changes from night to morning. The moon and sun changes shape, location, and dimension, whereas the stars at night changes rotation speed and direction. The haunted house itself changes light color.

Lauren Park- Project-03- Dynamic Drawing

sketch

function setup() {
  createCanvas(640, 480);
  noStroke();
   
}
 
function draw() {
  background(random(mouseX, mouseY));
  fill(random(355,300,150));
  
  var colorR = (mouseX, mouseY);
  var colorB =  (mouseX, mouseY);
  var colorG = (random, mouseY);
  
  //background color changes as mouse moves right
   if (mouseX < 0){
    background(0);
        }
   if (mouseX > 0){
    background(0);
        }
   if (mouseX > 100){
    background(colorG, 270, 37);
        }
   if (mouseX > 300){
    background(250, 150, colorB);
        }
     
    var moveX = random(0, mouseX/5);
    var moveY = random(0, mouseY/5);
    var shakeX = (0, mouseX/7);
  
   //vibrates from 0 to 530 and above when mouse moves right
   if (mouseX > 0){
      var moveX=0;
        }
   if (mouseX > 0){
      var moveY=0
        }
   if (mouseX > 0){
    var shakeX = 0
        }
   if (mouseX > 15){
       var shakeX = (0, mouseX/100);
        }
   if (mouseX > 70){
       var moveX = random(0, mouseX/30);
        }
   if (mouseX > 250){
       var moveX = random(0, mouseX/15);
        }
   if (mouseX > 400){
       var moveX = random(0, mouseX/5);
        }
   if (mouseX > 530){
       var moveX = random(0, mouseX/2);
        }
  
  
   //increases and shakes bubbles when mouse move right
   fill(211, 242, 255);
   if (mouseX > 300)   
   ellipse(10+ moveX, 150 + moveY, 110 + moveX, 110 +          moveY); //light blue
   fill(281, colorG, 255);
   if (mouseX > 200)
   ellipse (80 + moveX, 235 + moveY, 130 + moveX, 130 + moveY);
   fill(129, 255, 104);
   if (mouseX > 350)
   ellipse(270 + moveX, 320 + moveY, 90 + moveX, 90 + moveY);         //green
   fill(57, 189, 232);
   if (mouseX > 300)
   ellipse(380 + moveX, 250 + moveY, 65 + moveX, 65 +   moveY); //blue
   fill(57, 232, 179);
   if (mouseX > 350)
   ellipse( 420 + moveX, 70 + moveY, 150 + moveX, 150 + moveY); //dark green
   fill(255, 142, 210);
   if (mouseX > 450)
   ellipse( 475 + moveX, 320 + moveY, 100 + moveX, 100 + moveY); //pink
  
  
   fill(81, 238, 255);
   if (mouseX > 450)
   ellipse(65 + moveX, 75 + moveY, 150 + moveX, 150 + moveY);
   fill(255, 251, 98);
   if (mouseX > 550)
   ellipse( 530 + moveX, 180 + moveY, 130 + moveX, 130 + moveY);
  
    
   //duck facial features shake when mouse moves right
    stroke(0);
    strokeWeight(2);   
    fill(255);
    // hair
    ellipse(305 + shakeX, 355 + moveY, 12 + moveX, 25 + moveY) 
    fill(255);
    ellipse(295 + shakeX, 355 + moveY, 12 + moveX, 30 + moveY)
    //face
    fill(255);
    ellipse(300 + shakeX, 460 + moveY, 270 + moveY, 190 + moveX);
    // beak
    fill(255, 184, 56);
    ellipse(297 + shakeX, 460 + moveY, 90 + moveX, 30 + moveY);
    // eyes
    fill(0);
    ellipse(350 + shakeX, 435 + moveY, 20 + moveX, 18 + moveY);
    fill(0);
    ellipse(240 + shakeX, 435 + moveY, 20 + moveX, 18 + moveY);
    //pupils
    fill(255);
    ellipse(350 + shakeX, 434 + moveY, 15 + moveX, 13 + moveY) 
    ellipse(240 + shakeX, 434 + moveY, 15 + moveX, 13 + moveY); 
    //mouth line
    stroke(0);
    strokeWeight(2);
    line(320 + shakeX, 460 + moveY, 253 + moveX, 460 + moveY);
   
  
    
    //number of text increases and shakes when mouse moves     right
    fill('red');
    stroke(237,206,229);
    strokeWeight(2);
  
    if (mouseX > 50) {
    textFont('Helvetica');
    textSize(47);
    text('HUNGRY?', 100 + moveX, 150 + moveY);
    if (mouseX > 100) 
    text('HUNGRY?', 360 + moveX, 100 + moveY); //dark green
    if (mouseX > 200) 
    text('HUNGRY?', 190 + moveX, 325 + moveY);
    if (mouseX > 300) 
    text('HUNGRY?', 400 + moveX, 340 + moveY); 
    if (mouseX > 300) 
    text('HUNGRY?', 20 + moveX, 250 + moveY); //light pink
    if (mouseX > 400) 
    text('HUNGRY?', 310 + moveX, 250 + moveY);
    if (mouseX > 500) 
  
    text('HUNGRY?', 10 + moveX, 80 + moveY);
    
  }
  
  


   
      
}

This project was very interesting in ways where I was able to create more of a story by having objects change and be put into motion by moving the mouse. I wanted to express a feeling of hunger through the image. It was a difficult and challenging process to have the image move back and forth with the mouse, but also to have them vibrate to express hunger and more of an emotion.

Kristine Kim – Looking Outward-03

Glass II at La Triennale di Milano. Top view of the three columns in high brightness mode. Designed and constructed by the Mediated Matter group, MIT Media Lab.

Glass II, a sequel of project Glass I by Andy Ryan is a high- fidelity, monumental, and additive manufacturing technology for 3D printing “optically transparent glass.” To create the computational aspect of the installation, the team used constraints of the manufacturing platform and structural system and generated each of the glass column’s form. This demonstrates the ability to 3D print a wide range of shapes and sizes determined by the desired outcome of the creator. I was drawn into this project because of the dynamic and contrasting light source and its simple yet intense atmosphere. Each of the glass column is fitted with a dynamic internal lighting system called the “una stellina” and it is programmed to travel up and down the column, projecting a large “caustic footprint with kaleidoscope-like patterns.” This piece is very intriguing to me because I am currently enrolled in a conceptual art studio class called Space and Time and this installation challenges the perceived limits and boundaries between time and space.

Kristine Kim- Project 03- Dynamic-Drawing

sketch

var radx = 200;
var rady = 200;
var anglet = 0;
var angless = 0;
var angles = 0;
var anglem = 0;
var angleb = 0;
var anglebb = 0;


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

function draw() {
//background color changing depending on the placment of the mouse
    background(mouseX,mouseY, 200);
// creating the 4 ellipses 
    fill(mouseX, 245, 127);
    ellipse(width/4, height/2,radx,rady);
    fill(mouseX, 245, 127);
    ellipse(width/2, height/4,rady,radx);
    fill(mouseX, 245, 127);
    ellipse(width/1.33, height/2,radx,rady);
    fill(mouseX, 245, 127);
    ellipse(width/2, height/1.33,rady,radx);
//This code transforms the 4 ellipses
    if (mouseX > width/2){
        radx = 50 + (width/2 - mouseX);
    }else {
        radx = 50 + (width/2 - mouseX);
    }
/*6 squares, all different sizes rotating either clockwise or
counter clockwise based on the left top corner of the squares*/

//rotating the smallest square, color stays the same
    fill (23, 0, 173);
    push();
    translate(mouseX, mouseY);
    rotate(radians(anglet));
    rect(0,0,25,25);
    pop();
    anglet = anglet + 12

//rotating smaller square , color stays the same
    fill(255, 55, 0);
    push();
    translate(mouseX,mouseY);
    rotate(radians(angless));
    rect(0,0,60,100);
    pop();
    angless = angless - 12;

//rotating small square, color changes with the mouse
    fill (150, mouseX, mouseY);
    push();
    translate(mouseX,mouseY);
    rotate(radians(angles));
    rect(0,0,90,150);
    pop();
    angles = angles + 10;

//rotating medium square, color changes with the mouse
    fill (200, mouseY, mouseX);
    push();
    translate(mouseX, mouseY);
    rotate(radians(anglem));
    rect(0,0,140,140);
    pop();
    anglem = anglem - 10; 


//rotating bigger square, color changes with the mouse
    fill(mouseY, mouseX, 250);
    push();
    translate(mouseX,mouseY);
    rotate(radians(angleb));
    rect(0,0,170,170);
    pop();
    angleb = angleb + 8;

//roating biggeest square, color changes with the mouse
    fill(mouseX,140, mouseY);
    push();
    translate(mouseX,mouseY);
    rotate(radians(anglebb));
    rect(0,0,200,200);
    pop();
    anglebb = anglebb -8;
}

This project was a little bit more challenging for me but definitely made me more interested in this class and coding for art in general. I started by creating an ellipse and making it change the height and the width(shape/size) with the mouse movement. Then added more element and abstraction with the rotating squares and rectangles.

Monica Chang – Looking Outwards- 03

Neri Oxman and MIT develop a collection of programmable bio-composites for Digital Fabrication called Aguahoja. They developed Aguahoja in response to the cumbersome, plastic consumption occurring globally which has been intoxicating our planet. With this, they hope to create a solution that corrupts this toxic cycle of plastic by uniting the “made” and nature to produce an organic environment that can be constructed and deconstructed without harming the earth’s soil.

This collection is digitally designed and robotically manufactured out of the most available materials on earth- materials within trees, insect exoskeletons , apples, and bones- in hopes of avoiding depleting more of Earth’s materials.

“…this work points toward a future where the grown and the made unite.”

Although the structures are all built from the same components, the structural makeup and its purpose in an environment vary.

I admire this piece because of its insightfulness towards the world and its current condition. The amount of research and intricate pieces created for this project intrigues me. It’s nice to know that there definitely is a way that we can avoid polluting our planet even further without changing anything about halting our momentum for modernizing the world.

Lauren Park-Looking Outwards-03

3D printed physical objects
Artist: The Mediated Matter Group

This project takes 2D data or digital information and converts it into 3D models and physical forms using 3D printing. I really admire this project and the way creative material is made using color and shape to represent data. This is because of how important it is to not only be able to analyze information and graphs or maps by looking at screens, but have an easier understanding of what this image would look like when it is visualized in real life, or off-screen. Multi-material 3D printing is mainly used to to transfer and convert various kinds of data, such as medical information like an MRI, visualized on the screen to physical objects. The artists satisfy the need and curiosity of how people can benefit from using tangible data the just digitally. All such complex information can be combined or put together to create a more sensible image for the brain to understand.

https://www.media.mit.edu/projects/making-data-matter/overview/

Project: Making Data Matter: Voxel-printing for the digital fabrication of data across scales and domains

Artist: The Mediated Matter Group