// 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.
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.
click!
// 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.
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).
// 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.
]]>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.
// 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 
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.”
// 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();
}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.
