Project 03 – Dynamic Drawing

peachp3
var angle = 0
var move = 0


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

function draw() {
  //background changes color
  background(217, (constrain(mouseY,200,450)), 250);
 
  //ring appears
    if (mouseY<height/2){
    noFill();
    stroke(255, 248, 156)
    ellipse(width/2, height/2, 300)
    }
  else {
    noFill();
    stroke(255,248,156);
    ellipse(width/2, height/2, 500);
  }
  //body
  noStroke()
    fill(32, 70, 133)
    triangle(width/2, height/2 - 70, 220, 400, 380, 400)
 
  //table
  fill(250, 204, 177);
    rect(0, height/4*3, width, height/4*3);
  fill(168, 112, 74)
    rect(0, 430, width, 20)
 
  //head
  fill(255, 235, 186);
    ellipse(width/2, 200, 170);
 
  //hair
  fill(0)
  arc(width/2, constrain(mouseY-100, 100, 170), 180,180, PI, 0)
 
  //left arm
  push();
    translate(width/2, height/2+70)
  fill(32, 70, 133)
    rotate(radians(mouseX/100*5))
      rect(-100,0, 100, 30);
  fill(255, 235, 186)
    ellipse(-100,15, 28)
  pop();
 
  //right arm
  push();
    translate(width/2, height/2+70)
  fill(32, 70, 133)
    rotate(radians(-mouseX/100*5))
      rect(0,0, 100, 30);
  fill(255, 235, 186)
    ellipse(100,15, 28)
  pop();
 
  //eyes
  noFill()
  stroke(0)
  strokeWeight(3)
    arc(width/2-35, 190, 40,40, PI, 0);
    arc(width/2+35, 190, 40,40, PI, 0);

//mouth
if (mouseY < height/2){
  push();
translate(300,240)
  scale (1.2)
    fill(0)
    ellipse(0,0, 60);
  fill(242, 117, 92)
  ellipse(0,10,40,20)
  pop();
}
  else {
    push();
    translate(300,240)
    scale(0.75);
  fill(0)
      ellipse(0,0,60);
  fill(242, 117, 92)
    ellipse(0,10,40,20)
    pop();
  }
//tomato
  if (mouseY<height/2){
    push();
      noStroke();
      fill(255,0,0)
        ellipseMode(CENTER)
      translate(480,150)
    scale(2.5)
      rotate(radians(angle));
        ellipse(0,0,30);
    noStroke();
      fill(0,255,0)
        ellipse(0,-10,10,5);
    pop();
    angle +=8
  }
   
  else {
 
    push();
    noStroke();
    fill(255,0,0)
      ellipseMode(CENTER)
    translate(480,350)
    scale(1.4)
    rotate(radians(angle));
      ellipse(0,0,30);
    noStroke();
    fill(0,255,0)
      ellipse(0,-10,10,5);
    pop();
      angle -=10
  }
//orange
    if (mouseY<height/2){
      push();
   translate(120,300)
    scale(2.0);
    noStroke();
    fill(245, 188, 103)
      ellipseMode(CENTER)

    rotate(radians(-angle));
      ellipse(0,0,30);
    noStroke();
    fill(150, 136, 114)
      ellipse(0,-10,5, 10);
      pop();  
    angle-=5
    }
 
    else {
      push();
    translate(120,100)
    scale(3.0);
      noStroke();
    fill(245, 188, 103)
      ellipseMode(CENTER)
    rotate(radians(-angle));
      ellipse(0,0,30);
    noStroke();
    fill(150, 136, 114)
      ellipse(0,-10,5, 10);

      pop();
      angle += 5
     
    }
  fill(250)
  noStroke()
  ellipse(move, 380, 70,30)
  noFill()
  strokeWeight(3)
  stroke(200)
  ellipse(move, 380, 50, 20)
  move = move + 10
  if (move>width){
    move = -move
  }
 
 
 
}

It was difficult creating this efficiently, and it was particularly hard for me personally to cause parameters to counter each other. Inspired by my little cousin who gets cranky when he is hungry.

LookingOutwards-03

I admired the entry work by matsys for the Tulum Site Museum competition. I was fascinated by the creator’s ability to demonstrate depth within their works. With the inclusion of a person within their work, it was relatively easy to understand how large of a museum it would be. Immediately, I began seeing and thinking “that must be a window”, or “that must be a mirror.” 

As far as the algorithms, it was never explicitly stated but I would assume that it was done through 3D rendering, with the implementation of layers to show how the rooms within the museum should be arranged. Based on matsys’ previous works, I can see how their artistic sensibilities are manifested in this work. Most of their works include a porous material/texture, and appear almost sponge-like. In the entry work for the Tulum Site Museum competition, the walls have many holes/empty spaces in them. It seems so sponge-like that it reminds me of coral reefs. 

This is from mastys’ entry work for the Tulum Site Museum competition. Here, they have created a rendering of what they imagine the interior of the museum should look like. You can see how mastys has incorporated the porous-like appearance in the walls and the ceiling. With the inclusion of what appears to be a shadow of a person, it is useful in making a judgment of how large the museum would be.

https://www.matsys.design/tulum-site-museum

LO-03-Computational Art

Silk Pavilion II

The final presentation of the project.

This project explores how humankind can combine kinetic manufacturing with the nature’s biological construction. I’m most amazed by the fact that the creators actually directed the movement of the silkworms to monitor the thickness and silk layer produced. I admire this aspect so much because silkworms are living creatures and there are is no way that we can communicate with them to discipline or guide them, which makes the process of developing the kinetic manipulation very difficult since one tiny miscalculated factor could lead to a totally unexpected result structure.

I assume the team combined chemical, biological, physics, architectural and programming knowledge to put this project together. They should’ve programmed the various environmental factors of the room to be within a certain range for the silkworms to move the way they are expected to as well as calculating the position and size of the holes in the structure that release tensile stress.

During the construction of the structure.

The team’s architectural background made this project a good combination of the natural curvy shape and scientific cleanness of the structure.

LO-03-Computational Fabrication

Neri Oxman’s Silk Pavilion.  2013.

Mediated Matter GroupSilk Pavilion on display.

The Silk Pavilion  uses a combination of computational and biological fabrication to create a pavilion that articulates the beauty and structure of silk while using a sustainable method of gathering silk. The project addresses that about 1,000 silk cocoons are boiled per tshirt, which kill the larva in the process. The silk pavilion makes the silkworms spin in sheets rather than cocoons due to the human made structure and grid, thus allowing a more sustainable method of harvesting silk. 

The primary structure uses a CNC (computer numerical control) machine to lay down 25 panels of silk thread. 6,500 silkworms were then used to finish the rest of the structure. 

The algorithms that programmed the robotic arm to create the primary structure must have first analyzed the natural biological process and pattern that silkworms take when forming cocoons as the project wanted to replicate that process. Neri Oxman’s team attached small magnets on the heads of the silkworms to track their movements, and using that data they then created a path for the arm to move in ways like the worms. 

I found this project fascinating for a multitude of reasons, the first being the combination of biological processes and digital processes. Additionally, the Silk Pavilion is able to achieve an architectural scale of a process that is done on a much smaller scale (silkworm cocoons). In this case, studying biological formations allows for us to vary scales of production of natural systems. By analyzing nature we can create complex parametric designs that allow us to reflect organic structures and designs with computer based methods of learning. Oxman’s ambition to combine the organic with computers reflects in the pavilion in its large form that displays the natural path of silkworms shown in varying patches of density.

Project 3 – Dynamic Drawing

Assemble the astronaut to see a funky-looking space! Careful though, one wrong move and everything will float away.

sketch
/*
 * Michelle Kim
 * michell4
 * Section B
 */
 
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0);
    stroke(120);
    strokeWeight(1);
    var x = max(min(mouseX, 600), 0);
    var y = max(min(mouseY, 600), 0);
    var sizeX = x * 350 / 400;
    var sizeY = y * 350 / 400;
    //purple planet
    fill(188, 123, 238);
    ellipse(10 + x * 300 / 600, 225, sizeX / 4);
    //purple planet's orange stripes
    fill(253, 106, 68);
    rect(x * 290 / 600, 200, sizeX / 9, sizeY / 30);
    rect(x * 270 / 600, 225, sizeX / 9, sizeY / 30);
    rect(x * 290 / 600, 250, sizeX / 9, sizeY / 30);
    //yellow planet and rings
    noStroke();
    fill(255, 209, 20);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 5);
    ellipse(x * 160 / 600, y * 300 / 600, sizeX / 2, sizeY / 7);
    //yellow planet's squares
    stroke(120);
    strokeWeight(1);
    fill(92, 106, 228);
    square(x * 130 / 600, y * 330 / 600, sizeX / 40);
    square(x * 130 / 600, y * 240 / 600, sizeX / 65);
    square(x * 180 / 600, y * 340 / 600, sizeX / 45);
    square(x * 160 / 600, y * 260 / 600, sizeX / 20);
    //blue planet
    fill(123, 230, 238);
    ellipse(400 - x * 300 / 600, 300 + y * 300 / 600, sizeY * 1.2);
    //blue planet's green dots
    fill(105, 158, 109);
    ellipse(x * 150 / 600, 270 + y * 300 / 600, sizeY / 3);
    ellipse(x * 290 / 600, 250 + y * 300 / 600, sizeY / 5);
    ellipse(x * 290 / 600, 310 + y * 300 / 600, sizeY / 15);
    //astronaut
    stroke(0);
    strokeWeight(3);
    fill(255);
    //astronaut's head
    ellipse(655 -  x * 200 / 600, 20 + y * 300 / 600, sizeX / 3);
    arc(475, 125, 45, 40, radians(190), radians(250));
    arc(471, 140, 45, 40, radians(190), radians(200));
    //astronaut's left hand
    ellipse(265 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's right hand
    ellipse(415 + x * 200 / 600, 100 + y * 300 / 600, sizeX / 10);
    //astronaut's left foot
    ellipse(310 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's right foot
    ellipse(370 + x * 200 / 600, 190 + y * 300 / 600, sizeX / 10);
    //astronaut's body
    rect(270 + x * 200 / 600, 70 + y * 300 / 600, sizeX / 3, sizeY / 2);
    ellipse(630 -  x * 200 / 600, 100 + y * 300 / 600, sizeX / 20);
    ellipse(630 -  x * 200 / 600, 130 + y * 300 / 600, sizeX / 20);
}

Project-03: Dynamic Drawing

I was inspired by album art by the band Surfaces. I liked the way their album art had soft pastel colors and the depth it always presented. I started with the background mountains, trees, and roads first. It took me a while to make all the trees because I had to layer triangles, and the car took a lot of time to accurately have all the car parts move with respect to mouseX. If you click, the headlights thickness will increase, and the color of the sun will change. If you move mouseX, the car will move. If you move mouseY, the clouds will move, the background sky color will change, and the sun size will change.

sketch
//Annie Kim
//andrewID anniekim
//SectionB

var sunangle = 0
var suncolorR = 242
var suncolorG = 244
var suncolorB = 190
var headlighttop = 370
var headlightbottom = 395
var star1angle = 0
var star2angle = 0
var star3angle = 0
var star4angle = 0
var sundiameter = 150

function setup() {
    createCanvas(600, 450);
    background(14, 40, 91); //blue background
}

function draw() {
	//background sky - blue if mouseY is in top half, pink if in bottom half
	if (mouseY < (height * 0.50)) {
        background(15, 40, 91);

    } else if (mouseY > (height * 0.5)) {
        background(240, 210, 209);
    }
	//sun rising and moving
    push();
	translate(300, 225); //moving sun's origin to middle of screen
    rotate(radians(sunangle)); // rotating in circle clockwise
    fill(suncolorR, suncolorG, suncolorB);
    noStroke();
	circle(50, 150, sundiameter + (mouseY/3)); //sun made
	pop();
	sunangle = sunangle + 2.5; //med rotation speed
    

    //cloud#1
	fill(255); //white color
	stroke(255);
	point(mouseY - 140, 55); //points of the first cloud to connect
    point(mouseY - 185, 50);
	point(mouseY - 220, 52)
    point(mouseY - 260, 54);
	point(mouseY - 290, 55);
	point(mouseY - 138, 60);

    beginShape();
	curveVertex(mouseY - 140, 55); //connecting first cloud
	curveVertex(mouseY - 140, 55);
	curveVertex(mouseY - 185, 50);
	curveVertex(mouseY - 220, 52);
	curveVertex(mouseY - 260, 54);
	curveVertex(mouseY - 290, 55);
	curveVertex(mouseY - 138, 60);
	curveVertex(mouseY - 138, 60);
    endShape();

	//cloud#2
	point(mouseY, 91); //points of the second cloud to connect
	point(mouseY - 10, 93);
	point(mouseY -20, 98);
	point(mouseY - 60, 105);
	point(mouseY - 70, 115);
	point(mouseY + 30, 125);
	point(mouseY + 60, 125);
	point(mouseY + 170, 120);
	point(mouseY + 155, 110);
	point(mouseY + 130, 85);
	point(mouseY + 90, 90);

	beginShape();
	curveVertex(mouseY, 91); //connecting second cloud
	curveVertex(mouseY, 91);
	curveVertex(mouseY - 10, 93);
	curveVertex(mouseY -20, 98);
	curveVertex(mouseY - 60, 105);
	curveVertex(mouseY - 70, 115);
	curveVertex(mouseY + 30, 125);
	curveVertex(mouseY + 60, 125);
	curveVertex(mouseY + 170, 120);
	curveVertex(mouseY + 155, 110);
	curveVertex(mouseY + 130, 85);
	curveVertex(mouseY + 90, 90);
	curveVertex(mouseY + 90, 90);
	endShape();
	
	//mountain layer 1 (light coral color)
    fill(250, 180, 175);
    stroke(250, 180, 175);
    strokeWeight(5);
    point(0, 255);
    point(0, 385);
    point(30, 230);
    point(150, 210);
    point(195, 190);
    point(215, 200);
    point(260, 215);
    point(290, 220);
    point(310, 215);
    point(380, 175);
    point(420, 190);
    point(460, 145);
    point(510, 185);
    point(540, 165);
    point(580, 155);
    point(600, 160);
    point(600, 375);

    beginShape();
    curveVertex(0, 385);
    curveVertex(0, 385);
    curveVertex(0, 255);
    curveVertex(30, 230);
    curveVertex(150, 210);
    curveVertex(195, 190);
    curveVertex(215, 200);
    curveVertex(260, 215);
    curveVertex(290, 220);
    curveVertex(310, 215);
    curveVertex(380, 175);
    curveVertex(420, 190);
    curveVertex(460, 145);
    curveVertex(510, 185);
    curveVertex(540, 165);
    curveVertex(580, 155);
    curveVertex(600, 160);
    curveVertex(600, 375);
    curveVertex(600, 375);
    endShape();

    //mountain layer #2
    fill(230, 195, 210);
    stroke(230, 195, 210);
    point(0, 170);
    point(0, 370);
    point(10, 155);
    point(25, 145);
    point(55, 130);
    point(80, 140);
    point(105, 180);
    point(140, 200);
    point(170, 205);
    point(210, 225);
    point(250, 225);
    point(250, 370);

    beginShape();
    curveVertex(0, 370);
    curveVertex(0, 370);
    curveVertex(0, 170);
    curveVertex(10, 155);
    curveVertex(25, 145);
    curveVertex(55, 130);
    curveVertex(80, 140);
    curveVertex(105, 180);
    curveVertex(140, 200);
    curveVertex(170, 205);
    curveVertex(210, 225);
    curveVertex(250, 225);
    curveVertex(250, 370);
    curveVertex(250, 370);
    endShape();

    //mountain layer #3 (purple layer)
    fill(200, 180, 222);
    stroke(200, 180, 222);
    point(250, 390);
    point(250, 265);
    point(280, 260);
    point(300, 270);
    point(310, 280);
    point(320, 290);
    point(340, 287);
    point(350, 285);
    point(370, 270);
    point(390, 267);
    point(410, 280);
    point(430, 300);
    point(440, 298);
    point(450, 295);
    point(460, 285);
    point(490, 270);
    point(500, 260);
    point(515, 265);
    point(525, 275);
    point(535, 280);
    point(565, 276);
    point(585, 270);
    point(600, 260);

    beginShape();
    curveVertex(250, 390);
    curveVertex(250, 390);
    curveVertex(250, 265);
    curveVertex(280, 260);
    curveVertex(300, 270);
    curveVertex(310, 280);
    curveVertex(320, 290);
    curveVertex(340, 287);
    curveVertex(350, 285);
    curveVertex(370, 270);
    curveVertex(390, 267);
    curveVertex(410, 280);
    curveVertex(430, 300);
    curveVertex(440, 298);
    curveVertex(450, 295);
    curveVertex(460, 285);
    curveVertex(490, 270);
    curveVertex(500, 260);
    curveVertex(515, 265);
    curveVertex(525, 275);
    curveVertex(535, 280);
    curveVertex(565, 276);
    curveVertex(585, 270);
    curveVertex(600, 260);
    curveVertex(600, 390);
    curveVertex(600, 390);
    endShape();

    //trees layer 1 (lightest green layer)
    fill(176, 231, 228); //first tree on left
    stroke(176, 231, 228);
    triangle(0, 250, 70, 390, 0, 390); //layering triangles
    triangle(0, 200, 35, 260, 0, 260); 
    triangle(0, 230, 50, 300, 0, 300);
    triangle(0, 260, 60, 340, 0, 340);
    //second tree from the left
    triangle(75, 250, 110, 180, 145, 250);
    triangle(60, 300, 110, 220, 160, 300);
    triangle(45, 350, 110, 260, 175, 350);
    triangle(30, 390, 110, 300, 190, 390);
   //third tree from the left
    triangle(225, 195, 260, 170, 295, 195);
    triangle(222, 205, 260, 180, 298, 205);
    triangle(219, 215, 260, 190, 301, 215);
    triangle(216, 225, 260, 200, 304, 225);
    triangle(213, 235, 260, 210, 307, 235);
    triangle(210, 245, 260, 220, 310, 245);
    triangle(207, 255, 260, 230, 313, 255);
    triangle(204, 265, 260, 240, 316, 265);
    triangle(201, 275, 260, 250, 319, 275);
    triangle(198, 285, 260, 260, 322, 285);
    triangle(195, 295, 260, 270, 325, 295);
    triangle(192, 305, 260, 280, 328, 305);
    triangle(180, 315, 260, 290, 331, 315);
    triangle(177, 325, 260, 300, 334, 325);
    triangle(150, 390, 260, 260, 361, 390);
    //tree in the middle
    triangle(320, 305, 340, 200, 360, 305);
    triangle(340, 200, 320, 270, 363, 270);
    triangle(363, 300, 390, 255, 410, 300);
    triangle(358, 320, 387, 275, 415, 320);
    triangle(420, 310, 440, 270, 460, 310);
    triangle(490, 240, 480, 300, 500, 300);
    //tree on the far right
    triangle(550, 160, 560, 145, 570, 160);
    triangle(545, 170, 560, 155, 575, 170);
    triangle(540, 180, 560, 165, 580, 180);
    triangle(535, 190, 560, 175, 585, 190);
    triangle(530, 200, 560, 185, 590, 200);
    triangle(525, 210, 560, 195, 595, 210);
    triangle(520, 220, 560, 205, 600, 220);
    triangle(515, 230, 560, 215, 605, 230);
    triangle(510, 240, 560, 225, 610, 240);
    triangle(505, 250, 560, 235, 615, 250);
    triangle(500, 260, 560, 245, 620, 260);
    triangle(495, 270, 560, 255, 625, 270);
    triangle(490, 280, 560, 265, 630, 280);
    triangle(485, 290, 560, 275, 635, 290);
    triangle(480, 300, 560, 285, 640, 300);
    triangle(475, 310, 560, 295, 645, 310);
    triangle(470, 320, 560, 305, 650, 320);

    //trees layer 2 (med green layer)
    //first tree from the left
    fill(156, 208, 204);
    stroke(156, 208, 204);
    triangle(40, 200, 60, 160, 80, 200);
    triangle(35, 220, 60, 180, 85, 220);
    triangle(30, 240, 60, 200, 90, 240);
    triangle(25, 260, 60, 220, 95, 260);
    triangle(20, 280, 60, 240, 100, 280);
    triangle(15, 300, 60, 260, 105, 300);
    triangle(10, 320, 60, 280, 110, 320);
    triangle(5, 340, 60, 300, 115, 340);
    triangle(0, 360, 60, 320, 120, 360);
    triangle(-5, 380, 60, 240, 125, 380);
    triangle(-7.5, 390, 60, 250, 127.5, 390);
    //second tree from the left
    triangle(150, 320, 170, 260, 190, 320);
    triangle(145, 360, 170, 300, 195, 360);
    triangle(138, 390, 170, 330, 203, 390);
    //middle tree
    triangle(280, 245, 300, 225, 320, 245);
    triangle(270, 260, 300, 235, 330, 260);
    triangle(260, 275, 300, 245, 340, 275);
    triangle(250, 290, 300, 255, 350, 290);
    triangle(240, 305, 300, 265, 360, 305);
    triangle(230, 320, 300, 275, 370, 320);
    triangle(220, 335, 300, 285, 380, 335);
    triangle(210, 350, 300, 295, 390, 350);
    triangle(200, 365, 300, 315, 400, 365);
    triangle(190, 380, 300, 325, 410, 380);
    triangle(195, 390, 300, 330, 415, 390);
    //fourth tree from the left
    triangle(400, 320, 420, 300, 440, 320);
    triangle(395, 340, 420, 310, 445, 340);
    triangle(390, 360, 420, 320, 450, 360);
    triangle(385, 380, 420, 330, 455, 380);
    triangle(380, 390, 420, 340, 460, 390);
    //fifth tree from the left
    triangle(460, 260, 480, 240, 500, 260);
    triangle(450, 285, 480, 245, 510, 285);
    triangle(440, 310, 480, 250, 520, 310);
    triangle(430, 335, 480, 255, 530, 335);
    triangle(420, 360, 480, 260, 540, 360);
    triangle(410, 385, 480, 265, 550, 385);
    triangle(405, 390, 480, 270, 555, 390);
    //far right tree
    triangle(600, 240, 570, 280, 600, 280);
    triangle(600, 245, 550, 320, 600, 320);
    triangle(600, 250, 530, 360, 600, 360);
    triangle(600, 255, 510, 390, 600, 390);


    //trees layer 3 (darkest green layer)
    fill(131, 180, 177);
    stroke(131, 180, 177);
    //middle tree
    triangle(200, 230, 190, 260, 210, 260);
    triangle(200, 240, 185, 270, 215, 270);
    triangle(200, 250, 175, 290, 225, 290);
    triangle(200, 260, 170, 310, 230, 310);
    triangle(200, 270, 165, 330, 235, 330);
    triangle(200, 280, 160, 350, 240, 350);
    triangle(200, 290, 155, 370, 245, 370);
    triangle(200, 300, 150, 390, 250, 390);
    //first left tree
    triangle(60, 300, 90, 270, 120, 300);
    triangle(50, 320, 90, 275, 130, 320);
    triangle(40, 340, 90, 280, 140, 340);
    triangle(30, 360, 90, 285, 150, 360);
    triangle(20, 380, 90, 290, 160, 380);
    triangle(10, 390, 90, 295, 170, 390);
    //third tree from left
    triangle(370, 335, 390, 300, 410, 335);
    triangle(360, 380, 390, 305, 420, 380);
    triangle(350, 390, 390, 310, 430, 390);
    //far right tree
    triangle(515, 280, 535, 240, 555, 280);
    triangle(510, 300, 535, 245, 560, 300);
    triangle(505, 320, 535, 250, 565, 320);
    triangle(500, 340, 535, 255, 570, 340);
    triangle(495, 360, 535, 260, 575, 360);
    triangle(490, 390, 535, 265, 580, 390);

    //road
    strokeWeight(2);
    fill(144, 148, 165);
    noStroke();
    rect(0, 390, 600, 60);
    //road stripes
    stroke(242, 244, 190);
    line(0, 415, 600, 415);
    line(0, 420, 600, 420);

    //front headlights: moves with respect to mouseX so it stays connected to the car
    fill(226, 204, 128);
    stroke(226, 204, 128);
    triangle(mouseX + 100, 381, mouseX + 225, headlighttop, mouseX + 225, headlightbottom);
    
    //car that moves with respect to mouseX
    fill(239, 184, 145);
    stroke(239, 184, 145);
    rect(mouseX, 340, 100, 53); //layering shapes to build car shape
    triangle(mouseX, 340, mouseX - 3.5, 393, mouseX, 393); 
    rect(mouseX + 100, 370, 15, 23);
    triangle(mouseX + 100, 340, mouseX + 115, 370, mouseX + 100, 370);

    //white strip on top of the car that moves with respect to mouseX
    stroke(255);
    fill(255);
    quad(mouseX, 340, mouseX + 5, 335, mouseX + 95, 335, mouseX + 100, 340);

    //windows that move with respect to mouseX
    stroke(170);
    fill(170);
    rect(mouseX + 5, 346, 30, 10);
    rect(mouseX + 43, 346, 26, 10);
    quad(mouseX + 76, 346, mouseX + 97, 346, mouseX + 102, 356, mouseX + 76, 356);

    //door marks that move with respect to mouseX
    stroke(200, 175, 145);
    line(mouseX + 39, 343, mouseX + 39, 393);
    line(mouseX + 72.5, 343, mouseX + 72.5, 393);
    stroke(255);
    line(mouseX + 65, 372, mouseX + 70, 372); //door handles
    line(mouseX + 75.5, 372, mouseX + 80.5, 372); //door handles

    //wheels that move with respect to mouseX
    fill(100);
    stroke(100);
    circle(mouseX + 15, 393, 25);
    circle(mouseX + 95, 393, 25);
    //wheel covers
    fill(200);
    stroke(200);
    circle(mouseX + 15, 393, 11);
    circle(mouseX + 95, 393, 11);
    
    //front wheels that is near the headlights, move with respect to mouseX
    fill(100);
    stroke(100);
    point(mouseX + 116, 368);
    point(mouseX + 121, 370);
    point(mouseX + 121, 393);
    point(mouseX + 116, 393);

    beginShape();
    curveVertex(mouseX + 116, 368);
    curveVertex(mouseX + 116, 368);
    curveVertex(mouseX + 121, 370);
    curveVertex(mouseX + 121, 393);
    curveVertex(mouseX + 116, 393);
    curveVertex(mouseX + 116, 393);
    endShape();

    //back bumper that moves with respect to mouseX
    fill(200); 
    stroke(200);
    rect(mouseX - 5, 385, 6, 3);

}


    function mouseClicked() {
    suncolorR = suncolorR + 6; //everytime you click, the color of sun gets darker red/orange
    suncolorG = suncolorG - 9; //everytime you click, the color of sun gets darker red/orange
    suncolorB = suncolorB - 9; //everytime you click, the color of sun gets darker red/orange
    headlighttop = headlighttop - 2.5 //everytime you click, the headlight thickness should appear to increase
    headlightbottom = headlightbottom + 2.5 //everytime you click, the headlight thickness should appear to increase
    }

LO 3 – Computational Fabrication

The Mediated Matter Group from the MIT Media Lab presents a multimaterial
voxel-printing method that enables the physical visualization of data sets
commonly associated with scientific imaging.

White matter tractography data physicalization of the human brain, visualizing bundles of axons, which connect different regions of the brain. 
Photo: The Mediated Matter Group


Modern approaches still predominantly rely on 2D displays of 3D data sets. This
particular project converts data sets into dithered material deposition
descriptions, through modifications to rasterization processes. By contributing
exemplary 3D printed data sets across countless scales, disciplines, and
problem domains, this group’s approach bridges the gap between digital
information representation and physical material composition. Specifically,
scientific visualizations will definitely become more advanced and efficient
with this project as a foundation for future revisions and improvements.

Project – 03- Dynamic Drawing

dynamic drawing
function setup() {
    createCanvas(600, 450);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var s;	//rect scale
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var w = 30;	//rect
var r;	//rotation


function draw() {
	background(255);
	//change background color based on four quadrants
	if(mouseX < (width/2) & mouseY < (height/2)){
		w = mouseX;
		background(245, 209, 213);
		
		

	} else if(mouseX > (width/2) & mouseY < (height/2)){
		w = mouseX - (mouseX/2);
		background(225, 164, 186);
		
		
	} else if (mouseX < (width/2) & mouseY > (height/2)){
		w = mouseX;
		background(224, 186, 241);
		
		
	} else if(mouseX > (width/2) & mouseY > (height/2)){
		w = mouseX - (mouseX/2);
		background(251, 186, 207);
		
		
	}
	//heart
	if (200<=mouseX & mouseX<=400 && mouseY>100 && mouseY<300){
		x1 = mouseX + 80;
		x2 = mouseX + 130;
		x3 = mouseX + 10;
		x4 = mouseX + 110;
		x5 = mouseX + 60;
		y1 = mouseY + 130;
		y2 = mouseY - 10;
		y3 = mouseY + 10;
		y4 = mouseY + 60;
		y5 = mouseY + 90;
		s = 0.77;
		r = 0;
	} else{
		x1 = 90;
		y1 = 90;
		x2 = 130;
		y2 = 300;
		x3 = 333;
		y3 = 120;
		x4 = 500;
		y4 = 260;
		x5 = 400;
		y5 = 390;
		r += 0.5;
	}

	fill(251, 250, 186);
	circle(x1, y1, 60);	//light yellow
	fill(205, 189, 173);
	circle(x2, y2, 99);	//gray
	fill(179, 246, 195);
	circle(x3, y3, 140);	//green
	fill(244, 247, 6);
	circle(x4, y4, 90);	//yellow
	fill(161, 128, 196);
	circle(x5, y5, 80);	//purple
	noStroke();
	fill(164, 225, 209);
	scale(s);
	push();
	rotate(radians(r));
	rectMode(CENTER);
	rect(mouseX, mouseY, w, 60);
	pop();

	

}

I wanted to make something cute and warm so my circles are mimicking a heart within a certain range of the canvas and the rectangle is supposed to serve as a bandage for the heart. But I got really confused trying to do the rotation and spinning during the process, need to be more used to java.

Project 03 – Dynamic Drawing

sketch
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var x = 0; 
var y = 0; 

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

function draw() {
	noStroke(); 
	background((constrain(mouseY,200,210)),(constrain(mouseY,220,240)),constrain(mouseY,190,210)); 

	// - CLOUDS - //

	//EllipseX variable is to expand or contract ellipse width 
	var ellipseWidth = constrain(mouseY,100,150); 

	//Variables for cloud on left side 
	var positionY = constrain(mouseY,100,150);
	var positionY2 = constrain(mouseY,50,100);
	var positionX = constrain(mouseX,80,100); 

	//Cloud on left side moves side to side 
	fill(constrain(mouseY,230,255));
	ellipse(positionX,positionY,ellipseWidth,100); 
	ellipse(positionX+50,positionY2,100,100); 
	ellipse(positionX+100,positionY,100,100); 
	ellipse(positionX+150,positionY2,100,100); 
	ellipse(positionX+200,positionY,ellipseWidth,100); 

	//Variables for cloud on right side 
	var positionY3 = constrain(mouseY,300,350);
	var positionY4 = constrain(mouseY,250,300);
	var positionX2 = constrain(mouseX,50,120); 

	//Cloud on right side moves side to side 
	fill(constrain(mouseX,200,230)); 
	ellipse(positionX2+200,positionY3,ellipseWidth,100); 
	ellipse(positionX2+250,positionY4,100,100); 
	ellipse(positionX2+300,positionY3,100,100); 
	ellipse(positionX2+350,positionY4,100,100); 
	ellipse(positionX2+400,positionY3,ellipseWidth,100); 

	//Yellow circles as stars in the background
	push(); 
	rotate(radians(mouseX*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	push(); 
	rotate(radians(mouseY*2)); 
	fill(252,255,128); 
	ellipse(100,500,20,20);
	ellipse(200,100,20,20); 
	ellipse(300,500,20,20);
	ellipse(400,100,20,20); 
	ellipse(500,500,20,20); 
	pop(); 

	//Mountains
	fill(148,171,146); 
	triangle(270,490+mouseY,330,330+mouseY,390,490+mouseY); 
	triangle(330,490+mouseY,430,330+mouseY,520,490+mouseY); 
	triangle(0,490+mouseY,200,250+mouseY,400,490+mouseY); 
	triangle(400,490+mouseY,500,300+mouseY,600,490+mouseY);  

	//Flower in the center 
	push();  
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	for (let r = 0; r < 10; r++){
	ellipse(0,0,20,80); 
	rotate(PI/5);
	}
	pop(); 

	//sun 
	push(); 
	translate(300,220);
	fill(random(195,250),random(155,170),random(25,37)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40)); 
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	rotate(radians(40));
	ellipse(0,90,10,mouseY); 
	pop(); 


}


I was inspired by nature and weather. I tried to depict the sun, mountains, stars, and clouds in my piece.

Project-03-Dynamic-Drawing

dynamicdrawing

function setup() {
    createCanvas(600, 450,);
    background(220);
}
function draw() {
    var x = mouseX
    var y = mouseY
    var g = 0
    var b = 0
    //background
    background(0)

    push();
    translate(mouseX-750,0)
    stroke(255,)
    strokeWeight(2)
    scale(3,1)
    line(0,20,50,20)
    line(120,40,130,40)
    line(60,50,130,50)
    line(300,80,350,80)
    line(300,90,380,90)
    line(100,100,170,100)
    line(230,130,280,130)
    line(200,160,210,160)
    line(40,170,90,170)
    line(400,200,420,200)
    line(340,220,370,220)
    line(220,230,310,230)
    line(420,270,440,270)
    line(80,280,180,280)
    line(160,290,150,290)
    line(370,320,420,320)
    line(10,330,90,330)
    line(140,350,170,350)
    line(40,370,60,370)
    line(320,390,330,390)
    line(80,400,120,400)
    line(210,430,260,430)
    line(400,440,450,440)
    pop();
    // spinning arcs
    strokeWeight(1+y/50);
    noFill();
    //transformations
    translate(300,225);
    rotate(radians(x/2));
    cony = max(y,.5);
    scale(cony/200);
    
    noStroke();
    fill(0);
    circle(0,0,270);
    g = g + x/3
    b = b + x/8
    //arcs (smallest to largest)
    noFill();
    stroke(255,0+g,0+b);
      arc(0,0,140,140,-PI/4,4*PI/5);
    rotate(radians(x/2));
      arc(0,0,180,180,PI/2,4*PI/3);
    rotate(radians(x/5));
      arc(0,0,200,200,PI,9*PI/4);
    rotate(radians(x/7));
      arc(0,0,270,270,11*PI/6,5*PI/6);
}

I incorporated two animated ideas into one which creates a different dynamic on motion, one moving horizontally and the other moving within itself while changing size position and color.