Author: changjuc@andrew.cmu.edu

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.

Steel

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.

variableface

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

A screenshot from the movie “Oblivion”

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.

Danny-Face

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;
  }
}