Category: SectionD

Lauren Park-Category Project-02-Variable-Face

sketch 

var eyeSize = 20;
var eyebrowSize = 30;
var noseWidth = 40;
var noseHeight = 40;
var faceWidth = 230;
var faceHeight = 250;
var mouthX = 60;
var mouthY = 30;
var hair = 40;
var hairColorX = '#F5CF58';
var hairColorY = '#FF8D80';
var hairColorZ = '#91D6FA';
var colorFaceX = '#D9BB96';
var colorFaceY ='#387178';
var colorFaceZ = '#D2F58C';

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background('#A1C556');
    strokeWeight(0);
  
    //hair
    fill(hairColorX, hairColorY, hairColorZ);
    ellipse(width / 2, height / 2+10, hair*5, hair*7);
    ellipse(width / 2, height / 2+10, hair*7, hair*5);
    
    
    strokeWeight(1);
    fill(colorFaceX,colorFaceY,colorFaceZ);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
  
    //eyes
    fill(250);
    ellipse(width / 2-60, height / 2, eyeSize+15, eyeSize);
    ellipse(width / 2+60, height / 2, eyeSize+15, eyeSize);
  
    fill(50);
    ellipse(width / 3+47, height / 3+80, eyeSize+5, eyeSize);
    ellipse(width / 3+166, height / 3+80, eyeSize+5, eyeSize);
  
    //nose
    fill(colorFaceX,colorFaceY,colorFaceZ);
    arc(315, 255, noseWidth, noseHeight-5, 0, HALF_PI);
    
    //eyebrow
    noFill();
    strokeWeight(2);
    arc(380, 220, eyebrowSize, eyebrowSize, PI + QUARTER_PI,       TWO_PI);
    arc(255,220, eyebrowSize, eyebrowSize, PI, PI+HALF_PI+QUARTER_PI);
   
    //mouth
  fill('#76301C');
  strokeWeight(0);
    ellipse(width / 3+105, height / 3+150, mouthX, mouthY);
  
  
    
}
 
function mousePressed() {

    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(200, 275);
    faceHeight = random(200, 300);
    eyeSize = random(10, 30);
    noseWidth = random(30, 50);
    noseHeight = random(30,50);
    eyebrowSize = random(30,60);
    mouthX = random(30,60);
    mouthY = random(30,60);
    colorFaceX = random(102,245);
    colorFaceY = random(115, 250);
    colorFaceZ = random(100, 200);
    hair = random(50,70);
    hairColorX = random(145,214);
    hairColorY = random(255, 141);
    hairColorZ = random(245, 211);
}

For this project, I was trying to create a similar expression on different facial forms and I wanted to place these expressions on a face shaped like a flower. It was very interesting but challenging to try and play around with the different colors and fitting the shapes proportionally and randomizing them by each click.

Shannon Ha – Looking Outwards 02

Mitchel Whitelaw’s generative art piece, Succession, is a documentation of ‘digital fossils’ that represent the history and growth of the city of Newcastle. What I admire most about this piece of work is that it manages to use an incredibly simple algorithm to convey the complexity of its subject, which centers around visualizations of the city’s role in Britain’s industrialization. 

Rhodendron by Mitchel Whitelaw
Taken from Teemingvoid.blogspot.com

The algorithm is able to condense the representation of Newcastle’s culture by using two thousand images sourced by Flickr commons, then it uses these images to generate composite images using HTML Canvas. The generative process uses 5 randomly selected images and then placed into a frame using semi-random rules for positioning. This creates a palimpsest effect as the opacity of all the images are low and the layers of images seem to work as a whole and by itself at the same time.

 The indistinguishable boundaries between layers synthesizes the different walks of life, ranging from economy to architecture, that make up the city of Newcastle, and essentially preserves it through the IDs and permalinks assigned to these composites.

Sponsor Tunnel by Mitchel Whitelaw
Taken from Teemingvoid.blogspot.com

Lauren Park-Looking Outwards-02

Encounter is an arm-like robotic machine that has a mirror that reacts naturally and in a human-like way to those who physically approach it. The mirror is used to track the face of a person that comes close.  I really admire this piece because it is intriguing to see works that combine technology and human behaviors. There is something odd and eery about taking a man-made object and try to give it human qualities and interact with other people. It makes me think about how I can approach this machine to have a communication with it and see how far it can go. This machine functions based off of smart servomechanisms and inverse kinematic algorithms. This piece seems to achieve the artist’s goals in many different ways through the algorithms. There is commentary on how social relationships are created or function by placing humans and robots to start a conversation with each other. There are many differences robots and people have but it seems that such barrier is being dissolved through this interaction. 

Encounter – Suspiciously curious robotics

Artist: Piet Schmidt

Title: Encounter

Year of creation: 2018

Lanna Lang – Project 02 – Variable Face

lanna_project02_sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
// Project 02 Variable Face

var fill1 = '#00bff3'
var r = 255
var g = 245
var b = 104
var duckoWidth = 500
var duckoHeight = 600
var thic = 20
var mouthWidth = 70
var eyeSize = 20
var blushX = 80
var blushY = 470


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

function draw() {
    background(fill1);
    
//lefthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 170, 150);

//righthair
    strokeWeight(thic);
    stroke(0);
    line(240, 250, 310, 150);

//body
    fill(r, g, b);
    ellipse(240, 550, duckoWidth, duckoHeight);

//eyes
    fill(0);
    circle(140, 390, eyeSize);
    circle(340, 390, eyeSize);

//mouth
    strokeWeight(mouthWidth);
    stroke('#f49ac1');
    line(200, 500, 280, 500);

//blush lines on the left
    strokeWeight(10);
    stroke('#f69679');
    line(blushX - 20, blushY, blushX, blushY + 30);
    line(blushX, blushY, blushX + 20, blushY + 30);
    line(blushX + 20, blushY, blushX + 40, blushY + 30);
  
//blush lines on the right
    strokeWeight(10);
    stroke('#f69679');
    line(blushX + 300, blushY, blushX + 320, blushY + 30);
    line(blushX + 320, blushY, blushX + 340, blushY + 30);
    line(blushX + 340, blushY, blushX + 360, blushY + 30);
}

function mousePressed() {
    g = random(200, 255);
    duckoWidth = random(100, 900);
    mouthWidth = random(30, 200);
    eyeSize = random(5, 150);
}

I experimented with different faces and making different characters, but I enjoyed the result of coding this character, so this became my final outcome. The code behind the character is simple, but after experimenting with p5js and creating characters for a while, I decided that sometimes less is more.

Mari Kubota- Project 2- Variable Faces

In this project I changed the size of the cat’s eyes, nose, mouth, head, ears, and body with each mouse press. The most challenging part of the project was to make the ears connect to the head with each randomized variable.

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 02
*/

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 80;
var bodyWidth = 100;
var bodyHeight = 150;
var noseX = 10;

function setup() {
    createCanvas(300, 300);
    
}

function draw() {
    noStroke();
    background(147,184,186);

    fill (0);
    ellipse(width/2, height/2+100, bodyWidth, bodyHeight); //body
    triangle(width/2, height/2+faceHeight/2, width/2+faceWidth/2, height/2, width/2+faceWidth/4,height/4); //ear
    triangle(width/2, height/2+faceHeight/2, width/2-faceWidth/2, height/2, width/2-faceWidth/4,height/4); //ear
    ellipse(width/2, height/2, faceWidth, faceHeight); //head

    fill(255,145,200);
    triangle (width/2, height/2+15, width/2+noseX, height/2+5, width/2-noseX, height/2+5); //nose
    stroke(255,145,200);
    strokeWeight(4);
    line(width/2, height/2+15, width/2+eyeSize, height/2+20); //mouth
    line(width/2, height/2+15, width/2-eyeSize, height/2+20); //mouth

    noStroke();
    fill (231,219,82)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //eye
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize/4, eyeSize); //pupil
    ellipse(eyeRX, height / 2, eyeSize/4, eyeSize); //pupil
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(80, 150);
    eyeSize = random(10, 30);
    bodyWidth = random(100,150);
    bodyHeight = random(130,200);
    noseX = random(5,20);
}

Stefanie Suk – Project-02 – Variable Faces

For this project, I tried to create as many aspects of variability as possible, including size, color, and position.  I also used variables that are necessary to create and change the face every time I click onto the screen. 

sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project 02

var faceW = 323;
var faceH = 257;
var noseW = 62;
var noseH = 39;
var nostrilW = 9;
var nostrilH = 16;
var backgroundR = 189;
var backgroundG = 140;
var backgroundB = 191;
var facecolorR = 250;
var facecolorG = 201;
var facecolorB = 222;
var ribboncolorR = 221;
var ribboncolorG = 66;
var ribboncolorB = 134;
var nosecolorR = 239;
var nosecolorG = 128;
var nosecolorB = 177;
var eyecolor = 46;
var eyesizeW = 22
var eyesizeH = 22
var mouthline = 292

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

function draw() {
    background(backgroundR, backgroundG, backgroundB);
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    ellipse(319.5, 232.5, faceW, faceH);
    //face
    noStroke();
    fill(eyecolor)
    ellipse(259, 233, eyesizeW, eyesizeH);
    //lefteye
    noStroke();
    fill(eyecolor);
    ellipse(379, 233, eyesizeW, eyesizeH);
    //righteye
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    triangle(175.5, 176.1, 191.5, 102.9, 263.7, 118.9);
    //leftear
    noStroke();
    fill(facecolorR, facecolorG, facecolorB);
    triangle(466.5, 191, 466.5, 118, 393, 118);
    //rightear
    noStroke();
    fill(nosecolorR, nosecolorG, nosecolorB);
    ellipse(320, 259.5, noseW, noseH);
    //nose
    noStroke();
    fill(0);
    ellipse(305.5, 259, nostrilW, nostrilH);
    //leftnostril
    noStroke();
    fill(0);
    ellipse(333.5, 259, nostrilW, nostrilH);
    //rightnostril
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    triangle(275, 185, 275, 125, 320, 155);
    //ribbonleft
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    triangle(320, 155, 365, 185, 365, 125);
    //ribbonright
    noStroke();
    fill(ribboncolorR, ribboncolorG, ribboncolorB);
    ellipse(320, 155.5, 19, 19);
    //ribboncenter
    stroke(0);
    strokeWeight(10);
    line(304, mouthline, 320, 309);
    stroke(0);
    line(336, mouthline, 320, 309);
    //mouth
}

function mousePressed() {
    mouthline = random(292, 323);
    eyesizeW = random(22, 60);
    eyesizeH = random(22, 44);
    backgroundR = random(131, 242);
    backgroundG = random(140, 174);
    backgroundB = random(133, 202);
    facecolorR = random(201, 250);
    facecolorG = random(201, 219);
    facecolorB = random(201, 250);
    nosecolorR = random(76, 239);
    nosecolorG = random(114, 143);
    nosecolorB = random(87, 253);
}

Ellan Suder – Project 02 – Variable Face


variable face

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-02
*/

var left = 165;
var right = left + 200;
var upDown;
var randomColor;
var randomAlpha = 100;
var randomSize = 50;


function setup() {
    createCanvas(600, 450);
    background(200,300,40);
    
    randomColor = color(0,0,0);

    noStroke();
    fill(0,140,230);
    ellipse(200,450,300,300);
    fill(255); //face
    ellipse(200,200,300,390);
    ellipse(350, 150, 80, 80);
    fill(0,20,30) //dot eyes
    ellipse(150,150,40,40);
    ellipse(350,150,40,40);
  
    fill(0,20,30); //hat
    noStroke();
    beginShape();
    curveVertex(70, 90);
    curveVertex(70, 90);
    curveVertex(58, -20);
    curveVertex(321, -20);
    curveVertex(332, 90);
    curveVertex(332, 90);
    endShape();
  
    strokeWeight(6); // lines
    stroke(0,20,30)
    noFill();
    arc(150, 150, 80, 80, 3* QUARTER_PI, TWO_PI); //left eye
    arc(350, 150, 80, 80, PI, TWO_PI + HALF_PI); //right eye
    arc(250, 220, 80, 30, 3 * HALF_PI, QUARTER_PI); //nose
    arc(250, 280, 60, 60, 0 , PI); //mouth
    strokeWeight(7);
    stroke(0,140,230);
    rect(80, 100, 140, 120, 20); // left glasses lens
    rect(300, 100, 140, 120, 20); // right glasses lens
    
    textSize(10);
    noStroke();
    fill(0);
    text("click to randomize!", 460, 90);
}
 
function mousePressed() {
    noStroke(); //two circles change color every mousepress
    randomColor = color(random(230),random(230),random(230));
    fill(randomColor);
    ellipse(150,220,40,40);
    ellipse(350,220,40,40);

    var a = 110; //clover
    var b = 45;
    var r = 10;
    var w = 50;
    ellipse(a,b,r+10,w+10);
    bezier(a,b, //top
         a-r+w,b-r+w,
         a+r+w,b-r-w,
         a,b);
    bezier(a,b, //top (left)
         a-r-w,b-r-w,
         a+r-w,b-r+w,
         a,b);
    bezier(a,b, //right (top)
         a+r-w,b+r-w,
         a+r+w,b-r-w,
         a,b);
    bezier(a,b, //right (bottom)
         a+r+w,b+r+w,
         a+r-w,b-r+w,
         a,b);
    bezier(a,b, //left
         a-r+w,b-r+w,
         a-r-w,b+r+w,
         a,b);
    bezier(a,b, //left (top)
         a-r-w,b-r-w,
         a-r+w,b+r-w,
         a,b);
    bezier(a,b, //bottom (left)
         a+r-w,b+r-w,
         a-r-w,b+r+w,
         a,b);
    bezier(a,b, //bottom
         a+r+w,b+r+w,
         a-r+w,b+r-w,
         a,b);
  
    fill(255) //redraw sclera
    ellipse(150,150,75,75);
    ellipse(350,150,75,75);
    left = random(137, 158);
    right = left + 200
    randomSize = random(10,45);
    randomAlpha = random(60,100);
    randomColor.setAlpha(randomAlpha);
    fill(randomColor);
    upDown = random(137,163);
    ellipse(left, upDown, randomSize, randomSize); //eyes
    ellipse(right, upDown, randomSize, randomSize);
    
    fill(255) //redraw nose area
    rect(250,200,45,40);
    stroke(0);
    noFill();
    arc(250, 220, randomSize + 20, 30, 3 * HALF_PI, QUARTER_PI); //nose  
  
    noStroke();
    fill(255)
    ellipse(250,300,85,85);
    fill(0);
    var oscsize; //mouth
    ellipse(250,300,80,60 - sin(millis()/100) * 20);
  
    let letters = ['A', 'B', 'C', 'D', 'E', 'F', 
'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 
'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    let letter = random(letters); // select random letter
    fill(200,300,40) //redraw background 
    rect(450,30,100,100)
    fill(0);
    textSize(62);
    text(letter, 470, 90);
}

Stefanie Suk – Looking Outwards – 02

Diffusion Choir by David Wicks, 2016

The project I was inspired by is called Diffusion Choir, a kinetic sculpture that represents the natural beauty of the movement of a flock of birds created by David Wicks. Holding hundreds of small elements that open and close individually from its custom software, this piece of work is driven by the simulation of flocking movements of birds. Over time, a small portion of the ‘birds’ come together and form a single whole group, collaboratively flying through the air. What I love the most about this project is how well David Wicks represented the flocking of birds just through the opening and closing of each element. Thus, the white color of the sculpture provides a soft, pure, and relaxing beauty of the nature of birds. The special collaborative movement of the sculpture from the algorithm creates an aesthetic unity between the nature (of birds and its movement) and men (from the computational calculations to move each element of the sculpture).

Installation of Diffusion Choir

Erin Lim – Looking Outwards – 02

I was inspired by Manolo Gamboa Naon who is a generative artist from Argentina. What I admire from his work is that it appears to be a work of the 20th century, even though it was all generated by code. Manolo defies the common misconception of digital art as cold and mechanical, with his vibrant pieces and extensive attention to color coordination.

mantel – Manolo Gamboa Naon, 2018

MMGGK2 – Manolo Gamboa Naon, 2018

He pieces each geometric figure into algorithms and code to produce his art. Manolo uses Processing. Manolo’s appreciation for geometry in his work is evident in his code, centered as his main focus alongside color.  He states he is not very interested in AI or deep learning, as he is content with generative art and geometric figures. I admire how we sees failures in code as beautiful mistakes in his art. It is evident that Manolo is not concerned over accuracy, but rather the coordination of shapes and color. 

Manolo’s work: https://www.behance.net/manoloide 

Sammie Kim- Project – 02 – Variable Faces

sketch

// global variables
var faceWidth=225
var faceHeight=210
var earW=70
var earH=230
var innerW=30
var innerH=100
var eyeW=20
var eyeH=20
var mouthW=40
var mouthH=50

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

function draw() {
  background(253, 255, 172);
  //ear
  stroke(255);
  fill(254,170,221);
  ellipse(210,200,earW,earH);
  ellipse(285,200,earW,earH);
  fill(255);
  ellipse(210,200,innerW,innerH);
  ellipse(285,200,innerW,innerH);
  //face
  noStroke();
  fill(254,170,221);
  ellipse(width/2, height/2, faceWidth, faceHeight);
  //eyebrow
  fill(0);
  triangle(190,270,180,280,230,300);
  rect(260,290,25,10);
  //nose
  fill(0);
  ellipse(245,355,25,20);
  //eyes
  stroke(0);
  strokeWeight(4);
  fill("black");
  ellipse(210,320,eyeW,eyeH);
  ellipse(270,320,eyeW,eyeH);
  //mouth
  fill(0);
  arc(245,385,mouthW,mouthH,0,PI,CHORD);
 }

function mousePressed() {
    faceWidth=random(225,290);
    faceHeight=random(210,280);
    eyeW=random(20,40);
    eyeH=random(20,40);
    mouthW=random(40,70);
    mouthH=random(30,50);
}

I struggled initially figuring out how to correctly utilize the variables in order to differ the facial expressions. Still, this assignment was helpful for understanding the mousePressed and random function.