Category: Section C

Catherine Coyle – Project 02 – Variable Faces

catherine 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

sketch

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

rjpark_variablefaces

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

John Locke’s emoticon-constructed skull

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.

The Grasshopper program

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

jyook_VariableFaces

//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 topHeadWidth = 150;
var topHeadHeight = 150; 

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

    //draw top of head
    noStroke();
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width/2, height/2.5, topHeadWidth, topHeadHeight);

    //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);

    //randomize dimensions of top head
    topHeadWidth = random(90, 180);
    topHeadHeight = random(90, 180);

}

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

Image from Memo Atken’s “All watched over by machines of loving grace: Deepdream edition”

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

Guests can enter a portal to where another moon orbits.

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.