Month: September 2019

Xiaoyu Kang – Project 02 – Variable Face

sketch

/*
Xiaoyu Kang
Section B
xkang@andrew.cmu.edu
Assignment-02-B
*/
var circles = 200;
var faceW = 280;
var faceH = 300;
var hairL = 200; 
var eyes = 30;
var backC = 100;

function setup() {
    createCanvas(640, 640);
    background(242,180,180);
}
function draw() {
	var hairW = faceW + 90;
    noStroke();
//background circles
    fill(158,37,circles);
    ellipse(30,80,backC,backC);
    ellipse(100,320,backC,backC);
    ellipse(300,60,backC,backC);
    ellipse(530,30,backC,backC);
    ellipse(540,580,backC,backC);
    ellipse(600,280,backC,backC);
    ellipse(50,520,backC,backC);
//hair
    fill(221,184,85);
    ellipse(320,310,hairW,faceH + 90);
    rect(320 - hairW * 0.5,310,hairW,hairL);
//face
    fill(242,232,221);
    ellipse(320,320,faceW,faceH);
//hair
    fill(221,184,85);
    arc(320, 200, 280, 80, 180, PI + QUARTER_PI, CHORD);
//neck 
    fill(242,232,221);
    rect(280,440,80,80);
//cloth
    fill(229,128,circles);
    rect(270,490,100,20);
    ellipse(320,640,400,280);
//ear
    fill(242,232,221);
    ellipse(320 - faceW * 0.5,320,50,90);
    ellipse(320 + faceW * 0.5,320,50,90);
//eyes
    fill("grey");
    ellipse(320 - 60,300,eyes,eyes);
    ellipse(320 + 60,300,eyes,eyes);
    fill("white");
    ellipse(320 - 70,290,10,10);
    ellipse(320 + 50,290,10,10);
//eyebrowsL
    fill(214,179,85);
    strokeWeight(10);
    beginShape();
    vertex(230,270);
    vertex(240,275);
    vertex(270,270);
    vertex(280,260);
    endShape(CLOSE);
    fill(214,179,85);
    strokeWeight(10);
    beginShape();
    vertex(410,270);
    vertex(400,275);
    vertex(370,270);
    vertex(360,260);
    endShape(CLOSE);
//nose
    fill(195,154,133);
    strokeWeight(10);
    beginShape();
    vertex(295,340);
    vertex(310,350);
    vertex(330,350);
    vertex(345,340);
    endShape(CLOSE);
//lips
    fill(216,135,128);
    strokeWeight(10);
    beginShape();
    vertex(270,380);
    vertex(290,400);
    vertex(350,400);
    vertex(370,380);
    endShape(CLOSE);
}
function mousePressed() {
	circles = random(100,250);
    faceW = random(260,300);
    faceH = random(280,320);
    hairL = random(180,380);
    eyes = random(20,35);
}

I mainly focused on writing a code that will allow shape changes and color changes. The size of the person’s face are made changeable by clicking the mouse. And since the size of the hair is based on the size of the face, the hair changes as the face changes. The size of the person’s eyes also varies. I also made the color of both the clothings and the circles in the background changeable. The color varies in a range of different kind of red and purple.

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.

Xu Xu – Project 02 – Variable Face

I enjoyed creating this face, and the mouse-press was really fun to work with. However, since I created a relatively detailed face (less abstract), it was hard for me to change the face shape or hair shape because I had so many points (Originally I wanted to do a face where the hair would seem as if wind was blowing on them, but I soon realized that it was too hard). If I were to do this project again, I would instead do a simplified face that would create more variations.

sketch

var glassesColour = 193;
var glassesRim = 255;
var glassesSizeX = 15;
var glassesSizeY = 55;
var strandX = 208;
var strandY = 20;
var eyebrowX = 180;
var eyebrowY = 198;
var collarColor = 134
var mouth = 53;
function setup() {
    createCanvas(480, 640);
	
}

function draw() {
    background(199,184,103);
//face
    noStroke();
    fill(227,200,170);
    beginShape();
    vertex(130,114);
    vertex(126,123);
    vertex(122,131);
    vertex(111,164);
    vertex(110,179);
    vertex(112,195);
    vertex(108,149);
    vertex(111,203);
    vertex(99,224);
    vertex(78,246);
    vertex(74,253);
    vertex(77,262);
//beginning of lips
    vertex(88,270);
    vertex(83,275);
    vertex(76,282);
    vertex(73,285);
    vertex(77,292);
    vertex(87,297); //beg
    vertex(82,299);
    vertex(76,303);
    vertex(74,309);
    vertex(75,314);
    vertex(84,313);
//end of lips
    vertex(85,323);
    vertex(79,333);
    vertex(78,344);
    vertex(86,351);
    vertex(102,356);
    vertex(123,357);
    vertex(177,343);
    endShape(CLOSE);
//neck
    noStroke();
    fill(227,200,170);
    beginShape();
    vertex(116,359);
    vertex(120,340);
    vertex(134,366);
    vertex(171,424);
    vertex(239,376);
    vertex(216,323);
    vertex(200,250);
    endShape(CLOSE);
//head
    fill(227,200,170);
    ellipse(225,210,200,200);
//glasses
    strokeWeight(4);
    stroke(glassesRim,189,189);
    line(174,229,125,216);
    line(111,213,105,210);
    fill(170,170,glassesColour);
    ellipse(120,225,glassesSizeX,glassesSizeY);
    noFill();
    strokeWeight(2);
    stroke(glassesRim,189,189);
    ellipse(120,225,glassesSizeX,glassesSizeY);
//body
    noStroke();
    fill(collarColor + 30, 32, 78);
    beginShape();
    vertex(145,640);
    vertex(135,591);
    vertex(137,548);
    vertex(146,470);
    vertex(163,459);
    vertex(208,430);
    vertex(305,453);
    vertex(361,502);
    vertex(393,550);
    vertex(416,603);
    vertex(430,640);
    endShape(CLOSE);
    noStroke();
    fill(collarColor, 32, 78);
    beginShape();
    vertex(163,400);
    vertex(154,406);
    vertex(156,446);
    vertex(193,452);
    vertex(253,454);
    vertex(293,462);
    vertex(286,427);
    vertex(268,413);
    endShape(CLOSE);
    noStroke();
//mouth
	noStroke();
	fill(mouth,0,37);
	beginShape();
	vertex(89,297);
	vertex(76,282);
	vertex(73,285);
	vertex(77,292);
	vertex(87,297); //beg
	vertex(82,299);
	vertex(76,303);
	vertex(74,309);
	vertex(75,314);
	vertex(84,313);
	endShape(CLOSE);
//hair
    noStroke();
    fill(70,0,0);
    beginShape();
    vertex(117,126);
    vertex(110,140);
    vertex(103,159);
    vertex(100,181);
    vertex(107,200);
    vertex(105,179);
    vertex(109,156);
    vertex(118,139);
    vertex(115,161);
    vertex(125,178);
    vertex(140,197);
    vertex(150,210);
    vertex(158,226);
    vertex(160,201);
    vertex(167,224);
    vertex(180,247);
    vertex(189,275);
    vertex(191,296);
    vertex(185,325);
    vertex(183,358);
    vertex(184,378);
    vertex(187,395);
    vertex(193,417);
    vertex(206,434);
    vertex(218,441);
    vertex(236,442);
    vertex(260,440);
    vertex(280,452);
    vertex(294,470);
    vertex(340,539);
    vertex(363.580);
    vertex(372,568);
    vertex(394,539);
    vertex(410,519);
    vertex(427,508);
    vertex(442,491);
    vertex(449,473);
    vertex(460,476);
    vertex(444,433);
    vertex(410,351);
    vertex(381,237);
    vertex(371,187);
    vertex(346,135);
    vertex(315,111);
    vertex(275,92);
    vertex(243,85);
    vertex(222,84);
    vertex(189,89);
    vertex(180,87);
    vertex(165,92);
    endShape(CLOSE);
//strand of hair
    noStroke();
    fill(70,0,0);
    beginShape();
    vertex(222,90);
    vertex(strandX,43);
    vertex(229,strandY);
    vertex(215,50);
    endShape(CLOSE);
//eyebrows
    strokeWeight(3);
    stroke("black");
    line(118,eyebrowX,150,eyebrowY);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    glassesRim = random(100,255);
    glassesColour = random (106,230);
    glassesSizeX = random(10,20);
    glassesSizeY = random (45,65);
    eyebrowX = random (175, 198);
    eyebrowY = random (175, 198);
    strandX = random (200,210);
    strandY = random (15,50);
    collarColor = random (0,134);
    mouth = random(53,255);
}

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

Gretchen Kupferschmid – Project 02 – Variable Face


sketch

var eyeSize = 7.588;
var mouthWidth = 20.166;
var mouthHeight = 17.656; 
var flowerSize = 226.69;
var flowerColor = 208;
var blushHeight = 5.565;
var cactusHeight = 217;
var cactusArm = 75.357;
var cactusColor = 119; 

function setup() {
    createCanvas(480, 640);
}
 function draw (){
    background(199, 241, 242);
    
    //ground
    fill(193, 173, 139);
    noStroke();
    rect(0, 359.79, 480, 280.209);
    
    //ground shadow
    fill(142, 123, 94);
    noStroke();
    ellipse(142.96, 426.9, 217.735, 29.888);
     
    //cactus shadow
    fill(93, 135, 56);
    noStroke();
    ellipse (209.98, 426.9, 80.461, 37.36);
    beginShape();
    curveVertex (209.16, 437.58);
    curveVertex (170, 430.95);
    curveVertex (167.32, 397.88);
    curveVertex (164.59, 363.31);
    curveVertex (156, 248.85);
    curveVertex (173, 148.38);
    curveVertex (224, 131.63);
    curveVertex (262, 204.89);
    curveVertex (262, 303.27);
    curveVertex (251, 392.23);
    curveVertex (248, 430.95);
    curveVertex (209.16, 437.58);
    endShape();
    beginShape();
    curveVertex (189, 359.09);
    curveVertex (171, 358.09);
    curveVertex (145, 352.09);
    curveVertex (113, 337.09);
    curveVertex (88, 272.09);
    curveVertex (112, 247.09);
    curveVertex (137, 268.09);
    curveVertex (189, 317.09);
    curveVertex (189, 359.09);
    endShape();
    beginShape();
    curveVertex (233, 294.73);
    curveVertex (231, 260.73);
    curveVertex (255.96, 226.97);
    curveVertex (278, 204.73);
    curveVertex (308, 192.73);
    curveVertex (334, 219.73);
    curveVertex (312, 272.73);
    curveVertex (275, 297.73);
    curveVertex (252.77, 301.71);
    curveVertex (233, 294.73);
    endShape();
     
    //cactus main body
    fill(cactusColor, 173, 78);
    noStroke();
    beginShape();
    curveVertex (217.38, 430.71);
    curveVertex (184.74, 422.24);
    curveVertex (179.02, 340.31);
    curveVertex (172.99, 248.24);
    curveVertex (187.26, 152.24);
    curveVertex (230.06, 136.24);
    curveVertex (261.96, 206.24);
    curveVertex (261.96, 300.24);
    curveVertex (252.72, 385.24);
    curveVertex (250.21, 423.24);
    curveVertex (217.38, 430.71);
    endShape();
    beginShape();
    curveVertex (189, 350);
    curveVertex (171, 349);
    curveVertex (152.15, 345.15);
    curveVertex (145, 343);
    curveVertex (113, 328);
    curveVertex (93.55, 304.65);
    curveVertex (88, 263);
    curveVertex (112, 238);
    curveVertex (137, 259);
    curveVertex (182.98, 298.1);
    curveVertex (189, 308);
    curveVertex (197.95, 333.5);
    curveVertex (189, 350);
    endShape()
    beginShape();
    curveVertex (239, 274);
    curveVertex (237, 240);
    curveVertex (261.96, 206.24);
    curveVertex (284, 184);
    curveVertex (314, 172);
    curveVertex (340, 199);
    curveVertex (318, 252);
    curveVertex (281, 277);
    curveVertex (260.25, 280.94);
    curveVertex (239, 274);
    endShape();
    ellipse (114.46, 276.75, 57, 79.492);
    ellipse (307.36, 209.41, 67.402, cactusArm);
    ellipse (220.44, cactusHeight, 98.039, 190);
    
    //flower
    fill(214, 171, flowerColor);
    noStroke();
    beginShape();
    curveVertex (106.31, 246.7);
    curveVertex (96.93, 241.91);
    curveVertex (94.92, 230.34);
    curveVertex (98.63, flowerSize);
    curveVertex (100.55, 230.61);
    curveVertex (106.1, 236.04);
    curveVertex (106.1, 233.22);
    curveVertex (107.38, flowerSize);
    curveVertex (113.13, flowerSize);
    curveVertex (117.82, 234.52);
    curveVertex (120.38, 229.52);
    curveVertex (126.78, flowerSize);
    curveVertex (127.84, 233.65);
    curveVertex (121.66, 243.87);
    curveVertex (115.37, 246.79);
    curveVertex (106.31, 246.7);
    endShape();
     
    //eyes black part
    fill(0);
    noStroke();
    ellipse (206.25, 209.41, eyeSize, eyeSize);
    ellipse (229.96, 209.41, eyeSize, eyeSize);
    
    //eyes white part
    fill(255);
    noStroke();
    ellipse (207.02, 208.28, 3.026, 3.026);
    ellipse (230.96, 208.28, 3.026, 3.026);
    
    //blush cheeks
    fill(193, 118, 148);
    noStroke();
    ellipse (198.2, 222.36, 7.791, blushHeight);
    ellipse (236.59, 222.36, 7.791, blushHeight);
     
    //mouth
    fill(0);
    noStroke(); 
    arc (219.36, 227.43, mouthWidth, mouthHeight, 0, PI );
     
 }

function mousePressed () {
    eyeSize = random(6.5, 12);
    mouthWidth = random(11, 44);
    mouthHeight = random(10, 25);
    flowerSize = random(220, 230);
    flowerColor = random(80, 255);
    blushHeight = random(4, 9);
    cactusHeight = random(190, 225); 
    cactusArm = random(65, 120);
    cactusColor = random(0, 150);
}

Nawon Choi— Looking Outward 02

Generative Art— Georg Nees

Schotter— Georg Nees (1965)
https://collections.vam.ac.uk/item/O221321/schotter-print-nees-georg/

After looking through various generative art/artists, I found one that really stood out to me. It was Georg Nees’ Schotter. I admire its simplicity— the algorithm incrementally increases the amount of disorder in two variables: position and rotation. All other factors remain the same, the size of each square, and the number of squares in each row. I love the way that the orderly squares gradually descend into chaos, as if it’s falling apart, or crumbling away.

Georg Nees was actually a mathematician and physicist who also worked as a software engineer at Siemens. He is known today as one of the pioneers of computer graphics and art. It’s fascinating to see how someone with a non-traditional “art” background could be one of the first to create generative computer art. It’s also interesting to see the way his background informed his art— his works are very well thought-out and calculated to create aesthetic compositions.

Gretchen Kupferschmid – Looking Outward – 02

https://obvious-art.com/edmond-de-belamy.html

Portait of Edmond de Belamy created by Obvious

Created by the art collective studio based in Paris called Obvious, the painting titled Portait of Edmond de Belamy was generated by an AI algorithm. I find this project to be so intriguing because it replicates a style of art that I don’t typically associate with technology as well as combines historical art styles with new technological developments. It also begins to question the role of creativity in machines and how we can distinguish the human brain and algorithm’s creative processes. The algorithm works using the Generative Adversarial Network algorithm and takes information from 15,000 portraits. The generator is fed the data from 14th and 15th century portraits to produce art and the discriminator reviews these outputs. The artistic sensibilities of this piece are reflected through the 14th and 15th century art styles and also through what the algorithm begins to learn about these styles and techniques.

A video showing the creative process of the painting

Charmaine Qiu – Project 02 – Variable Face


sketch

MousePressed was really fun to work with!

/* Charmaine Qiu
  Section E
  charmaiq@andrew.cmu.edu
  Project-02-Variable_Face */

var faceWidth = 200;
var faceHeight = 200;
var eyeSize = 20;
var eyebrow1 = 300;
var eyebrow2 = 300;
var mouthLeft = 230;
var mouthRight = 260;
var star = 5
var star2 = 7

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

function draw() {
    background(28, 42, 87);
    //stars
    fill(255);
    ellipse(100, 100, star, star);
    ellipse(400, 400, star, star);
    ellipse(300, 200, star2, star2);
    ellipse(60, 500, star2, star2);
    ellipse(120, 450, 6, 6);
    ellipse(200, 550, 3, 3);
    ellipse(350, 160, 3, 3);
    ellipse(80, 260, 3, 3);
    ellipse(420, 70, 5, 5);
    ellipse(300, 40, 4, 4);
    ellipse(420, 580, star, star);
    //body
    noStroke();
    fill(141, 230, 73);
    beginShape();
    vertex(230, 370);
    vertex(225, 450);
    vertex(235, 440);
    vertex(250, 500);
    vertex(255, 490);
    vertex(320, 480);
    vertex(330, 485);
    vertex(320, 430);
    vertex(335, 435);
    vertex(300, 370);
    endShape(CLOSE);
    //head
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    triangle(220, 230, 230, 200, 240, 230);
    //eyes
    noStroke();
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(222, 45, 13);
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);
    //eyebrows
    triangle(150, 295, 160, 290, 190, eyebrow1);
    triangle(290, eyebrow1, 320, 290, 330, 295);
    //nose
    ellipse(width / 2, height/ 2, 7, 10);
    //mouth
    triangle(mouthLeft, 400, 240, 390, mouthRight, 400);

    // strokeWeight()
    // line(200, 320, width / 2 - faceWidth * 0.25, 320);
    // line(width / 2 - faceWidth * 0.25, 320, 260, 320);

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(150, 300);
    eyeSize = random(20, 50);
    eyebrow1 = random(290, 302);
    eyebrow2 = random(290, 302);
    mouthLeft = random(220,240);
    mouthRight = random(240,260);
    star = random(2, 15);
    star2 = random(2, 15);
}

Charmaine Qiu – Looking Outwards – 02


Nervous System is founded by Jesse Louis-Rosenberg and Jessica Rosenkrantz. Together, the team creates designs that combines technology with art. They utilize computer simulations based on patterns in nature to generate art, jewelry, and fashion designs. The designs were further made into reality by digital fabrication. 

One of their recent projects is named Porifera done in 2018. It is a jewelry collection inspired by deep sea creatures, and the artwork is created with 3D printed ceramic material. Looking at the process and final printed products, I really admire the amount of hard work that the creators contributed towards this project. I was amazed by the amount of detail that the computer was able to generate. The pattern and movement throughout the form of the jewelry is very natural and refined, which made me wonder about the future market on digitally created and 3D printed designs. 

Here is the link to learn more about this project:

https://n-e-r-v-o-u-s.com/projects/sets/porifera/