ablackbu – Section C – Project-02-Variable-Face

sketch

//eye
var eyeSize = 15;
var outerEyeSize=40;


//mouth
var mouthWidth = 50;
var innerMouth = 30;

var mouthCorner3 = 15;
var mouthCorner4 = 20;


//face 
var faceWidth = 100;
var faceHeight = 175;

var faceCorner1 = 20;
var faceCorner2 = 15;
var faceCorner3 = 25;
var faceCorner4 = 40;

//color
var colorR = 50;
var colorG = 50;
var colorB = 50;

var colorR2 = 200;
var colorG2 = 200;
var colorB2 = 200;

var colorR3 = 200;
var colorG3 = 200;
var colorB3 = 200;


//eyebrow
var brow = 3;
var browAngle = 100;


 


function setup() {
    createCanvas(640, 480);
    textSize(12);
}
 
function draw() {
    background(255);
   
    //body
    strokeWeight(3);
    fill(colorR3,colorG3,colorB3);
    stroke(0);
    rectMode(CENTER);
    rect(150,300,150,200,40,40,0,0);

    //arms
    strokeWeight(3);
    noFill();
    stroke(0);
    line(100,400,110,270);
    line(200,400,190,270);

    //face
    fill(colorR2,colorG2,colorB2);
    stroke(85,242,149);
    rectMode(CENTER);
    rect(150, 150, faceWidth,  faceHeight, faceCorner1, faceCorner2,
        faceCorner3,faceCorner4);

    //mouth
    stroke(132,223,244);
    fill(250,147,247);
    rect(150, 200, mouthWidth, 50,2, 2,mouthCorner3,mouthCorner4);
   
    //left eyebrow
    stroke(0);
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeLX = 150 - faceWidth * 0.25;   
    line(eyeLX - 10, 100,eyeLX + 10,browAngle);

    //right eyebrow
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeRX = 150 + faceWidth * 0.25;
    line(eyeRX - 10, browAngle, eyeRX + 10, 100);

    //eyes
    fill(colorR,colorG,colorB);
    strokeWeight(0);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, eyeSize, eyeSize);
    ellipse(eyeRX, 150, eyeSize, eyeSize);

    //glasses
    noFill();
    stroke(0);
    strokeWeight(1);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, outerEyeSize, outerEyeSize);
    ellipse(eyeRX, 150, outerEyeSize, outerEyeSize);


    //SPEECH bubble
    noStroke();
    fill(colorR,colorG,colorB);
    triangle(230,100,250,100,200,180);
    ellipse(250,100,100,50);

    //text
    fill(255);
    text("wasssup", 280, 145, 100, 100);




}
 
function mousePressed() {
    faceWidth = random(80, 140);
    faceHeight = random(170, 200);
    mouthWidth = random(30, 70);
    innerMouth = random(10, 40);

    //eye
    eyeSize = random(10, 20);
    outerEyeSize = random(30,50);
    
    //face corners
    faceCorner1 = random(0,50);
    faceCorner2 = random(10,50);
    faceCorner3 = random(10,50);
    faceCorner4 = random(10,50);

    //mouth corners
    mouthCorner3 = random(5,30);
    mouthCorner4 = random(5,30);

    //color
    colorR = random(20,100);
    colorG = random(20,100);
    colorB = random(20,100);

    colorR2 = random(150,255);
    colorG2 = random(150,255);
    colorB2 = random(150,255);

    colorR3 = random(50,200);
    colorG3 = random(50,200);
    colorB3 = random(50,200);

    //brow
    brow = random(1,5);
    browAngle = random(95 - 5,105);


}

I thought the most interesting part of this project was how relationships  between objects came into play. What this means is that the designer has to take into account objects moving relative to other objects that are also moving. The most interesting part was also the hardest for me in that I had some trouble staying on top of all the information I was trying to portray. Once I got the main framework down it was really satisfying every additional shape I made.

myoungsh-project02-variableface

sketch

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

//legs
var standing = 10;

//arms
var armLength = 50;

//face
var faceWidth = 175;
var faceHeight = 125;
var faceX = 330;
var faceY = 250;
var corner1 = 10;
var corner2 = 20;
var corner3 = 30;
var corner4 = 40;

//eyes
var eyeSize = 20;
var eyeLX = 450;
var eyeRX = 400;

//mouth
var mouthX = 425;
var mouthY = 355;
var mouthWidth = 50;
var mouthHeight = 35;

//lips
var lips = 10;

//thing
var thingX = 200;
var thingY = 100;
var thingWidth = 20;
var thingHeight = 15;

//face color
var colorFg = 210;
var colorFb = 210;

//eye+mouth color
var colorE = 100;

//lips color
var colorLg = 70;
var colorLb = 70;

//thing color
var colorTHr = 210;
var colorTHg = 210;
var colorTHb = 240;

//background color
var colorBr = 225
var colorBg = 250

function draw() {
    background(colorBr, colorBg, 256);
    
    //legs
    strokeWeight(0)
    fill(0)
    rect(425+standing, 350, 5, 200);
    
    strokeWeight(0)
    fill(0)
    rect(405+standing, 350, 5, 200);
      
    //arms
    strokeWeight(0)
    fill(0)
    rect(230+armLength, 325, 350-(armLength*1.5), 5)
    
    //face
    strokeWeight(0)
    fill(245, colorFg, colorFb)
    rect(faceX, faceY, faceWidth, faceHeight, 
    corner1, corner2, corner3, corner4);
    
    //left eye
    strokeWeight(0)
    fill(colorE)
    ellipse(eyeLX, 320, eyeSize, eyeSize);
   
    //right eye
    strokeWeight(0)
    fill(colorE)
    ellipse(eyeRX, 320, eyeSize, eyeSize);
    
    //mouth
    strokeWeight(lips)
    stroke(256, colorLg, colorLb)
    fill(colorE-30)
    ellipse(mouthX, mouthY, mouthWidth, mouthHeight);
    
    //eyes
    eyeSize = random(10, 30);
    
    //thing
    strokeWeight(0)
    fill(colorTHr, colorTHg, colorTHb)
    rect(thingX, thingY, thingWidth, thingHeight, 
    corner1/2, corner2/2, corner3/2, corner4/2);    
    
    //thing
    thingX = random(100, 300)
    thingY = random(75, 125)
    thingWidth = random(10, 35)
    thingHeight = random(10, 35)
}
 
function mousePressed() {
    //legs
    standing = random(0, 25)
    
    //arms
    armLength = random(0, 100)
    
    //face
    faceWidth = random(150, 180);
    faceHeight = random(130, 150);
    faceX = random(320, 350);
    faceY = random(240, 270);
    corner1 = random(0, 50)
    corner2 = random(0, 50)
    corner3 = random(0, 50)
    corner4 = random(0, 50)

    //eyeX
    eyeLX = random(380, 420);
    eyeRX = random(430, 470);
    
    //mouth
    mouthX = random(420, 430);
    mouthY = random(350, 360);
    mouthWidth = random(40, 60);
    mouthHeight = random(30,40);

    //lips
    lips = random(5, 10);

    //face color
    colorFg = random(180, 220);
    colorFb = random(75, 150);
    
    //eye color
    colorE = random(50, 200);
    
    //lips color
    colorLg = random(75, 125);
    colorLb = random(75, 125);
    
    //thing color
    colorTHr = random(200, 220);
    colorTHg = random(200, 220);
    colorTHb = random(230, 250);
    
    //background color
    colorBr = random(215, 256);
    colorBg = random(245, 256);

}

 

Looking Outward-02

Beautiful chaos is an interactive app created by Nathan Selikoff that displays abstract shapes and imagery as a reaction to 3D motion. The app was created and initially exhibited in 2013 for the Leap Motion controller, a virtual reality device. Based on certain hand motions, the app calculates new algorithms and moves swiftly and gracefully on the screen.

I find this specific piece really interesting because of the interactive aspect of it. The app relies on the movements of a user in order to morph. I find it very inspiring how physical movements can be converted into digital actions on screen.

Also, there’s an interesting juxtaposition between the calming, elegant visuals and the constant recalculating and thinking of the programming. While the display is seemingly soft and smooth, behind the scenes, the app is actually continuously calculating the movements and interaction of the user in order to project the video.

Beautiful Chaos

rfarn-project02

For this project, I started with a very complicated idea. I wanted to create three faces that would all have similar randomly changing variables that could flash around the screen like random lights.

However, I soon realized this would just be a lot of work and my code kept getting longer and longer with more and more variables to the point that I started confusing myself. In the end, I decided to just simplify my concept into one face with simple variables that could change.

sketch

var hairWidth = 160;
var hairHeight = 135;
var faceWidth = 130;
var faceHeight = 110;
var mouthHeight = 15;
var mouthWidth = 15;

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

  }


function draw() {
	 background(245, 235, 230);
	
	//blue hair
	strokeWeight(10);
	stroke(172, 216, 242);
	fill(180, 225, 255);
	rectMode(CENTER);
	rect(width/2, height/2, hairWidth, hairHeight, 20);
	noStroke();
	fill(250, 218, 190); //face
	rect(width/2, height/2 + 13, faceWidth, faceHeight, 20);
	fill(180, 225, 255); //bangs
	arc(width/2 + hairWidth/2 - 5, height/2 - 50, hairWidth*(7/5), 100, PI/2, PI, PIE);
	arc(width/2 - hairWidth/2 + 5, height/2 - 50, hairWidth*(2/3), 90, 0, PI/2, PIE);
	strokeWeight(3); //eyes
	stroke(255);
	fill(188, 235, 203);
	ellipse(width/2 - faceWidth/4, height/2 + 15, 20, 20);
	ellipse(width/2 + faceWidth/4, height/2 + 15, 20, 20);
	noStroke(); //mouth
	fill(231, 90, 124);
	ellipse(width/2, height/2 + 35, mouthWidth, mouthHeight);
 
}


function mousePressed(){
	hairWidth = random(160, 250);
	hairHeight = random(135, 225);
	faceWidth = random(130, 220);
	faceHeight = random(110, 100);
	mouthWidth = random(15, 30);
	mouthHeight = random(15, 30);
}

Lrospigl-Project02-VariableFaces

sketch

  var eyeSize = 20;
  var faceWidth = 170;
  var faceHeight = 170;
  var eyeColor = 150;
  var shirtColor = 150;
  
function setup() {
  createCanvas(400, 400);
}

function draw() {

  background(127, 155, 245);

  //hair
  strokeWeight(0);
  fill (138,109,90);
  rect (width/2 - (faceWidth/2) - 10, 
  height/2 - (faceHeight / 2) - 10, 
  faceWidth + 20, 
  faceHeight + 40, 30);
  
  //hairShadow
  strokeWeight(0);
  fill (121,96,79);
  rect (width/2 - (faceWidth/2), height/2 - (faceHeight / 2) - 10, 
  faceWidth, faceHeight + 40, 15);
  
  //neck
  strokeWeight(0);
  fill(239, 205, 182);
  rect (width/2 - 10, 200, 20, 200, 10);

  //neckshadow
  strokeWeight(0);
  fill(211, 179, 158);
  rect (width/2 - 10, 150 + (faceHeight / 3), 20, 100, 10);
  
  //head
  strokeWeight(0);
  fill(239, 205, 182);
  rect (width/2 - (faceWidth/2), height/2 - (faceHeight / 2), 
  faceWidth, faceHeight, 30);
  
  var eyeXpos = (width / 2 - faceWidth * 0.25);
  var eyeYpos = (width / 2 + faceWidth * 0.25);

  //eyes
  strokeWeight(1);
  arc(eyeXpos, height / 2, eyeSize, eyeSize, 0, 2*HALF_PI);
  arc(eyeYpos, height / 2, eyeSize, eyeSize, 0, 2*HALF_PI);

  //shirt
  strokeWeight(0);
  fill(76, shirtColor, 91);
  rect (width/2 - (faceWidth*1.2 / 2), 340,
  (faceWidth * 1.2), 80, 10);
  
  //smile
  
  fill (246,180,211); 
  arc(200, 200 + (faceHeight / 4), 
  (faceWidth/3), faceHeight/4, 0, 2*HALF_PI);
  
  //teeth
  fill (255,255,255);
  arc(200, 200 + (faceHeight / 4), 
  (faceWidth/3), faceHeight/10, 0, 2*HALF_PI);
  
  //eyebrows
  noFill ();
  strokeWeight(0.2);
  bezier(eyeXpos - 17, height / 2 - 10, 
  eyeXpos + 10, height / 2 - 20,
  eyeXpos + 10, height / 2 - 12,
  eyeXpos + 15, height / 2 - 10);
  
  bezier(eyeYpos - 17, height / 2 - 10, 
  eyeYpos + 10, height / 2 - 20,
  eyeYpos + 10, height / 2 - 12,
  eyeYpos + 15, height / 2 - 10);
  
  //bangs
  strokeWeight(0);
  fill (138,109,90)
  rect (width/2 - (faceWidth/2) + 2, 
  height/2 - (faceHeight / 2) - 10,
  faceWidth - 4, 
  faceHeight - (faceHeight/1.6), 10);
  
}

function mousePressed() {
  faceWidth = random(100, 200);
  faceHeight = random(100, 250);
  eyeSize = random(15, 30);
  shirtColor = random(0,150);
}

Quayola-Looking Outwards-02

Strata#3

The Strata series by Quayola is a form of digital art combining custom-prgrammed algorithms and traditional cathedral paintings. To be specific, Quayola creates three-dimensional art with layers built up out of “The Triumph of the Name of Jesus”. The process is that the artist would film a cathedral painting in a very high resolution. Then, he will use custom-programmed algorithms to fracture the image in parts and fill color.

At first, the color choice of the geometric shapes prevent me from realizing the essence of the piece; I was attracted to its vintage look. The matching color of the original work, the correspondence of the background music, and the pattern of the geometric shapes, all build up a harmony that admires the feature of the Ancient Rome and also delivers the geometry and iconography of perfection. Continue exploring the piece, I found that this creates a visual metaphor for history. “Strata” here refers to the layers of stones. Although the method of building the algorithms here is not explicitly stated, I observed that the size, color, and the location of the geometric shape is related to the background music and the historical understanding of baroque and renaissance periods. I assume that the artists determine the sizes of each fold and layer first and program them in a way that the shapes interact with other elements. The relationship between complex algorithm and the painterly traditions is most effectively represented in Strata #3 where the geometric shapes are first drawn on the painting, according to the structure of the subjects, the folds of clothes, and the concentration of movements.

Strata #3 by quayola, 2009 | The process where there is pure geometry
‘strata #3’ by quayola, 2009 | The process when some layers of colored shapes have built up

Together, Quayola built a successful bridge between the conceptual and philosophical spirits with the scientific and numerical combination of geometric shapes. While the two subjects may seem to be unrelated to each other, they correspond and echo from each other.

Strata #1
(HD Video on 1-ch projection with 2-ch sound, Edition of 6, 2008)

Strata #3
(HD Video on 1-ch projection with 2-ch sound, Edition of 6, 2009)

karinac-LookingOutwards-02

This particular work is part of Leonardo Solaas’s coding experiment called Walking in Color Space. He wanted to generate art that made color seem explosive and omnipresent. Therefore, the artist took sample pictures, in this case, the Powerpuff girls, and extracted the colors. He then took those colors and projected them in a 3-D manner by adjusting and specifying the direction of the colors to create these trajectories that you see in the picture. In addition to the various translations of the image, Solaas introduced contrasting colors in the multiple trajectories to make the color variations stand out and more visible.

I was intrigued by this work because the artist utilized an already existing image and made it his own simply by taking the colors and directing the lines in a 3-D setting.

 

Ikrsek-Looking Outwards-02

The programs the computer utilized to cut the sculptures for Quayola’s Laocoön Series were custom-designed by Quayola himself. done by Quayola is a really clever piece of generative art in my opinion – the way he took Laocoön and his sons and interpreted their images through computational algorithms designed to re-iterate the uncompleted works in a surreal and clearly computer-graphics influenced polygonal form begins to create a bizarre hybrid between the traditional/classical forms of art and computers through utilizing monuments and icons in western art culture. The precision of the computer and way it generates lines throughout the sculptures and filters them creates a bizarre narrative with the classical sculpture itself.

 

Laocoön Series (2015 – ongoing)

 

afukuda_Project02_VariableFaces_SectionC

afukuda_project02_javaScript

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 02-VariableFaces
 */ 

var r01, g01, b01;      // vase color 

var eyeSize = 20;       // variables related to eyes 
var coordEyeX = 400;
var coordEyeY = 250;

var cheekSize = 20;     // variables related to cheeks 
var coordCheekX = 420;
var coordCheekY = 300;

var widthMouth = 20;    // variables related to mouth 
var heightMouth = 20; 
 
// coordinates for bezier curve 
var coordX1 = 490;      // x-coordinate of vertex 
var coordY1 = 100;      // y-coordinate of vertex 
var coordX2 = 500;      // x-coordinate of first control point of bezier curve 
var coordY2 = 240;      // y-coordinate of first control point of bezier curve 
var coordX3 = 450;      // x-coordinate of second control point of bezier curve 
var coordY3 = 300;      // y-coordinate of second control point 
var coordX4 = 400;      // x-coordinate of second anchor point 
var coordY4 = 380;      // y-coordinate of second anchor point 

function setup() {
    createCanvas(640, 480); // set canvas size 
    r01 = random(255);
    g01 = random(255);
    b01 = random(255);
} 

function draw () {
    background (209, 226, 244);

    noStroke();
    fill(r01, g01, b01, 150);
    beginShape();                                                                                       // create vase geometry 
        vertex (coordX1, coordY1);                                                                      // starting vertex of right curve of vase
        bezierVertex (coordX2, coordY2, coordX3, coordY3, coordX4, coordY4);                            // right curve of vase         
        vertex ((640-(coordX4)), coordY4);                                                              // starting vertex of left curve of vase                                    
        bezierVertex ((640-(coordX3)), coordY3, (640-(coordX2)), coordY2, (640-(coordX1)), coordY1);    // left curve of vase
        vertex (coordX1, coordY1);                                                                      // finishing vertex of vase
    endShape();

    fill(100);
    ellipse (coordEyeX, coordEyeY, eyeSize, eyeSize);                                                   // right eye 
    ellipse ((640-coordEyeX), coordEyeY, eyeSize, eyeSize);                                             // left eye 

    fill(249, 200, 203);
    ellipse (coordCheekX, coordCheekY, cheekSize, cheekSize);                                           // right cheek 
    ellipse ((640-coordCheekX), coordCheekY, cheekSize, cheekSize);                                     // left cheek 

    stroke(100);
    noFill();
    arc (320, 320, widthMouth, heightMouth, 0, PI);                                                    // mouth

    stroke(135, 109, 82);                                                                              // plant branch 
    strokeWeight (4);
    arc (400, coordY1, 150, 150, PI, 0.2*HALF_PI);

    noStroke();                                                                                       // plant leaves
    fill(197, 217, 166);
    arc (500, coordY1, 30, 15, 0, PI); 
    arc (500, coordY1, 30, 15, PI, 0); 

    arc (440, (coordY1-20), 30, 15, 0, PI); 
    arc (440, (coordY1-20), 30, 15, PI, 0); 

    arc (485, (coordY1-45), 30, 15, 0, PI); 
    arc (485, (coordY1-45), 30, 15, PI, 0); 

}

function mousePressed() {
    // when the user clicks, these variables are reassigned random values

    coordX1 = random(400, 490);           // all: varies curvature of vase 
    coordY1 = random(110, 150);           // except for: varies height of vase 
    coordX2 = random(490, 540);
    coordY2 = random(100, 240);
    coordX3 = random(400, 540);
    coordY3 = random(200, 370);
    coordX4 = random(380, 420);   

    r01 = random(255);                    // selects random color for vase 
    g01 = random(255);
    b01 = random(255);

    eyeSize = random(10, 25);             // varies size of eyes 
    coordEyeX = random(350, 420);         // varies location of eyes (x-axis)
    coordEyeY = random(200, 260);         // varies location of eyes (y-axis)

    cheekSize = random(10, 20);           // varies size of cheeks
    coordCheekX = random(380, 420);       // varies location of cheeks (x-axis)
    coordCheekY = random(280, 300);       // varies location of cheeks (y-axis)
  
    widthMouth = random (10, 30);               // varies width of mouth 
    heightMouth = random (10, 30);              // varies height of mouth 

}


    
 




For this project I decided to base the variable faces on potted plants. There are several variables – the height of the vase, the curvature of the vase, the color of the vase, the size & distance of the eyes, the size & distance of the cheeks, and lastly the size of the mouth. The biggest thing I noticed while I was coding this graphic was that I could achieve the same visuals by using only half of the variables. Since the pot is symmetrical, I could simply use the negative x-coordinates of the right side of the pot for the left side of the vase, making my code much simpler and cleaner

 

karinac-Project-02-Variable-Face

project-02

//Karina Chiu
//karinac@andrew.cmu.edu
//Section C
//Project-02

var faceWidth = 360
var faceHeight = 320
var leftX = 200   //left-eye-pupil
var leftY = 290   //left-eye-pupil
var rightX = 300  //right-eye-pupil
var rightY = 290  //right-eye-pupil
var beakX = 220   //position of beak
var beakY = 360	  //position of beak
var comb = 110    //height of comb

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

function draw() {
	background(192,183,227);

	//head
	stroke(0);
	strokeWeight(5);
	fill(245,202,52);
	ellipse(250,300,faceWidth,faceHeight);

	//left-outer-eye
	strokeWeight(3);
	fill(250);
	ellipse(190,290,110,110);

	//right-outer-eye
	fill(250);
	ellipse(310,285,140,140);

	//left-pupil
	fill(0);
	ellipse(leftX,leftY,10,10);

	//right-pupil
	fill(0);
	ellipse(rightX,rightY,10,10);

	//beak
	fill(235,143,31);
	triangle(beakX,beakY,250,440,500-beakX,beakY);

	//chicken-comb
	fill(250,0,0);
	triangle(180,comb,240,220,300,comb);
}


function mousePressed() {
	
	//when mouse is clicked, random values are
	//assigned to the variables

	faceWidth = random(300,450);
	faceHeight = random(290,370);
	leftX = random(150,220);
	leftY = random(255,330);
	rightX = random(270,350);
	rightY = random(245,340);
	beakX = random(200,220);
	beakY = random(360,370);
	comb = random(80,110);

}

In my childhood, I loved drawing cartoon animals with exaggerated eyeballs, so I decided to try drawing them in this project. It took me a few times to write the ‘random’ code lines, but I eventually grasped the concept.