Category: SectionB

Project 02: Variable Faces

This is my project 02 “Variable Faces”. The most challenging part of this project is organizing the logic of my code. Once the logic is sorted out it was actually not too complicated. I struggled a bit with certain shapes.

sketch
/* Jenny Wang
   Section B */

var eyes = 3;
var features = 3;
var mouth = 3;
var hair = 3;

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

function draw() {
    background(250,160,150);
    noStroke()
    fill(230,89,132);
    ellipse()
    noStroke();
    fill(226,190,134);
    ellipse(234,258,199,250);//face
    strokeWeight(2); //nose
    stroke(177,123,60);
    line(231,272,220,300);
    strokeWeight(2);
    stroke(177,123,60);
    line(220,300,236,302);


    if(eyes<=1){ //round eyes
        noStroke();
        fill(255,255,255);
        circle(182,252,46);
        noStroke();
        fill(162,196,231);
        circle(182,252,29);
        noStroke();
        fill(43,91,137);
        circle(182,252,17);
        //left eye
        noStroke();
        fill(255,255,255);
        circle(292,252,46);
        noStroke();
        fill(162,196,231);
        circle(292,252,29);
        noStroke();
        fill(43,91,137);
        circle(292,252,17);
        //right eye
    }
    else if(eyes<=2){ //squint eyes
        strokeWeight(3);
        stroke(65,50,20)
        line(170,253,197,265);
        line(170,280,197,265);//left eye
        line(270,265,297,254);
        line(297,280,270,265);//right eye
    }
    else if (eyes<=3){ //half eyes
        noStroke();
        fill(255,255,255);
        arc(182,252,46,46,2.6,0.5,open)
        noStroke();
        fill(164,209,125);
        circle(182,252,29);
        noStroke();
        fill(177,123,57);
        circle(182,252,17);
        //left eye
        noStroke();
        fill(255,255,255);
        arc(292,252,46,46,2.6,0.5,open)
        noStroke();
        fill(164,209,125);
        circle(292,252,29);
        noStroke();
        fill(177,123,57);
        circle(292,252,17);
    }

    if(features<=1){ //mole
        strokeWeight(3);
        fill(177,123,57)
        point(186,321);
    }
    else if(features<=2){ //freckles
        strokeWeight(3);
        fill(177,123,57);
        point(162,301);
        strokeWeight(3);
        fill(177,123,57);
        point(177,309);
        strokeWeight(3);
        fill(177,123,57);
        point(194,303);
        strokeWeight(3);
        fill(177,123,57);
        point(265,306);
        strokeWeight(3);
        fill(177,123,57);
        point(283,299);
        strokeWeight(3);
        fill(177,123,57);
        point(298,308);
    }
    else if(features<=3){ //blush
        noStroke();
        fill(239,171,199);
        ellipse(164,306,28,16);
        noStroke();
        fill(239,171,199);
        ellipse(305,306,28,16);
    }

    if(mouth<=1){ //happy laugh
        noStroke();
        fill(246,166,193);
        arc(237,324,80,70,0,0.6 + 2.6, OPEN);
    }
    else if(mouth<=2){//sad mouth
        strokeWeight(4);
        stroke(246,160,193);
        line(214,350,235,343);
        strokeWeight(4);
        stroke(246,160,193);
        line(256,350,235,343);
    }
    else if(mouth<=3){ //mouth with teeth
        noStroke();
        fill(237,10,124);
        arc(237,324,80,70,0,0.6 + 2.6, OPEN);
        noStroke();
        fill(255,255,255);
        rect(227,323,21,11);
    }

    if(hair<=1){ //red hair
        noStroke();
        fill(199,102,29);
        arc(233,179,160,93,2.6,0.5, OPEN);
        noStroke();
        fill(199,102,29);
        circle(347,197,95);
        noStroke();
        fill(199,102,29);
        circle(116,197,95);
    }
    else if(hair<=2) { //blonde hair
        noStroke();
        fill(231,209,100);
        circle(234,124,98);
        noStroke();
        fill(231,209,100);
        circle(305,148,84);
        noStroke();
        fill(231,209,100);
        circle(342,203,58);
        noStroke();
        fill(231,209,100);
        circle(347,244,45);
        noStroke();
        fill(231,209,100);
        circle(160,148,84);
        noStroke();
        fill(231,209,100);
        circle(127,203,58);
        noStroke();
        fill(231,209,100);
        circle(121,244,45);
    }
    else if(hair<=3){ //brown hair
        noStroke();
        fill(177,123,57);
        arc(233,180,232,126,2.6,0.5, OPEN);
        noStroke();
        fill(177,123,57);
        rect(118,180,38,205)
        noStroke();
        fill(177,123,57);
        rect(311,180,38,205);
    }
    
    noStroke(); //neck
    fill(226,190,134);
    rect(210,378,48,63);
    noStroke(); //body
    fill(226,190,134);
    rect(120,415,231,225,65,65,0,0);
    noStroke(); //dress
    fill(184,191,225);
    quad(155,527,202,415,265,415,320,527);
    noStroke(); 
    fill(226,190,134);
    triangle(202,415,265,415,233,475);
    noStroke(); 
    fill(184,191,225);
    rect(155,527,164,113);
}

function mousePressed() {
    eyes = random (0,3);
    features = random (0,3);
    mouth = random (0,3);
    hair = random (0,3);
}

Looking Outwards 2 – Generative Art

Title: Modular Lattice
Author: Marius Watz
Link: http://mariuswatz.com/2012/08/08/modular-lattice/

I am very interested in Marius Watz’ project called “Modular Lattice”, as I enjoy that it has a 3-dimensional component to it, unlike the typical 2-dimensional drawings. Being from an architecture background, I admire how these “forms” can almost be seen as structural. It would be interesting to see these 3D elements supporting buildings or even become the overall building form. I also admire that due to a change in set of parameters, these forms not only vary in the overall form, but the textile qualities (there seems to be various densities). Unfortunately I was not able to find much information on how these 3D elements are derived specifically, however with some knowledge in 3D generative modeling; I can assume that there are variables containing height, width, percentage of infill or number of faces that want to be generated in the final form. These variables can be changed or adjusted depending on specific parameters set. This perhaps allows an unlimited number of different generations of the form (however each are similar due to the same basic / standard elements). Marius Watz’ artistic sensibilities seem to manifest in the algorithm, as he tends to create very random and radially generated works. Therefore, there has to be something in the algorithm that connects to some origin point, with perhaps a randomizer function that allows unlimited possibilities but with parameters that the artist can set / control.

LO2-Generative Art


Meander – Robert Hodgin

“Meander is a procedural system for generating historical maps of rivers that never existed”

I find this project especially interesting and inspiring because it is a representation of art that transcends time. Hodgin not only uses animations of rivers on a map, but also 3d representations that depict the effect of these rivers on the surrounding terrain, as well as the overall topography of the area. As an architecture student i find this super unique because it combines animation and art with useful information that can make predictions based on the condition of the earth.

The algorithm of this piece seems to involve the usage of vectors to produce bends that form the curves of the appearing rivers. Hodgin was inspired by the artist Harold Fisk, who first created these maps that visualize time along with engineers in the US Army Coup. in 1944. It’s fascinating that now, with more evolved technology, idealizations of many artists in the past can be produced by later generations.

Meander

Blog 02: “Distributed Consciousness”

By Ilia Urgen

“Distributed Consciousness” is a collection of 12 digital illustrations from 2021, created by Turkish-born visual artist Memo Akten. For reference, I have included 1 of his illustrations below.

Akten is an artist who’s constantly inspired by the natural environment around him and how human interactions connect with nature. The main subject of the 12 illustrations is an octopus, which Akten saw while snorkeling in the Mediterranean Sea.

I admire the depths of dimensions in his collection, along with the use of contrasting textures and vivid-bright colors, all while keeping an underwater theme. The soft, gentle eyes of the octopus makes the observer feel at ease, where they can picture themselves being underwater just like Akten was. I also admire the ombre-effect in the background, making the illustration even more welcoming.

This collection involved a combination of artist, artificial intelligence, and ecological awareness. Akten’s greater understanding of digital computation, the natural world, and environmental design is what draws any person to this work of art.

Project 02

Variable Face

sketchDownload
// Ilia Urgen
// Section B

//background color
var r = 128;
var g = 235;
var b = 255;

//shirt color
var r1 = 217;
var g1 = 0;
var b1 = 0;

var faceWidth = 480;
var faceHeight = 660;

var neckWidth = 250; 

var eyebrowHeight = 518;
var eyebrowThickness = 30;

var eyeDiameter = 60;

var eyeCenterX1 = 400;
var eyeCenterY1 = 575;
var eyeCenterX2 = 600;

//nose width coordinates
var noseX = 500;
var noseY = 540;

var mouth = 3;

function setup() {
    createCanvas (1000, 1000);
}                                   
                                    
function draw() {                   
    background (r, g, b);

    //neck outline
    noStroke();
    fill (243, 207, 187);
    rect (375, 500, neckWidth, 800);        
    
    //face outline                      
    ellipse (500, 600, faceWidth, faceHeight);  

    //left ear
    arc (500-(faceWidth/2)-15,620,80,160,PI + HALF_PI,PI + HALF_PI);  
    
    //right ear
    arc (500+(faceWidth/2)+15,620,80,160,PI + HALF_PI,PI + HALF_PI);  

    //left eye
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 50, eyeDiameter);  
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 30, eyeDiameter); 
    fill (102,51,0); //brown
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1,5,5);

    //right eye
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 50, eyeDiameter);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 30, eyeDiameter);
    fill (102,51,0); //brown
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1,5,5);

    //nose
    fill (240,190,180);
    triangle (noseX - 50,700,500,noseY,noseX + 50,700);
    
    //t-shirt                                                              
    fill (r1,g1,b1);                                              
    quad (500-(neckWidth/2),920,200,1000,800,1000,500+(neckWidth/2),920);

    //left eyebrow
    noFill();
    strokeWeight (eyebrowThickness);
    stroke (55,39,45);
    arc (400,eyebrowHeight,120,30,PI,0);

    //right eyebrow
    arc (600,eyebrowHeight,120,30,PI,0);

    //mouth
    noFill();
    strokeWeight (35);
    stroke (193,104,115);
    
    //sad face
    if (mouth == 1) { 
        arc (500,785,180,40,PI,0);
    }

    //happy face
    else if (mouth == 2) {
        arc (500,775,180,40,0, PI);
    }

    //shocked face
    else if (mouth == 3) {
        fill (255);
        stroke (255);
        ellipse (500,790,115,10);

        noFill();
        strokeWeight (35);
        stroke (193,104,115);
        arc (500,770,180,40,PI,0);
        arc (500,780,180,40,0, PI);
    }

    //ear lines
    noFill();
    stroke (55,39,45);
    strokeWeight (2);

    arc (500-(faceWidth/2)-20,625,30,100,HALF_PI, PI + HALF_PI);
    arc (500+(faceWidth/2)+20,625,30,100,PI + HALF_PI, HALF_PI);

    //hair
    strokeWeight (eyebrowThickness);

    line (300,660-(faceHeight/2.5),100,(faceHeight/2)-20);
    line (310,660-(faceHeight/2.5),120,(faceHeight/2)-25);
    line (320,660-(faceHeight/2.5),140,(faceHeight/2)-30);

    line (330,660-(faceHeight/2.5),160,(faceHeight/2)-35);
    line (340,660-(faceHeight/2.5),180,(faceHeight/2)-40);
    line (350,660-(faceHeight/2.5),200,(faceHeight/2)-45);

    line (360,660-(faceHeight/2.5),220,(faceHeight/2)-50);
    line (370,660-(faceHeight/2.5),240,(faceHeight/2)-55);
    line (380,660-(faceHeight/2.5),260,(faceHeight/2)-60);

    line (390,660-(faceHeight/2.5),280,(faceHeight/2)-65);
    line (400,660-(faceHeight/2.5),300,(faceHeight/2)-70);
    line (410,660-(faceHeight/2.5),320,(faceHeight/2)-75);

    line (420,660-(faceHeight/2.5),340,(faceHeight/2)-80);
    line (430,660-(faceHeight/2.5),360,(faceHeight/2)-85);
    line (440,660-(faceHeight/2.5),380,(faceHeight/2)-90);

    line (450,660-(faceHeight/2.5),400,(faceHeight/2)-95);
    line (460,660-(faceHeight/2.5),420,(faceHeight/2)-100);
    line (470,660-(faceHeight/2.5),440,(faceHeight/2)-105);

    line (480,660-(faceHeight/2.5),460,(faceHeight/2)-110);
    line (490,660-(faceHeight/2.5),480,(faceHeight/2)-115);
    
    line (500,660-(faceHeight/2.5),500,(faceHeight/2)-120);
    
    line (510,660-(faceHeight/2.5),520,(faceHeight/2)-115);
    line (520,660-(faceHeight/2.5),540,(faceHeight/2)-110);

    line (530,660-(faceHeight/2.5),560,(faceHeight/2)-105);
    line (540,660-(faceHeight/2.5),580,(faceHeight/2)-100);
    line (550,660-(faceHeight/2.5),600,(faceHeight/2)-95);

    line (560,660-(faceHeight/2.5),620,(faceHeight/2)-90);
    line (570,660-(faceHeight/2.5),640,(faceHeight/2)-85);
    line (580,660-(faceHeight/2.5),660,(faceHeight/2)-80);

    line (590,660-(faceHeight/2.5),680,(faceHeight/2)-75);
    line (600,660-(faceHeight/2.5),700,(faceHeight/2)-70);
    line (610,660-(faceHeight/2.5),720,(faceHeight/2)-65);

    line (620,660-(faceHeight/2.5),740,(faceHeight/2)-60);
    line (630,660-(faceHeight/2.5),760,(faceHeight/2)-55);
    line (640,660-(faceHeight/2.5),780,(faceHeight/2)-50);

    line (650,660-(faceHeight/2.5),800,(faceHeight/2)-45);
    line (660,660-(faceHeight/2.5),820,(faceHeight/2)-40);
    line (670,660-(faceHeight/2.5),840,(faceHeight/2)-35);

    line (680,660-(faceHeight/2.5),860,(faceHeight/2)-30);
    line (690,660-(faceHeight/2.5),880,(faceHeight/2)-25);
    line (700,660-(faceHeight/2.5),900,(faceHeight/2)-20);

}

function mousePressed() {
    
    //background color
    r = random (0,255);
    g = random (0,255);
    b = random (0,255);

    //shirt color
    r1 = random (0,255);
    g1 = random (0,255);
    b1 = random (0,255);

    faceWidth = random (400, 900);
    faceHeight = random (400, 800);

    eyebrowThickness = random (10,50);
    eyebrowHeight = random (500, 545);

    eyeDiameter = random (20,80);
    eyeCenterY1 = random (570,600);

    //nose width coordinates
    noseX = random (480,520);
    noseY = random (500,590);

    //mouth option 1,2, or 3
    mouth = int(random (1,4));
}

LO 02: Generative Art

“Flow” is an interactive art exhibit by Karl Sims. Developed in 2018, it is a computer simulation that displays particle flows and fluid dynamics in vibrant colors on very large screens. The simulation becomes an interactive art installation when viewers interact with it. A Kinect depth sensor registers the human form and mirrors their appearance, placing the viewer in the art. The program senses human gestures and the algorithm registers these gestures as disruptions in the flow; thus generating new and unique art with each viewer. The particle simulation is reminiscent of Van Gogh’s art and immerses the viewer in their own “Starry Night.” The fluid simulations look as though the viewer can paint with their gestures or as though they are immersed in blooming ink drops. Still others give the effect of being embodied in light or rainbow fabrics. In all there are 10 different effects in this exhibit.

There is simplicity in this installation that I admire. It combines the physics of particle flow and fluid dynamics with color. The flow algorithms give the art its initial form, but this dynamic form becomes dependent on viewers as they interact with it. The physics are based on vectors and fluid flow models. Details can be found here.

Sims has been creating flow simulations and generative art since the 1980s. The progression of his work in combining software, art, and the human experience is evident when viewing his earlier works. This installation was commissioned by MIT’s CSAIL, Computer Science and Artificial Intelligence Laboratory. It is currently on display at the MIT Stata Center, in Boston, Massachusetts.

Project-02-Variable-Face

The hardest part of my project was attempting to debug the randomizer function.

sketch
// Zoe Lin (ID: youlin)
// Section B

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var faceType;
var noseType = 3;
var mouthType = 1;
var earType;
var pupilSize;
var browType;
var stuffType;
var r;
var g;
var b;
 
function setup() {
    createCanvas(300, 300);
    rectMode(CENTER);
}
 
function draw() {
    background(r, g, b);
    face();
    nose();
    eyes();
    //brows();
    pupils();
    mouth();
    //ears();
    //stuffs();
  
}
 
 //face shape   
function face() {
    if (faceType < 0.7) {
      ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    } else {
      rect(width / 2, height / 2, faceWidth, faceHeight/1.05, 30)
    }
  
}

//eye shape
function eyes() {
    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);
}
  
//pupil size
function pupils() {
    push();
    //strokeWeight(9);
    //pupilSize = strokeWeight(1);
    if (pupilSize >= 1 & pupilSize <= 2) {
      strokeWeight(4);
    } else if (pupilSize >= 2 & pupilSize <= 3) {
      strokeWeight(5);
    } else if (pupilSize >= 3 & pupilSize <= 4) {
      strokeWeight(6);
    } else if (pupilSize >= 4 & pupilSize <= 5) {
      strokeWeight(7);
    } else if (pupilSize >= 5 & pupilSize <= 6) {
      strokeWeight(8);
    } else if (pupilSize >= 6 & pupilSize <= 7) {
      strokeWeight(9);
    } else if (pupilSize >= 7 & pupilSize <= 8) {
      strokeWeight(10);
    } else {
      strokeWeight(11);
    }
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    point(eyeLX, height / 2, eyeSize);
    point(eyeRX, height / 2, eyeSize);
    //strokeWeight(random(1, 7));
    pop();
}

//nose shape
function nose() {
    var noseW = width / 2 - faceWidth * 0.04
    var noseH = height / 2 + faceHeight * 0.07
    //noseType = random(1, 5);
    if (noseType >= 1 & noseType <= 2) {
      rect(noseW+4, noseH, 7, 18, 10);
    } else if (noseType >= 2 & noseType <= 3) {
      arc(noseW+4, noseH, 10, 10, PI + TWO_PI, TWO_PI);
    } else if (noseType >= 3 & noseType <= 4) {
      push();
      strokeWeight(4);
      point(noseW+2, noseH+5);
      point(noseW+10, noseH+5);
      pop();
      //triangle(noseW-3, noseH, noseW, noseH-4, noseW+3, noseH)
    } else if (noseType >= 4 & noseType <= 5) {
     ellipse(noseW+4, noseH+3, 10, 10);
    } else if (noseType >= 5 & noseType <= 6) {
      triangle(noseW+2, noseH, noseW+5, noseH-4, noseW+8, noseH)
    }
}
  
//mouth shape
function mouth() {
    var mouthW = width / 2
    var mouthH = height / 2 + faceHeight * 0.1
    if (mouthType >= 1 && mouthType <= 2) {
      push();
      fill(0);
      ellipse(mouthW, mouthH+20, 10, 10);
      pop();
    } else if (mouthType >= 2 & mouthType <= 3) {
      push();
      noFill();
      arc(mouthW, mouthH+25, 25, 18, PI + TWO_PI, TWO_PI);
      pop();
    } else if (mouthType >= 3 & mouthType <= 4) {
      push();
      noFill();
      arc(mouthW, mouthH+2, 60, 40, PI*0.1, PI*0.9, OPEN);
      pop();
    } else if (mouthType >= 4 & mouthType <= 5) {
      line(mouthW-15, mouthH+20, mouthW+15, mouthH+20);
    }
}
 
function mousePressed() {
    faceWidth = random(100, 170);
    faceHeight = random(100, 165);
    eyeSize = random(10, 30);
    pupilSize = random(1, 9);
    faceType = random(0, 2);
    noseType = random(1, 6);
    mouthType = random(1, 5);
    r = random(20, 230);
    g = random(120, 200);
    b = random(50, 255);
    strokeWeight(random(1.5, 3));
}

Project 01


Here is me! 🙂

sketch

//Tracy Meng
//Section B

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

function draw() {
    //BACKGROUND
    background(225,246,255);        // light blue sky

    //CLOUDS
    noStroke();
    fill(255);                      // cloud color (white)
    circle(200,90,70);              // cloud 1
    circle(150,70,100);
    circle(100,90,80);
    circle(50,90,60);

    circle(340,180,80);             // cloud 2
    circle(400,160,120);
    circle(450,180,100);
    circle(500,180,90);
    circle(550,180,50);

    //HILLS
    fill(186,245,190);              // light green
    circle(150,550,300);            // hill 1
    circle(0,520,100);              // hill 2
    circle(450,520,200);            // hill 3
    circle(550,570,150);            // hill 4

    //TREES
    fill(104,193,110);              // dark green
    ellipse(50,500,70,300);         // tree 1
    ellipse(145,400,90,height);      // tree 2
    ellipse(480,500,70,500);        // tree 3

    //SHRUBS
    fill(77,235,87);                // light green 2
    ellipse(85,550,60,200);         // shrub 1
    ellipse(530,550,70,360);        // shrub 2

    //BACK OF HAIR
    fill(102,58,14);                // hair color (dark brown)
    rect(185,308,230,height);       

    //HAIR HIGHLIGHTS
    stroke(166,111,0);              // light brown
    strokeWeight(3);                // highlight thickness
    line(200,308,200,height);  
    line(240,308,240,height);
    line(225,308,225,432); 
    line(380,400,380,height);
    line(400,308,400,height);   

    //HEAD SHAPE
    noStroke();
    fill(255,220,177);              // skin color (nude)
    ellipse(width/2,height/2,220,250); // head shape & location

    //EARS
    fill(255,220,177);              // skin color (nude)
    ellipse(190,308,30,50);         // left ear
    ellipse(410,308,30,50);         // right ear

    //BODY
    //SHIRT
    fill(243,18,153);               // shirt color (hot pink)
    ellipse(width/2,490,250,100);   // shoulders
    quad(175,485,125,height,475,height,425,485); // rest of tshirt

    //SHIRT COLLAR
    noFill();                       
    stroke(255);                    // collar color (white)
    strokeWeight(10);
    arc(width/2,450,80,80,0,PI);

    //NECK
    noStroke();
    fill(255,220,177);              // skin color (nude)

    rect(260,410,80,35);  
    ellipse(width/2,450,80,80);     // neckline    

    //EAR HOLES
    noFill();
    strokeWeight(2);
    stroke(230,145,20);             // brown ear stroke
    arc(190,308,10,30,PI/2,PI/2+PI); // left hole
    arc(410,308,10,30,-PI/2,PI/2);   // right hole

    //CHIN DEFINITION
    arc(width/2,422,20,10,0,PI);

    //EARRINGS
    //LEFT TRIANGLE EARRING 
    strokeWeight(2);
    stroke(255,157,58);             // orange outline
    fill(255,239,0);                // gold 
    triangle(180,333,200,333,190,350);

    //RIGHT TRIANGLE EARRING
    triangle(400,333,420,333,410,350);

    //LEFT EARRING DANGLES 1
    strokeWeight(4);                // thicker orange outline
    fill(185,63,255);               // purple
    quad(190,350,170,365,190,385,210,365); 

    //RIGHT EARRING DANGLES 1
    quad(410,350,390,365,410,385,430,365); 

    //LEFT EARRING DANGLE 2
    noFill();
    stroke(0,233,194);              // teal dangle outline
    quad(190,385,180,395,190,410,200,395); 

    //RIGHT EARRING DANGLE 2
    quad(410,385,400,395,410,410,420,395); 

    //SUNGLASSES
    //FRAME + LENSES
    stroke(250,145,164);            // rim color (pink)
    strokeWeight(8);                // rim thickness
    fill(28,28,28);                 // lenses color (dark grey)
    rect(220,260,65,65,10);         // rectangle lense 1 (left)
    rect(315,260,65,65,10);         // rectangle lense 2 (right)

    line(285,295,315,295);          // connect rims
    line(220,295,195,295);          // left band
    line(380,295,405,295);          // right band

    //PEARLS
    strokeWeight(4);                // thickness of point
    stroke(255);                    // pearl color (white)
    point(230,260);                 // top left rim
    point(240,260);
    point(250,260);
    point(260,260);
    point(270,260);

    point(230,325);                 // bottom - left rim
    point(240,325);
    point(250,325);
    point(260,325);
    point(270,325);

    point(220,275);                 // left - left rim
    point(220,285);
    point(220,295);
    point(220,305);
    point(220,315);

    point(285,275);                 // right - left rim
    point(285,285);
    point(285,295);
    point(285,305);
    point(285,315);

    point(330,260);                 // top - right rim
    point(340,260);
    point(350,260);
    point(360,260);
    point(370,260);

    point(330,325);                 // bottom - right rim
    point(340,325);
    point(350,325);
    point(360,325);
    point(370,325);

    point(315,275);                 // left - right rim
    point(315,285);
    point(315,295);
    point(315,305);
    point(315,315);

    point(380,275);                 // right - right rim
    point(380,285);
    point(380,295);
    point(380,305);
    point(380,315);

    //GLARE LINES
    stroke(238,238,255);            // glare color (grey - white)
    strokeWeight(3);                // glare thickness
    line(242,304,264,282);          // glare left
    line(337,304,359,282);          // glare right

    //NOSE
    noFill();
    stroke(230,145,20);             // brown nose stroke
    strokeWeight(2);                // nose stroke weight
 
    arc(290,350,20,20,PI/2,PI/2+PI) // arc left: PI = Half of a circle
    arc(310,350,20,20,-PI/2,PI/2);  // arc right: PI = Half of a circle

    line(290,340,290,322);          // nose line left
    line(310,340,310,322);          // nose line right

    //NOSTRILS
    noStroke();
    fill(222,171,95);               // light brown
    ellipse(292,353,10,5);          // left nostril
    ellipse(308,353,10,5);          // right nostril

    //LIPS
    //BOTTOM LIP
    stroke(255,122,162);            // lip liner color
    fill(255,132,168);              // lip color (light red)

    ellipse(width/2,390,25,15);

    //TOP LIP
    noStroke();
    fill(255,78,132);               // lip color (deep red)


    ellipse(292,385,27,13);         // left side
    ellipse(308,385,27,13);         // right side

    //MAKEUP HIGHLIGHT
    //LIP SPARKLE
    stroke(255,238,210);            // sparkle color
    strokeWeight(5);                // sparkle thickness
    point(width/2,376);             // top sparkle
    point(width/2,402);             // bottom sparkle

    //NOSE SPARKLE
    line(width/2,340,width/2,322);

    //ROSY CHEEKS
    noStroke();
    fill(255,200,228);              // rose
    ellipse(245,340,60,20);         // blush left
    ellipse(355,340,60,20);         // blush right
      
    //HAIR BANGS
    stroke(166,111,0);              // light brown stroke (match highlight)
    strokeWeight(3);
    fill(102,58,14);                // bangs color (dark brown)  
    point(220,220);                 // left
    point(380,220);                 // right

    bezier(300,175,120,180,250,300,150,430); // left bangs
    bezier(300,175,480,180,350,300,450,430); // right bangs   

    //HIGHLIGHT BANGS
    //LEFT
    bezier(280,195,150,200,260,320,170,400);

    //RIGHT
    bezier(320,195,450,200,340,320,430,400);


 

}

LO: Nonsense Library

Nonsense Library – Allison Parrish (2021)

https://artsexperiments.withgoogle.com/nonsense-laboratory/

One of the most admirable things about Nonsense Library, is the way that real knowledge is game-ified, and programming, video games, and knowledge about linguistics/speech interact. It serves both as a learning tool and an experiment, and hence the ways in which one could interact with the program varies greatly. The game aspect makes the site endlessly engaging, and the way in which the program messes with pronunciation quite literally forces the viewer to speak aloud and have a conversation with the computer. I would guess that in order to achieve this, Parrish built an extensive algorithm linking phonetic & pronounced sounds. I would also guess that she, too, spent a lot of time feeling the words in her mouth in front of a computer. Because of the truly absurd speech one can receive simply by inputting a couple adjustments (“Hew hew heish weelhy heelhyy weehly heegy hsewhy heelych…”) I would guess that Parrish has a good sense of humor, and embraces the absurd in her work. 

Nonsense Library phrase pre-modification. “How doth the little crocodile improve his shining tail”
Nonsense Library phrase post-modification. “Haah taahth thae layhai chawahaja aypharh haycha hcheyehaj tahlah…”

Project 2: Generative Faces

Some faces, generated!

sketch 

var eyeType = 3
var faceWidth = 200
var faceHeight = 275
var eyeSize = 60
var earSize = 60
var pupilSize = 40
var noseType = 1
var mouthType = 1
var blush = 1
var r = 89
var g = 74
var b = 58 //color 1, 2, & 3 used to be able to randomize the color of hair

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(252, 215, 91);
    strokeWeight(0);

    fill(r, g, b); //random hair color
    ellipse(width/2, (height/2)-((faceHeight-faceWidth)/2), faceWidth+20, faceWidth+20); //hair
    rect((width/2)-(faceWidth/2), height/2, faceWidth, faceHeight*(2/3)); //hair

    fill(194, 160, 97); //face/head
    ellipse(width/2, height/2, faceWidth, faceHeight); //chin
    ellipse(width/2, (height/2)-((faceHeight-faceWidth)/2), faceWidth, faceWidth); //to round out the top of the head better, less oval-y
    ellipse((width/2)-(faceWidth/2), height/2, earSize*(3/4), earSize); //left ear, size randomly generated
    ellipse((width/2)+(faceWidth/2), height/2, earSize*(3/4), earSize); //right ear, size ranomly generated

    fill(r, g, b); //random hair color for eyebrow
    ellipse((width/2)+(faceWidth/4), height/2-50, 40, 20);
    ellipse((width/2)-(faceWidth/4), height/2-50, 40, 20);

    if(blush <= 1) { //section to create blush possibility
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+40, 40, 20);
    ellipse((width/2)+(faceWidth/4), (height/2)+40, 40, 20);

    if(mouthType <= 1) { //section to create mouth type 1 (open)
        fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3), 60, 30);
    if(mouthType <= 1) {
        fill(252, 251, 247, 255)
    } else {
    	fill(252, 251, 247, 0)
    }   
    ellipse(width/2, (height/2)+(faceHeight/3)-10, 40, 10);

    if(mouthType > 1 & mouthType < 2) { //section to create mouth type 2 (sad mouth)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2), (height/2)+(faceHeight/3)+7, 60, 40); //skin to carve out shape
     if(mouthType > 1 & mouthType < 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3), 60, 40);

    if(mouthType >= 2) { //section to create mouth type 3 (happy mouth)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2), (height/2)+(faceHeight/3)-20, 60, 40); //skin to carve out shape
     if(mouthType >= 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse(width/2, (height/2)+(faceHeight/3)-27, 60, 40);

    if(eyeType <= 1) { //section to create eye type 1 (open regular)
        fill(242, 246, 247, 255)
    } else {
    	fill(242, 246, 247, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, eyeSize, eyeSize);
    ellipse((width/2)+(faceWidth/4), height/2, eyeSize, eyeSize);
    if(eyeType <= 1) {
        fill(0, 0, 0, 255)
    } else {
    	fill(0, 0, 0, 0)
    }   
    ellipse((width/2)-(faceWidth/4)+1, height/2, pupilSize, pupilSize);
    ellipse((width/2)+(faceWidth/4)-1, height/2, pupilSize, pupilSize);

    if(eyeType > 1 & eyeType < 2) { //section to create eye type 2 (happy eye)
    	fill(77, 41, 34, 255)
    } else {
    	fill(252, 251, 247, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, 60, 40);
    ellipse((width/2)+(faceWidth/4), height/2, 60, 40);
     if(eyeType > 1 & eyeType < 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+7, 60, 40);
    ellipse((width/2)+(faceWidth/4), (height/2)+7, 60, 40);

    if(eyeType >= 2) { //section to create eye type 3 (sad eye)
    	fill(77, 41, 34, 255)
    } else {
    	fill(77, 41, 34, 0)
    }
    ellipse((width/2)-(faceWidth/4), height/2, 60, 40);
    ellipse((width/2)+(faceWidth/4), height/2, 60, 40);
    if(eyeType >= 2) { 
    	fill(194, 160, 97, 255)
    } else {
    	fill(194, 160, 97, 0)
    }
    ellipse((width/2)-(faceWidth/4), (height/2)-7, 60, 40);
    ellipse((width/2)+(faceWidth/4), (height/2)-7, 60, 40);

    if(noseType <= 1) { //section to create round nose type
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    ellipse(width/2, (height/2)+20, 20, 60);

    if(noseType > 1) { //section to create triangle nose type
    	fill(176, 121, 76, 255)
    } else {
    	fill(176, 121, 76, 0)
    }
    triangle(width/2, (height/2), (width/2)-10, (height/2)+50, (width/2)+10, (height/2)+50);

}
 
function mousePressed() {
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    eyeType = random(0, 3); //eye type will be randomized, 1-3, and said # will correlate to an if else tree w eye options
    faceWidth = random(150, 225);
    faceHeight = random(226, 300);
    earSize = random(60, 80);
    pupilSize = random(30, 40);
    eyeSize = random(50, 70);
    noseType = random(0, 2); //nose type randomized based on two types
    mouthType = random(0,3);
    blush = random(0, 2); //whether or not blushing
}