Author: yoojin

Project 5 – Wallpaper

butterandmilk
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(490, 490);
    noLoop();
}

function draw() {
	background(145,204,236);
	noStroke();
	//repetition of butter on plate as wallpaper
	for (var x = 0; x < width; x += 80) {
		for (var y = 0; y < height; y += 80 ) {
		push();
		translate(x, y);
		drawButter();
		pop();
		}
	}

	//repetition of milk as wallpaper
	for (var x = 0; x < width; x += 80) {
		for (var y = 0; y < height; y += 80 ) {
		push();
		translate(x - 60, y - 60);
		drawMilk();
		pop();
		}
	}

	//orange juice
	fill(255,140,0);
	ellipse(197, 189, 12, 3);
	quad(191, 189, 203, 189, 203, 202, 191, 202);
	ellipse(197, 202, 12, 3);
}

//milk drawing
function drawMilk() {
	//milk cup - gray
	fill(207, 212, 214);
	ellipse(97, 79, 14, 3);
	quad(90, 79, 104, 79, 104, 103, 90, 103);
	ellipse(97, 103, 14, 3);

	//milk - white
	fill(255);
	ellipse(97, 89, 12, 3);
	quad(91, 89, 103, 89, 103, 102, 91, 102);
	ellipse(97, 102, 12, 3);
}

//butter drawing
function drawButter() {
		//plate dark side - light gray
		fill(212, 211, 206);
		quad(66, 49, 75, 55, 51, 63, 42, 55);

		//plate right light side - white
		fill(233,229,234);
		quad(75, 55, 75, 56, 51, 64, 51, 63); 
		//plate left light side - white
		quad(42, 55, 51, 63, 51, 64, 42, 56);

		//butter light side - light yellow
		fill(255, 229, 155);
		quad(49, 50, 67, 45, 71, 49, 53, 55);
		//butter light side (cut piece)
		quad(49, 56, 53, 61, 46, 62, 42, 57);

		//butter medium dark side - medium dark yellow
		fill(236,195,93);
		quad(49, 50, 53, 55, 53, 61, 49, 56);
		//butter medium side (cut piece)
		quad(42, 57, 46, 61, 46, 62, 42, 58);

		//butter dark side - dark yellow
		fill(218,177,72);
		quad(71, 49, 71, 55, 53, 61, 53, 55);
		//butter dark side (cut piece)
		quad(46, 61, 53, 60, 53, 61, 46, 62);
}

I personally love the butter and milk emojis so I wanted to make a wallpaper containing these emojis. It looks quite simple from far away, but I tried to detail the butter as much as I could to replicate the emoji in my iPhone as closely as possible. I added a slight randomness of orange juice for visual playfulness.

reference image

LO 5 – Computer Graphics

Christoffer Bjerre – Echoes of Light (2016)

Chris Bjerre is a multidisciplinary motion graphic designer whose works are dark, intricate, and maximalistic. His interest in dark and moody atmosphere with a monochromatic palette is seen all throughout his works, especially Echoes of Light. Echoes of Light is an exploration project of geometric infinity. The film shifts from a light (white) to dark (black) scheme. The structures create a chaotic pattern from a simple paradigm.  The top softwares he uses are After Effects, Premier Pro, Adobe Illustrator. This specific project’s renders heavily relied on a software called Octane compiled and produced in a software called Cinema 4D. Bjerre states, “the fractals are just made with any type of geo and multiple instances of moextrude.” I admire the shapes and sharp color contrast in this video the most.

Echoes of Light by Chris Bjerre / Music by Johann Johannsson

Project 4 – String Art

click!

mountainsnowstorm
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
//Project-04

//gradience variables
var yaxis = 1;
var xaxis = 2;
let c1, c2;

function setup() {
    createCanvas(400, 300);

    //variables for gradient background colors
    c1 = color(240); //whitegray
    c2 = color(113, 178, 200); //light blue
}

function draw() {
  //gradient background 
  setGradient(0, 0, 400, 300, c1, c2, yaxis);
  setGradient(0, 0, 400, 700, c2, c1, xaxis);

  //full moon
  noStroke();
  fill(255,255,255,200);
  ellipse(330,80,85);

  //mountains (line shapes)
  for (var i = 0; i <= 330; i += 3) {
    stroke(255);
    strokeWeight(0.35);
    line(0, i, i, 300); //first left mountain
    line(50, i, i + 50, 330); //second left mountain
    line(100, i + 50, i + 100, 300); //third left mountain
    line(200, i + 80, i + 200, 330); //fourth left mountain
  }

  //random repetition of background snowflakes (ellipses) every time you refresh the page
  for (var e = 0; e <= 50; e += 1) {
    stroke(255);
    fill(255, 255, 255, 100);
    strokeWeight(0.5);
    ellipse(random(50, 400), random(0, 300), 5);
  }

  //front snowflakes (line shapes)
  stroke(255);
  strokeWeight(0.5);

  //random repetition of the front snowflakes every time you refresh the page
  for (xx = 0; xx <= 50; xx += 1) {
    push();
    translate(random(10,400), random(10,400));
    points = 20;
    pAngle = 360 / points;
    radius = width / 75;

    for (angle = 100; angle < 500; angle += pAngle) {
      x = cos(radians(angle)) * radius;
      y = sin(radians(angle)) * radius;
      line(radius, radius, x + radius, y + radius);
    }
    pop();
  }
  noLoop();
}

//gradient background
function setGradient(x, y, w, h, c1, c2, axis) {
  if (axis == yaxis) {
    //gradience from top to bottom
    for (let i = y; i <= y + h; i += 1) {
      let int = map(i, y, y + h, 0, 1);
      let c3 = lerpColor(c1, c2, int);
      stroke(c3);
      line(0, i, 400, i);
      //reference/inspiration for gradient background: https://p5js.org/examples/color-linear-gradient.html
    }
  } 
}

function mousePressed () {
  //snow icicles attack as you click mouse (line shapes)
  stroke(255);
  strokeWeight(0.2);
  for (xx = 0; xx <= 10; xx += 1) {
    push();
    translate(random(10, 400), random(10, 400));
    points = 20;
    pAngle = 360 / points;
    radius = width / 75;

    for (angle = 100; angle < 500; angle += pAngle) {
      x = cos(radians(angle)) * radius;
      y = sin(radians(angle)) * radius;
      line(radius + mouseX, radius, x + radius, y + radius);
    }
    pop();
  }
}

At first, I wanted to create waves, but as I moved forward with the project, I changed to creating an interactive snowstorm in the mountains. I visualized from the hikers’ perspective, so the idea is for the view to get blurrier (whiter) as I keep clicking the mouse.

snapshots of progress

LO 4 – Sound Art

Noosphere-Aegis by Salvador Breed (2018)

Salvador Breed is a creator of music, sound design, art and technology. He combines sound and technology for installations, performances, and fashion shows. He collaborates with different fashion designers, artists, musicians, etc. to create a harmony between the music and the shows. The algorithms of the music are based on different meanings the shows carry or the specific moments in shows where emphasis is needed. Breed focuses on the “atmospheres, movements and impacts, blending boundaries between music and sound design” mostly using field recordings and modern technologies. As a choreographer of sound, Breed’s interests and sensibilities are manifested throughout the entirety of his music as all of his works are generally focused on natural ambience, silence, space, breaths, etc. A specific piece of work that gave me inspiration is Noosphere / Aegis, an interactive composition for installation by Salvador Breed and Phillip Beesley’s Living Architecture Systems Group in 2018. Noosphere is composed of spherical structures embedded with artificial intelligence that allows interaction with the audience. Salvador manifests his natural and silent sounds that go along smoothly with the moving installation piece. Their sound and computation collaboration can be found in the link below (or title).

https://salvadorbreed.com/Noosphere-Aegis

The installation immersion, circulation, and background music by Salvador Breed can be found below (starting at 1:20).

Interactive composition for installation view
Interactive composition for installation view

Project 3 – Dynamic Drawing

sunsetbeach
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-03

var wavy = 10;
var toggle = 0;
var bird = 255;

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

function draw() {
	//background - color changes from light blue to light purple as y-axis changes
	background(212 + mouseY / 50, 235 - mouseY / 53, 242 - mouseY / 49);

	//sun - size changes as y-axis changes 
	stroke(255);
	fill('#FFB7B2');
	ellipse(225, 418, min((mouseY), 260));

	//waves - position shift as y-axis changes 
	fill(255);
    var points = 5;
    var wav = wavy + mouseX / (width * 20);
    var step = mouseY / height * 100;

    beginShape();
    vertex(0, height);
    vertex(0, height / 1.5  + step);
    curveVertex(0, height / 1.5  + step);
    curveVertex(width / points, height / 1.5 + wav + step);
    curveVertex(2 * width / points, height / 1.5  - wav + step);
    curveVertex(3 * width / points, height / 1.5  + wav + step);
    curveVertex(4 * width / points, height / 1.5  - wav + step);
    curveVertex(5 * width / points, height / 1.5  + step);
    vertex(5 * width / points, height / 2 + step);
    vertex(width, height);
    vertex(0, height);
    vertex(0, height);
    endShape(CLOSE);

    //toggle when waves get high
    if (wav >= 15) {
    	toggle = 0;
    } else if (wav <= -15) {
    	toggle = 1;
    }

    //wave movement correction
    if (toggle == 0) {
    	wavy = wavy - 0.3;
    } else if (toggle == 1) {
    	wavy = wavy + 0.3;
    }

	//top right cloud - position shift as y-asis changes
	push();
	fill(255, 255, 255, 110);
	ellipse(440 - mouseY / 10, 320, (constrain(mouseY, 120, 320)), 25);
	pop();

	//bottom left cloud - position shift as y-axis changes
	fill(255, 255, 255, 100);
	ellipse(mouseY / 5.5, 370,(constrain(mouseY, 100, 340)), 20);

	//birds' right wings - birds move along with the mouse
	noStroke();
	fill(bird);
	arc(mouseX, mouseY, 20, 4, 0, PI + QUARTER_PI, PIE);
	arc(mouseX + 15, mouseY + 13, 20, 4, 0, PI + QUARTER_PI, PIE);
	arc(mouseX + 25, mouseY + 7, 20, 4, 0, PI + QUARTER_PI, PIE);
	arc(mouseX + 65, mouseY + 9, 20, 4, 0, PI + QUARTER_PI, PIE);
	arc(mouseX + 145, mouseY + 30, 20, 4, 0, PI + QUARTER_PI, PIE);

	//birds' left wings - birds move along with the mouse
	ellipse(mouseX - 4, mouseY - 3, 3, 10);
	ellipse(mouseX + 12, mouseY + 9, 3, 10);
	ellipse(mouseX + 22, mouseY + 3, 3, 10);
	ellipse(mouseX + 62, mouseY + 5, 3, 10);	
	ellipse(mouseX + 142, mouseY + 26, 3, 10);	

	//when the white birds go below the water, birds color changes to gray
	if (mouseY > 500) {
		bird = 205; 
	} else {
		bird = 255;
	}
}

At first, I wanted to create a realistic radial gradient sun, but the visuals did not turn out the way I expected; so I diverted direction and created a much simpler, more animated concept of the sunset beach.

LO 3 – Computational Fabrication

Norwegian Wild Reindeer Centre Pavilion (2011) by Snøhetta

The Norwegian Wild Reindeer Centre Pavilion is an observation pavilion that overlooks the Snøhetta mountain in Norway. The rock shaped wooden core represents the surrounding rock that has been eroded due to wind and running water.

In order to generate the form, Snøhetta design team used “digital 3D-models such as MAYA to drive the milling machines, Norwegian shipbuilders in Hardangerfjord created the organic shape from 10 inch square pine timber beams.” After, the wood was assembled in a traditional way – using wood pegs as fasteners. The form resembles Snøhetta’s style of expressionism and visual boldness. Materials include pine tar treated exterior wall and oiled interior wood walls.

The pavilion is a robust yet undisturbed in its form that the building itself “gives visitors an opportunity to reflect and contemplate this vast and rich landscape.” Personally, this aesthetic and design quality is the most admirable in which this company engages the audience with the architecture as well as the landscape in a natural, flowing way.

Project 2 – Variable Faces

alienface
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-02

var faceWidth = 300;
var faceHeight = 160;
var eyeSize = 65; 
var eyeWidth = 70;
var eyeHeight = 100;
var eyeTwinkleX = 23;
var eyeTwinkleY = 18;
var tongueSize = 36;
var B = 100;
var crownTipY = 140;


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

function draw() {
	//background color
	background(color(B));

	//alien head shape
	strokeWeight(0);
	fill(171,190,188);
	beginShape();
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width * (3/4), height/2 - (faceHeight - 40));
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	strokeWeight(0);
	beginShape();
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex((width/4) * 3, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	//crown
	strokeWeight(0);
	fill(214,178,69);
	triangle(376,crownTipY,350,200,318,184);
	triangle(343,185,343,crownTipY - 20,305,181);
	triangle(307,crownTipY - 25,295,178,325,186);

	strokeWeight(0);
	fill(171,190,188);
	quad(353,197,295,171,276,190,342,230);


	//mouth - stagnant
	fill(0);
	stroke(0);
	ellipse(240,395,43,10);

	//tongue
	fill(0,135,53);
	quad(251,396,228,396,230,401,248,404);
	beginShape();
	curveVertex(230,401);
	curveVertex(248,401);
	curveVertex(width/1.98, height/2 + 2.6 * tongueSize);
	curveVertex(width/2, height/2 + 2.6 * tongueSize);
	endShape(CLOSE);

	//right eye
	translate(width/1, height/90);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,295,eyeWidth,eyeHeight);

	//left eye
	translate(width/4.8,height/2.95);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,95,eyeWidth,eyeHeight);

	//left eye twinkle
	fill(255);
	ellipse(191,127,eyeTwinkleX,eyeTwinkleY);

	//right eye twinkle
	fill(255);
	ellipse(119,height/14 - 57.5,eyeTwinkleX,eyeTwinkleY);
}

function mousePressed() {
	//random assignment of drawing with mouse clicks
	clear(); //reshaping of head instead of adding onto the original shape
	background(0);
	faceWidth = random(200,350);
	faceHeight = random(160,200);
	eyeWidth = random(50,100);
	eyeHeight = random(100,120);
	tongueSize = random(34,42);
	B = random(0,170);
	crownTipY = random(70,160);
	eyeTwinkleX = random(15,23);
	eyeTwinkleY = random(10,18);
}

I was inspired by the alien emoji to create these variable faces. I love aliens 🙂

LO 2 – Generative Art

Michael Hansmeyer – Zauberflöte (2018)

Grotto set design for Mozart’s Magic Flute, directed by Romeo Castellucci

As an architecture student, I was first interested in this project because the creator was an architect. Michael Hansmeyer is an architect who focuses his works on generative thinking, “thinking about designing a process to generate objects.”

He maximizes his creativity by exploring with computational “natural and artificial” accidents.

For this project specifically, the goal was to produce forms, shapes that “appear synthetic and organic” at the same time. The results were not foreseen as there was a continuous regeneration of the form with the computer until satisfied. There were no references or inspirations prior to the project.

I find the collaboration of generative design and an opera unique and compelling in terms of architectural, computational, artistic, aesthetic purposes. It creates new spatial experiences and sensations that one cannot create with human ability. I admire the high quality, rich details in the result as well as the architect’s confidence and control between the fine line of chaos and order. His imagination of the unimaginable is quite intriguing. 

Description of the piece itself: “The geometry was voxelized and partitioned into the nine distinct elements that are visible on stage. Four elements descend from the ceiling, while five others are rolled into space.”

Reference: http://www.michael-hansmeyer.com/zauberfloete

Project 1 – Self Portrait

portrait 
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-01

function setup() {
    createCanvas(500,500);
    background(212,207,232);
    }

function draw() {
	
	//sideface
	noStroke()
	fill(255);
	point(440,142);
	point(436,161);
	point(435,173);
	point(444,185);
	point(434,188);
	point(434,201);
	point(418,217);
	point(384,198);
	point(395,155);
	point(395,127);
	point(417,113);
	point(434,129);
	point(440,141);
	point(439,153);

	fill(255);
	beginShape();
	curveVertex(440,142);
	curveVertex(436,161);
	curveVertex(435,173);
	curveVertex(444,185);
	curveVertex(434,188);
	curveVertex(432,201);
	curveVertex(418,217);
	curveVertex(384,198);
	curveVertex(395,155);
	curveVertex(395,127);
	curveVertex(417,113);
	curveVertex(434,129);
	curveVertex(440,141);
	curveVertex(439,153);
	endShape();

	//sharpness in nose
	triangle(430,190,446,185,433,177);

	//sharpness in chin
	triangle(422,220,397,210,427,212);

	//right eye
	strokeWeight(1);
	stroke(0);
	curve(426,172, 426,172,423,163,407,167);
	curve(426,172,423,163,407,167,418,172);
	curve(423,163,407,167,418,172,418,172);
	
	fill(0);
	ellipse(419,168,8,9);

	strokeWeight(1);
	line(426,172,417,172);

    //twinkle in the eye
 	fill(255);
 	circle(418,165,2);

 	//eyeliner
 	noFill();
 	arc(407,166,4,2,HALF_PI,PI);

	//body from neck to shoulder
	noStroke()
	fill(255);
	point(375,208);
	point(378,196);
	point(395,204);
	point(385,250);
	point(430,287);
	point(422,313);
	point(332,313);
	point(350,230);
	point(381,196);

	fill(255);
	beginShape();
	curveVertex(375,208);
	curveVertex(378,196);
	curveVertex(395,204);
	curveVertex(385,250);
	curveVertex(430,287);
	curveVertex(422,313);
	curveVertex(332,313);
	curveVertex(350,230);
	curveVertex(381,196);
	endShape(close);

	//body shoulder to waist
	fill(255);
	quad(434,306,353,436,293,436,335,287);

	//hair
	strokeWeight(1);
	point(436,117);
	point(440,139);
	point(435,115);
	point(423,97);
	point(395,87);
	point(350,92);
	point(310,136);
	point(198,325);
	point(174,477);
	point(273,456);
	point(324,373);
	point(350,250);
	point(382,200);
	point(398,153);
	point(402,126);
	point(417,113);
	point(430,123);
	point(440,141);
	strokeWeight(1);

	fill(0);
	beginShape();
	curveVertex(436,117);
	curveVertex(440,139);
	curveVertex(435,115);
	curveVertex(423,97);
	curveVertex(395,87);
	curveVertex(350,92);
	curveVertex(310,136);
	curveVertex(198,325);
	curveVertex(174,477);
	curveVertex(273,456);
	curveVertex(324,373);
	curveVertex(350,250);
	curveVertex(382,200);
	curveVertex(398,153);
	curveVertex(402,126);
	curveVertex(417,113);
	curveVertex(430,123);
	curveVertex(440,141);
	endShape();
}

LO 1 – My Inspiration

Iris Van Herpen’s Computational Couture

As a foremost, I admire the aesthetic beauty and its gracefulness of the designs themselves – along with the serenity and eeriness her lines, especially this one, brings out in the show. I have always been interested in fashion and as an architecture major, the two seem to be a great successful collaboration done by Iris Van Herpen.

There were numerous people involved, including the designer herself, cloth makers, computational designers, music artists etc. I assume each piece takes weeks or months to come up with and finish.

I believe this project consists of many different softwares including revit, grasshopper, rhino, javascript, etc. From my research, the designer seems to have created the project using her own creativity and influences from her personal experiences in life.

The designer, mentions, is influenced by little things in life such as umbrella hooks, hair pins, etc.

SYNTOPIA DRESS BY IRIS VAN HERPEN – IAAC Blog
example of a piece in couture