Category: Section E

ifv-Project-03

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-03
function setup() {
    createCanvas(480, 640);
}

function draw() {
  background(189,246,255);
//background color change
  if (mouseX >= 180 & mouseX <= 280) {
    background(211,255,255);
  }
  var centerX = constrain(mouseX,100,380);
  var centerY = constrain(mouseY,180,460);
//multi-layed rotating square which follows the cursor as its pressed
  if(mouseIsPressed) {
    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 700, 700);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 600, 600);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 500, 500);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 400, 400);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 300, 300);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 200, 200);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 100, 100);
    pop();
  }
//white dots that change size according to mouseX
  fill(255);
  stroke(255);
  strokeWeight(mouseX/10);
  point(centerX + 50, centerY);
  point(centerX - 50, centerY);
  point(centerX + 100, centerY);
  point(centerX - 100, centerY);
  point(centerX + 150, centerY);
  point(centerX - 150, centerY);
  point(centerX + 200, centerY);
  point(centerX - 200, centerY);
//Color and shape-changing Triangle
  fill(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  stroke(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  strokeWeight(3);
  triangle(100,0,centerX,centerY-70,380,0);
  triangle(100,640,centerX,centerY+70,380,640);

//lines orig from each corner and connect at cursor
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  strokeWeight(6);
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  line(0,0,centerX,centerY);
  line(0,640,centerX,centerY);
  line(480,0,centerX,centerY);
  line(480,640,centerX,centerY);
//Centercircle
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  ellipseMode(CENTER);
  ellipse(centerX,centerY,50,50);

}

MouseX and MouseY are used to change the position of the center circle and the intersection of the four lines along with their color. These coordinates also affect the shape of the two triangles and the color of their stroke and fill. The white dots also follow these points and the stroke weight changes in thickness based on mouseX. When the Mouse is pressed multiple overlapped rotating squares appear. The position in which the mouse X&Y can effect the above elements is restrained. Transparency of certain elements is also affected. The background color lightens when the mouse is near the middle x-coordinates.

Sheenu You-Project 03-Dynamic Drawing

sketch

//Sheenu You
//Section E
//Project-04
//sheenuy@andrew.cmu.edu
function setup() {
    createCanvas(400, 300);
    strokeWeight(2);
}

function draw() {
	background(0);
	//Line 1
	for (var i = 20; i <400; i+= 20) {
		stroke("yellow");
		line(0,i,i*mouseX/5,400);
		line(400,i,i*mouseX/5,0);
	}
	//Line 2
	for (var b = 10; b<600; b+=5){
		strokeWeight(1);
		stroke("red");
		line(0+b,0,0+b,300);
	}
	//Line 3
for (var a = 20; a <400; a+= 10) {
		stroke("blue");
		line(0,a,a,400);
		line(400,a,a,0);
	}
}

This project was a little bit tough since I had a lot of ideas and I really didn’t know which one to pick and how to actually make it happen. Some ideas were too overambitious and exceed the boundaries of my knowledge in P5. I was experimenting with lines and how variables affected them and made this discovery when I put two lines together and divided one of the lines’ X-coordinate by 2. It really reminded me of geometric 80’s art, so I picked a hot pink for the lines and a dark blue/purple for the background. The colors switch for the lines and background just to make it more interesting. I really love this and it looks like I am looking at a wave or a cylinder. It was really a great and also surprisingly simple discovery.

hqq-secE-LookingOutwards3

Courtesy of Epiphyte Lab, 2009

 

The M-House was designed by Epiphyte Lab, led by my studio professor, Dana Cupkova. The project considers a traditional building type called a Butler building, where the roof is pitched to a single spine concave to the interior of the building. The practice expanded on this by first conceiving a structural transformation to allow the structure to collect snow, providing greater thermal insulation during the winter.

Then it gets interesting.

A number of computations derived from algorithms that reposition the specific sectional guide points of the structure allow the structure to reposition itself along specific site lines. It then undergoes another transformation to accommodate programmatic requirements relating to any specific needs for interior space, outdoor spaces, larger rooms, etc.

Finally, the structure undergoes computations developed through climate data. This helps determine the number of ribs and panels, the conditions of the site, and other environmental parameters that can help the housing style adapt to the needs of specific requirements of a site.

I appreciate this project a lot because it provides an adaptable solution to a common problem in the northern United States and Canada and poses the possibility of replication anywhere beyond its intended site in Buffalo, New York.

hqq-secE-project03-dynamic-drawing

hamza

//hamza qureshi
//section e
//project 03
//hqq@andrew.cmu.edu

var newX = 320;  //starting point at center
var newY = 240;
var dirX = 1; //directional vector
var speedX = 3; //horizontal speedX
var dirY = 1;
var speedY = 2; //vertical speed
var eyeDy = 0; //additive value for pupil position
var eyeDx = 0;
var drag = false; //calls drag abilities

function setup(){
    createCanvas(640,480);
    //noCursor();
    angleMode(DEGREES);
    cursor(CROSS); //preferred cursor
}

function draw(){
    background(0);
    noStroke();
    rectMode(CORNER);
    ellipseMode(CENTER);
    var newColor1 = mouseX/1;  //these variables are to be used
    var newColor2 = mouseX/2;  //to control how the color changes
    var newColor3 = mouseX/3;  //relative to the mouse position
    var newColor4 = mouseX/4;
    var newColor5 = mouseY/1;
    var newColor6 = mouseY/2;
    var newColor7 = mouseY/3;
    var newColor8 = mouseY/4;

//row 1
    fill(newColor1, newColor2, newColor3);
    rect(0,0,40,40);
    fill(newColor4, newColor5, newColor6);
    rect(40,0,40,40);
    fill(newColor7, newColor8, newColor7);
    rect(80,0,40,40);
    fill(newColor6, newColor5, newColor4);
    rect(120,0,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,0,40,40);
    fill(newColor1, newColor8, newColor2);
    rect(200,0,40,40);
    fill(newColor7, newColor6, newColor6);
    rect(240,0,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,0,40,40);
    fill(newColor1, newColor8, newColor1);
    rect(320,0,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,0,40,40);
    fill(newColor3, newColor8, newColor3);
    rect(400,0,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,0,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,0,40,40);
    fill(newColor6, newColor3, newColor6);
    rect(520,0,40,40);
    fill(newColor7, newColor2, newColor7);
    rect(560,0,40,40);
    fill(newColor8, newColor1, newColor8);
    rect(600,0,40,40);
    fill(newColor1, newColor7, newColor1);
    rect(640,0,40,40);

//row 2
    fill(newColor2, newColor2, newColor3);
    rect(0,40,40,40);
    fill(newColor1, newColor5, newColor6);
    rect(40,40,40,40);
    fill(newColor1, newColor8, newColor7);
    rect(80,40,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(120,40,40,40);
    fill(newColor1, newColor4, newColor1);
    rect(160,40,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,40,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(240,40,40,40);
    fill(newColor1, newColor5, newColor8);
    rect(280,40,40,40);
    fill(newColor2, newColor8, newColor1);
    rect(320,40,40,40);
    fill(newColor1, newColor7, newColor2);
    rect(360,40,40,40);
    fill(newColor1, newColor3, newColor3);
    rect(400,40,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(440,40,40,40);
    fill(newColor1, newColor4, newColor5);
    rect(480,40,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(520,40,40,40);
    fill(newColor1, newColor2, newColor7);
    rect(560,40,40,40);
    fill(newColor1, newColor1, newColor8);
    rect(600,40,40,40);
    fill(newColor2, newColor6, newColor1);
    rect(640,40,40,40);

//row 3
    fill(newColor8, newColor2, newColor3);
    rect(0,80,40,40);
    fill(newColor2, newColor5, newColor6);
    rect(40,80,40,40);
    fill(newColor2, newColor8, newColor7);
    rect(80,80,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(120,80,40,40);
    fill(newColor2, newColor2, newColor1);
    rect(160,80,40,40);
    fill(newColor2, newColor8, newColor2);
    rect(200,80,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,80,40,40);
    fill(newColor2, newColor5, newColor8);
    rect(280,80,40,40);
    fill(newColor3, newColor8, newColor1);
    rect(320,80,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,80,40,40);
    fill(newColor2, newColor6, newColor3);
    rect(400,80,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(440,80,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,80,40,40);
    fill(newColor2, newColor3, newColor6);
    rect(520,80,40,40);
    fill(newColor2, newColor2, newColor7);
    rect(560,80,40,40);
    fill(newColor2, newColor1, newColor8);
    rect(600,80,40,40);
    fill(newColor3, newColor7, newColor1);
    rect(640,80,40,40);

//row 4
    fill(newColor8, newColor2, newColor3);
    rect(0,120,40,40);
    fill(newColor3, newColor5, newColor6);
    rect(40,120,40,40);
    fill(newColor3, newColor8, newColor7);
    rect(80,120,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(120,120,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,120,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,120,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,120,40,40);
    fill(newColor3, newColor5, newColor8);
    rect(280,120,40,40);
    fill(newColor4, newColor8, newColor1);
    rect(320,120,40,40);
    fill(newColor3, newColor7, newColor2);
    rect(360,120,40,40);
    fill(newColor3, newColor6, newColor3);
    rect(400,120,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(440,120,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,120,40,40);
    fill(newColor3, newColor3, newColor6);
    rect(520,120,40,40);
    fill(newColor3, newColor2, newColor7);
    rect(560,120,40,40);
    fill(newColor3, newColor1, newColor8);
    rect(600,120,40,40);
    fill(newColor4, newColor7, newColor1);
    rect(640,120,40,40);

//row 5
    fill(newColor5, newColor2, newColor3);
    rect(0,160,40,40);
    fill(newColor8, newColor5, newColor6);
    rect(40,160,40,40);
    fill(newColor4, newColor8, newColor7);
    rect(80,160,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(120,160,40,40);
    fill(newColor4, newColor2, newColor1);
    rect(160,160,40,40);
    fill(newColor4, newColor8, newColor2);
    rect(200,160,40,40);
    fill(newColor4, newColor3, newColor6);
    rect(240,160,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,160,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(320,160,40,40);
    fill(newColor4, newColor7, newColor2);
    rect(360,160,40,40);
    fill(newColor4, newColor6, newColor3);
    rect(400,160,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,160,40,40);
    fill(newColor4, newColor4, newColor5);
    rect(480,160,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(520,160,40,40);
    fill(newColor4, newColor2, newColor7);
    rect(560,160,40,40);
    fill(newColor4, newColor1, newColor8);
    rect(600,160,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(640,160,40,40);

//row 6
    fill(newColor6, newColor2, newColor3);
    rect(0,200,40,40);
    fill(newColor5, newColor5, newColor6);
    rect(40,200,40,40);
    fill(newColor5, newColor8, newColor7);
    rect(80,200,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(120,200,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(160,200,40,40);
    fill(newColor5, newColor8, newColor2);
    rect(200,200,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(240,200,40,40);
    fill(newColor5, newColor5, newColor8);
    rect(280,200,40,40);
    fill(newColor6, newColor8, newColor1);
    rect(320,200,40,40);
    fill(newColor5, newColor7, newColor2);
    rect(360,200,40,40);
    fill(newColor5, newColor6, newColor3);
    rect(400,200,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(440,200,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,200,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(520,200,40,40);
    fill(newColor5, newColor2, newColor7);
    rect(560,200,40,40);
    fill(newColor5, newColor1, newColor8);
    rect(600,200,40,40);
    fill(newColor6, newColor7, newColor1);
    rect(640,200,40,40);

//row 7
    fill(newColor6, newColor2, newColor1);
    rect(0,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(40,240,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(80,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(120,240,40,40);
    fill(newColor5, newColor2, newColor2);
    rect(160,240,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(200,240,40,40);
    fill(newColor5, newColor3, newColor1);
    rect(240,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(280,240,40,40);
    fill(newColor6, newColor8, newColor2);
    rect(320,240,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(360,240,40,40);
    fill(newColor5, newColor6, newColor1);
    rect(400,240,40,40);
    fill(newColor5, newColor5, newColor1);
    rect(440,240,40,40);
    fill(newColor5, newColor4, newColor1);
    rect(480,240,40,40);
    fill(newColor5, newColor3, newColor1);
    rect(520,240,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(560,240,40,40);
    fill(newColor5, newColor1, newColor1);
    rect(600,240,40,40);
    fill(newColor6, newColor7, newColor2);
    rect(640,240,40,40);

//row 8
    fill(newColor6, newColor2, newColor3);
    rect(0,280,40,40);
    fill(newColor5, newColor5, newColor6);
    rect(40,280,40,40);
    fill(newColor5, newColor8, newColor7);
    rect(80,280,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(120,280,40,40);
    fill(newColor5, newColor2, newColor1);
    rect(160,280,40,40);
    fill(newColor5, newColor8, newColor2);
    rect(200,280,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(240,280,40,40);
    fill(newColor5, newColor5, newColor8);
    rect(280,280,40,40);
    fill(newColor6, newColor8, newColor1);
    rect(320,280,40,40);
    fill(newColor5, newColor7, newColor2);
    rect(360,280,40,40);
    fill(newColor5, newColor6, newColor3);
    rect(400,280,40,40);
    fill(newColor5, newColor5, newColor4);
    rect(440,280,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,280,40,40);
    fill(newColor5, newColor3, newColor6);
    rect(520,280,40,40);
    fill(newColor5, newColor2, newColor7);
    rect(560,280,40,40);
    fill(newColor5, newColor1, newColor8);
    rect(600,280,40,40);
    fill(newColor6, newColor7, newColor1);
    rect(640,280,40,40);

//row 9
    fill(newColor5, newColor2, newColor3);
    rect(0,320,40,40);
    fill(newColor8, newColor5, newColor6);
    rect(40,320,40,40);
    fill(newColor4, newColor8, newColor7);
    rect(80,320,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(120,320,40,40);
    fill(newColor4, newColor2, newColor1);
    rect(160,320,40,40);
    fill(newColor4, newColor8, newColor2);
    rect(200,320,40,40);
    fill(newColor4, newColor3, newColor6);
    rect(240,320,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,320,40,40);
    fill(newColor5, newColor8, newColor1);
    rect(320,320,40,40);
    fill(newColor4, newColor7, newColor2);
    rect(360,320,40,40);
    fill(newColor4, newColor6, newColor3);
    rect(400,320,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,320,40,40);
    fill(newColor4, newColor4, newColor5);
    rect(480,320,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(520,320,40,40);
    fill(newColor4, newColor2, newColor7);
    rect(560,320,40,40);
    fill(newColor4, newColor1, newColor8);
    rect(600,320,40,40);
    fill(newColor5, newColor7, newColor1);
    rect(640,320,40,40);

//row 10
    fill(newColor8, newColor2, newColor3);
    rect(0,360,40,40);
    fill(newColor3, newColor5, newColor6);
    rect(40,360,40,40);
    fill(newColor3, newColor8, newColor7);
    rect(80,360,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(120,360,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,360,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,360,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,360,40,40);
    fill(newColor3, newColor5, newColor8);
    rect(280,360,40,40);
    fill(newColor4, newColor8, newColor1);
    rect(320,360,40,40);
    fill(newColor3, newColor7, newColor2);
    rect(360,360,40,40);
    fill(newColor3, newColor6, newColor3);
    rect(400,360,40,40);
    fill(newColor3, newColor5, newColor4);
    rect(440,360,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,360,40,40);
    fill(newColor3, newColor3, newColor6);
    rect(520,360,40,40);
    fill(newColor3, newColor2, newColor7);
    rect(560,360,40,40);
    fill(newColor3, newColor1, newColor8);
    rect(600,360,40,40);
    fill(newColor4, newColor7, newColor1);
    rect(640,360,40,40);

//row 11
    fill(newColor8, newColor2, newColor3);
    rect(0,400,40,40);
    fill(newColor2, newColor5, newColor6);
    rect(40,400,40,40);
    fill(newColor2, newColor8, newColor7);
    rect(80,400,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(120,400,40,40);
    fill(newColor2, newColor2, newColor1);
    rect(160,400,40,40);
    fill(newColor2, newColor8, newColor2);
    rect(200,400,40,40);
    fill(newColor8, newColor3, newColor6);
    rect(240,400,40,40);
    fill(newColor2, newColor5, newColor8);
    rect(280,400,40,40);
    fill(newColor3, newColor8, newColor1);
    rect(320,400,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,400,40,40);
    fill(newColor2, newColor6, newColor3);
    rect(400,400,40,40);
    fill(newColor2, newColor5, newColor4);
    rect(440,400,40,40);
    fill(newColor8, newColor4, newColor5);
    rect(480,400,40,40);
    fill(newColor2, newColor3, newColor6);
    rect(520,400,40,40);
    fill(newColor2, newColor2, newColor7);
    rect(560,400,40,40);
    fill(newColor2, newColor1, newColor8);
    rect(600,400,40,40);
    fill(newColor3, newColor7, newColor1);
    rect(640,400,40,40);

//row 12
    fill(newColor2, newColor2, newColor3);
    rect(0,440,40,40);
    fill(newColor1, newColor5, newColor6);
    rect(40,440,40,40);
    fill(newColor1, newColor8, newColor7);
    rect(80,440,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(120,440,40,40);
    fill(newColor1, newColor4, newColor1);
    rect(160,440,40,40);
    fill(newColor3, newColor8, newColor2);
    rect(200,440,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(240,440,40,40);
    fill(newColor1, newColor5, newColor8);
    rect(280,440,40,40);
    fill(newColor2, newColor8, newColor1);
    rect(320,440,40,40);
    fill(newColor1, newColor7, newColor2);
    rect(360,440,40,40);
    fill(newColor1, newColor3, newColor3);
    rect(400,440,40,40);
    fill(newColor1, newColor5, newColor4);
    rect(440,440,40,40);
    fill(newColor1, newColor4, newColor5);
    rect(480,440,40,40);
    fill(newColor1, newColor3, newColor6);
    rect(520,440,40,40);
    fill(newColor1, newColor2, newColor7);
    rect(560,440,40,40);
    fill(newColor1, newColor1, newColor8);
    rect(600,440,40,40);
    fill(newColor2, newColor6, newColor1);
    rect(640,440,40,40);

//row 13
    fill(newColor1, newColor2, newColor3);
    rect(0,480,40,40);
    fill(newColor4, newColor5, newColor6);
    rect(40,480,40,40);
    fill(newColor7, newColor8, newColor7);
    rect(80,480,40,40);
    fill(newColor6, newColor5, newColor4);
    rect(120,480,40,40);
    fill(newColor3, newColor2, newColor1);
    rect(160,480,40,40);
    fill(newColor1, newColor8, newColor2);
    rect(200,480,40,40);
    fill(newColor7, newColor6, newColor6);
    rect(240,480,40,40);
    fill(newColor4, newColor5, newColor8);
    rect(280,480,40,40);
    fill(newColor1, newColor8, newColor1);
    rect(320,480,40,40);
    fill(newColor2, newColor7, newColor2);
    rect(360,480,40,40);
    fill(newColor3, newColor8, newColor3);
    rect(400,480,40,40);
    fill(newColor4, newColor5, newColor4);
    rect(440,480,40,40);
    fill(newColor5, newColor4, newColor5);
    rect(480,480,40,40);
    fill(newColor6, newColor3, newColor6);
    rect(520,480,40,40);
    fill(newColor7, newColor2, newColor7);
    rect(560,480,40,40);
    fill(newColor8, newColor1, newColor8);
    rect(600,480,40,40);
    fill(newColor1, newColor7, newColor1);
    rect(640,480,40,40);

//allows newX and newY to be changed to the mouse position when dragged
    if (drag){
      newX = mouseX;
      newY = mouseY;
    }

    ellipseMode(CORNER);
//draws body and eyes of carl
    fill(32,120,240);
    ellipse(newX,newY,100,100);
    ellipseMode(CENTER);
    fill(255);
    stroke(0);
    strokeWeight(2);
    ellipse(newX+30,newY+30,15,15);
    ellipse(newX+70,newY+30,15,15);
    fill(0);
    ellipse(newX+30+eyeDx,newY+27+eyeDy,6,6);
    ellipse(newX+70+eyeDx,newY+27+eyeDy,6,6);
  //divides canvas into quadrants and shifts pupils based on
  //which quadrant it's in
    if (newY < 240){
      eyeDy = 6;
    }
    if (newY > 240){
      eyeDy = 0;
    }
    if (newX < 320){
      eyeDx = 2;
    }
    if (newX > 320){
      eyeDx = -2;
    }
//drawing the mouth and speech bubble
    fill(190,20,86);
    strokeWeight(3);
    stroke(235,30,100);
    rect(newX+20,newY+50,60,10,5);
    fill(255);
    noStroke();
    triangle(newX-10,newY+10, newX-10,newY,newX-20,newY);
    rect(newX-120,newY-40,110,40);

//creating directional text
    fill(0);
    textSize(20);
    text("press any key to accelerate!", 30, 455);
    text("drag carl for a new starting point!", 30, 475);
    textSize(15);

//changes speech bubble statement based on where he is
    if (newY >240){
      text("wow so pretty",newX-110,newY-18);
    }
    if (newY <= 240){
      text("cool, i guess",newX-110,newY-18);
    }
//allows carl to bounce off edges of canvas
    newX += dirX * speedX;
    if (newX > width - 100 || newX < 0){
      dirX = -dirX;
    }
    newY += dirY * speedY;
    if (newY > height - 100 || newY < 0){
      dirY = -dirY;
    }
//accelerates when any key is pressed.
    if (keyIsPressed){
        speedX = speedX + 0.25;
    }

}

//allows carl to be draged to slow him down
function mousePressed(){
    if (dist(newX, newY, mouseX, mouseY) < 150){
    drag = true;
    }
}
function mouseReleased(){
    drag = false;
    speedX = speedX*0.4;  //deccerates
    speedY = speed*0.4;
}

Carl’s back and ready to play in a colorful landscape. Wave your mouse around to adjust the color while Carl bounces around to observe. Press any key to accelerate Carl, and stop and drag him to tell him to slow down.

mstropka-Looking Outwards-03-Section E

In this Ted Talk Neri Oxman talks about using computation to drive the design of physical things. The Ted talk includes 3D animations of the generative algorithms that her team then 3D printed to make wearables. I think it is fascinating that this team is using computers to generate forms that are both organic in their appearance and function. It is very inspiring to see that computers and rapid prototyping technologies, the epitome of the artificial, are helping designers and engineers to create products that are meant to emulate natural processes. Moving forward I think that this type of research will inspire people to develop technologies that are more connected to the natural world.

sunmink-LookingOutwards-03

PolyThread Textile Pavilion is an architectural installation that is designed by Jenny E.Sabin. This installation is part of the Cooper Hewitt Smithsonian Design Museum exhibition, which focuses on aesthetic innovation. PolyThread Textile Pavilion is a seven-foot-tall-square-foot knitted textile structure that is in shape of the rippled dome with the underlying structure made up of aluminum tubes. It illuminates under the control of ETC Express LPC, which is a lighting Playback Controller that runs the day-to-night lighting sequence. Using the computation, Sabin successfully fabricates her inspirations into an art.

I admire the designer Sabin for her innovative idea to combine her inspirations from nature and mathematics which are not a common marriage. Experimenting new material as well as methods to create her works, Sabin also plans to help parts of the world where there is little or no access to electricity by studying the “PolyThread” which is a potential solution for portable and lightweight electricity.

mstropka-Project 03-Section E

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project 03

var squares = []; //empty array for squares
var speed = 5; // speed multiplyer for motion of squares
var squaresize = 40; //initial square size
var angle = 0 //initial rotation of squares

function setup() {
    angleMode(DEGREES);
    createCanvas(640, 480);

    //loop that continually makes 400 squares inside the array
    for (var i = 0; i < 400; i++) {
      squares[i] = {
      //squares are drawn at a random location on canvas
      x : random(0, width),
      y : random(0, height),
      //draw the squares
      display: function() {
        push();
        noFill();
        stroke(225);
        //if the mouse is within 100 pixels of any of the squares
        if(dist(mouseX, mouseY, this.x, this.y) < 100){
          stroke(255,0,0); //stroke will become red
          rotate(angle + random(-10,10)); //squares will rotate +-10 degrees
          squaresize = squaresize + 10; //squares will grow by 10 pixels in the x and y direction
        }else{
          squaresize = 40; //if the mouse is not close, the squares will return to normal size
        }
        rect(this.x, this.y, squaresize, squaresize); //draw the squares
        pop();
      },
      //gives squares random movement in x and y direction if mouse is within 100 pixels
      move: function() {
        if(dist(mouseX, mouseY, this.x, this.y) < 100){
          this.x = this.x + random(-1, 1) * speed; //causes squares to move in a random x direction
          this.y = this.y + random(-1, 1) * speed; //causes squares to move in a random y direction
          }else{
          this.x = this.x //if the mouse is not within 100 pixels, dont move
          this.y = this.y
        }
      }
    }
  }
}
function draw() {
    background(120);
    //make squares until the array is full
    for (var i = 0; i < squares.length; i++){
    squares[i].move(); //runs move function
    squares[i].display(); //runs display funtion

  }

}

For this project I wanted the mouse to interact with a lot of shapes in the sketch. I did some research and figured the best way to do that was to set up an array for all of the objects that the mouse was to interact with. After watching several explanations on youtube, I figured out how to apply what we learned about changing shapes in class to what I learned online about arrays. The result is a program that generates a bunch of squares that rotate, grow, move, and change color when the mouse is near them.

katieche – project 03 – dynamic drawing

katieche-03

// alters:
// dot position
// line length
// line and dot color
// speed that dots follow cursor
// angle of lines

// dot 1
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;

// dot 5
var a = 320;
var b = 240;
var diffa = 0;
var diffb = 0;

// dot 3
var c = 320;
var d = 240;
var diffc = 0;
var diffd = 0;

// dot 4
var e = 320;
var f = 320;
var diffe = 0;
var difff = 0;

// dot 2
var g = 270;
var h = 220;
var diffg = 0;
var diffh = 0;

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

function draw() {
	background(0);
    
    stroke(500-mouseX);
    // lines that follow cursor
    // line 1
    line(320, 240, mouseX, mouseY);
    // line 2
    var mx = map(mouseX, 0, width, mouseX, mouseY);
    line(320, 240, mx, mouseY);
    // line 3
    var mx = map(mouseX, 0, width, mouseX, mouseY);
    line(320, 240, mx, mouseY);
    // line 4
    var mx = map(mouseX, 0, width, mouseX, mouseY);
    line(320, 240, mx, mouseY);
    // line 5
    var mx = map(mouseX, 100, width,mouseX, mouseY);
    line(320, 240, mx, mouseY);

    // longer lines
    stroke(320-mouseX);
    // line 1
    var mx = map(200, mouseY, width, -260, 380);
    line(320, 240, mx, mouseY);
    // line 2
    var mx = map(-mouseX, 40, width, 760, -180);
    line(320, 240, mx, mouseY);
    // line 3
    var mx = map(mouseX, 30, width, -260, 100);
    line(320, 240, mx, mouseY);
    // line 4
    var mx = map(-mouseX, 300, width, 660, 190);
    line(320, 240, mx, mouseY);

    // dot 1 (slow)
    // dots are in order: slow to fast
    noStroke();
	diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.01*diffx;
    y = y + 0.01*diffy;
    fill (250-mouseY);
    ellipse(x, y, 10, 10);

    // dot 2
    diffg = mouseX - g;
    diffh = mouseY - h;
    g += 0.03*diffg;
    h += 0.03*diffh;
    fill (240-mouseX);
    ellipse(g, h, 35, 35);

    // dot 3
    diffc = mouseX - c;
    diffd = mouseY - d;
    c = c + 0.05*diffc;
    d = d + 0.05*diffd;
    fill (240-mouseX);
    ellipse(c, d, 30, 30);

  	// dot 4
    diffe = mouseX - e;
    difff = mouseY - f;
    e += 0.07*diffe;
    f += 0.07*difff;
    fill (300-mouseY);
    ellipse(e, f, 25, 25);

   	// dot 5 (fastest)
    diffa = mouseX - a;
    diffb = mouseY - b;
    a = a + 0.1*diffa;
    b = b + 0.1*diffb;
    fill (500-mouseX);
    ellipse(a, b, 20, 20);

}

This project was hard for me since it was so open ended, I didn’t know where to start or where to go, so I referenced the notes a lot. I knew I wanted to do something abstract, so I started with a few interactive functions that I thought were cool (ie. the dots following the cursor, and the lines changing based on the mouse position), and then played around with the code from there. Here are a few things I first tried:

I wanted to combine some of these functions but the circles and the lines just looked too crowded together so I switched to the dots that follow the cursor, so it seems like the lines follow the dots.

sunmink-Project03-Dynamic-Drawing

sketch

//SunMin Kim 
//Section E
//sunmink@andrew.cmu.edu
//project-03 

//variables for background elements
var smokecolor = 255; 
var angle = 0; 

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

function draw() {
  //Sky
  background(209, 234, 254);
  noStroke(0);

  //Greens 
  fill(109, 195, 50); 
  rect(0, 380, 640, 300); 

   //Tree trunks 
  fill(84, 78, 38);
  rect(20, 270, 20, 120);
  rect(60, 270, 20, 120);
  rect(100, 270, 20, 120);
  rect(140, 270, 20, 120);
  rect(180, 270, 20, 120);
  rect(220, 270, 20, 120);
  rect(260, 270, 20, 120);

  //Tree leaves 
  fill(135, 140, 30); 
  ellipse(30, 230, 50, 130);
  ellipse(110, 230, 50, 130);
  ellipse(190, 230, 50, 130);
  ellipse(270, 230, 50, 130);

  fill(135, 170, 30); 
  ellipse(70, 230, 50, 130);
  ellipse(150, 230, 50, 130);
  ellipse(230, 230, 50, 130);

  //Smokes move and change their color depending on position of mouseX 
  translate ((width) - mouseX * 1.5, 20); 
  fill (mouseX - smokecolor); 

   
  ellipse( 90, 150, 100, 100); 
  ellipse( 120, 150, 100, 100); 
  ellipse( 140, 120, 100, 100); 
  ellipse( 160, 120, 100, 100); 
  ellipse( 150, 180, 100, 100);
  ellipse( 190, 100, 100, 100);  
  ellipse( 220, 180, 100, 100);  
  ellipse( 220, 120, 100, 100); 
  ellipse( 250, 100, 100, 100); 
  ellipse( 290, 180, 100, 100); 
  ellipse( 220, 150, 100, 100); 
  ellipse( 260, 120, 100, 100); 
  ellipse( 260, 100, 100, 100); 
  ellipse( 230, 120, 100, 100); 
  ellipse( 250, 150, 100, 100);
  ellipse( 290, 80, 100, 100);  
  ellipse( 320, 130, 100, 100);  
  ellipse( 420, 170, 100, 100);  
  ellipse( 450, 120, 100, 100); 
  ellipse( 490, 180, 100, 100); 
  ellipse( 420, 150, 100, 100); 
  ellipse( 390, 80, 100, 100); 
  ellipse( 320, 100, 100, 100); 
  ellipse( 460, 100, 100, 100); 
  ellipse( 490, 150, 100, 100);  
  ellipse( 380, 170, 100, 100);  
  ellipse( 520, 150, 100, 100); 
  pop(); 

   //sun move depending on position of mouseX 
  translate ((width) - mouseX * 0.5, 60); 
  rotate (radians(angle));
  fill (236, 188, 0); 

  //sun changes its size, and constantly rises the angle in following angle + 0.2 
  ellipse(mouseX - 250, 30, (mouseX + 200)/ 5, (mouseX + 200)/ 5);
  angle = angle + 0.2;



}

After creating pong game, I became more interested in coding that can carry a narrative. Thus for the dynamic drawing, I wanted to put in a storyline. I first created a forest and then made smokes that are created before the sun arose.

Throughout this project, I struggled the most when coming up with a story and actualizing it. I feel good with the outcome I came up with and I am excited to create more interactive drawings with more variations.

elizabew – looking outwards – 03 – SectionE

Video of the GLASS II Installation Demonstration 

GLASS II from Mediated Matter Group on Vimeo.

GLASS II is a 2017 3D printed glass installation demonstrated in Milan Design week and was made by The Mediated Matter Group. The installation is made out of a series of glass columns made from a computational framework that created each column’s unique form.

What I find incredibly cool about this project is how it pushes the boundaries of glass, a material used in everyday life. While the light aspect isn’t groundbreaking — light and glass has been used as art for a long time — the way they installed a moving light that creates kaleidoscopic images surrounds the columns makes for a further beautiful piece.

The algorithms used to generate these glass columns are, according to the group’s website, “a unique network of radial arrays made of arcs” and the forms are all “directly influenced by the constraints of the manufacturing platform and structural system.” This means that the higher the load on the column, the larger the column gets.

Click here further information on this project