Catherine Coyle – Project 02 – Variable Faces

``````// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project-02

var faceWidth = 300;
var faceHeight = 300;
var noseShape = 1;
var noseWidth = 50;
var noseHeight = 50;
var eyeSize = 50;
var eyeWidth = 100;
var eyeShape = 1;
// these are the coordinates of points on the mouth
var mouthY = 300;
var mouthMX = 320;
var mouthMY = 350;
var mouthLength=100
// skin color variables
var skinR = 250;
var skinG = 180;
var skinB = 140;
// pupils
var pupilSize = 30;
var pupilR = 0;
var pupilG = 0;
var pupilB = 0;
// other random features
var glasses = true;
var freckle = true;
var freckleX = 400;
var freckleY = 300;
var freckleSize = 5;
var blush = true;
var blushSize = 100;

function setup() {
createCanvas(640,480);
}

function draw() {
strokeWeight(0);
background(239, 198, 198);
// basic face
fill(skinR,skinG,skinB);
ellipse(width/2,height/2,faceWidth,faceHeight);
// some random characteristics
if (freckle == true) {
fill(104, 54, 11);
ellipse(freckleX, freckleY, freckleSize, freckleSize)
}
if (blush == true) {
fill(skinR,skinG-50,skinB);
ellipse((width/2)-(faceWidth/2)+blushSize/2,height/2,blushSize, blushSize);
ellipse((width/2)+(faceWidth/2)-blushSize/2,height/2,blushSize, blushSize);
}
// eyes
fill(255);
if (eyeShape==1) {
ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
}
else if (eyeShape==2) {
rect((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
rect((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
}
else if (eyeShape==3) {
triangle((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
triangle((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
}
// pupils
fill(pupilR,pupilG,pupilB);
ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
// nose
fill(skinR-50,skinG-20,skinB-20);
if (noseShape == 1) {
ellipse(width/2,height/2,noseWidth,noseHeight);
}
else if (noseShape == 2) {
rect((width/2)-noseWidth/2,(height/2)-noseHeight/2,noseWidth,noseHeight);
}
else if (noseShape==3) {
triangle((width/2)-noseWidth/2, (height/2)+(noseHeight/2),(width/2)+noseWidth/2, (height/2)+(noseHeight/2), width/2,(height/2)-(noseHeight/2));
}
// mouth
strokeWeight(5);
noFill();
beginShape();
curveVertex((width/2)-(mouthLength/2),mouthY);
curveVertex((width/2)-(mouthLength/2),mouthY);
curveVertex(mouthMX,mouthMY);
curveVertex((width/2)+(mouthLength/2),mouthY);
curveVertex((width/2)+(mouthLength/2),mouthY);
endShape();
// if they have glasses theyre added here
if (glasses == true) {
noFill();
strokeWeight(5);
stroke(0);
ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
line((width/2)-(eyeWidth/8),(height/2)-(faceHeight/4),(width/2)+(eyeWidth/8),(height/2)-(faceHeight/4))
}
}

function mousePressed() {
// randomizing all variables used for the face to make a new one!
faceWidth=random(150,450);
faceHeight=random(150,450);
// randomizes the shape used for the nose
// 1 means circle, 2 means rectangle, 3 means triangle
noseShape = int(random(1,3.99));
noseWidth = random(10,100);
noseHeight = random(10,100);
eyeWidth = random(20,faceWidth/2);
eyeSize = random(20,eyeWidth/2);
mouthLength = random(50,faceWidth*3/4);
mouthY = (height/2)+faceHeight/4;
mouthMY = random((height/2)+(noseHeight/2)+10, (height/2)+(faceHeight/2)-10);
mouthMX = random((width/2)-(mouthLength/2)+10,(width/2)+(mouthLength/2)-10);
skinR = random(183,255);
skinG = random(120,skinR-60);
skinB = skinG - random(30,60);
pupilSize=random(5,eyeSize-10);
pupilR = random(0,255);
pupilG = random(0,255);
pupilB = random(0,255);
// eye shape works the same way as nose shape
eyeShape = int(random(1,3.99));
// randomizing extra features
if (random(0,5) > 2) {
glasses = false;
}
else {
glasses = true;
}
if (random(0,10) > 6) {
freckle = true;
freckleX = (random(width/2, width/2 + faceWidth/2))*3/4;
freckleY = (random(height/2, height/2 + faceHeight/2))*3/4;
freckleSize = random(4,10);
}
else {
freckle = false;
}
if (random(0,10) > 5) {
blush = true;
blushSize = random(50,faceWidth/2);
}
else {
blush = false;
}
}
``````

I had a lot of fun with this project! I really wanted to emphasize the randomization so instead of creating a basic face set up and randomizing small parts, I decided to just create the face as if everything is randomly generated each time. Because of this, I didn’t make any sketches this time because it was impossible to predict anything about the faces. I wanted them all to be unrecognizable from one another. To help with this, I added variations to eye/nose shapes and also added additional features that aren’t on the face in every randomization. Initially I had wanted to add some kind of animation to this project but it ended up being to complicated with all the variability. Some of the faces end up being kind of funny/scary but I think it’s fun to click and see what the code can come up with!

Sophia Kim Project-02 Variable Face Sec C

``````//Sophia S Kim
//Section C 1:30
//sophiaki@andrew.cmu.edu
//Project-02-Face Variable

var eyeSize1 = 50;
var eyeSize2 = 30;
var faceWidth = 250;
var faceHeight = 275;
var eyebrow1 = 238;
var eyebrow2 = 372;
var mouthWidth = 135;
var mouthHeight = 15;
var earWidth = 25;
var earHeight = 55;
var faceColor = 46;
var earColor = 73;
var eyeColor = 47;
var eyebrowColorLX = 95;
var eyebrowColorRX = 94;
var mouthColor = 213;

function setup() {
createCanvas(640, 480); /// width,height
}

function draw() {
noStroke();
background(142, 223, 88); ///background reference to RGB (R,G,B)

var earLocation = (height/2)-20; // varible - ear location

fill(37, earColor, 255);
rect((width/2)-(faceWidth*0.57), earLocation, earWidth, earHeight); //left ear

fill(37, earColor, 255);
rect((width/2)+(faceWidth*0.47), earLocation, earWidth, earHeight); //right ear

fill(255, 253, faceColor); //skin color
ellipse(width/2, height/2, faceWidth, faceHeight); //head shape

var eyeLX = (width/2) - (faceWidth*0.27); // varible - left eye location
var eyeRX = (width/2) + (faceWidth*0.27); // variable - right eye location

fill(255, 164, eyeColor);
ellipse(eyeLX, (height/2), eyeSize1, eyeSize1); //left eye

fill(255, 164, eyeColor);
ellipse(eyeRX, (height/2), eyeSize2, eyeSize2); //right eye

fill(89, eyebrowColorLX, 233);
triangle(eyebrow1, (height/2)-30, eyebrow1+15, (height/2)-45, eyebrow1+30,
(height/2)-30);
//left eyebrow

fill(194, eyebrowColorRX, 215);
triangle(eyebrow2, (height/2)-30, eyebrow2+15, (height/2)-70, eyebrow2+30,
(height/2)-30);
//right eyebrow

var mouthLocation = (height/2)+45 // variable for mouth location

fill(255, 124, mouthColor);
rect(eyeLX, mouthLocation, mouthWidth, mouthHeight); //mouth
}

function mousePressed() {
// when the mouse is clicked on, random values within specified ranged are rearranged.
eyeSize1 = random(25, 60);
eyeSize2 = random(10,50);
faceWidth = random(200, 300);
faceHeight = random(250,300);
eyebrow1 = random(225, 260);
eyebrow2 = random(360, 385);
mouthWidth = random(130, 140);
mouthHeight = random(13, 17);
earWidth = random(22, 28);
earHeight = random(53, 57);
faceColor = random(0, 300);
earColor = random(45, 200);
eyeColor = random(25, 150);
eyebrowColorLX = random(15, 200);
eyebrowColorRX = random(25, 150);
mouthColor = random(140, 330);
}

``````

At first, I struggled with how I would replace common factors with variables. After I started to fill in the numbers, I got the hang of how to use variables. I made these faces based on simple shapes. Maybe next time I could do more detailed features to make it look realistic.

Rjpark – Project 02 – Variable Faces

``````// variables for facial feature dimensions
var eyeSize = 20;
var pupilSize = 5;
var faceWidth = 100;
var faceHeight = 150;
var mouthSize = 5;
// variables for face color
var facer = 10;
var faceg = 15;
var faceb = 20;
// variables for eye color
var eyesr = 5;
var eyesg = 10;
var eyesb = 15;
// variables for pupil color
var pupilsr = 15;
var pupilsg = 20;
var pupilsb = 25;
// variables for mouth color
var mouthr = 20;
var mouthg = 25;
var mouthb = 30;

function setup() {
createCanvas(640, 480);
}

function draw() {
background(230);
// face
fill(facer, faceg, faceb);
stroke(facer, faceg, faceb);
strokeWeight(2);
ellipse(width / 2, height / 2, faceWidth,  faceHeight);
// locations of facial features
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
var pupilLX = width / 2 - faceWidth * 0.25;
var pupilRX = width / 2 + faceWidth * 0.25;
var mouth1 = width / 2.1
var mouth2 = width / 1.9
// eyes
fill(eyesr, eyesg, eyesb);
strokeWeight(2);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
// pupils
fill(pupilsr, pupilsg, pupilsb);
strokeWeight(2);
ellipse(pupilLX, height / 2, pupilSize, pupilSize);
ellipse(pupilRX, height / 2, pupilSize, pupilSize);
// mouth
stroke(mouthr, mouthg, mouthb);
strokeWeight(mouthSize);
line(mouth1, height / 1.7, mouth2, height / 1.7);
}

// when the user clicks, these variables are reassigned
function mousePressed() {
// variables reassigned for facial feature dimensions
faceWidth = random(100, 300);
faceHeight = random(100, 300);
eyeSize = random(17, 50);
pupilSize = random (5, 15);
mouthSize = random (3, 13);
// variables reassigned for eye color
eyesr = random (0, 255);
eyesg = random (0, 255);
eyesb = random (0, 255);
// variables reassigned for face color
facer = random (0, 255);
faceg = random (0, 255);
faceb = random (0, 255);
// variables reassigned for pupil color
pupilsr = random (0, 255);
pupilsg = random (0, 255);
pupilsb = random (0, 255);
// variables reassigned for mouth color
mouthr = random (0, 255);
mouthg = random (0, 255);
mouthb = random (0, 255);
}``````

In this project, I focused on not only changing the dimensions of 3+ different facial features but also changing the color of each of of those features. I made variables for r, b, and g for each facial feature so I could randomize the colors with each click.

Grasshopper and Generative Art

If you look closely, this skull is made up of little faces. Some are happy, exposing the reds of their mouths. Others are unhappy, pursing their lips to be mostly yellow circles. What I admire is that each of these faces has individual parameters for their mouth and eyes based on how happy they are. Take a greyscale image and remap value to happiness and you get.. a skull made up of faces.

Parametric controls for each face

These were generated in Grasshopper, a plugin for the CAD and Surface Modeling program Rhinoceros, and that short summary above was the workflow. Since Grasshopper is a visual programming language, like parts of the Unreal Engine, you just plug actors into actors.

This specific project was made by architect  John Locke March 2013, and his blog post was titled “=)”. What I admire is that the faces are very expressive with very little, and what’s there is well-articulated. The eyes and mouth aren’t pinned in place, they shift. It also shows a less serious side of the artist. A lot of his work relates to architecture, and this is a fun side project.

Justin Yook – Project 02 – Variable Faces

``````//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project-02

//aspects of variability
var faceWidth = 150;
var faceHeight = 150;

var faceColorR = 255;
var faceColorG = 255;
var faceColorB = 255;

var eyeWidth = 15;
var eyeHeight = 15;

var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0;

var pupilWidth = 5;
var pupilHeight = 5;

var pupilColorR = 0;
var pupilColorG = 0;
var pupilColorB = 0;

var eyebrowThick = 3;

var noseWidth = 8;
var noseHeight = 8;

function setup() {
createCanvas(640, 480);
}

function draw() {
background(faceColorR * (1/6), faceColorG * (1/6), faceColorB * (1/6));

//draw general face
noStroke();
fill(faceColorR, faceColorG, faceColorB);
ellipse(width/2, height/2, faceWidth, faceHeight);

noStroke();
fill(faceColorR, faceColorG, faceColorB);

//draw eyes and eye color
noStroke();
var eyeLx = width / 2 - faceWidth * 0.25;
var eyeRx = width / 2 + faceWidth * 0.25;
fill(eyeColorR, eyeColorG, eyeColorB);
ellipse(eyeLx, height / 2, eyeWidth, eyeHeight);
ellipse(eyeRx, height / 2, eyeWidth, eyeHeight);

//draw eyebrow and its thickness
noStroke();
var browLx = eyeLx - 13;
var browRx = eyeRx - 13;
fill(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
rect(browLx, height / 2.2, 25, eyebrowThick);
rect(browRx, height / 2.2, 25, eyebrowThick);

//draw pupils
noStroke();
fill(eyeColorR * 2, eyeColorG * 2, eyeColorB * 2);
ellipse(eyeLx, height / 2, pupilWidth, pupilHeight);
ellipse(eyeRx, height / 2, pupilWidth, pupilHeight);

//draw nose
noStroke();
fill(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
ellipse(width / 2, height / 1.85, noseWidth, noseHeight);

//draw mouth
noFill();
stroke(faceColorR * (1/2), faceColorG * (1/2), faceColorB * (1/2));
strokeWeight(2);
arc(width/2, height/1.85 + 13, 30, 5, 0, PI, OPEN);

}

function mousePressed() {
//randomize dimensions of face
faceWidth = random(70, 200);
faceHeight = random(80, 200);

//randomize color of face
faceColorR = random(0, 255);
faceColorG = random(0, 255);
faceColorB = random(0, 255);

//randomize dimensions of eyes
eyeWidth = random(10, 30);
eyeHeight = random(10, 30);

//randomize dimensions of third eye
thirdEyeSize = random(0, 30)

//randomize color of eyes
eyeColorR = random(0, 255);
eyeColorG = random(0, 255);
eyeColorB = random(0, 255);

//randomize eyebrow thickness
eyebrowThick = random(1, 8);

//randomize dimensions of nose
noseWidth = random(5, 30);
noseHeight = random(10, 30);

//randomize dimensions of pupils
pupilWidth = random(5, 10);
pupilHeight = random(5, 10);

}``````

When I was starting out with the project, I didn’t know what features to add to the faces other than the basic eyes, head, nose, and mouth. After some time playing around with primitive shapes, I placed a new ellipse that overlapped with the original face ellipse, which made it look like a weird species. So I decided that the second head’s size would be fun to manipulate. In the end, the theme of my project was about showing the many ways an alien can look like in our imagination.

Justin Yook – Looking Outwards 02

“Reaction-Diffusion” by Nobutaka Kitahara is a generative art piece. The CG art presented on screen is made from mathematical algorithms to simulate chemicals’ reaction-diffusion patterns in response to sounds; in this project, he used the song titled “Astravel”. According to information on some websites, this reaction-diffusion simulation is created based on the Gray-Scott model. One can see Kitahara’s artistic sensibilities manifest in the algorithm from his use of 3D space instead of 2D, making the viewer’s perspective much more interesting because there are more angles to see the simulation from. I admire this project because it is an amazing way to bind art, science and math together. There are many times when people assume that art and math or science are in separate categories, but “Reaction-Diffusion” represents that phenomenons of the natural world actually are made of both art and math or science; almost like one cannot exist without the other.

Alexandra Kaplan-Looking Outwards-02

This is a work by the Generative Art artist Memo Atken called “All watched over by machines of loving grace: Deepdream edition”. It takes a birds-eye image of the GCHQ (Government Communications Headquarters, a British intelligence agency) which is then changed through a deep learning artificial intelligence program called Deepdream. This project caught my eye because it used technology to make a statement on the subject. The algorithm causes the distinct building to look like an infinite number of eyes staring back at you, which is an interesting and insightful comparison considering the purpose of the GCHQ.

I am very unfamiliar with AI and any algorithms/processes one can use to create art within them, so I did some further reading on the subject, and I came across a broken down version of the artistic process in an article Atken wrote:

“At a high level here’s what’s happening in #deepdream:

1. An artificial neural network (i.e. the AI’s ‘brain’) has already been trained on over a million images (to recognise objects in the images)
2. We show the trained network a brand new image
3. While the network is processing this new image, we take a snapshot from a particular group of neurons inside the network
4. We feed that new snapshot image back in, i.e. show it to the network (We can optionally apply small transformations, like zooming in etc.)
5. Repeat”

ChristineSeo-LookingOutwards-2

Metamorphosis is a generative animation video that was created by Glenn Marshall. This work is not a commercially used animation, it also shows the usage of technology, and exposes the process of rendering the technology through algorithmic animation programmed in Processing. As a generative animation, I thought this animation was very intriguing because it shows different movements through butterflies as well as having great transitions. Not only the project is aesthetically pleasing, the music plays a great role in showcasing this video, which I believe adds a lot to the mood of the overall piece. The color palette in the animation is eyeopening and the different strokes and movement of the piece expresses great nature in a technological way.

This piece is inspired by this previous short film made in 2007, called Butterfly. This film used experimental techniques using traditional 3D and 2D software. Expanding his creativity and experimental aspects in digital art, he created this algorithmic animation a year after. Overall, the interaction between the video rendering with animation, music and transitions created a beautiful and inspiring project.

Looking Outwards-02 Sophia Kim

Frederik Vanhoutte’s “Com Sigil – Pattern in Absence” is aesthetically pleasing to the eye. I appreciate the use of space and colors in this project. Using neon colors (pink, blue, and yellow), Vanhoutte makes the viewers notice the black shapes moving throughout the generative illustration. This generative art depends on the sound waves and vibrations from the song “Take a Deep Breath” by Talvekoidik. The system generates black shapes from multiple directions to move through the colored lines whenever there is a change in tone or vibration. The colored lines form many 3D shapes to make the illustration resemble a cube puzzle. I believe this project could have used JavaScript and/or Adobe Illustrator for its algorithm. In Vanhoutte’s recent works (2018), he focuses a lot on combining grids, geometry, and sound into his algorithm. “Pattern in Absence” is a great example of how he utilized those concepts, especially because he used a song that did not have drastic changes in sound.

Joanne Lee – Looking Outward 01

Lunar Surface is a collaboration between photographer Eunyoung Kim and artists Elliot Woods and Mimi Son. They have created multiple projects already in the past by combining code, form, material, concept, and mechanism. This particular project was created and put on display for two years (2014-15). The artists worked inside the Bucheon city Incinerator, which is a processing plant that was decommissioned back in 2010.

This project is brought to life by blowing 50 tonnes of air onto a 20 meter flag of silk, representing the fabric of a flag. The fabric is tracked by a 3D camera and a digital light is projected onto the fabric based on its constantly evolving shape. This project in particular inspires me because I have always wondered what it would be like to be out in space and thus started looking for interactive exhibits. This exhibit provides a unique, but essential experience to guests by having them observe the moon up close. As the studio says, it makes your question reality versus virtuality. Although I can no longer visit this exhibit, I feel that I can still explore the exhibit through videos such as the one below.