Category: SectionB

Looking Outwards 04: Sound Art

Ernst Chladni is a physicist but incorporates his work into music and the use of music as vibrations to create art on a Chladni plate. A particle on the plate, sand, rocks, or in the video, couscous, will vibrate because of the friction between an object and the plate. In the video, it was a bow gliding across the edge of the plate, which made the couscous move to areas where there are limited vibrations. This process creates symmetrical patterns made with the coming together of the particles. Though the video is not an example of how digital sounds can create art, careful algorithms can create desired patterns with calculated vibrations. Every chladni plate has a different pattern because the way each plate vibrates is different. Not only is this art visually, but musically as well. The combination of both forms of art is an interesting exploration into how something that is heard can affect something that is seen.

To generate this type of pattern, the oscillation of the plate is precise, which creates the distant locations the particles will oscillate too. The symmetry and pattern can be predicted the more an object rubs against the plate. An artist can stop whenever they care to, however, the more they strike the plate, the more detailed each pattern becomes because of the longer vibrations the particles will experience. This style of art can be done by anyone and with any medium.

Project – Dynamic Drawing

My process was starting with a sketch and then systematically testing and working out the individual controls for each circle.

sketchDownload

//4 parameters: shade of circles/text, size of circles, position of circles, which message appears
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(255,0,0); 
	var grayscale = max(min(mouseX,255),0); //as mouse moves right circles become lighter
	var size1 = max(min(mouseY,227),70); //increases size as mouse moves down. Min diameter is 70, max diameter is 227
	var size2 = 297 - size1; //opposite of size 1, makes the middle circle have the opposite diameter of the other two
	var yShift = constrain(mouseY,0,height/3); //as mouse moves down circles move down
	var yShift1 = -yShift; //two circles move opposite direction of center circle
	//mouse makes different messages appear
	if(yShift == height/3){  //when the middle circle is at its lowest position the message "Et hoco modo nihil" appears
		textSize(45);
		fill(abs(255-grayscale));
		textAlign(LEFT);
		text('Et hoc',50,400);
		textAlign(CENTER);
		text('modo',width/2,50);
		textAlign(RIGHT);
		text('nihil',550,400);
	}
	if(yShift == 0){  //when the middle circle is at its highest position the message "In Quarta Parametri" appears
		textSize(45);
		fill(abs(255-grayscale));
		textAlign(LEFT);
		text('In',50,50);
		textAlign(CENTER);
		text('Quarta', width/2, 400);
		textAlign(RIGHT);
		text('Parametri',550,50);
	}
	if(height/3 + yShift + 30 == height/2){ //When all three circles are aligned the message "Quid est amor? Infantem et non cocuerunt mihi" appears
		textSize(45);
		textAlign(LEFT);
		fill(grayscale);
		text('Quid est amor?',50,50);
		textSize(30);
		textAlign(RIGHT);
		fill(abs(255-grayscale));
		text('Infantem et non nocuerunt mihi.',550,400);

	}
	noStroke();
	fill(grayscale); 
    circle(width/5,(height*2)/3 + yShift1 + 10,size1);
    circle((width*4)/5,(height*2)/3 + yShift1 + 10,size1);
    fill(abs(255-grayscale)); //this circle experiences the opposite color of the other two
    circle(width/2,height/3 + yShift + 30,size2);

	
}

PROJECT 03 – DYNAMIC DRAWING

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


}

function draw() {

    if (mouseX < width / 2) {
        background(133, 199, 222);
    } else if (mouseX >= width / 2) {
        background(69, 123, 157);
    }
    noStroke();

    fill(230, 250, 252);
    circle (300, 225, -max(min(mouseX, 800), 0));

 //balloon string
    strokeWeight(3);
    fill(101, 101, 94);
    beginShape();
    curveVertex(20 + (mouseX - 50), 200);
    curveVertex(20 + (mouseX - 50), 200);
    curveVertex(15 + (mouseX - 50), 250);
    curveVertex(5 + (mouseX - 50), 280);
    curveVertex(5 + (mouseX - 50), 280);
    endShape();

//balloon
    fill(249, 112, 104);
    ellipse(20 + (mouseX - 50), 160, 65, 80);
    triangle(5 + (mouseX - 50), 210, 20 + (mouseX - 50), 200, 35 + (mouseX - 50), 210);

//bike

/*wheel*/
    strokeWeight(1);
    fill(255);
    ellipse(15 + (mouseX - 200), 400, 50, 50);
    ellipse(-55 + (mouseX - 200), 400, 50, 50);
/*skeleton*/
    stroke(0);
    line(-55 + (mouseX - 200), 400, -43 + (mouseX - 200), 370);
    line(-43 + (mouseX - 200), 370, 15 + (mouseX - 200), 350);
    line(15 + (mouseX - 200), 330, 20 + (mouseX - 200), 400);
    line(15 + (mouseX - 200), 350, -20 + (mouseX - 200), 400);
    line(-20 + (mouseX - 200), 400, -55 + (mouseX - 200), 400);
    line(-43 + (mouseX - 200), 370, -47 + (mouseX -  200), 350);
    line(-43 + (mouseX  - 200), 370, -15 + (mouseX - 200), 407);
/*seat&handle*/
    fill(0);
    rect(-55 + (mouseX - 200), 350, 20, 10, 20);
    rect(-20 + (mouseX - 200), 407, 7, 5, 5);
    rect(10 + (mouseX - 200), 330, 10, 7, 2);

//path
    noStroke();
    fill(187, 181, 189);
    rect(0, 425, 600, 200);

//bob on bike

/*body*/
    fill(153, 178, 221);
    noStroke();
    beginShape();
    curveVertex(-20 + (mouseX - 200), 275);
    curveVertex(-20 + (mouseX - 200), 275);
    curveVertex(-24 + (mouseX - 200), 280);
    curveVertex(-26 + (mouseX - 200), 280);
    curveVertex(-28 + (mouseX - 200), 300);
    curveVertex(-20 + (mouseX - 200), 320);
    curveVertex(-20 + (mouseX - 200), 340);
    curveVertex(-25 + (mouseX - 200), 350);
    curveVertex(-28 + (mouseX - 200), 350);
    curveVertex(-30 + (mouseX - 200), 350);
    curveVertex(-31 + (mouseX - 200), 350);
    curveVertex(-32 + (mouseX - 200), 350);
    curveVertex(-32 + (mouseX - 200), 350);
    curveVertex(-33 + (mouseX - 200), 350);
    curveVertex(-34 + (mouseX - 200), 350);
    curveVertex(-35 + (mouseX - 200), 350);
    curveVertex(-40 + (mouseX - 200), 350);
    curveVertex(-43 + (mouseX - 200), 350);
    curveVertex(-45 + (mouseX - 200), 350);
    curveVertex(-50 + (mouseX - 200), 350);
    curveVertex(-53 + (mouseX - 200), 350);
    curveVertex(-65 + (mouseX - 200), 340);
    curveVertex(-60 + (mouseX - 200), 300);
    curveVertex(-50 + (mouseX - 200), 280);
    curveVertex(-45 + (mouseX - 200), 277);
    curveVertex(-40 + (mouseX - 200), 277);
    curveVertex(-36 + (mouseX - 200), 278);
    curveVertex(-33 + (mouseX - 200), 276);
    curveVertex(-30 + (mouseX - 200), 274);
    curveVertex(-28 + (mouseX - 200), 272);
    curveVertex(-28 + (mouseX - 200), 272);
    endShape();

/*legs*/
    strokeWeight(1);
    stroke(153, 178, 221);
    line(-26 + (mouseX - 200), 350, -20 + (mouseX - 200), 380);
    line(-52 + (mouseX - 200), 350, -47 + (mouseX - 200), 380);
    line(-80 + (mouseX - 200), 320, -50 + (mouseX - 200), 300);
    line(-50 + (mouseX - 200), 310, -12 + (mouseX - 200), 290);

/*eyes*/
    noStroke();
    fill(0);
    ellipse(-47 + (mouseX - 200), 300, 5, 10);
    ellipse(-37 + (mouseX - 200), 298, 5, 10);
    

/*background shapes*/
    if (mouseX < 200) {
        fill(251, 216, 127);
    } else if (mouseX < 300) {
        fill(230, 170, 206);
    } else if (mouseX < 400) {
        fill(216, 241, 160);
    } else if (mouseX < 500) {
        fill(164, 145, 211);
    } else if (mouseX >= 500) {
        fill(224, 96, 126);
    }

    translate(width / 2, height / 2);
    rotate(PI / 3.0);
    rect(-26, -26, 12, 12);
    rect(-80, 80, 22, 22);
    rect(-36, 180, 32, 32);
    rect(10, 35, 18, 18);
    rect(100, -160, 20, 20);



}

I was inspired by a game I used to play all the time called Dumb Ways to Die. I found it challenging making sure different components weren’t overlapping each other in places I didn’t want them to be.

LO – 03 : COMPUTATIONAL FABRICATION

3D WOOD PANEL by WOOD-SKIN
Chalgrin by Quadri Fiore Architecture, Paris, France, 2019

Chalgrin by Quadri Fiore Architecture is an exploration on mesh sheets and wood-skin. The elegantly tessellated design creates a unique experience as an entrance and almost seems to warp the space.

The tessellation seamlessly flows with the space, so much so that the design takes even windows, arches, spotlights, and doors into consideration. This project was executed using Quadri Fiore’s custom MESH-SHEETS, which allow for the structure to wrap around the space the way that it does. The firm utilised their own program where they were able to abstract and manipulate the fabrication as needed.

This form of “wood-skin” is very commonly seen, especially in architecture. Creating forms which appear free flowing and random are often products of complex and intricate iterations, based solely on a system which allows for forms to be organic.

CHALGRIN – Paris, France

Project 3 – Dynamic Drawing

This project was designed to produce the numbers “104” if the user puts their mouse in the right location. The red moving square grows bigger and more red the farther you get from the correct point. I was inspired by the spinning motion of many other peer projects as well as some of the examples given. The change I wanted to make was to try and make it a game in which the user has to rotate back and forth until they can find the hidden message. I was also inspired by Prof. Cortina in using “104” as the hidden Easter egg like he has in past examples/ labs.

sketch

var xvel = +7			//sets velocity for red square			//bgoeke
var x = 0
var y = 0
var r = 225
function setup() {
    createCanvas(600, 450);
    background(220);
}

function draw() {
	background(150, 150, 0);
	push();
	translate(300, 225);
	rotate(radians(mouseX));						//rotates according to position of mouse
	fill(255, 255, 0);
	rect(0, 0, mouseX, mouseY);						//rectangle that makes #1
	pop();
	push();
	translate(425, 300);
	rotate(radians(mouseX));
	fill(0, 255, 255);
	ellipse(0, 0, 50 + mouseX, 50 + mouseY);			//ellipse that makes #0
	pop();
	push();
	translate(550, 225);
	rotate(radians(mouseX + 40));
	fill(0, 255, 255);
	rect(0, 0, mouseX, 100);						//rectangle that makes top left line of #4
	rotate(radians(mouseX - 40));
	fill(0, 255, 255);
	rect(0, 0, mouseX, 300);						//rectangle that makes vertical line of #4
	pop();
	push();
	translate(490, 300);
	rotate(radians(0));
	fill(255, 255, 0);
	rect(mouseX, 0, 100 - mouseX, 225 - mouseY);		//rectangle that makes horizontal line of #4
	pop();
	fill(mouseX - 255, 0, 0);
	rect(x, y, mouseX, mouseY - 225);					//red rectangle that covers screen when mouse is in wrong direction
	x += xvel;
	if(x>600-(r/2)) {    //makes rect not go past 600
      xvel =-xvel
    };
     if(x<0){    //makes rect not go past 0
      xvel =-xvel
	};
}

This is an example of the hidden “104”. The finished project can look a little different and still form “104”.

Project-03: Dynamic Drawing

A little seesaw! The seesaw goes up and down with the horizontal position of your mouse. The little balls change shape with the speed of your mouse and change colors when they hit the seesaw.

dynamicdrawing
var balanceX = 0;			//set center seesaw position in the x direction
var balanceY = 0;			//set center seesaw position in the y direction
var balanceAngle = 0;		//set the angle of the seesaw based on the mouseX position
var ballSquish = 0;			//sets how tall the ball is based on the velocity of the mouse			
var ballStretch = 0;		//sets how wide the ball is based on the velocity of the mouse
var leftBallY = -63;		//sets the vertical position of the left ball
var rightBallY = -63;		//sets the vertical position of the left ball
var pink1 = 255;			//sets original r value for left ball
var	pink2 = 151;			//sets original g value for left ball
var pink3 = 202;			//sets original b value for left ball
var orange1 = 249;			//sets original r value for left ball
var orange2 = 176;			//sets original g value for left ball
var orange3 = 32;			//sets original b value for left ball

function setup() {
    createCanvas(600, 450);
    background(255)
    rectMode(CENTER);
    frameRate(20);
}

function draw() {
	//set color of the sky
	background(160, 218, 223);

	//draw cloud 1
	fill(255);
	noStroke();
	beginShape();
	curveVertex(288,111);
	curveVertex(261,118);
	curveVertex(254,135);
	curveVertex(237,142);
	curveVertex(217,146);
	curveVertex(210,166);
	curveVertex(225,183);
	curveVertex(243,186);
	curveVertex(260,188);
	curveVertex(269,197);
	curveVertex(285,197);
	curveVertex(304,197);
	curveVertex(311,186);
	curveVertex(328,192);
	curveVertex(345,183);
	curveVertex(380,181);
	curveVertex(383,161);
	curveVertex(377,144);
	curveVertex(353,144);
	curveVertex(347,127);
	curveVertex(323,115);
	curveVertex(307,127);
	endShape();

	//draw cloud 2
	beginShape();
	curveVertex(495,20);
	curveVertex(451,29);
	curveVertex(449,46);
	curveVertex(431,60);
	curveVertex(409,61);
	curveVertex(408,101);
	curveVertex(480,123);
	curveVertex(501,111);
	curveVertex(515,106);
	curveVertex(547,122);
	curveVertex(559,100);
	curveVertex(567,73);
	curveVertex(586,62);
	curveVertex(566,43);
	curveVertex(525,53);
	endShape();

	//draw cloud 3
	beginShape();
	curveVertex(86,48);
	curveVertex(42,36);
	curveVertex(37,78);
	curveVertex(35,97);
	curveVertex(73,119);
	curveVertex(110,89);
	curveVertex(168,91);
	curveVertex(169,59);
	curveVertex(129,37);
	endShape();

	fill(255, 245, 103);	//set color of seesaw base
	noStroke();
	triangle(306, 324, 234, 432, 378, 432);		//draw seesaw base
	
	fill(187, 211, 48);		//set ground color to green
	rect(300, 441, 600, 18)		//draw grass
	
	translate(306, 324);	//move the origin to the center of the seesaw
	//the seesaw will rotate with the horizontal position of the mouse
	if (mouseX < width) {
		rotate(radians(45 * (mouseX - 300)/600));
	}
	fill(255, 245, 103);
	rect(balanceX, balanceY, 551, 18);							//draw seesaw
	
	fill(pink1, pink2, pink3);										//set left ball initial color to pink
	ellipse(-234, leftBallY, 108 - ballSquish, 108 + ballStretch);	//draw left ball
	
	fill(orange1, orange2, orange3);											//set right ball initial color to orange
	ellipse(216, rightBallY, 108 + ballSquish, 108 - ballStretch);		//draw right ball

	ballSquish = (mouseY - pmouseY)*2							//change the height of each ball to vary with mouse velocity
	ballStretch = (mouseX - pmouseX)*2							//change the width of each ball to vary with mouse velocity

	//when the left ball bounces, its color will change to dark orange
	if (leftBallY + 108 + ballSquish >= 48){
		pink1 = 242
		pink2 = 122
		pink3 = 5
	}
	else {
		pink1 = 255
		pink2 = 151
		pink3 = 202
	}
	//when the right ball bounces, its color will change to dark pink
	if (rightBallY + 108 + ballSquish >= 48){
		orange1 = 220
		orange2 = 51
		orange3 = 134
	}
	else {
		orange1 = 249
		orange2 = 176
		orange3 = 32

	}

}

Looking Outwards 03: Computational Fabrication

The Vespers project is a fascinating ongoing enterprise by the Mediated Matter research group in the Media Lab at MIT. This project, inspired by the concept of the “death mask” of old, serves to memorialize the dead; here, the makers integrate many disciplines to re-engineer complex forms and symbols through each series of masks, using computational modeling techniques to physically represent culturally and philosophically relevant questions.

Some of the masks generated for the Vespers project by MIT’s Mediated Matter research group (2016).

For instance, the second series of masks serves to negotiate the divide between life and death. They take cues from natural phenomena and forms and, using data and environmentally responsive materials, are able to digitally model and fabricate each mask. The makers use spatial mapping algorithms to encode the specific colors, geometry, and form of each mask. I find these works interesting as they are not only aesthetically impressive but serve as a model of how we might computationally “grow” and design organic tissues and prosthetics to meet specific individual needs.

This video documents a mask in the third series of the Vespers project which contains pigment-producing microorganisms.

Project 3: Dynamic Drawing

Contrary to popular belief, fish bowls are too small for the average betta or goldfish and will likely either stunt their growth or kill them due to the lack of space. I thought it would be cool to bring some awareness about this overlooked fact through this project. The fish will either live and emit bubbles or flip over and die depending on the mouse’s position on canvas.

fishbowl
var bgColor;
var bowlColor;
var bodyPurple;
var bodyGray;
var bodyAngle;
var eyeAngle;
var pupilAngle;
var finOrange;
var finGray;
var floatY;

var angle = 0;
var offWeed = 1;
var wiggleWeed = 1;
var bubbles = [];

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

    bgColor = color(255, 247, 219);
    bowlGreen = color(110, 245, 234, 120);
    bowlGray = color(190, 212, 209, 200);
    weedGreen = color(78, 186, 159);
    weedGray = color(114, 130, 126);
    sandOrange = color(245, 147, 132);
    sandGray = color(173, 160, 158);
    bodyPurple = color(155, 159, 242);
    bodyGray = color(113, 113, 117);
    finOrange = color(255, 115, 87);
    finGray = color(156, 144, 142);
    bubblesBlue = color(92, 209, 203, 80);
    invisibleColor = color(92, 209, 203, 0);
    castleColor = color(255, 181, 181);
}

function bubble(x,y) {
    let bubblesColor = map(mouseX, 0, width, 0, 1);
    var lerpBubbles = lerpColor(bubblesBlue, invisibleColor, bubblesColor);
    fill(lerpBubbles);
    ellipse(x, y, 15);
  }

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

    //seaweed
    let weed = map(mouseX, 0, width, 0, 1);
    var weedColor = lerpColor(weedGreen, weedGray, weed);
    fill(weedColor);

    beginShape();
    vertex(y + 500, x);
    for(var x = 0; x < width; x++){
        var angle = offWeed + x * 0.03;
        var y = map(sin(angle), -wiggleWeed, wiggleWeed, 170, 200);
    vertex(y + 90, x + 100);
  }
    vertex(275, 100);
    endShape();
    offWeed += 0.01;
  
    beginShape();
    vertex(newY + 600, x - 200);
    for(var x = 0; x < width; x++){
        var angle2 = offWeed + x * 0.02;
        var newY = map(sin(angle2), -wiggleWeed, wiggleWeed, 250, 230);
    vertex(newY - 10, x + 160);
  }
    vertex(newY - 5, x);
    endShape();
    offWeed += 0.03;
  
    beginShape();
    vertex(freshY, x);
    for(var x = 0; x < width; x++){
        var angle3 = offWeed + x * 0.04;
        var freshY = map(sin(angle3), -wiggleWeed, wiggleWeed, 175, 160);
    vertex(freshY + 40, x + 140);
  }
    vertex(freshY + 30, x);
    endShape();
    offWeed += 0.01;

    //cover bottom half of seaweed
    fill(bgColor);
    rect(50, 320, 400, 200);

    //castle
    fill(castleColor);
    rect(355, 250, 55, 70);
    rect(355, 240, 10, 10);
    rect(380, 240, 10, 10);
    rect(400, 240, 10, 10);

    //castle window
    fill(161, 93, 93);
    rect(370, 260, 10, 20, 10);

    //rocks
    fill(97, 100, 201);
    ellipse(350, 310, 40, 40);
    fill(247, 104, 185);
    ellipse(230, 310, 40, 30);
    fill(171, 92, 191);
    ellipse(320, 310, 40, 30);
    fill(119, 224, 172);
    ellipse(255, 310, 35, 25);
    fill(247, 104, 185);
    ellipse(390, 310, 25, 25);

    //fishbowl
    let fishbowl = map(mouseX, 0, width, 0, 1);
    var bowlColor = lerpColor(bowlGreen, bowlGray, fishbowl);
    fill(bowlColor);
    ellipse(width/2, height/2, 300, 300);

    //bubbles
    bubble(240, floatY + 20);
    bubble(245, floatY + 10);
    bubble(250, floatY + 40);
        
    if (mouseX <= width/2.2) {
        floatY = floatY - 0.4
    } else {
        floatY = 150;
    }

    //fin colors
    let finColor = map(mouseX, 0, width, 0, 1);
    var fishFins = lerpColor(finOrange, finGray, finColor);
    fill(fishFins);

    push();
    //rectMode(CENTER);
    translate(width/2, height/2);
    let finAngle = atan2(mouseY - height/2, mouseX - width/2);
    rotate(finAngle);
    //bottom fin
    arc(0, -25, 40, 40, PI + HALF_PI, TWO_PI);

    //tail
    arc(-40, 0, 75, 75, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
    pop();

    //top fin
    push();
    translate(width/2, height/2);
    let topfinAngle = atan2(mouseY - height/2, mouseX - width/2);
    rotate(topfinAngle);
    shearX(-35);
    rect(-10, 25, 50, 25, 70, 5, 70, 10);
    pop();

    //fish body
    let bodyColor = map(mouseX, 0, width, 0, 1);
    var fishBody = lerpColor(bodyPurple, bodyGray, bodyColor);
    fill(fishBody);
    push();
    rectMode(CENTER);
    translate(width/2, height/2);
    let bodyAngle = atan2(mouseY - height/2, mouseX - width/2);
    rotate(bodyAngle);
    rect(0, 0, 100, 55, 30);

    //eye
    fill(255);
    ellipse(25, 5, 20, 20);

    //pupil
    var stopMouseX = constrain(mouseX, 0, 600); //constrain mouseX to canvas
    let dilate = map(stopMouseX, 0, width, 10, 18);
    fill(0);
    ellipse(25, 5, dilate, dilate);

    //mouth
    fill(fishBody);
    rect(50, 0, 10, 5, 20);
    rect(50, -5, 10, 5, 20);
    pop();


    //sandy bottom
    push();
    noStroke();
    let sandColor = map(mouseX, 0, width, 0, 1);
    var coarse = lerpColor(sandOrange, sandGray, sandColor);
    fill(coarse);
    arc(300, 310, 225, 120, TWO_PI, PI);
    pop();

    //bubbles floating
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].move();
        bubbles[i].show();
        bubbles[i].update();
    }

    //top of the fishbowl
    fill(bgColor);
    rect(50, 0, 400, 120);
}

Project-03-Dynamic Drawing

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

graanak-03-project
//Graana Khan
// Section B

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

function draw() {

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

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

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


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

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

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

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

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

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

    if(mouseX >= width/2){

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

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

Looking Outwards 03: Computational Fabrication

I was really drawn to Kate Hartman, a designer of computational wearables,
and her Porcupine Experiments, a project based on a wearables made from
everyday materials. For her particular project, Hartman opted to use
cardboard, brass fasteners and washers, nylon webbing, and triglide
fasteners. The vest’s design was created in Autodesk Fusion 360 and cut
out with an Epilog laser cutter. Hartman then hosted a Porcupine Workshop
in San Francisco, giving participants free materials and allowing them
to create their own vests with their hands and imaginations.

I think this project is quite enjoyable and unique due to the nature of the
vests. The designs are very spiky and jarring and really emulate a porcupines’
quills, which is very different from typical pleasing design conventions and
brings the vests’ usefulness into question (probably what Hartman was intending.) I also enjoyed how accessible these wearables are. As long as anyone has some cardboard, they’re free to make their own designs from Hartman’s blueprints and create some truly unique and playful vests.

For anyone who also wants to make a porcupine vest, they can find Hartman’s free online instructions here.