Author: Katherine

Katherine Hua – Project 02 – Variable Face

sketch

/*
Katherine Hua
Section A
khua@andrew.cmu.edu
Project-02
*/

var x = 60;
var y = 120;
var z = 180;
var a = 240;
var b = 300;
var c = 360;
var d = 420;
var e = 3;
var f = 477;
var speed = 1;
var backgroundColorR = 250;
var backgroundColorG = 250;
var backgroundColorB = 250;
var eyeWidth = 30;
var eyeHeight = 30;
var pupilWidth = 5;
var pupilHeight = 5;
var skin = 30;
var lips = 0;
var hair = 0;
var brows = 0;
var cheekColorR = 245;
var cheekColorG = 195;
var cheekColorB = 194;



 
function setup() {
    createCanvas(480, 640);
    background(backgroundColorR, backgroundColorG, backgroundColorB);
}
 
function draw() {

	//background
	background(backgroundColorR, backgroundColorG, backgroundColorB);
	
	ellipse(x, 80, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 160, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 240, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 320, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 400, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
	ellipse(x, 480, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
 	ellipse(x, 560, 50, 50);
 	x += speed;
 	if (x > width + 25) {
 		x = -25;
 	}
 	//y
 	ellipse(y, 80, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 160, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 240, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 320, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 400, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
	ellipse(y, 480, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
 	ellipse(y, 560, 50, 50);
 	y += speed;
 	if (y > width + 25) {
 		y = -25;
 	}
 	//z
 	ellipse(z, 80, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 160, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 240, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 320, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 400, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
	ellipse(z, 480, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
 	ellipse(z, 560, 50, 50);
 	z += speed;
 	if (z > width + 25) {
 		z = -25;
 	}
 	//a
 	ellipse(a, 80, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 160, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 240, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 320, 50, 50);
  	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 400, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
	ellipse(a, 480, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
 	ellipse(a, 560, 50, 50);
 	a += speed;
 	if (a > width + 25) {
 		a = -25;
 	}
 	//b
 	ellipse(b, 80, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 160, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 240, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 320, 50, 50);
  	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 400, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	ellipse(b, 480, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
 	ellipse(b, 560, 50, 50);
 	b += speed;
 	if (b > width + 25) {
 		b = -25;
 	}
	//c
 	ellipse(c, 80, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 160, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 240, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 320, 50, 50);
  	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 400, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	ellipse(c, 480, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
 	ellipse(c, 560, 50, 50);
 	c += speed;
 	if (c > width + 25) {
 		c = -25;
 	}
	//d
 	ellipse(d, 80, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 160, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 240, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 320, 50, 50);
  	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 400, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	ellipse(d, 480, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
 	ellipse(d, 560, 50, 50);
 	d += speed;
 	if (d > width + 25) {
 		d = -25;
 	}
	//e
	ellipse(e, 80, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 160, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 240, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 320, 50, 50);
  	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 400, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	ellipse(e, 480, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
 	ellipse(e, 560, 50, 50);
 	e += speed;
 	if (e > width + 25) {
 		e = -25;
 	}
	//f
	ellipse(f, 80, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 160, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 240, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 320, 50, 50);
  	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 400, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
	ellipse(f, 480, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}
 	ellipse(f, 560, 50, 50);
 	f += speed;
 	if (f > width + 25) {
 		f = -25;
 	}

    //character shape
    strokeWeight(5);
    point(0, 640);
    point(40, 440);
    point(70,320);
    point(150, 160);
    point(300, 160);
    point(380, 300);
    point(420, 440);
    point(480, 640);
    strokeWeight(5);
    fill(250-skin, 223-skin, 198-skin);
    beginShape();
    curveVertex(0, 640);
    curveVertex(0, 640);
    curveVertex(40, 440);
    curveVertex(70, 320);
    curveVertex(150, 160);
    curveVertex(300, 160);
    curveVertex(380, 300);
    curveVertex(420, 440);
    curveVertex(480, 640);
    curveVertex(480, 640);
    endShape();
    beginShape();
    curveVertex(120, 500);
    curveVertex(120, 500);
    curveVertex(170, 560);
    curveVertex(210, 565);
    curveVertex(170, 440);
    curveVertex(150, 400);
    curveVertex(150, 440);
    endShape();
    beginShape();
    curveVertex(360, 500);
    curveVertex(360, 500);
    curveVertex(310, 560);
    curveVertex(270, 565);
    curveVertex(310, 440);
    curveVertex(330, 400);
    curveVertex(330, 440);
    endShape();

//hair
    if (hair < 1) {
    	fill(0, 0, 0)
   		arc(230, 280, 300, 300, PI, 0);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}
   	else if (hair < 2) {
   		fill(0, 0, 0)
   		arc(230, 280, 350, 300, PI, 0);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   		fill(0,0,0);
   		rect(52, 275, 50, 125, 5);
   		rect(358, 275, 50, 125 ,5);
   	}
   	else if (hair < 3) {
   		fill(0, 0, 0)
   		arc(230, 280, 290, 350, PI, 0);
   		ellipse(120, 120, 75, 75);
   		ellipse(340, 120, 75, 75);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}
   	else if (hair < 4) {
   		fill(0, 0, 0)
   		arc(230, 280, 290, 350, PI, 0);
   		ellipse(57, 280, 80, 50);
   		ellipse(403, 280, 80, 50);
   		fill(250-skin, 223-skin, 198-skin);
   		noStroke();
   		quad(100, 280, 120, 230, 340, 230, 360, 280);
   	}

 //brows
 	if (brows < 1) {
 		stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
    	arc(270, 275, 30, 30, PI+QUARTER_PI, -QUARTER_PI);
 	}
 	else if (brows < 2) {
		stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI, PI+HALF_PI);
    	arc(270, 275, 30, 30, PI+HALF_PI, 0);
 	}
    else if (brows < 3) {
    	stroke(0,0,0);
    	noFill();
    	arc(180, 275, 30, 30, PI+HALF_PI, 0);
    	arc(270, 275, 30, 30, PI, PI+HALF_PI);
    }
    else if (brows < 4) {
    	stroke(0,0,0);
    	noFill();
    	arc(180, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
    	arc(270, 250, 30, 30, QUARTER_PI, HALF_PI+QUARTER_PI);
    }


    //eyes
    //whites
    fill(255);
    ellipse(180, 300, eyeWidth, eyeHeight);
    ellipse(270, 300, eyeWidth, eyeHeight);
    //pupil
    fill(0);
    ellipse(180, 300, pupilWidth, pupilHeight);
    ellipse(270, 300, pupilWidth, pupilHeight);


    //lips
    if (lips < 1) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    }
    else if (lips < 2) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    	fill(0);
    	ellipse(225, 307, 20, 5);
    }
    else if (lips < 3) {
    	fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
   		ellipse(225, 300, 40, 15);
   		fill(0);
    	ellipse(225, 307, 20, 5);
   		noFill();
   		arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
   		arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
   	}
   	else if (lips < 4) {
   		fill(244, 49, 33);
    	ellipse(225, 310, 40, 20);
    	ellipse(225, 300, 40, 15);
    	noFill();
   		arc(190, 310, 30, 30, PI+HALF_PI+QUARTER_PI, QUARTER_PI);
   		arc(260, 310, 30, 30, HALF_PI+QUARTER_PI, PI+QUARTER_PI);
   	}

   	//cheeks
   	fill(cheekColorR, cheekColorG, cheekColorB);
   	noStroke();
   	ellipse(140, 320, 40, 20);
   	ellipse(320, 320, 40, 20);

   	stroke(0,0,0);
}

function mousePressed() {
	backgroundColorR = random(200, 255);
	backgroundColorG = random(137, 255);
	backgroundColorB = random(175, 255);
	eyeWidth = random (30, 40);
	eyeHeight = random(15, 30);
	pupilWidth = random(1,7);
	pupilHeight = random(1,7);
	skin = random(1, 150);
	lips = random(4);
	hair = random(4);
	brows = random(4);
	cheekColorR = random(220, 255);
	cheekColorG = random(180, 255);
	cheekColorB = random(139, 255);
}

This character is inspired by one of my favorite visual artists, Ton Mak’s character, flabjacks. At first, I had a difficult time figuring out how to randomize characteristics such as the mouth, hair, and eyebrows because the it was not simply randomizing components such as width, height, and color. Finally, after a lot of trial and error, I figured out I could use the if, else if functions to accomplish what I wanted. This project also allowed me to become more familiar with the arc and curveshape functions.

Sketch of my character design

 

Katherine Hua – LookingOutwards – 02

Parag K. Mital is an audiovisual computational artist and researcher. He creates his artwork through the building of artificial intelligence algorithms. I am captivated by the way Mital has explored deep learning, machine learning, film, eye-tracking, EEG, and fMRI recordings to generate his artistic productions.  In his work “In the Style of Klee,” he utilizes these generative model processes and constructs an audiovisual perception of what looks like a video from the view from a car window as the car is driving through the streets. In this piece of work, it can be seen that it is inspired by the art style of Paul Klee. I admire how the Mital is able to bring what looks like a painting with Paul Klee’s style to life. He demonstrates the complexity yet simplicity of traditional fine art styles and brings it together with modern experimental generative art, giving his audience a unique film experience through traditional art and generative augmented computational science.

“In the Style of Klee” by Parag K. Mital, 2015

 

LookingOutward-01

Japan holds technological fascinations that are perhaps years ahead of US day-to-day technology. That’s why it’s no wonder why the world’s first digital art museum (by digital art collective teamLab and Mori Building)  opened in Tokyo, opening up a world that projects fantasy onto an immersive setting. The environment reflects child-like imagination and wonders, and although this does attract many children, it also engorges adults with elicited feelings of nostalgia.

A colorful and interactive light show

The exhibits also elicit feelings of awe and innocence due to the sheer beauty of the many colors that are on display. I thought that this is truly the most immersive work of art that I could ever encounter and that because the works requires and reacts to human interaction, that the art is truly an experience more than a medium. Perhaps it was the artists’ intentions to throw the audience’s visuals and to promote “thinking out of the box”.

 

Original Source: https://www.tokyoweekender.com/2018/06/a-world-first-mori-building-digital-art-museum-team-lab-borderless-opens-in-tokyo/

Katherine Hua – Project01- Face

khua-project01

function setup() {
    createCanvas(600,600);
    background(237, 176, 176);
}

function draw() {
    noStroke();
    //background
    fill(209, 52, 126);
    rect(25, 25, 550, 550);
    fill(246, 192, 66);
    rect(50, 50, 500, 500);
    fill(237, 176, 176);
    rect(75, 75, 450, 450);
    fill(209, 52, 126);
    rect(100, 100, 400, 400);
    //hair
    fill(30, 22, 18);
    ellipse(300,250, 450, 450);
    rect(75, 250, 450, 500);
    //body
    fill(247, 197, 82);
    ellipse(325, 700, 375, 500);
    //face shape
    fill(251, 227, 167);
    quad(150, 300, 400, 150, 500, 250, 250, 400);
    arc(325, 300, 350, 400, 0, PI, CHORD);
    rect(400, 250, 100, 50);
    //hairline
    ellipse(337.5, 200, 170, 150);
    quad(260, 170, 150, 300, 250, 350, 300, 300);
    ellipse(405, 200, 100, 100);
    quad(450, 180, 500, 250, 450, 300, 400, 290);
    //eyes
    //undereye
    fill(236, 198, 179);
    ellipse(260, 310, 40, 50);
    ellipse(420, 310, 40, 50);
    fill(251, 227, 167);
    ellipse(265, 305, 50, 50);
    ellipse(425, 305, 50, 50);
    //white part
    fill(255, 255, 255);
    ellipse(265, 300, 40, 50);
    ellipse(425, 300, 40, 50);
    //pupil
    fill(40, 24, 23);
    ellipse(270, 295, 25, 35);
    ellipse(430, 295, 25, 35);
    fill(255, 255, 255)
    ellipse(260, 300, 10, 10);
    ellipse(420, 300, 10, 10);
    //eyelash
    fill(40, 24, 23);
    ellipse(285, 275, 15, 15);
    ellipse(445, 275, 15, 15);
    fill(251, 227, 167);
    ellipse(282, 270, 18, 15);
    ellipse(442, 270, 18, 15);
    fill(40, 24, 23);
    ellipse(265, 280, 50, 10);
    ellipse(425, 280, 50, 10);
    //eyebrows
    ellipse(265, 250, 50, 10);
    ellipse(425, 250, 50, 10);
    //mouth
    fill(240, 178, 151);
    ellipse(325, 415, 80, 80);
    fill(251, 227, 167);
    ellipse(330, 380, 80, 50);
    //nose
    fill(240, 178, 151);
    ellipse(365, 360, 30, 40);
    fill(251, 227, 167);
    ellipse(361, 363, 27, 32);
}

Doing this project made me look at my face in terms of the shapes that make it up. I first sketched out my self character on paper, and then looked for what shapes could create this drawing.