Author: hayoon

Project 06 – Abstract Clock

sketch
//Hayoon Choi
//hayoonc
//Section C

var starx = [];
var stary = [];
var starr = [];

function setup() {
    createCanvas(480, 480); //making the stars stay in position 
    for( var i = 0; i <= 300; i++){
      starx[i] = random(width);
      stary[i] = random(height);
      starr[i] = random(3);
    }
}

function draw() {
    background(0);
    //drawing stars in the background
    fill(255, 252, 235);
    noStroke();
    for( var i = 0; i <= 300; i++){
      circle(starx[i], stary[i], starr[i]) 
    }
    flame(240, 240);
    sun(240, 240);
    blush(240, 240);
    eyelash(240, 240);
    eyelash(160, 240);
}

function sun(x, y){
    push();
    translate(x, y);
    noStroke();
    fill(237, 227, 183);
    circle(0, 0, 200); //head
    //eyes
    fill(255);
    stroke(0);
    ellipse(30, -24, 31, 12);
    ellipse(-50, -24, 31, 12);
    fill(0);
    circle(30, -24, 5);
    circle(-50, -24, 5);
    //mouth
    noStroke();
    fill(234, 136, 173);
    arc(-5, -16, 15, 10, PI, 2 * PI);
    arc(-15, -16, 15, 10, PI, 2 * PI);
    arc(-10, -16, 25, 20, 0, PI);
    fill(255);
    circle(-2, -13, 3)
    //mole
    fill(0);
    circle(5, -4, 3)
    pop();
}

function blush(x, y){ //seconds
    let s = second();
    push();
    translate(x, y);
    rotate(radians())
    fill(234, 97, 66);
    noStroke();
    let secondH = map(s, 0, 60, 0, 360);
    arc(30, -5, 30, 20, 0, -secondH);
    arc(-56, -5, 30, 20, 0, -secondH);
    pop();
}

function eyelash(x, y){ //minutes
    //eyelashes grow by minutes
    let m = minute();
    push();
    translate(x, y);
    stroke(0);
    for (var i = 0; i < m; i ++) {
        line(18.5, -29, 18.5, -29 + (-0.5 * i));
        line(30, -31, 30, -31 + (-0.5 * i));
        line(41.5, -29, 41.5, -29 + (-0.5 * i));
    }
    pop();
}

function flame(x, y){ //hours
    //the color of flame changes each hour one by one
    var hournow = hour() % 12 + 1; //restarts after 12 hours
    push();
    translate(x, y);
    //red flame
    scale(2);
      for (var i = 0; i < hournow; i++){
        push();
        fill(221, 54, 54);
        rotate(radians(30 * i - 90));
        noStroke();
        ellipse(50, 0, 45, 25); 
        pop();
    }
    //orange flame
    for (var i = hournow; i < 12; i++){
        push();
        fill(255, 149, 62);
        rotate(radians(30 * i - 90));
        noStroke();
        ellipse(50, 0, 45, 25); 
        pop();
    }
    pop();
}

I wanted to create a sun in space. The color of each flame changes after one hour, the eyelashes grow taller by minutes, and the blushes fill up by seconds.

Looking Outwards 06: Randomness

William Latham is a computer scientist who creates fractal art using the Mutator program. Fractal art is achieved through the mathematical calculations of fractal objects displayed, with the use of self-similar transforms that are generated and manipulated with different assigned geometric properties to produce multiple variations of the shape in never ending patterns. Since it can infinitely produce the patterns, the artist doesn’t know what the artwork is going to look like at the end. One of his projects that grabbed my interest is called the White Horn and was produced at IBM in 1990. This artwork is supposed to represent the reminiscent of squid and marine life. What I admire about Latham is that he creates 3D fractal art works unlike other fractal artists who work with flat surfaces. It was refreshing to see these types of artworks in the form of 3D sculptures. In addition, he spent a lot of his time in the natural history museum, taking inspiration from the natural patterns and forms. I thought it was interesting that he artistically combined the natural world with the digital world to create his own humanized version of the natural system. 

William Latham’s White Horn

Project-05-Wallpaper

WPHC
//Hayoon Choi
//hayoonc
//section C

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

function draw() {
    background(232, 241, 255);
    //vertical lines
    for (var x = 0; x < width - 10; x += 35){
        stroke(255);
        strokeWeight(5);
        line(x, 0, x, height);
    }
    //drawing dogs
    for (var x = 100; x < width; x += 200){
    	for (var y = 70; y < height; y += 145){
    		dog(x, y, 0.75);
    	}
    }
    //drawing reflected dogs (2nd and 4th columns)
    for (var x = 200; x < width - 190; x += 200){
    	for (var y = 140; y < height - 140; y += 145){
    		dog(x, y, 0.7, -1);
    	}
    }
}

function dog(x, y, s1 = 1, s2 = 1){
	push();
	fill(216, 154, 80);
	translate(x, y);
	scale(s1);
	scale(s2, 1); //reflecting dog
	//ears
    strokeWeight(5);
	stroke(216, 154, 80)
	strokeJoin(ROUND);
	triangle(18, -35, 19, -19, 4, -23);
	triangle(-12, -39, -5, -24, -20, -22);
	stroke(200);
	fill(200);
	triangle(15, -30, 19, -19, 4, -23);
	triangle(-12, -33, -5, -24, -20, -22);
	//fur
	stroke(216, 154, 80)
	strokeWeight(1);
	fill(216, 154, 80);
	beginShape();
	curveVertex(27, -2);
    curveVertex(27, -2);
	curveVertex(42, 5);
	curveVertex(37, 5);
	curveVertex(44,12);
	curveVertex(32, 12);
	curveVertex(29, 6);
	endShape();
	beginShape();
	curveVertex(44, 34);
    curveVertex(44, 34);
	curveVertex(47, 44);
	curveVertex(42, 42);
	curveVertex(42, 56);
	curveVertex(37, 52);
    curveVertex(37, 52);
	endShape();
	//body
	noStroke();
	ellipse(0, 0, 64, 59);
	ellipse(11, 31, 68, 72);
	ellipse(-1, 49, 80, 44);
	//legs
	ellipse(-11, 69, 12, 24);
	ellipse(-38, 59, 12, 24);
	//mouth
	strokeWeight(0.5);
	stroke(0);
	fill(200);
	arc(-10, 6, 15, 5, QUARTER_PI, PI + QUARTER_PI, OPEN)
	arc(-10, 0, 25, 10, QUARTER_PI, PI + QUARTER_PI, OPEN)
	//eyes
	fill(255);
	ellipse(3, -7, 10, 5)
	ellipse(-20, -7, 10, 5)
	fill(0);
	ellipse(3.5, -7, 7, 4)
	ellipse(-19.5, -7, 7, 4)
	//nose
	ellipse(-17, 0, 5, 3);
	pop();
}

I wanted draw my dog and show the face she makes whenever I call her name. She tries very hard to ignore me and looks at the other direction.

LO-3D Computer Graphics

Peter Kolus is a senior 3D artist and a CG generalist. Kolus has taken lead projects for leading companies such as Disney, Tiger Beer, and Mercedes Benz. For one of his projects, he collaborated with Leo Calliard and Gosia Sluszkiewicz to create a series of artworks called “Heroes of Stones.” I was intrigued by it because it shows such detailed and realistic stone sculptures of heroes and villains from comic books. It was really interesting to see vivid expressions captured on each character’s face, even though they were supposedly just sculptures. In addition, each individual artwork carries so much detail on all aspects, such as lighting and texture. He successfully turned his interest in comics to a realistic artwork in a compelling setting. Kolus was responsible for shading, rendering, and composition. It’s possible that he may have used programs like 3ds Max, photoshop, and nuke to generate different textures and shades. 

Project 04: String Art

hcsaDownload
//Hayoon Choi
//hayoonc
//Section C

var numLines = 50; 

function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {
    background(0);
    var x1 = 200;
    var x2 = 400;
    var y1 = 0;
    var y2 = 400;
    var sf = constrain(mouseY, 150, 255); //line color change
    stroke(sf); 
    strokeWeight(0.75); 
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        line(i, i, i * 8, 170); //top left section
        line(mouseX, i * 6, i, i); //moving left section
    }
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        line(400 - i, i, 400 - i * 8, 170); //top right section
        line(mouseX, i * 6, 400 - i, i); //moving right section
    } 
    for (var y1 = 0; y1 <= 400; y1 += 5) {
    	line(x1, y1 , x2, y2); //right section 
    	x2 += 35;
    }
    x2 = 0;
    y2 = 400;
    for (var y1 = 0; y1 <= 400; y1 += 5) {
        line(x1, y1 , x2, y2); //left section 
    	x2 -= 35;
    }
    stroke(244, 106, 78);
    fill(100, 23, 94, 50);
    push();
    translate(mouseX, 160);
    //rotating orange lines
    for (var j = 0; j < 60; j++){
        push();
        strokeWeight(1);
        rotate(radians(6 * j));
        line(0, 0, 0, 1000); //orange lines
        pop();
    }
    pop();
    
}

LO-04-Sound Art

Multiverse is an audio-visual installation, created by fuse, that attempts to show the eternal birth and death of infinite parallel universes. I was attracted by this artwork not only because of its astonishing visual, but also because of its concept. I’ve been fascinated with the idea of the multiverse, or just universe in general, and time. However, I’ve never thought about showing the concept through digital art and sound installation. I didn’t even know that it was possible to physically show something abstract like that. The installation shows two large surfaces mirroring each other generate an infinite reflection of the image towards the sky and the center of the earth. The creators succeeded in combining the theory with algorithmic art and created a memorable artwork that is both visually and audibly stunning.

An application developed in openFrameworks manages the various scenes that interact with Ableton Live and MAX/MSP  for the production of soundtracks through a generative sound system. In order to display “realistic” and infinite scenes, the program provides small random changes to parameter values of physical laws during the bounce, leading to a new universe with slightly different fundamental properties. In addition, in order to prevent it from replaying the same scene, for every thirty minutes, the program is set to enter an evolutionary transition from the previous genetic information.

video of Multiverse

Project-03-Dynamic-Drawing

DDDownload
var r = 254;
var g = 247;
var b = 255;
var angle = 0;

function setup() {
    createCanvas(600, 450);
    background(220);
    frameRate(20);
}

function draw() {
    //bg color change
    background(r, g - (mouseX / 15), b - (mouseY / 20));
    //spinning rect
    push();
    fill(225, 250, 220, 50);
    rectMode(CENTER);
    translate(300, 225);
    rotate(radians(angle));
    rect(0, 0, 800, 20);
    rect(0, 0, 20, 800);
    pop();
    angle += 5;
    //rotating stars
    push();
    translate(width / 2, height / 2);
    rotate(radians(mouseX / 7));
    //blue stars
    fill(227, 252, 250);
    for (let i = 0; i < 6; i++){ 
        push();
        rotate(radians(60 * i));
        translate(200 , 0);
        star();
        pop();
    }
    //pink stars
    fill(255, 240, 240);
    for (let i = 0; i < 6; i++){ 
        push();
        rotate(radians(60 * i + 30));
        translate(200 , 0);
        star();
        pop();
    }
    pop();
    
    //back circle
    noStroke();
    fill(255, 247, 204, 30);
    circle(width / 2, height / 2, min(mouseX, 350));
    fill(255, 247, 204, 70);
    circle(width / 2, height / 2, min(mouseX, 300));
    fill(240, 230, 122);
    circle(width / 2, height / 2, 230);
  
    //Drawing Grandma
    //body
    push();
    var y = constrain(mouseY, 200, 400);
    noStroke();
    fill(247, 126, 142);
    rect(width/2 - 120, y + 30, 240, y + 200, 80);
    fill(245, 238, 164);
    circle(width/2, y + 120, 10);
    circle(width/2, y + 150, 10);
    circle(width/2, y + 180, 10);
    //head
    noStroke();
    fill(250, 231, 217);
    ellipse(width/2, y, 200, 200);
    //ears
    ellipse((width/2)-90, y, 50, 50);
    ellipse((width/2)+90, y, 50, 50);
    //glasses
    strokeWeight(1);
    noFill();
    stroke(30);
    arc(width/2, y, 20, 20, PI, 0);
    fill(235, 241, 255);
    ellipse(width/2 - 20, y, 25, 25);
    ellipse(width/2 + 20, y, 25, 25);
    //nose
    stroke(240, 208, 189);
    strokeWeight(20);
    strokeJoin(ROUND);
    fill(240, 208, 189);
    triangle(width/2, y + 5, width/2 - 10, y+20 ,width/2 + 10, y+20);
    //hair
    fill(214);
    noStroke();
    ellipse(width/2, y - 130, 60, 65);
    push();
    translate (width/2 + 50, y - 80);
    rotate(radians(120));
    ellipse (0, 0, 50, 130);
    pop();
    push();
    translate (width/2 - 50, y - 80);
    rotate(radians(-120));
    ellipse (0, 0, 50, 130);
    pop();
    pop();
   
}

function star() {
    //drawing the star
    push();
    rectMode(CENTER);
    square(0, 0, 20);
    rotate(radians(45));
    square(0, 0, 20);
    pop();
}

LO-03: Computational Fabrication

Designer Michael Schmidt and architect Francis Bitonti collaborated to create this 3D printed gown that is specifically designed for the model Dita Von Teese. They enforced the spiral formula to the computer rendering of the dress that would emphasize femininity qualities of her body. This was something that interested me as a design major, since I didn’t really connect fashion with coding. By learning about this project, I realized that computational art is a broad field that can be applied to anything related to design or art. The idea of bringing digital design into a physical form was fascinating. In addition, the complicated process of creating this dress highlights its beauty. The floor-length nylon gown was made using selective laser sintering (SLS), which builds up the material in layers from plastic powder fused together with a laser. The rigid plastic components are completely articulated to create a netted structure for fluidity and movement. Also they applied spirals based on the Golden Ratio to the computer rendered Von Teese’s body so that the garment would fit her perfectly. The dress has 4000 articulative joints and all were written into CAD code so that they can be printed. 

3D-printed dress for Dita Von Teese
Image of Dita Von Teese wearing 3D printed gown

Variable Face

I decided to give this flower a face. I made each eye shape to randomize differently. In addition, the flower occasionally blushes.

VariableFace
/*
 *  Hayoon Choi
 *  hayoonc@andrew.cmu.edu
 *  Section C
 *
 *  Random Face
 */
var reyeWidth = 23;
var reyeHeight = 7;
var leyeWidth = 23;
var leyeHeight = 7;
var headWidth = 160;
var headHeight = 262;
var petalHeight = 150;
var petalR = 237;
var petalG = 227;
var petalB = 98;
var nosePoint = 253.5;
var noseePoint = 243.5;
var blush = 0;

function setup() {
    createCanvas(480, 640);
    frameRate = 10;
}
 
function draw() {
    background(166, 213, 221);
    //clouds
    fill(255);
    circle(100, 50, 70);
    circle(140, 90, 60);
    circle(70, 90, 90);
    circle(150, 60, 50);
    circle(300, 180, 50);
    circle(350, 170, 80);
    circle(375, 120, 85);
    circle(430, 150, 100);
    circle(400, 200, 45);
    //petals
    noStroke();
    fill(petalR, petalG, petalB);
    ellipse(207, 168, 61, petalHeight);
    push();
    translate(290,210);
    rotate(PI / 3.0);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(320,275);
    rotate(HALF_PI);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(310,345);
    rotate(PI / 1.5);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(270,390);
    rotate(PI / 1.25);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(120,210);
    rotate(-PI / 3.0);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(100,275);
    rotate(-HALF_PI);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(100,345);
    rotate(-PI / 1.5);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(114,390);
    rotate(-PI / 1.25);
    ellipse(0, 0, 61, petalHeight);
    pop();
    //shirt
    noStroke();
    fill(112, 163, 72);
    rect(80, 400, 250, 300, 80);
    //leaves
    ellipse(390, 530, 180, 70);
    ellipse(50, 580, 180, 70);
    strokeWeight(2);
    stroke(49, 73, 29);
    line(330, 530, width, 530);
    line(0, 580, 80, 580);
    //v neck
    point(135, 400);
    point(160, 470);
    point(200, 530);
    point(240, 470);
    point(280, 400);
    noStroke();
    fill(201, 170, 109);
    beginShape();
    curveVertex(135, 400);
    curveVertex(135, 400);
    curveVertex(160, 470);
    curveVertex(200, 530);
    curveVertex(240, 470);
    curveVertex(280, 400);
    curveVertex(280, 400);
    endShape();
    //head
    fill(216, 187, 115);
    ellipse(207, 347, headWidth, headHeight);
    noFill();
    strokeWeight(3);
    stroke(153, 128, 80);
    arc(230, 450, 30, 15, 0, PI);
    //eyes
    strokeWeight(1);
    stroke(0);
    fill(255);
    ellipse(189, 312, leyeWidth, leyeHeight);
    ellipse(258, 312, reyeWidth, reyeHeight);
    fill(0);
    noStroke();
    var x = constrain(mouseX, 189 - leyeWidth + 20, 189 + (leyeWidth - 20));
    ellipse(x, 312, 9, 7);
    var xTwo = constrain(mouseX, 257 - reyeWidth + 20, 257 + (reyeWidth - 20));
    ellipse(xTwo, 312, 9, 7);
    //mouth
    fill(214, 116, 146);
    ellipse(245, 368, 20.5, 16.5);
    stroke(0);
    line(236, 368, 256, 368);
    //blush
    if (blush > 1.5) {
        fill(245, 223, 223);
        noStroke();
        ellipse (170, 347, headWidth / 5, headHeight /12);
        ellipse (280, 347, headWidth / 7, headHeight /14);
    }
    //nose
    point(233.5, 307.5);
    point(noseePoint, 320.5);
    point(nosePoint, 350.5);
    point(241.5, 355.5);
    fill(216, 187, 115);
    stroke(0);
    beginShape();
    curveVertex(233.5, 307.5);
    curveVertex(233.5, 307.5);
    curveVertex(noseePoint, 320.5);
    curveVertex(nosePoint, 350.5);
    curveVertex(241.5, 355.5);
    curveVertex(241.5, 355.5);
    endShape();
    noFill();
    arc(236.5, 354.5, 4, 4, PI , TWO_PI);
    //shine
    fill(255);
    noStroke();
    push()
    translate(170 , 250);
    rotate(-PI / 3.75);
    ellipse(0, 0, 40, 10);
    pop();
    ellipse(195, 227, 10, 10);
}

function mousePressed() {
    reyeWidth = random(20, 35);
    reyeHeight = random(7, 25);
    leyeWidth = random(20, 35);
    leyeHeight = random(7, 25);
    headWidth = random(145, 230);
    headHeight = random(260, 350);
    petalHeight = random(100, 250);
    petalR = random(150, 250);
    petalG = random(30, 250);
    petalB = random(40, 220);
    nosePoint = random(245, 350);
    noseePoint = random(240, 280);
    blush = random(0,2);
}

LO 2 – Generative Art

The project Drawing Water, created by David Wicks, grabbed my attention as it incorporated scientific facts about where water falls and where it is consumed in the US. It was definitely fascinating to see scientific rainfall data being turned into an interactive artwork. Wick explores how landscapes, data visualization, and relationship between people and places can be turned into drawings, maps, animations, and softwares. Although this project may just look like a pretty animation, each line corresponds to a daily rainfall measurement. The length and initial placement of the lines represent the amount of rainfall and where it fell. The final placement and color are determined by the urban water consumption. As an example, if the rainfall was pulled farther away from where it fell, the color of the lines turn from blue to white. Each part of the map is encoded with specific data from that specific region. Wicks stated that he downloaded and parsed the data using python and used Cinder for creating visual software. In addition, this animated map is also interactive, allowing users to zoom in or zoom out of certain areas.