Month: September 2020

Project 02 – Dynamic Drawing

I tried to visualize the sound waves when listening to music in a minimalistic way.  

sketch
//Stefanie Suk
//15104 Section D

var x = 180; //starting position of rectangle 
var y = 200; //y position of rectangle

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

function draw() {
	background(0);

	//white rectangle box
	noFill()
	stroke(255);
	strokeWeight(2);
	rect(150, 160, 310, 125);
	
	// Rectangles from left to right
	noStroke();
	fill(235, 234, 232); //color of rectangle
	rect(x, map(mouseX, 0, width, y, y+8), 10, 50); //position of rectangle
	fill(172, 176, 191);
	rect(x+20, map(mouseX, 0, width, y, y-2), 10, 40);
	fill(178, 208, 235);
	rect(x+20*2, map(mouseX, 0, width, y, y+5), 10, 30);
	fill(195, 217, 240);
	rect(x+20*3, map(mouseX, 0, width, y, y-5), 10, 45);
	fill(214, 231, 243);
	rect(x+20*4, map(mouseX, 0, width, y, y-3), 10, 15);
	fill(226, 238, 249);
	rect(x+20*5, map(mouseX, 0, width, y, y+3), 10, 50);
	fill(214, 231, 243);
	rect(x+20*6, map(mouseX, 0, width, y, y+7), 10, 35);
	fill(195, 217, 240);
	rect(x+20*7, map(mouseX, 0, width, y, y-7), 10, 60);
	fill(178, 208, 235);
	rect(x+20*8, map(mouseX,0,width,y,y-2), 10, 50);
	fill(172, 176, 191);
	rect(x+20*9, map(mouseX, 0, width, y, y+2), 10, 30);
	fill(235, 234, 232);
	rect(x+20*10, map(mouseX, 0, width, y, y-6), 10, 35);
	fill(172, 176, 191);
	rect(x+20*11, map(mouseX, 0, width, y, y-4), 10, 10);
	fill(178, 208, 235);
	rect(x+20*12, map(mouseX, 0, width, y, y+5), 10, 20);


	// Top circles, left to right
    let d = map(mouseY, 0, width, 15, 30); //scale mouseY value
    fill(249, map(mouseX, 0, height, 240, 200), 225); //color of circle, change
    ellipse(width/7, height/7, d, d); //position and size of circle
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*2, height/4, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*3, height/7, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*4, height/4, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*5, height/7, d, d);
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7*6, height/4, d, d);

    // Bottom circles, left to right
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7, height/8*6, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*2, height/7*6, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*3, height/8*6, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*4, height/7*6, d, d);
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*5, height/8*6, d, d);
    fill(249, map(mouseX, 0, height, 240, 200), 225);
    ellipse(width/7*6, height/7*6, d, d);
}

LO 3 – Computational Fabrication

Silk Pavilion by Mediated Matter Group

The Silk Pavilion is an incredible sculpture that combines the biological and technological world together. The silkworm’s ability to generate 3D cocoons out of silk and the digital fabrication of geometric architectural shapes were seamlessly blended to create a sturdy, yet light structure. MIT Media Lab started with a CNC machine that created an underlying structure that will hold each section of the silk and ultimately guide the silkworms.The group believes in the power of a single material as a system to enable strength and tension. There is an intersection between technology and biology which digital fabrication technologies can explore. In this case, the silkworms build and destroy parts of the nest for it to become a stronger material. They used computational techniques to model the natural processes of growth. This theme is allowing growth to happen naturally as seen in their computational design, by allowing the machine to determine which patterns would be most durable.

Looking Outwards 03 – Computational Fabrication

Liquid Speed by Reebok and BASF

Liquid Speed is a 3d printed energy-return running shoe designed by Reebok and BASF. Printed with a special high-rebound liquid material, the outsole has wings that stretches and wraps around the side of the shoe. This gives a perfect customized fit when the shoe is laced up. What I really admire about this product is that it utilizes 3d printed material in an effective way to give the most personalized experience with the shoe. Having stretchable wings on each side of the shoe to tighten up and mold any desired foot to the shoe impresses me as a design major. The liquid factory uses state of the art machinery and software to build a system that draws the outsole of the shoe with a urethane-based liquid developed by BASF. The important part of this project is that the shoe does not need molds to be created. Molds are expensive, which is the reason why shoes are expensive in price. Developing a technology that eliminates the process of using molds is an innovative application in the shoe industry. I can see that the curvy shape of the outsole and wings give a smooth yet unique design to the shoe, while the reflective red color gives a powerful and strong emphasis to the overall design. 

Video of Liquid Speed from Reebok Liquid Factory

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

cyhan-03-project
function setup() {
    createCanvas(600,450);
    rectMode(CENTER);
}

function draw() {
  background(mouseX,mouseY,244);
  noStroke();

  //creating rectangles
  var w = 200;
  var h = 200;
  if(mouseX < width/2){
    w = (width/2 - mouseX) + 50;
  }else {
    h = (width/2 - mouseX) + 50
  }
  push();
  translate(300,225);
  rotate(radians(mouseX));
  fill(255,mouseY,mouseX);
  ellipse(50,100,100);
  fill(255,mouseX,mouseY);
  ellipse(100,100,100);
  fill(mouseY,255,mouseX);
  ellipse(150,100,100);
  fill(214,mouseY,mouseX);
  ellipse(200,100,100);
  fill(mouseY,mouseX,255);
  ellipse(250,100,100);
  fill(0,mouseY,mouseX);
  ellipse(300,100,100);
  pop();
  
  fill(255,mouseX, mouseY);
  rect(width/4, height/2,w,h);
  rect(width/2, height/4,w,h);
  rect(width/1.3, height/2,w,h);
  rect(width/2, height/1.3,w,h);
  stroke(1);
  fill(255);
  ellipse(width/4, height/2,w/2,h);
  ellipse(width/2, height/4,w/2,h);
  ellipse(width/1.3,height/2,w/2,h);
  ellipse(width/2, height/1.3,w/2,h);
  fill(0);
  ellipse(width/4, height/2,w/5,h);
  ellipse(width/2, height/4,w/5,h);
  ellipse(width/1.3,height/2,w/5,h);
  ellipse(width/2, height/1.3,w/5,h);
  
noStroke();  
fill(255,0,0);
ellipse(mouseX,mouseY,40);
ellipse(mouseX + 30,mouseY,40);
triangle(mouseX-20,mouseY,mouseX+50,mouseY,mouseX+15,mouseY + 60);
  
  
}

For this project, I wanted to create four blinking eyes that changed according to the location of the mouse. I also added multiple color changing circles that rotated around the center of the canvas as well as a heart cursor that allowed the viewer to keep track of their mouse.

Looking Outwards 3

Looking at Andrew Kudless’s works was very inspiring. Its complexity in its form, unity, and the pattern is very beautifully constructed. I love how computationally generated pattern can result in an amazing physical object. I am not sure of what kind of algorithms were used to generate these works, but I guess it would be the recursive one which generates pattern. I love how they are beautifully designed yet conceptual and abstract that it evokes curiosity. I was surprised how there are multiple layers of parameters that are used to create those works. One of his works, Honeycomb Morphologies, is beautifully executed. It “explores integration strategies for a particular industrially produced material system for use in architectural applications.” I love how it is theoretical, numerical, and patterned, yet it has architectural system to it.

https://www.matsys.design/honeycomb-morphologies

Project-3-Dynamic Drawing

I chose to show the clock and time with the day/night change, along with the alarm bell going on and off.

sketch 

//Jae Son, section C

var x = 0;
var y = 0;
var angle = 0;

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

function draw() {
  if(mouseX<320){ //when mouse is on the left side
  background(151,215,240); //it is during the day - light blue background
  noStroke();
  fill(255,150,60);
  ellipse(mouseX,80,100,100);  //orange sun is up
  } else { //when mouse is on the right side
  background(31,41,84); //it is during the night - dark blue background
  noStroke();
  fill(255,227,90);
  ellipse(mouseX,80,100,100); //yellow moon is up
  }
  fill(46,178,187);
  noStroke();
  quad(230,360,250,360,270,300,250,300); //clock leg
  quad(380,322,400,322,410,360,390,360); //clock leg
  push();
  translate(250,130); 
  rotate(PI*3/4); 
  rect(0,0,25,35); //bridge between the clock body and the bell
  translate(-70,-110);
  rotate(PI/2);
  rect(-5,25,25,35); //bridge between the clock body and the bell
  pop();
  arc(220,125,mouseY/3.5,mouseY/3.5,PI*3/4,PI*7/4); //alarm is on when mouse is on the bottom - bell is bigger
  arc(415,125,mouseY/3.5,mouseY/3.5,PI*5/4,PI/4) //alarm is on when mouse is on the bottom - bell is bigger
  ellipse(320,225,250,250); //clock body frame
  fill(255);
  ellipse(320,225,220,220); //clock body 
  fill(46,178,187);
  ellipse(320,225,20,20); //clock center
  push();
  fill(46,178,187);
  translate(318,225);
  rotate(radians(30)+mouseX/100); //clock hour hand rotates clockwise 
  rect(0,0,5,80);
  pop();

}

Project-03 Dynamic Drawing

sketch-dynamic – square

	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var r = 0;
var g = 0;
var b = 0;
var angle = 0 ;
var w = 0;
var dir = 1;
var clickNumber = 0;

 
function setup() {
    createCanvas(600,450);
    frameRate(15);
    background(100);
    
}
 
function draw() {
    
    fill(r,g,b);
    stroke(0);
    push();

    // make the rectangle rotate around mouse
    translate(mouseX,mouseY);
    rotate(radians(angle));
    rect(mouseX/3, mouseY/3, min(mouseX/2,mouseY/2), min(mouseX/2,mouseY/2));

    //change the color and size of the second rectangle, and make it rotate anticlockwise
    fill(r,g+30,b+w);
    rect(mouseX,mouseY,w,w);
    rotate(radians(-angle));

    pop();
    angle = angle + 10;

if ( clickNumber == 15){
    noloop();
}



   
}


function mousePressed() {

     clickNumber = clickNumber + 1;

    // change red everytime mouse pressed and make it repeatable

    if (r >= 255){
        r = 0;
    } else {
        r = r + 50;
    }
    
   
   // controle the size of the second rectangle and make it change between 0- height/2
   
    if (w >= height/2){
        dir = -1 ;
    } 

    if ( w < 0){ 
        dir = 1 ;
    }

    w = w + dir*20;
    }

In this painting, you can control the circulation center by the position of your mouse and the size of the second square by your click number. You can click 15 times then the code will stop running and you will have your own painting.Enjoy.

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.