Month: September 2020

Project 2 – Variable Face(s)

I call this piece, “My Parents.” I thought it would be interesting to try to generate some sort of dialogue between two figures each with their own characteristics. It was difficult assigning locations to elements when they were dependent on other variables.

peachproject2
///Boy
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 10
var noseHeight = 5
var b = 40
var b2 = 170
var bodyL = 130
var bodyR = 200
var mouthA = 20
var mouthB = 10
var mouthC = 250
var mouthD = 250 


//Girl
var geyeSize = 20;
var gfaceWidth = 100;
var gfaceHeight = 150;
var gnoseWidth = 10
var gnoseHeight = 5
var mouthWidth = 10
var mouthHeight = 10
var bodyGL = 450
var bodyGR = 510
var g = 50
var g2 = 170

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
  background(180);
    fill(150)
    rect(0,height/3*2, width,height/3)

    
//boy
  noStroke()
    fill(b, b2, 253)
      triangle(width/4, height/2, bodyL, height/5*4, bodyR, height/5*4)
  //eyes
  ellipse(width / 4, height / 2, faceWidth,  faceHeight);
      var eyeLX = width / 4 - faceWidth * 0.25;
      var eyeRX = width / 4 + faceWidth * 0.25;
  fill(255)
      ellipse(eyeLX, height / 2, eyeSize, eyeSize);
      ellipse(eyeRX, height / 2, eyeSize, eyeSize);
  //eyebrows
  stroke(0)
    strokeWeight(3)
      line(eyeLX-6, height/2 - (faceHeight * 0.15), eyeLX + 6,height/2 - (faceHeight * 0.2))  
      line(eyeRX-6, height/2 - (faceHeight * 0.2), eyeRX + 6,height/2 - (faceHeight * 0.15)) 
  //mouth
  stroke(0)
    strokeWeight(3)
    noFill()
      curve (mouthD, mouthC, width/4+5, height/2 + mouthA, width/4+10, height/2+mouthB,mouthC,mouthD);
  //pupils 
  noStroke()
    fill(0)
      ellipse(eyeLX, height / 2, eyeSize * 0.25, eyeSize * 0.25);
      ellipse(eyeRX, height / 2, eyeSize*0.25, eyeSize*0.25);
  //nose
    fill(0)
      rect(width/4, height/2, noseWidth, noseHeight)
 
//girl  
  //body
    fill(220,g,g2)
      triangle(width/4*3, height/2, bodyGL, height/5*4, bodyGR, height/5*4)
  //head
    ellipse(width / 4 * 3, height / 2, gfaceWidth,  gfaceHeight);
  //eyes
      var geyeLX = width / 4 * 3- gfaceWidth * 0.25;
      var geyeRX = width / 4 *3 + gfaceWidth * 0.25;
    fill(255)
        ellipse(geyeLX, height / 2, geyeSize, geyeSize);
        ellipse(geyeRX, height / 2, geyeSize, geyeSize);
    fill(0)
        ellipse(geyeLX, height / 2, geyeSize * 0.25, geyeSize * 0.25);
        ellipse(geyeRX, height / 2, geyeSize*0.25, geyeSize*0.25);
    fill(0) 
  //nose
    ellipse(width/4*3-5, height/2, gnoseWidth, gnoseHeight)
  //eyebrows
    stroke(0)
      strokeWeight(3)
        line(geyeLX-6, height/2 - (faceHeight * 0.2), geyeLX + 6,height/2 - (faceHeight * 0.15))  
        line(geyeRX-6, height/2 - (faceHeight * 0.15), geyeRX + 6,height/2 - (faceHeight * 0.2)) 

  //mouth
    noStroke()
      ellipse(width/4*3-5, height/2 +(faceHeight*0.25), mouthWidth, mouthHeight)

  
}
 
function mousePressed() {
  
  faceHeight = random(100, 170);
  faceWidth = random(75,150)
  eyeSize = random(20, 40)
  noseWidth=random(5,20)
  noseHeight = random(3,10)
  
  gfaceHeight = random(100, 170);
  gfaceWidth = random(75,150)
  geyeSize = random(20, 40)
  gnoseWidth=random(5,20)
  gnoseHeight = random(3,10)
  
  mouthWidth = random (10,30)
  mouthHeight = random (8,30)
  
  b = random(10,200)
  b2 = random(150,225)
  
  g= random(5,140)
  g2 = random(100,150)
  
  bodyL = random (120,135)
  bodyR = random (195,210)
  
  mouthA = random(15,25)
  mouthB = random(15,25)
  mouthC = random(280,320)
  mouthD = random (280,320)
  
  bodyGL = random(430,450)
  bodyGR = random (500, 530)
}

LO-02

In one of Quayola’s work, Jardins d’Été, a realistic video of flowers gently brushed by the breeze gradually evolves into an impressionism oil painting as if the movement of the petals blurred the paint on the canvas. The whole transitional process is so smooth and subtle that it successfully captures the sensual artistic aspect of impressionism painting and the subtle nuances beyond human perception. I like how the artist employs technology as a lens to explore the tension and balance between the old and new. Through this lens, we can travel back through time and imagine what the artist saw that inspired him or her to capture that beautiful moment.

The website does not provide much info about the algorithm behind the scene, but I suppose it involves detecting which area in the video moves the most and this part will be processed first and so on until the entire image is modified.

The artist’s sensibility is embedded in the ways in which nature is synthesized and represented. The color, movement, lighting, and sounds all worked well together.

Project-02: Variable Faces

For this project I created a “Random Minion Generator.” Rather than post my horrific sketches – I decided to include the image I saw on Pinterest that inspired the facial variations.

Click through to see all the Bobs, Kevins, and Stuarts.

sketch

//Helen Cheng
//helenc1
//Section C

var canvasX = 480/6 //canvas split into 6/6 grid
var canvasY = 640/6
var eyeType = 1 
var mouthType = 3
var r = 245
var g = 224
var b = 80
var eyeOffsetY = 10
var eyeOffsetX = 0
var mouthOffsetY = 0
var hair = 5

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

function draw() {
    background(r, g, b);
    strokeWeight(5);
  
    //goggles
    fill(0);
    rect(0,canvasY*2.5+eyeOffsetY, 480, canvasY);
  
    //two eyes or one eye
    if (eyeType < 3) {
      //left eye
      fill(255);
      circle(canvasX*2, canvasY*3 + eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*2+eyeOffsetX, canvasY*3 + eyeOffsetY, canvasX);
      //right eye
      fill(255);
      circle(canvasX*4, canvasY*3 + eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*4+eyeOffsetX, canvasY*3 + eyeOffsetY, canvasX);
  }
    else{
      fill(255);
      circle(canvasX*3, canvasY*3+eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*3+eyeOffsetX, canvasY*3+eyeOffsetY, canvasX);
  }
  
     //eyelids open or half open
    if (eyeType < 2) {
        fill(r,g,b);
        arc(canvasX*4, canvasY*3 +eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
        arc(canvasX*2, canvasY*3 +eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
}
    else if (eyeType > 4) {
        fill(r,g,b);
        arc(canvasX*3, canvasY*3+eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
}
        
    //mouth
    if (mouthType < 2) {
        strokeWeight(5);
        line(canvasX*2, mouthOffsetY+canvasY*4, canvasX*3, mouthOffsetY+canvasY*4)
}
    else {
    // smile
        fill(0);
        strokeWeight(0);
        arc(canvasX*3, canvasY*4 + mouthOffsetY, canvasX*2, canvasY, 0, PI);
    //teeth
        fill(255);
        rect(canvasX*2.7, canvasY*4+ mouthOffsetY, canvasY/5, canvasY/5);
        rect(canvasX*3, canvasY*4+mouthOffsetY, canvasY/5, canvasY/5);
}
      //hair
    strokeWeight(hair); 
    line(canvasX*2,canvasY*2+eyeOffsetY,canvasX*2-abs(eyeOffsetY),canvasY+eyeOffsetY);
    line(canvasX*3,canvasY*2+eyeOffsetY,canvasX*3, canvasY+eyeOffsetY);
    line(canvasX*4,canvasY*2+eyeOffsetY,canvasX*4+abs(eyeOffsetY),canvasY+eyeOffsetY);
}

function mouseClicked() {
    eyeType = random(5);
    mouthType = random(1,3);
    r = random(245,255);
    g = random(224,255);
    b = random(0,80);
    eyeOffsetY = random(-canvasY/2,canvasY/2);
    eyeOffsetX = random (-canvasX/2, canvasX/2);
    mouthOffsetY = eyeOffsetY + random(canvasY/2);
    hair = random(0,10)
}

Inspiration:

Minion faces from Pinterest

Project-02: Variable Faces; Face Variables

For this project, I wanted to try and capture the idea that people can have different features, but functionally and physiologically, we aren’t so different. I coded the profile to change (nose shape, head shape, and etcetera) when you click, but the brain always stays the same.

variableface
var noseBridge = 33;
var noseBump = 340;
var noseShape = 17;
var nostrilAngle = 20;
var noseLip = 50;
var lipPurse = 407;
var upperLip = 45;
var lipOut = 40;
var centerLip = 50;
var chinIn = 60;
var chinPoint = 50;
var jawLine = 530;
var lipHeight = 420
var lipTop = 45
var headWidth = 440
var headHeight = 55
var headTop = 110
var r = 235
var g = 205
var b = 167


function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(255);
    
    //head
	fill(r, g, b);
	noStroke();
	beginShape();
	curveVertex(454,265);				//last point before back of head shape
	curveVertex(427,208);
	curveVertex(389,headTop+41);
	curveVertex(321,headTop+10);
	curveVertex(248,headTop);			//top of head
	curveVertex(156,128);
	curveVertex(116,164);
	curveVertex(93,210);
	curveVertex(headHeight+21,253);
	curveVertex(headHeight+20,280);
	curveVertex(headHeight,313);		//eyes
	curveVertex(noseBridge,noseBump);	//nose bridge
	curveVertex(noseShape,364);			//nose roundness
	curveVertex(nostrilAngle,377);		//bottom nostril angle
	curveVertex(noseLip,388);			//nostril end to upper lip
	curveVertex(upperLip,lipPurse);		//upper lip
	curveVertex(lipOut,lipHeight);		//upper lip sticking out
	curveVertex(centerLip,429);			//lip center
	curveVertex(lipOut+1,444);			//bottom lip sticking out
	curveVertex(56,lipHeight+lipTop);	//bottom lip
	curveVertex(chinIn,470);			//chin height
	curveVertex(chinPoint,492);			//chin roundness
	curveVertex(63,517);				//chin angles
	curveVertex(83,530);				//jawline
	curveVertex(121,jawLine);			//chin to neck angle
	curveVertex(155,541);
	curveVertex(173,607);
	curveVertex(155,567);			//bottom neck point
	endShape();

	//back of head
	beginShape();
	curveVertex(388,155);
	curveVertex(405,175);
	curveVertex(headWidth+3,219);
	curveVertex(noseShape+headWidth,259);
	curveVertex(noseShape+headWidth+3,298);
	curveVertex(441,358);
	curveVertex(headWidth-30,400);
	curveVertex(399,439);
	curveVertex(396,511);
	curveVertex(401,541);
	curveVertex(169,601);
	curveVertex(335,125);
	endShape();

    //cerebellum
    fill(253, 182, 185);
	strokeWeight(10);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(288,326);
	curveVertex(306,328);
	curveVertex(330,325);
	curveVertex(339,314);
	curveVertex(360,318);
	curveVertex(386,320);
	curveVertex(414,326);
	curveVertex(401,349);
	curveVertex(376,368);
	curveVertex(359,377);
	curveVertex(335,376);
	curveVertex(322,369);
	curveVertex(300,350);
	endShape();

	strokeWeight(6);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(290,329);
	curveVertex(311,344);
	curveVertex(321,330);
	curveVertex(339,330);
	curveVertex(371,332);
	curveVertex(382,342);
	curveVertex(403,342);
	curveVertex(398,349);
	curveVertex(373,349);
	curveVertex(364,339);
	curveVertex(335,345);
	curveVertex(329,329);
	curveVertex(355,351);
	curveVertex(386,358);
	curveVertex(381,364);
	curveVertex(356,361);
	curveVertex(331,351);
	curveVertex(325,356);
	curveVertex(346,366);
	curveVertex(360,371);
	curveVertex(369,371);
	curveVertex(347,375);
	curveVertex(317,362);
	curveVertex(305,352);
	curveVertex(305,334);
	curveVertex(310,330);
	endShape();

    //cortex
	fill(255, 200, 198);
	strokeWeight(12);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(266,127);
	curveVertex(247,124);
	curveVertex(221,130);
	curveVertex(181,143);
	curveVertex(134,172);
	curveVertex(115,194);
	curveVertex(107,220);
	curveVertex(109,240);
	curveVertex(121,259);
	curveVertex(133,274);
	curveVertex(153,283);
	curveVertex(171,287);
	curveVertex(174,307);
	curveVertex(182,326);
	curveVertex(196,332);
	curveVertex(205,340);
	curveVertex(225,346);
	curveVertex(248,341);
	curveVertex(265,329);
	curveVertex(291,325);
	curveVertex(325,324);
	curveVertex(341,314);
	curveVertex(351,318);
	curveVertex(363,318);
	curveVertex(372,322);
	curveVertex(385,322);
	curveVertex(404,322);
	curveVertex(413,320);
	curveVertex(432,300);
	curveVertex(431,282);
	curveVertex(425,265);
	curveVertex(416,235);
	curveVertex(410,215);
	curveVertex(396,197);
	curveVertex(387,185);
	curveVertex(377,171);
	curveVertex(352,154);
	curveVertex(329,144);
	curveVertex(296,131);
	curveVertex(246,125);
	curveVertex(301,132);
	curveVertex(332,147);
	curveVertex(367,162);
	endShape();
	
	//lateral fissure
	noFill();
	strokeWeight(10);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(169,286);
	curveVertex(171,285);
	curveVertex(208,256);
	curveVertex(243,258);
	curveVertex(267,252);
	curveVertex(331,247);
	curveVertex(353,226);
	curveVertex(367,206);
	endShape();

	

	//contours
	noFill();
	strokeWeight(7);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(173,294);
	curveVertex(185,287);
	curveVertex(195,293);
	curveVertex(211,287);
	curveVertex(220,297);
	curveVertex(230,287);
	curveVertex(250,280);
	curveVertex(255,287);
	curveVertex(271,276);
	curveVertex(289,271);
	curveVertex(300,283);
	curveVertex(311,281);
	curveVertex(320,269);
	curveVertex(335,271);
	curveVertex(343,277);
	curveVertex(345,257);
	curveVertex(331,250);	
	endShape();

	beginShape();
	curveVertex(127,216);
	curveVertex(149,233);
	curveVertex(164,224);
	curveVertex(165,210);
	curveVertex(183,201);
	curveVertex(199,210);
	curveVertex(211,206);
	curveVertex(209,180);
	curveVertex(221,166);
	curveVertex(236,159);
	curveVertex(232,147);
	curveVertex(249,132);
	curveVertex(266,126);
	curveVertex(291,131);
	curveVertex(275,150);
	curveVertex(257,169);
	curveVertex(239,169);
	curveVertex(233,189);
	curveVertex(227,211);
	curveVertex(234,231);
	curveVertex(215,257);	
	endShape();

	beginShape();
	curveVertex(331,142);
	curveVertex(330,150);
	curveVertex(319,160);
	curveVertex(303,156);
	curveVertex(298,165);
	curveVertex(285,176);
	curveVertex(283,188);
	curveVertex(266,208);
	curveVertex(253,197);
	curveVertex(261,212);
	curveVertex(252,220);
	curveVertex(245,241);
	curveVertex(249,256);
	endShape();

	beginShape();
	curveVertex(300,235);
	curveVertex(292,211);
	curveVertex(304,184);
	curveVertex(323,177);
	curveVertex(343,161);
	curveVertex(355,167);
	curveVertex(360,178);
	curveVertex(341,189);
	curveVertex(332,210);
	curveVertex(317,225);
	curveVertex(307,227);
	curveVertex(317,235);
	endShape();

	beginShape();
	curveVertex(208,134);
	curveVertex(190,138);
	curveVertex(194,148);
	curveVertex(182,166);
	curveVertex(187,177);
	curveVertex(167,190);
	curveVertex(161,182);
	endShape();


	beginShape();
	curveVertex(118,200);
	curveVertex(126,201);
	curveVertex(135,170);
	curveVertex(142,168);
	curveVertex(119,226);
	curveVertex(136,249);
	curveVertex(144,258);
	curveVertex(161,265);
	curveVertex(178,259);
	curveVertex(193,264);
	curveVertex(193,247);
	curveVertex(188,400);
	endShape();

	beginShape();
	curveVertex(175,160);
	curveVertex(166,157);
	curveVertex(165,171);
	curveVertex(153,196);
	curveVertex(149,215);
	curveVertex(161,228);
	endShape();

	beginShape();
	curveVertex(209,219);
	curveVertex(207,236);
	curveVertex(211,257);
	endShape();

	beginShape();
	curveVertex(400,204);
	curveVertex(352,223);
	curveVertex(369,240);
	curveVertex(377,222);
	curveVertex(390,219);
	curveVertex(401,229);
	curveVertex(409,252);
	curveVertex(397,278);
	endShape();

	beginShape();
	curveVertex(371,256);
	curveVertex(359,256);
	curveVertex(366,265);
	curveVertex(356,283);
	curveVertex(329,294);
	curveVertex(305,301);
	curveVertex(289,295);
	curveVertex(287,288);
	curveVertex(282,299);
	curveVertex(257,309);
	curveVertex(264,331);
	endShape();

	beginShape();
	curveVertex(217,323);
	curveVertex(217,335);
	curveVertex(226,339);
	curveVertex(248,341);
	curveVertex(265,325);
	curveVertex(285,313);
	curveVertex(295,311);
	curveVertex(319,315);
	curveVertex(342,307);
	endShape();

	beginShape();
	curveVertex(191,308);
	curveVertex(197,320);
	curveVertex(211,326);
	curveVertex(220,332);
	curveVertex(227,315);
	curveVertex(242,298);
	curveVertex(261,305);
	endShape();

	beginShape();
	curveVertex(347,315);
	curveVertex(362,319);
	curveVertex(368,305);
	curveVertex(382,303);
	curveVertex(397,300);
	curveVertex(394,273);
	curveVertex(379,258);
	curveVertex(395,251);
	curveVertex(402,228);
	endShape();

	beginShape();
	curveVertex(213,221);
	curveVertex(213,233);
	curveVertex(221,247);
	curveVertex(234,256);
	curveVertex(249,256);
	curveVertex(263,252);
	curveVertex(282,233);
	curveVertex(289,224);
	curveVertex(294,235);
	curveVertex(296,249);
	endShape();
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 

    noseBridge = random(24, 40);
	noseBump = random(330, 340);
	noseShape = random(5, 20);
	nostrilAngle = random(15, 40);
	noseLip = random(40, 50);
	lipPurse = random(402, 410);
	upperLip = random(40, 50);
	lipOut = random(37, 42);
	centerLip = random(45, 52);
	chinIn = random(50, 65);
	chinPoint = random(45, 57);
	jawLine = random(520, 542);
	lipTop = random(30, 42);
	headWidth = random(430, 440);
	headTop = random(100, 118);
	r = random(48, 249);
	g = random(30,223);
	b = random(16, 198);

}

I made some preliminary concept sketches, but mostly used an Image Map HTML Generator to generate some base coordinates and fiddled with those.

My preliminary sketches and coordinate notations

Looking Outwards-02

With the introduction of generative design in the past decades, the ways in which architecture is rendered has been completely overwrought. One work that I particularly admire is MX3D’s 12-meter long steel bridge in Amsterdam. It is entirely 3-D printed – the construction utilized two industrial level 3-D printers that worked on opposite ends to meet in the center. This method of construction is largely unprecedented, and was only possible through the combination of parametric design and artificial intelligence. One amazing feature of the bridge is that it continues “learning” throughout its lifespan – the designers included sensors connected to a computer model that informs of the performance and behavior of the physical bridge in real time. It measures environmental data such as air quality as well as structural information such as load and strain. This is important because it shows the designer’s conscientiousness of their work’s future impact. They made a practical work of art that’s sustainable for years to come.
The algorithm developed to design the structure is undoubtedly complex, requiring assistance from companies such as Autodesk. It took a multitude of parameters into account, considering the ways in which people and the environment will react to, and interact with, it.
In general, architecture is at the crossroads of aesthetic and practicality. The creator’s artistic sensibility manifests itself in the uniquely defining, yet structurally reliable and complex formation.

Project 2: Variable Face

variable face cb
var eyeWidth = 55;
var eyeHeight = 70;
var eyeColor = 10;
var earHeight = 180;
var faceWidth = 300;
var faceHeight = 230;
var backgroundR = 245;
var backgroundG = 200;
var backgroundB = 175;
var dressR = 240;
var dressG = 90;
var dressB = 160;
var blushWidth = 30;
var blushHeight = 15;
var bodyWidth = 120;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var centerX = width / 2
    var centerY = height / 2
    background(backgroundR, backgroundG, backgroundB);

    //body
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY + 120, bodyWidth, 50);
    rect(centerX - (bodyWidth / 2), centerY + 120, bodyWidth, 300);

    //ears
    var earLX = centerX - 55
    var earRX = centerX + 55
    var earLH = centerY - earHeight
    var earRH = centerY - earHeight
    stroke(95, 130, 255);
    strokeWeight(10);
    fill(255, 130, 130);
    triangle(centerX - 115, centerY - 60, earLX, centerY - 60, centerX - 70, earLH);
    triangle(centerX + 115, centerY - 60, earRX, centerY - 60, centerX + 70, earRH);

    //dress
    noStroke();
    fill(dressR, dressG, dressB);
    triangle(centerX - 60, height, centerX + 60, height, centerX, centerY - 100);

    //face
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY, faceWidth,  faceHeight);

    //hair
    //left
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 35, centerY - 90);
    curveVertex(centerX - 50, centerY - 50);
    curveVertex(centerX - 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //center
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 15, centerY - 70);
    curveVertex(centerX, centerY - 35);
    curveVertex(centerX + 15, centerY - 70);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //right
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX + 35, centerY - 90);
    curveVertex(centerX + 50, centerY - 50);
    curveVertex(centerX + 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();

    //eyes
    var eyeLX = centerX - faceWidth * 0.25;
    var eyeRX = centerX + faceWidth * 0.25;
    noStroke();
    fill(255);
    ellipse(eyeLX, centerY, eyeWidth, eyeHeight);
    ellipse(eyeRX, centerY, eyeWidth, eyeHeight);
    //eye black
    noStroke();
    fill(eyeColor);
    ellipse(eyeLX - 5, centerY + 5, 48, 60);
    ellipse(eyeRX - 5, centerY + 5, 48, 60);
    //eye highlight
    noStroke();
    fill(255);
    triangle(eyeLX, centerY, eyeLX + 20, centerY - 10, eyeLX + 20, centerY + 10);
    triangle(eyeRX, centerY, eyeRX + 20, centerY - 10, eyeRX + 20, centerY + 10);

    //blush
    noStroke();
    fill(210, 150, 170);
    ellipse(eyeLX + 2, centerY + 55, blushWidth, blushHeight);
    ellipse(eyeRX + 2, centerY + 55, blushWidth, blushHeight);

   
    //mouth
    if (mouseY <= (centerY)) {
        //smile
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 32, centerY + 60);
        curveVertex(centerX + 32, centerY + 60);
        endShape();
    } else if (mouseY > centerY) {
        //frown
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 25, centerY + 70);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(280, 330);
    faceHeight = random(210, 300);
    eyeWidth = random(50, 60);
    eyeHeight = random(65, 75);
    eyeColor = random(0, 100);
    backgroundR = random(170, 255);
    backgroundG = random(170, 170);
    backgroundB = random(170, 200);
    blushWidth = random(25, 40);
    blushHeight = random(5, 25);
    bodyWidth = random(110, 150);
    dressR = random(130, 255);
    dressG = random(80, 170);
    dressB = random(110, 150);
    earHeight = random(160, 200);
}

My inspiration for this project was Rosie, a character from the game Animal Crossing. I played around with the variability of the size of the eyes, face, blush, and body as well as the color of the eyes, background, and dress. When creating the two mouth facial expressions, I also explored if statements and curves. Below is a picture of Rosie and my initial Illustrator sketch!

inspiration & sketch

Project2 – Variable Faces

Pikachu is too cute so I make him uglier.

pikachu
/*
 * Fangzheng Zhu
 * fangzhez@andrew.cmu.edu
 * Section D
 *
 * This program draws variable faces.
 */

var eyeSize = 40;
var faceWidth = 100;
var faceHeight = 150;
var cheekSize = 40;
var TopHeadWidth = 210;
var TopHeadHeight = 180;
var BottomHeadWidth = 230;
var BottomHeadHeight = 170;
var x=40;
var y=10;
var r=35;
var z=20;
var ballSize=40;
var a=100;
var b=100;

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

function draw() {
    background(180);
    //Ball
    stroke(0);
    strokeWeight(4);
    fill(255,0,0);
    arc(a,b,ballSize,ballSize,180,360);
    fill(255,255,255);
    arc(a,b,ballSize,ballSize,0,180);
    line(a-ballSize/2,b,a+ballSize/2,b);
    ellipse(a,b,ballSize/4,ballSize/4);

    //TopFace
    noStroke();
    fill(255, 218, 36);
    ellipse(width / 2, height / 2, TopHeadWidth, TopHeadHeight);
    //BottomFace
    ellipse(width / 2, height / 2 + 50, BottomHeadWidth, BottomHeadHeight);

    //Eye black
    fill(0);
    noStroke();
    ellipse(width/2 - 45, height/2 - 10, eyeSize, eyeSize);
    ellipse(width/2 + 45, height/2 - 10, eyeSize, eyeSize);

    //Eye white
    fill(255);
    noStroke();
    ellipse(width/2 - x, height/2 -y, eyeSize - 20, eyeSize - 20);
    ellipse(width/2 + x, height/2 -y, eyeSize - 20, eyeSize - 20);

    //Nose
    fill(0);
    ellipse(width / 2, height / 2 + 20, 10, 5);

    //LeftCheek
    fill(255, 0 , 0);
    noStroke();
    ellipse(width / 2 - BottomHeadWidth/3, height / 2 + 50, cheekSize, cheekSize +10);
    //RightCheek
    ellipse(width / 2 + BottomHeadWidth/3, height / 2 + 50, cheekSize, cheekSize +10);



    //right mouth
    strokeWeight(3);
    stroke(0,0,0);
    fill(255, 218, 36);
    arc(width/2+ 17, height/2 + 30, 45, 45, z, 140);
    arc(width/2- 17, height/2 + 30, 45, 45, 40, 180-z);

    //Left Ear
    fill(255, 218, 36);
    noStroke();
    translate(width/2, height/2);
    rotate(-r);
    ellipse(-30, -150, 50, 150);
    //Right Ear
    rotate(2*r);
    ellipse(30, -150, 50, 150);
}

function mousePressed() {
    eyeSize = random(30, 50);
    BottomHeadWidth = random(210,240);
    BottomHeadHeight = random(150,180);
    TopHeadHeight = random(170, 190);
    TopHeadWidth = random(180,200);
    cheekSize = random(30, 60);
    x = random(30,40);
    y = random (8,12);
    r = random (30,45);
    z = random (10,45);
    ballSize = random (40,100);
    a = random (0,width);
    b = random (0, height);
}

Looking Outwards 02: Generative Art

I am inspired by LIA’s 2018 collaborative project, Animal Imagination. This is a collection of fifty novel artworks which reflect the balance and beauty of nature through algorithm as digital paintings and videos.

The artist took inspiration from natural phenomena and incorporated the colors and forms into one overarching code base. Each work evolved as LIA tweaked this original code base to create new generative works. Each painting is unique, but they all bring an “alive” quality through the movement and vibrance; the decision to use generative media to explore the pulse of nature was executed perfectly in this context.

Video documentation of LIA’s generative project, Animal Imagination (2018)

I think these pieces are not only very beautiful, but quite sensitive to texture and harmony as though LIA had painted them by hand. This ability to manipulate code and render these types of living and performative pieces makes them even more engaging had they been static works.

Animal Imagination 29 by LIA (2018)

Looking Outwards 02: Generative Art

The project Autotroph.OBJ was created by Raven Kwok in 2020.


I admire this project because it combines digital art with a real 3D space. The algorithm of this project is simply polygon drawing method. The artist applies the work onto different layers of the acrylic glass sheet and customized lighting travels back and forth between those layers, which creates a subtle animation of cell division. The biggest inspiration from this project is although we can create 3D dimensions in digital art, it is still a 2D platform, on a screen, or canvas. If we can think of the project in a real 3D space, the boundaries are broken and we can generate more interring artworks.

Project 2: Variable Faces

sketch
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 


//template for variable face 
var backgroundColor = 0; 
var shirtColor = 255; 
var faceHeight = 300;
var faceWidth = 290;
var snoutWidth = 330; 
var snoutHeight = 220; 
var earWidth = 150;
var eyeSize = 50; 
var noseHeight = 50; 
var noseWidth = 80; 
var nostHeight = 14; 
var nostWidth = 8; 
var mouthWidth = 50;
var mouthHeight = 30;
var eyebrow = 1; 
var x; 
var y; 
var z; 
var b1 = 224; 
var b2 = 200; 
var b3 = 206; 
var b4 = 230; 
var color1; 
var color2; 
var color3;
var color4; 

function setup() {
	createCanvas(640,480);
	backgroundColor = color(random(255),random(255),random(255)); 
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw(){

// -PIG- //
	noStroke(); 
	background(backgroundColor); 
//shirt 
	fill(shirtColor); 
	x = width/2; 
	y = height; 		
	ellipse(x,y/2+snoutHeight,x,y*.6); 
//collar of shirt 
	y = 265; 
	color1 = random(150,255); 
	color2 = random(150,255); 
	color3 = random(150,255); 
	color4 = random(150,255); 
	fill(color1,color2,color3,color4); 
	triangle(x-snoutWidth*.3,y+snoutHeight*.6,x-snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
	triangle(x+snoutWidth*.3,y+snoutHeight*.6,x+snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
//overall head 
	y = height/2; 
	fill(255,218,224); 
//snout area
	ellipse(x,y+height*.15,snoutWidth,snoutHeight);
//face 
	ellipse(x,y,faceWidth,faceHeight);

//nose 
	fill(247,191,200); 
	ellipse(x,y+snoutHeight*.2,noseWidth,noseHeight); 


//nostrils 
	fill(255,255,255); 
	var nL = x - snoutWidth/15;
	var rL = x + snoutWidth/15;
	ellipse(nL,y+height*.1,nostWidth,nostHeight); 
	ellipse(rL,y+height*.1,nostWidth,nostHeight); 

//eyes
	y = 240;
	fill(48,33,25);
	var eL = x - faceWidth/5
	var eR = x + faceWidth/5
	circle(eL,y,eyeSize); 
	circle(eR,y,eyeSize); 

//overlapping eyes to make them appear closed  
	fill(255,218,224);
	circle(eL,y-10,eyeSize);
	circle(eR,y-10,eyeSize);

//ears 
	fill(247,191,200); 
	var earLX = x - faceWidth*.6; 
	var earY = 175; 
	var earRX = x + faceWidth*.6;

//left ear 
	triangle(earLX,earY,earLX+30,earY+50,earLX+60,earY); 
//right ear 
	triangle(earRX-60,earY,earRX-30,earY+50,earRX,earY); 

//mouth 
	y = 362;
	fill(203,73,95); 
	ellipse(x,y,mouthWidth,mouthHeight);
	fill(255,218,224);
	ellipse(x,y+z,mouthWidth,mouthHeight); 

//eyebrow 
	y = 230 
	fill(48,33,25); 
	if (eyebrow < 2) {
//sad 
		beginShape(); 
		vertex(x-faceWidth*.33,b1); 
		vertex(x-faceWidth*.13,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.31,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.13,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.31,b4); 
		endShape(); 

	} else if (eyebrow < 3) { 
//mad 

		beginShape(); 
		vertex(x-faceWidth*.1,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.31,b3);
		vertex(x-faceWidth*.13,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.1,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.31,b3); 
		vertex(x+faceWidth*.13,b4); 
		endShape(); 

	} else { 
//neutral

		beginShape(); 
		vertex(x-faceWidth*.33,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.1,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.1,b4); 
		endShape(); 
}
}

function mousePressed() {
	backgroundColor = color(random(255), random(255), random(255)); 
	shirtColor = color(random(255), random(255), random(255)); 
	faceWidth = random(230,320); 
	faceHeight = random(240,360); 
	snoutWidth = random(260,380); 
	snoutHeight = random(160,260); 
	noseWidth = random(60,120); 
	noseHeight = random(60,90); 
	nostWidth = random(6,10); 
	nostHeight = random(10,16); 
	eyeSize = random(30,70); 
	mouthWidth = random(30,70);
	z = random(-8,8);
	b1 = random(221,228); 
	b2 = random(197,204); 
	b3 = random(203,207); 
	b4 = random(227,234); 
	eyebrow = random(1,4); 
}