## 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);
//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);
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);
noStroke();
ellipse(50, 0, 45, 25);
pop();
}
//orange flame
for (var i = hournow; i < 12; i++){
push();
fill(255, 149, 62);
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.

## 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

hcsa
``````//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);
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.

## Project-03-Dynamic-Drawing

DD
``````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);
rect(0, 0, 800, 20);
rect(0, 0, 20, 800);
pop();
angle += 5;
//rotating stars
push();
translate(width / 2, height / 2);
//blue stars
fill(227, 252, 250);
for (let i = 0; i < 6; i++){
push();
translate(200 , 0);
star();
pop();
}
//pink stars
fill(255, 240, 240);
for (let i = 0; i < 6; i++){
push();
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);
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);
ellipse (0, 0, 50, 130);
pop();
push();
translate (width/2 - 50, y - 80);
ellipse (0, 0, 50, 130);
pop();
pop();

}

function star() {
//drawing the star
push();
rectMode(CENTER);
square(0, 0, 20);
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.

## 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 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();
fill(216, 187, 115);
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();
}
//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);