Author: xux1@andrew.cmu.edu

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

Xu Xu – Looking Outwards – 02

Matthias Dörfelt (MOKA) is a German artist that’s currently working in Los Angeles. Through the use of software products and robotics, he manages to create drawings, prints, animations, videos, and interactive installation. He strongly believes that computation is able to create expressive and playful artworks, therefore he favors special surprises over control during his creation processes. The following artwork is named “Ant Thought, too”, which is a series of computer generated drawings made from a custom computer program. This series of composition was first drawn with a pen plotter, then Dörfelt used acrylic paint to overlay colors on top, and then added the final black ink details in the foreground with pen plotter. Through these interesting techniques, Dörfelt was able to create intriguing, abstract artworks that appear to be interesting and thoughtful. By injecting human-like traits such as flaws, weirdness and naivety, he strives to explore the possibilities of machines.

Xu Xu – Looking Outwards – 01

The audiovisual installation AURA by Nick Verstand (a contemporary artist who researches the boundary between the immaterial and material world, and strives to create art that breaks down social boundaries) presents the experimenters’ emotions visually as light compostions in various forms and shapes. The intensity and colour of the forms are translated from brain waves, heart rate variability, and galvanic skin responses of the experimenters, which are collected through wearable biosensors. These emotional cues are being processed and analyzed by the system and derived into visible light. Through influences of musical compositions, the lights would respond to the changes of one’s emotions.This installation tributes to artist Anthony Mccall, who intends to explore light as a medium. Through these series of transformations, AURA provides a possibility for people to have a better understanding of themselves and their emotions through colours and intensities. Quoting the website of AURA, “the installation symbolises the materialisation of (internal) metaphysical space into (external) physical space.” This installation allows the resulting experiences to be a co-creation of the experimenters and artists, and generates a hypnotizing visual experience for the mind.

Xu Xu – Project 01 – Face

I was inspired by the de Stijl art style prior to coding this self portrait, so I incorporated the abstract, geometrical style into my work. I used various rectangles and ellipses to represent my facial features (such as my glasses and mole), and I also used arcs for my face shape and hair shape. It was hard for me to “paint” certain areas in one go, so I had to divide them into small pieces of geometries.

sketch

/*
Xu Xu
Section B
xux1@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 750);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
//faceshape
    fill(239,239,239)
    noStroke();
    rect(0,0,300,800);
    fill("black")
    noStroke();
    rect(300,0,300,800);
//hair
    fill(50,0,1)
    arc(300,250,420,420,600,0);
    fill(50,0,1)
    noStroke();
    rect(90,250,220,150);
    fill(50,0,1)
    rect(90,500,220,300);
    fill(350,81,58)
    noStroke();
    rect(300,250,210,400);
    fill(350,81,58)
    rect(300,700,210,100);
//neck
    fill(95,26,55)
    rect(300,250,80,550);
    fill(89,248,232)
    rect(220,250,80,550);
//face
    fill(231,29,54)
    ellipse(300,250,350,350);
    fill(55,63,81)
    noStroke();
    arc(300,250,350,350,0,PI + QUARTER_PI + QUARTER_PI);
    fill(89,248,232)
    arc(300,250,350,650,0,PI);
    fill(210,207,218)
    arc(300,280,350,630,0,PI);
    fill("grey")
    rect(320,280,155,10);
    fill("white")
    rect(100,250,200,5);
    fill(252,220,77)
    rect(110,255,190,200);
//eyes
    fill("white")
    arc(400,280,150,20,0,PI);
    fill("black")
    ellipse(430,300,7,7);
    fill("black")
    rect(410,280,10,10);
//mouth
    fill("red")
    rect(260,510,80,10);
    fill(2199,129,175)
    arc(300,525,80,25,0,PI);
    
    fill("black")
    rect(130,270,150,10);
//glasses
    noFill();
    stroke(111,45,189)
    strokeWeight(10);
    rect(90,230,200,100);
    fill(111,45,189)
    rect(70,250,20,30);
}