## Danny Cho_Looking Outward 2 – Generative Art

I looked into the Fractal Forums for inspiration for Generative Art. Mathematical patterns always seemed so beautiful to me especially in bigger scales. The way they enable me to imagine myself in the patterns was mesmerizing.

How such complicated shapes are created from lines of command texts amazes me. If I try imagine a human working on this kind of project, by painting or other kind of laborious means, I wouldn’t admire the work, not the artist’s grit, but the work. I would probably not be able to empathize with the artist, and think, “Wow, that is amazing, but why does that matter or what’s the value of that art that is so static?’ But knowing that this is generated by computer and can be manipulated to different scales and shapes makes it so much more versatile than just a painting to me.

About the way it was created, as it is mentioned in the name of the forum, I believe it used the fractal number pattern to generate the patterns, how from a number, infinite related numbers branch out as long as the pattern continues. What is interesting here is that this art contains more than one repeating pattern. The quicker spiral and slower spiral, and another pattern on the edges of the spirals.

The artist’s username is “Caleidoscope” and the post was created on 2017.

## Danny Cho_Project 2_Variable-Face

This is variation of the first portrait project. The cheek of Bao expands, and the blushes move as well. Also, the saturation of the background and the vertical size of the mouth are randomized, too.

``````var cheek = 200; //extension of cheek
var blushLoc = 200; //position of blush
var mouth = 210; //vertical size of mouth
var bgTint = 67; //saturation of background
var blushSat = 87.6; //saturation of blush

let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;

function setup() {
createCanvas(400, 400);
noStroke();
colorMode(HSL);
let c = color(355, 67, 67);
let value = saturation(c);
fill(c);
rect(0,0, 400, 400);

}

function draw(){
colorMode(HSL);
strokeWeight(0)
let c = color(355, bgTint, 67);
let value = saturation(c);
fill(c);
rect(0,0, 400, 400);

fill(212, 57.6, 80.6)
strokeWeight(0)
ellipse(200, 410, 460, 300)
//body
fill(17, 56.2, 93.7);
strokeWeight(0);
beginShape();
curveVertex(200, 200);  //top
curveVertex(200, 200);
curveVertex(175, 230);
curveVertex(150, 270);  //left handle
curveVertex(125, 280);
curveVertex(120, 285);
curveVertex(135, 300);
curveVertex(160, 288);
curveVertex(200, 290);  //lowest point
curveVertex(240, 288);
curveVertex(265, 300);
curveVertex(280, 285);
curveVertex(275, 280);
curveVertex(250, 270);  //right handle
curveVertex(225, 230);
curveVertex(200, 200);
curveVertex(200, 200);
endShape();
//face
fill(17, 56.2, 93.7);
strokeWeight(0);
beginShape();
curveVertex(200, 100);
curveVertex(200, 100);
curveVertex(180, 135);
curveVertex(325 - cheek, cheek - 30); //325 - cheek, cheek - 30
curveVertex(120, cheek); //cheek
curveVertex(200, 220+(cheek*(1/15))); //low tip
curveVertex(280, cheek); //cheek
curveVertex(75 + cheek, cheek - 30); //75 + cheek, cheek - 30
curveVertex(220, 135);
curveVertex(200, 100);
curveVertex(200, 100);
endShape();
//left eye
fill(0,0,15.7);
circle(170, 175, 20)
//left eye shine
fill(47, 89.7, 73.3);
strokeWeight(0);
beginShape();
curveVertex(180,175); //right point
curveVertex(180,175);
curveVertex(173,178);
curveVertex(170,185); // lowest point
curveVertex(167,178);
curveVertex(160,175);
curveVertex(167,172);
curveVertex(170,165);
curveVertex(173,172);
curveVertex(180, 175);
curveVertex(180, 175); //top point
endShape();
//right eye
fill(0,0,15.7)
circle(230, 175, 20) //
//right eye shine
fill(47, 89.7, 73.3);
strokeWeight(0);
beginShape();
curveVertex(240,175); //right point
curveVertex(240,175);
curveVertex(233,178);
curveVertex(230,185); // lowest point
curveVertex(227,178);
curveVertex(220,175);
curveVertex(227,172);
curveVertex(230,165);
curveVertex(233,172);
curveVertex(240, 175);
curveVertex(240, 175); //top point
endShape();
//mouth
fill(30)
strokeWeight(1);
stroke(30);
beginShape();
curveVertex(192.5, 200);
curveVertex(192.5, 200);
curveVertex(196.5, mouth);
curveVertex(200, mouth+4);
curveVertex(203.5, mouth);
curveVertex(207.5, 200);
curveVertex(207.5, 200);
endShape();

fill(17, 56.2, 93.7);
strokeWeight(1);
stroke(30);
circle(192.5, 200, 15);
fill(17, 56.2, 93.7);
strokeWeight(1);
stroke(30);
circle(207.5, 200, 15);
//coverup
fill(17, 56.2, 93.7);
strokeWeight(0);
rect(170, 190, 60, 10);

//blush
fill(355, blushSat, 74.7);
strokeWeight(0);
circle(340-blushLoc, blushLoc-10, 24); //340-cheek, cheek-10
fill(355, blushSat, 74.7);
strokeWeight(0);
circle(blushLoc+60, blushLoc-10, 24);//cheek+60, cheek-10

//left arm
fill(17, 56.2, 93.7);
stroke(30)
strokeWeight(1);
beginShape();
curveVertex(value1x, value1y);
curveVertex(value1x, value1y);
curveVertex(value2x, value2y);
curveVertex(value3x, value3y);
curveVertex(value3x, value3y);
endShape();
//right arm
fill(17, 56.2, 93.7);
stroke(30)
strokeWeight(1);
beginShape();
curveVertex(207, 250);
curveVertex(207, 250);
curveVertex(210, 265);
curveVertex(213, 250);
curveVertex(213, 250);
endShape();
}

function mousePressed() {
bgTint = random(0, 100);
cheek = random(200, 250);
blushLoc = 200 + (cheek - 200)*(3/5);
mouth = random(210, 230)
blushSat ++;
if (value2y === 265) {
value2y = 230;
} else {
value2y = 265;
}

}``````

## Danny Cho-LookingOutwards-01

When I see interfaces from sources such as sci-fi movies like Iron Man, or Oblivion, it always excites me and makes me want to create something similar. My favorite designer regarding this topic is Gmunk (Bradley G Munkowitz). He uses mixture of Cinema 4D, After Effects, and other softwares to create mind blowing animations. Such graphics really catch the attention of the audience by generating futuristic atmosphere as well as help us imagine ourselves in the position of the characters that are using the interface.

Above is the UI of Bubbleship. Bubbleship is a paramount vehicle in the movie. Gmunk’s stated that it was the most researched graphic task, trying to imitate the actual functional data that currently exists in the combat aircraft interfaces as well as modernizing its aesthetics. I genuinely appreciate the works that someone put in much considerations to crafting it to very details, though it’s not required to do so.

Such as HUD above, I have been using softwares such as After Effects myself to replicate such interfaces, but have not been able to create an actual interaction. I look forward to learn how to create digital interactions that reacts to the user’s movement and actions, with a behavior more than just a pre-directed script.

## Danny-Face

I tried to imitate a character called “Bao” from a short film with a lot of curve vertexes, and other elements. I also added an interactive feature to add to the cuteness.

``````
let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;

function setup() {
createCanvas(400, 400);
background(227, 114, 124);
}

function draw(){
fill(177, 204, 234)
strokeWeight(0)
ellipse(200, 410, 460, 300)
//body
fill(248, 235, 230);
strokeWeight(0);
beginShape();
curveVertex(200, 200);	//top
curveVertex(200, 200);
curveVertex(175, 230);
curveVertex(150, 270); 	//left handle
curveVertex(125, 280);
curveVertex(120, 285);
curveVertex(135, 300);
curveVertex(160, 288);
curveVertex(200, 290);	//lowest point
curveVertex(240, 288);
curveVertex(265, 300);
curveVertex(280, 285);
curveVertex(275, 280);
curveVertex(250, 270);	//right handle
curveVertex(225, 230);
curveVertex(200, 200);
curveVertex(200, 200);
endShape();
//face
fill(248, 235, 230);
strokeWeight(0);
beginShape();
curveVertex(200, 100);
curveVertex(200, 100);
curveVertex(180, 135);
curveVertex(125, 170);
curveVertex(120, 200);
curveVertex(200, 220); //low tip
curveVertex(280, 200);
curveVertex(275, 170);
curveVertex(220, 135);
curveVertex(200, 100);
curveVertex(200, 100);
endShape();
//left eye
fill(40)
circle(170, 175, 20)
//left eye shine
fill(248, 222, 126);
strokeWeight(0);
beginShape();
curveVertex(180,175); //right point
curveVertex(180,175);
curveVertex(173,178);
curveVertex(170,185); // lowest point
curveVertex(167,178);
curveVertex(160,175);
curveVertex(167,172);
curveVertex(170,165);
curveVertex(173,172);
curveVertex(180, 175);
curveVertex(180, 175); //top point
endShape();
//right eye
fill(40)
circle(230, 175, 20)
//right eye shine
fill(248, 222, 126);
strokeWeight(0);
beginShape();
curveVertex(240,175); //right point
curveVertex(240,175);
curveVertex(233,178);
curveVertex(230,185); // lowest point
curveVertex(227,178);
curveVertex(220,175);
curveVertex(227,172);
curveVertex(230,165);
curveVertex(233,172);
curveVertex(240, 175);
curveVertex(240, 175); //top point
endShape();
//mouth
fill(248, 235, 230);
strokeWeight(1);
circle(192.5, 200, 15);
fill(248, 235, 230);
strokeWeight(1);
circle(207.5, 200, 15);
//coverup
fill(248, 235, 230);
strokeWeight(0);
rect(170, 190, 60, 10);

//blush
fill(247, 134, 144)
strokeWeight(0)
circle(140, 190, 24)
fill(247, 134, 144)
strokeWeight(0)
circle(260, 190, 24)

//left arm
fill(248, 235, 230);
stroke(140)
strokeWeight(1);
beginShape();
curveVertex(value1x, value1y);
curveVertex(value1x, value1y);
curveVertex(value2x, value2y);
curveVertex(value3x, value3y);
curveVertex(value3x, value3y);
endShape();
//right arm	fill(248, 235, 230);
stroke(140)
strokeWeight(1);
beginShape();
curveVertex(207, 250);
curveVertex(207, 250);
curveVertex(210, 265);
curveVertex(213, 250);
curveVertex(213, 250);
endShape();
}

function mouseClicked() {
if (value2y === 265) {
value2y = 230;
} else {
value2y = 265;
}
}

``````