Month: September 2019

Katrina Hu – Project 03 – Dynamic Drawing

sketch_project3

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-03-Dynamic Drawing*/

var sunW = 50
var sunH = 50

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

function draw() {
    //change background color
    background (191 - mouseY, 228 - mouseY, 255 - mouseY);
    noStroke();
    //change sun size
    if (mouseY < height / 2.5) {
        sunW = height / 3 - mouseY;
        sunH = height / 3 - mouseY;
    } 
    else {
        sunW = 10
        sunH = 10;
    }
    //draw sun
    //sun moves by mouseY
    fill (255, 247, 158);
    ellipse (300 - mouseY, 200 - mouseY, sunW, sunH);
    //draw houses
    //color of house lightens by mouseY/3
    //shape of house changes 
    fill(79 + mouseY / 3, 68 + mouseY / 3, 61 + mouseY / 3);
    rect(50, 380, 100 + mouseY / 25, 100);
    rect(200, 380, 100 + mouseY / 25, 100);
    rect(350, 380, 100 + mouseY / 25, 100);
    rect(500, 380, 100 + mouseY / 25, 100);
    triangle(100, 330, 30, 380, 170, 380);
    triangle(250, 330, 180, 380, 320, 380);
    triangle(400, 330, 330, 380, 470, 380);
    triangle(550, 330, 480, 380, 620, 380);

}

This project changes four different aspects of image elements – size, shape, position, and color. It was a fun project to do, as it was interesting to experiment with how mouse position would affect these elements.

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.

Janet Peng-Looking Outwards-02

Flight Patterns from Aaron Koblin on Vimeo.

This project is called Flight Patterns and it’s by Aaron Koblin. I believe it was created in 2009 (10 years ago). The piece visualizes the movement of airplanes over North America over time. I really appreciate the simplicity of the piece and how it affectively visualizes important data without being confusing or overwhelming. As well, even though it’s just data, it’s beautiful and mesmerizing to stare at. It creates a strong emotional reaction for me as I can feel myself traveling from place to place on a plane when looking at the piece. It reminds me of the airport and how it feels to go someplace new and return home afterwards. The piece was created by parsing and plotting data from the Federal Aviation Administration using Processing, a  Javascript web application framework. The creator’s artistic sensibilities manifest in the algorithm by being able to simplify and visualize large groups of data in a way that can be effectively coded in a visual manner.

Xiaoyu Kang – Project 03 – Dynamic Drawing


sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-03

var cir = 20;
var angle = 0;

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

function draw() {
//background color change as mouse moves down
background(400-mouseY,245,255);
//sun
    //sun shows when the mouse moves to the top of the canvas
     fill("yellow");
    if (mouseY<=200) {
        fill(255,242,122);
        ellipse(50,20,200,200); 
        triangle(10,100,50,100,30,200);
        triangle(40,60,100,30,150,200);
        triangle(60,70,30,0,230,60);
        triangle(50,20,0,0,200,0);
    }
    //sun disappears
    if (mouseY>200) {
        fill(400-mouseY,245,255); 
    }
//bubbles
    fill("white");
    //bubble gets bigger as they move up
    ellipse(50,640-mouseY-30,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(100,640-mouseY+230,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(150,640-mouseY+70,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(270,640-mouseY+150,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(360,640-mouseY,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(300,640-mouseY+370,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(470,640-mouseY+270,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(160,640-mouseY+490,cir+0.1*mouseY,cir+0.1*mouseY);
    ellipse(530,640-mouseY+520,cir+0.1*mouseY,cir+0.1*mouseY);
//jelly fish body
    noStroke();
    //color change on body
    fill(190,900-mouseY,900-mouseY);
    //moves vertically
    ellipse(240,mouseY,180,140);
    ellipse(180,mouseY+60,70,50);
    ellipse(240,mouseY+70,70,50);
    ellipse(300,mouseY+60,70,50);
//jelly fiish eyes
    noStroke();
    fill("white");
    ellipse(190,mouseY,30,30);
    ellipse(290,mouseY,30,30);
    fill("grey");
    ellipse(190,mouseY,20,20);
    ellipse(290,mouseY,20,20);
//jelly fish blush
    fill(224,196,218);
    ellipse(190,mouseY+25,40,10);
    ellipse(290,mouseY+25,40,10);
    
}

da

For this project, I was inspired by how the color of sea water changes from light to dark as it gets deeper. So I tried to create an image of a sea creature swimming in the ocean following the movement of the mouse. When the mouse moves down, the background color gets darker and some bubbles appears. When the mouse moves up the sun appears.

Sydney Salamy: Looking Outwards-03

The project Wanderers from 2014 is a collaboration between Christoph Bader, Neri Oxman and the Mediated Matter Group. The first part is a video demonstrating a computational growth process they designed. The video shows a series of computational objects that transform in very interesting ways as time goes on. They then used this growth process to create a sort of “clothing”. This clothing looks almost like glass sculptures except they seem almost organic and are made for wearing.

 

  • I enjoy a lot about this project. First off, the pieces look very beautiful. The designs are varied and interesting, and look like glass sculptures found in museums. The experimentation with organic things like intestines gave the pieces a very unique look. Some of them, especially “Otaared”, looked like an exotic plant or creature found creeping along the darker parts of the ocean. The colors were also very aesthetically pleasing, with a tendency towards bright colors and pretty gradients as well. The mix of clear and opaque material also added something nice to the pieces. I admire this because I like art, so seeing how much effort was put into their looks makes me enjoy them even more, especially considering the looks were unnecessary. I say unnecessary because apparently the aim of the pieces was to have organic matter embedded into them in order to help sustain humans. They could have just been for practical use and not look pretty, but the creators still decided to put effort into the artistic side of the project. It’s also smart since it will cause people to want to buy them more. Their goal was very interesting to me. I liked the little descriptions for each of the four pieces, how each one was for a different planet or for the moon, and then how the pieces were made to fit the specific environments of those places. Most clothing doesn’t have a greater purpose like that. The idea of creations where the environment interacts beneficially with humans is also one I think is great. Whenever there is talk about humans and the environment, it always seems negative, like a one versus the other relationship. So the idea of having organic matter like algae live in clothing to help humans breath is a nice change.
  • I haven’t seen the algorithm that generated the work. However, I do know it was meant to imitate natural growth behavior. I assume it is a pretty advanced algorithm considering the results it created, especially since the results vary greatly in their looks.
  • The artistic sensibilities of the artist are pretty much all mentioned above in the “what I admire about it” section. Their interest in organic forms can be seen in the final products. Instead of following the colors of these organic forms, they brightened up the pieces with varied color use and use of gradient.
One of the pieces from "Wanderer" called "Otaared"
One of the pieces from “Wanderer” called “Otaared”

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.

William Su – Looking Outwards – 03

Parametric World

This was made by vibrating a pool of water at a certain frequency. This creates a pattern of standing waves known as Faraday Waves. Higher frequencies create more complicated patterns. (Image and video credit: L. Gledhill)

I was especially intrigued by the complexity and how “lifelike” this generated pattern is. It almost looks like a microscopic cell, sea creature, or a CAT scan of body part. It is also interesting how completely different patterns are generated, even if the frequencies are off by a few Hertz. This I feel like adds to the “organic” nature of the project as there is just infinite possibilities and repeatabilities with this.

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.

Jai Sawkar – Looking Outwards – 03

Experimental Pavilion of Ceramic Bricks in China by Robotic Fabrication LAB of The Faculty of Architecture of HKU

It is often argued that digital fabrication is the next step in fabrication, both at a large scale and small scale. Technology companies use laser cutters, 3D printers, and CNC routers in both their iterative & final products and architecture & design are following as well. With digital fabrication, components can not only be more precise, but more dynamic as well. It is reasons like this that organizations, like the Robotic Fabrication LAB of the Faculty of Architecture of HKU, are beginning to change the status-quo of components dating back centuries.

When bricks used in structures were first mass-produced, they were made in small rectangles, allowing both consistency and allowing it to be held in a single hand, easily, by builders. Now with advancements in digital fabrication, designers, like the one noted above, can begin to change our perception of bricks; in this case, both the shape and the material are unlike what the common person is used to.

This is incredibly interesting and intriguing to me, as I, and many others, believe that this type of technology will advance tremendously in the next decades. With these advancements, I truly cannot wait to see what new structures and forms can be created with a plethora more of opportunity.

Article

William Su – Project 03 – Dynamic Drawing

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-03

x = 100;
y = 100;
angle1 = 0;
segLength = 30;

function setup() {
  createCanvas(640, 480);
  strokeWeight(10);
  stroke(0);
}

function draw() {
  r = 640 - mouseX; // Used for color and shape length
  g = 480 - mouseY; // color
  b = (mouseX + mouseY)/4; // messing with more color

  background(0);

  //Calculating angles for rotation based on mouseX and mouseY
  dx = mouseX - x;
  dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - cos(angle1) * segLength;
  y = mouseY - sin(angle1) * segLength;

  //Line Color and Line Weight
  stroke(r + 100, g + 100, b + 100); // Changes color based on mouse movement.
  strokeWeight(10 + (mouseX / 100)); // Gets thicker as you move mouse right.

// segLength and r changes length of line and also center of rotation.

// Top left
  push();
  translate(width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom right
  push();
  translate(3 * width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Top Right
  push();
  translate(3 * width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom Left
  push();
  translate(width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();
}

In this project, I tried making a isometric, rotating prism. I wasn’t able to work out the faces but I think the gist of it is shown with the 4 segments shown. The segments change size (thickness and length), color, and orientation depending on where your mouse is in the window.