Month: September 2020

Project 3: Dynamic Drawing

For this week’s project, I wanted to visualize my (poor) sleep schedule with code. I realized through my time in college that I work better at night, but this makes it hard for me to function normally in the daytime.

night:day
var faceWidth;

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

}

function draw() {
  //sky color shift
  if (mouseX>= width/2.2) {
    background (255, 243, 170);//daytime
  } else {
    background (66, 56, 148); //nighttime
  }

  //base figure
  var faceWidth = width/2;
  push();
  noStroke();
  fill(20, 20, 50) //facecolor
  var faceShift = constrain(mouseX, 150, 500);
  ellipse (width/2, height/2, faceWidth, faceWidth);
    //body
    rectMode(CENTER);
    rect (width/2, height/2 + 300, faceWidth, 420, 50, 50,0, 0);
    pop();   
    
  //moon
  var moonX = constrain(mouseX, width/4, width/2);
    if (mouseX<width/2.5){
      noStroke();
      fill(66, 98, 167);
      ellipse(moonX, height/5, faceWidth/2, faceWidth/2);
      fill(66, 56, 148);
      ellipse(moonX +30, height/5, faceWidth/2, faceWidth/2);
    }
  //sun
  var sunX = constrain(mouseX, width- width/2, width - width/4)
    if (mouseX>width/2.2){
      noStroke();
      fill(255, 214, 139);
      ellipse(sunX, height/5, faceWidth/2, faceWidth/2);
      stroke(255, 214, 139);
      strokeWeight(2);
      noFill();
      ellipse(sunX, height/5, faceWidth/2 + 20, faceWidth/2 +20);
      ellipse(sunX, height/5, faceWidth/2 + 40, faceWidth/2+40);
    }
      
  
  //dayface
    //eyelids
    var eyeWidth= faceWidth/4
    push();
    
      //eyebag droop
      var bagdroop= constrain(mouseY, height/2, height/2 + faceWidth/10); //eyebag droop factor
    if(mouseX>width/2){
      //eyebag droop
      stroke(173, 85, 255);
      strokeWeight(3);
      fill(218, 170, 255);
      ellipse (176, height/2- faceWidth*1.5+ bagdroop, faceWidth/4, faceWidth/4)
      ellipse (width- 176, height/2- faceWidth*1.5 + bagdroop, faceWidth/4, faceWidth/4)
      }
    pop();
  
    //eyes
    push ();
    noStroke();
    fill(255);
    ellipse (176, height/2, eyeWidth, eyeWidth)
    ellipse (width- 176, height/2, eyeWidth, eyeWidth)
    pop();
  
    //eyelid droop
    var droop = constrain(mouseY, height/2- faceWidth/8, height/2);// eyelid droop factor
    if(mouseX>width/2){
      noStroke();
      fill(20, 20, 50);
      rect( 140, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth)
      rect (width- 218, droop*.75+ eyeWidth/2, eyeWidth+20, eyeWidth);
    }
  
    //pupils
    push ();
    noStroke();
    fill(20, 20, 50);
    ellipse (176, height/2, faceWidth/8, faceWidth/8)
    ellipse (width- 176, height/2, faceWidth/8, faceWidth/8)
    pop();
    
  
    //mouth
    push();
    noFill();
    stroke(255);
    strokeWeight(10);
    beginShape ();
    curveVertex( width/2 -50, height/2 +40 );
    curveVertex( width/2 -50, height/2 +40 );
    curveVertex( width/2 -30, height/2 +55);
    curveVertex (width/2, height/2 + 60);
    curveVertex( width/2 +30, height/2 +55);
    curveVertex( width/2 +50, height/2 +40 );
    curveVertex( width/2 +50, height/2 +40);
    endShape();
    pop();
  
  
  //sky shift
  push();
  var bgshift = constrain (mouseX, 120, width - width/3) //shift only happens once
  translate (-50, -50)
  rotate (radians(bgshift*1.75))
  noStroke();
  fill(20, 20, 50);
  rect (0, 0, height* 1.5, height *1.75)
  pop ();
  

  
}

LO – 3

Floraform by Nervous System (2014) first caught my attention because of its aesthetics and practical application in beautiful flower-inspired jewelry, sculptures, and animations. Reading more into it, I became even more inspired knowing that the generative jewelry pieces were based on extensive scientific research into the way flowers grow and the differential system. The designers took into consideration the effects of physics, environmental factors, collision detection, growth patterns, and more. At first, I was skeptical at anyone’s ability to replicate nature, as I’ve grown to understand that anything “natural” is imperfect, but the thoroughness of the project site and the practical, commercial outcome made me appreciate the initiative and its respect to reality. 

Although a ton of scientific research went into creating the final products of Floraform, a lot of artistic license were taken in the way the floral system is represented visually and made into pieces of art. Nervous System creates their own software system to visualize their creations, but I can assume that it resembles a 3-D modeling software but with the capabilities of incorporating custom algorithms in accordance to the different natural considerations they made.

One of their considerations when simulating flower growth: edge.

LO: Computational Fabrication

In exploring computational digital fabrication, I began my search with a simple Google of “algorithm based physical sculptures.” I came across one link that talked about MoSculp, an algorithmic system created out of the Computer Science and Artificial Intelligence Laboratory (CSAIL) at Massachusetts Institute of Technology (MIT) in 2018.

A sculpture created by MoSculp.

Mosculp is a computer system that, when fed a 2D video of human movement, can create a 3D-printed sculpture conveying the arcs and curves created through the body’s movements. This is possible through the algorithm’s ability to estimate and detect key points of human body movements that transform the video of 2D frames into a 3D-aware rendering of the (human) subject’s 3D geometry.

Watch to see how MoSculp sculpts!

The pieces created by MoSculp now may simply seem like abstract sculptures without much purpose, but the potential of the technology is clear. Researchers have noted the possible implications of technology like MoSculp; can this improve the ability for athletes and dancers (amongst other careers) to find a new way to micro-analyze the nuances of techniques by studying these motion-capture images? How about using these sculptures as toys and tools for physical rehabilitation?

I found this project to be interesting as it begins an important discussion about the necessity of the visual arts and the ability for people to utilize these computer generated softwares to create real and effective solutions to everyday problems.

Project: Dynamic Drawing

A little house on a hill! Move left to right to see clouds, the sun, and the sky change. Move up and down to see the chimney puff smoke and some (abstract flowers).

sketchI tried using map() and it was pretty helpful!
The Illustrator sketch I originally did! Decided to take the door out.
var R= 0;
var G= 100;
var smokey = 0;
var Xcloud = 0;

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

function draw() {
    let R = map(mouseX, 0, width/2, 0, 150)
    background(R,150,130); //background color changes based on mouseX
  
    noStroke();
    //sky
    fill('#FFC773');
    circle(R,R,R); //sun moving
    //clouds moving based on mouseX
    fill('#EAF0FF');
    ellipse(442 + Xcloud, 83, 77, 59);
    ellipse(472 + Xcloud, 117, 77, 59);
    ellipse(416 + Xcloud, 115,84,64);
    ellipse(374 + Xcloud, 115,52,34);
    ellipse(319 + Xcloud,183,66,23);
    ellipse(265 + Xcloud,183,107,44);
    ellipse(206 + Xcloud,161,133,56);
    ellipse(172 + Xcloud,183,137,40);
    ellipse(76 + Xcloud,78,47,27);
    ellipse(4 + Xcloud,65,84,65);
    ellipse(45 + Xcloud, 79, 49,46);
  
    //smoke
    G = height-mouseY
    fill(234,210,194,G)
    circle(369, 210 + smokey, 28)
    fill(217,185,137,G)
    circle(386,170 + smokey,34)
    fill(217,206,191,G)
    circle(349,133 + smokey,42)
    fill(153,129,92,G)
    circle(390, 84 + smokey, 53)
   
    //grass
    fill('#BDFF9F');
    circle(82,446,412);
    fill('#507C41');
    circle(518,629,543);
  
    //house
    fill('#C39156')
    rect(184, 297, 231, 200,18);
    fill('#754C24')
    rect(348,205,42,99)
    fill('#876946')
    triangle(300,224,457,319,143,319);
    //grass again
    fill('#7EBA70');
    circle(94,689,539);
  
    //flowers and fill based on opacity with mouseY
    fill(258,118,109,G)
    circle(16,257,41)
    fill(238,174,243,G)
    circle(103,245,37)
    fill(255,205,108,G)
    circle(163,260,22)
    fill(145,137,227,G)
    circle(137,294,35)
    fill(258,118,109,G)
    circle(68,297,22)
    fill(238,174,243,G)
    circle(48,285,19)
    fill(258,118,109,G)
    circle(3,314,24)
    fill(145,137,227,G)
    circle(31,313,11)
    fill(255,205,108,G)
    circle(64,329,12)
    fill(238,174,243,G)
    circle(35,348,25)
    fill(145,137,227,G)
    circle(110,342,25)
    fill(255,205,108,G)
    circle(144,352,22)
    fill(258,118,109,G)
    circle(143,388,31)
    fill(255,205,108,G)
    circle(110,379,19)
    fill(255,205,108,G)
    circle(68,388,44)
    fill(258,118,109,G)
    circle(10,384,30)
    fill(255,205,108,G)
    circle(18,431,47)
    fill(145,137,227,G)
    circle(50,423,12)
    fill(238,174,243,G)
    circle(83,441,17)
    fill(145,137,227,G)
    circle(122,457,27,)
    fill(145,137,227,G)
    circle(157,422,27)
    fill(238,174,243,G)
    circle(192,438,42)
    fill(255,205,108,G)
    circle(18,486,12)
    fill(145,137,227,G)
    circle(53,510,57)
    fill(258,118,109,G)
    circle(106,504,12)
    fill(255,205,108,G)
    circle(153,498,38)
    fill(238,174,243,G)
    circle(118,527,19)
    fill(255,205,108,G)
    circle(230,502,41)
    fill(145,137,227,G)
    circle(200,539,32)
    fill(255,205,108,G)
    circle(92,561,19)
    fill(258,118,109,G)
    circle(296,520,37)
    fill(258,118,109,G)
    circle(260,541,12)
    fill(238,174,243,G)
    circle(143,575,65)
    fill(258,118,109,G)
    circle(25,593,65)
    fill(255,205,108,G)
    circle(265,541,12)
    fill(258,118,109,G)
    circle(310,571,27)
    fill(145,137,227,G)
    circle(462,367,65)
    fill(238,174,243,G)
    circle(518,385,30)
    fill(255,205,108,G)
    circle(589,353,97)
    fill(258,118,109,G)
    circle(611,439,58)
    fill(238,174,243,G)
    circle(550,426,19)
    fill(145,137,227,G)
    circle(485,429,39)
    fill(258,118,109,G)
    circle(445,414,16)
    fill(145,137,227,G)
    circle(589,506,58)
    fill(255,205,108,G)
    circle(533,479,22)
    fill(258,118,109,G)
    circle(451,488,56)
    fill(255,205,108,G)
    circle(515,510,44)
    fill(145,137,227,G)
    circle(533,554,29)
    fill(238,174,243,G)
    circle(599,588,81)
    fill(255,205,108,G)
    circle(500,600,38)
    fill(238,174,243,G)
    circle(410,585,105)
    fill(258,118,109,G)
    
   
   //some interaction stuff 
    smokey = mouseY
    Xcloud = mouseX //clouds moving

}

Project 3: Dynamic Drawing

sketch
//Jessie Chen
//D
var half = 225

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

function draw() {
    mouseX = constrain(mouseX, 0, 440);
    //bee
    background(123, 176, 223);
    noStroke();
    var bY = constrain(bY, 200, 300);
    var w = 15 + (mouseX * 0.03);
    var h = 10 + (mouseX * 0.03);
    //petal behind bee
    fill(233, 120, 79);
    ellipse(half, 330 - (h * 3), w * 3, h * 3);
    //bee
    push();
    var bY = 200;
    if (mouseX < half) {
        translate(60, 0);
         rotate(radians(15));
    } else {
       translate(-25, 110);
        rotate(radians(345));
    }
    fill(202, 228, 250);
    ellipse(mouseX - 5, bY - 13, w, h);
    ellipse(mouseX - 15, bY - 15, w, h); //wings
    fill(255, 229, 122);
    ellipse(mouseX, bY, 40, 25); //body
    fill(60, 60, 60);
    rect(mouseX - 15, bY - 9 , 5, 19, 100, 5, 40, 40); //black lines
    rect(mouseX - 6, bY - 12, 5, 24, 100, 5, 40, 40);
    rect(mouseX + 3, bY - 11.5, 5, 23, 100, 5, 40, 40);
    ellipse(mouseX + 13, bY - 2, 5, 5); //eye
    stroke(60);
    line(mouseX + 16, bY - 8, mouseX + 18, bY - 12); //attennas
    line(mouseX +14, bY - 8, mouseX + 14, bY - 14);
    line(mouseX - 21, bY, mouseX - 24, bY); //stinger
    //sun
    pop();
    fill(255, 213, 0);
    ellipse(half, 0, 250 + w, 250 + h);
    //clouds
    fill(245, 255, 255);
    rect(mouseX - 100, 50, 100, 75, 35);
    rect(mouseX - 60, 85, 95, 55, 35);
    rect(mouseX - 350, 55, 120, 55, 35);
    rect(mouseX + 100, 20, 120, 55, 35);
    rect(mouseX - 270, 40, 75, 50, 35);
    rect(mouseX + 300, 75, 80, 40, 35);
    rect(mouseX + 250, 65, 70, 30, 35);
    //stem
    fill(115, 172, 111);
    rect(half - 7.5, 340 - (h * 2), 15, 400, 30);
    //leaves
    push();
    translate(193, 100);
    rotate(radians(25));
    ellipse(half - 19, 440, w * 3, 20 + h);
    ellipse(half - 94, 280, w * 3, 20 + h);
    pop();
    push();
    translate(-150, 200);
    rotate(radians(335));
    ellipse(half + 19, 440, w * 3, 20 + h);
    //flower
    pop();
    fill(233, 120, 79); // back petals
    ellipse(half - 30, 360 - (h * 3), w * 4, h * 3);
    ellipse(half + 30, 360 - (h * 3), w * 4, h * 3);
    ellipse(half + 25, 345 - (h * 3), w * 5, h * 3);
    ellipse(half - 25, 345 - (h * 3), w * 5, h * 3);
    fill(255, 215, 102);
    ellipse(half, 360 - (h * 4), w * 3, h * 2); //center
    rect(half - 10, 385 - (h * 7), 2, 3 + h, 20);
    rect(half + 10, 385 - (h * 7), 2, 3 + h, 20);
    rect(half, 380 - (h * 7), 2, 3 + h, 20);
    rect(half - 20, 390 - (h * 7), 2, 3 + h, 20);
    rect(half + 20, 390 - (h * 7), 2, 3 + h, 20);
    fill(233, 120, 79); // front petal
    ellipse(half, 360 - (h * 3), w * 3, h * 3);
    
}

This was inspired by the mutualistic relationship between the bee and the flower. The bee is becoming full while the flower is being pollinated, allowing it to grow and reproduce.

Looking Outwards 03 – Computational Fabrication

Heydar Aliyev Centre

The Heydar Aliyev Center is a cultural center that is located in Baku, Azerbaijan, and was designed by architect Zaha Hadid. When taking one look at this building, it is a breath-taking design. One can say that this project is an incredible achievement. The most difficult and critical part of this project was probably the architectural development of the skin/shell. However, with the use of advanced computations, it allowed the project to achieve its fluid characteristics. The geometry, structure, and materiality of this building create a harmony that allows us to see the transformation that architecture has gone through as well as being able to see the advancement of technology. Through computing, sketching, and physical modeling, Zaha Hadid and her team were able to create something that was unique and was able to look at the future. Through the interior and exterior of the building, Zaha Hadid wanted to create this blur between urban and architecture.

LookingOutwards-03

This project is called Find(&)MERGE made by SVEN, a group from the University of Bologna, Italy. The aim of this project is to design a place that represents an economic and cultural center. What I admire about it is that it attempts to computationally input the different behaviors and environmental elements into the construction of the project. The system created is supposed to grow and evolve depending on the self-organized interactions that affect the place. I think that it is important for architects to be able to take into consideration the ever-changing environments and behaviors and create architecture that can adapt that over long periods of time. This project recognizes this need in architectural design and is using computational fabrication to achieve the design. 

http://www.evolo.us/developing-a-coherent-strategy-for-innovative-design-through-digital-fabrication/

Project 03 – Dynamic Drawing

Through the multiple squares on the canvas, I wanted to explore how different the overall image would look by manipulating the weight of the stroke. Moving your mouse in a circular motion would allow you to see the change in weight of the stroke for each color set of squares I used on the canvas.

abstraction
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-03

var angle = 0.0;

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

function draw() {
	background(155, 178, 145);
	push();

	//set pink squares
	noFill();
	strokeWeight(mouseX/5);
	stroke(232, 225, 239);
	rect(215, 72, 240, 401);
	rect(106, 131, 442, 142);
	rect(57, 17, 493, 550);
	rect(114, 338, 236, 95);

	//set green(a) squares
	noFill();
	strokeWeight(mouseX/10);
	stroke(196, 244,199);
	rect(38, 65, 168, 262);
	rect(138, 141, 430, 394);
	rect(62, 248, 311, 196);
	rect(297, 61, 287, 519);

	//set green(b) squares
	noFill();
	strokeWeight(mouseY/15);
	stroke(199, 255, 218);
	rect(13, 24, 514, 199);
	rect(270, 281, 205, 281);
	rect(49, 96, 141, 485);
	rect(106, 360, 421, 134);

	//set green(c) squares
	noFill();
	strokeWeight(mouseY/20);
	stroke(217, 255, 248);
	rect(20, 300, 390, 216);
	rect(241, 96, 309, 312);
	rect(75, 41, 287, 141);
	rect(422, 117, 81, 204);

}

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

	}

}

Project 3 – Dynamic Drawings

sketch

Move your mouse over the canvas to change the size of the bubbles.
Moving your mouse will also change the colors of the bubbles.
Holding down left click while mousing over the canvas will keep the bubbles on the canvas until you let go of left click.
Left clicking will while moving will change lighten the background.

//holly liu
//section d
//dynamic drawing

var x = 25;
var y = 25;
var s = 20;
var b = 50;

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

function mouseMoved(){														//for as long as mouse is held down, the generated circles will not refesh
	clear();
	background(b);
	draw();
}

function draw(){
	noStroke();
	var r = 0.425 * mouseX;													//r value changes with x movement of mouse; values scaled to size of canvas 
	var g = 0.425 * mouseY;													//g value changes with y movement of mouse; values scaled to size of canvas
	var b = 108;
	fill(r, g, b);
	for (let i = 25; i <= 575; i += 50){									//generates circles
		for(let j = 25; j <= 575; j+= 50){
			s = 75 * exp(((-1) * dist(mouseX, mouseY, i, j))/100); 			//changes size of circles based on distance from mouse
			circle(i, j, s);
		}
	}
}

function mouseClicked(){													//bkg change w/ left click
	b += 10
	if(b == 200){
		b = 50
	}
}