Category: SectionD

Looking Outward #3

For this week’s Looking Outwards, I looked at Neri Oxman’s Mediated Matter group. This project was active 2010 to 2021. One thing I liked about their project was that their designs were inspired by nature. I think there is a pattern in generative art, where people often aim to make things that don’t look like they were made by people. The ability of a computer to pick absolutely random values is something humans have difficulty with, but emulates the natural growth of things (to some degrees at least). This is one of several projects I have noticed that emulates the structure of veins in a leaf. 

My favorite project from this group is Aguahoja III. This piece inspired me because of how beautiful it is. It looks like a plant from an alien planet. This sculpture doesn’t just look nice though, It also uses interesting materials and holds an interesting message. They took the idea of leaves to the next level and actually 3D printed this with cellulose, chitin, and pectin. The result is a tough leather like material that fits beautifully into the computer’s design.

Seeing things like this makes me excited to bring ideas to life. It sucks when ideas can only be digital, but when they can be brought into real life through sculptures and visuals, it makes me excited for all the cool stuff we will have in the future.  

https://www.media.mit.edu/projects/aguahoja-iii/overview/

Project-03-Dynamic-Drawing Section D

I enjoyed the freeform in this project which was more open-ended. I had lots of fun playing tricks on the eye in addition to the mouse interaction. Move your mouse left and right and see what happens!!

dynamic drawing sketch
var angle = 0;
var x;
var y;
var w = 80;
var h = 80;
var xe;
function setup() {
    createCanvas(600, 450);
    background(220);
    frameRate(15); 
    
}

function draw() {
    background(204);
    var x = width/2;
    var y = height/2;
    var xe = width/2;
    var ye = height/2;
    

    angle = angle + 1; 
    if (mouseX <= width/2) {  // when mouse moves to left
        background(255); // black background
        // make square bigger
        w = w + 8;
        h = h + 8;

        // bigger white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*20, h*20);
        pop();
        //bigger white circle
        fill(255);
        ellipse(xe, ye, w*17); 
        // big black rectangle 
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*10, h*10);
        pop();
        // big white circle
        fill(255);
        ellipse(xe, ye, w*8);  
        // black rectangle
        push();   // this keeps whatever code that is inside push and pop "self contained" without affecting other code/ "undo"
        translate (x,y);
        rotate(-angle); 
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w*4, h*4);
        // draw black ellipse in center of square
        pop(); 
        fill(255);
        ellipse (xe, ye, w*3);  
         // square inside of ellipse that rotates the opposite direction 
        push();
        translate(x,y);  
        rotate(angle);
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w, h);
        pop();
        // small white circle that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle + 8; // used to be 50

        
    } else if (mouseX >= width/2) {  // when mouse moves to right
        background(0); // white background
        // make square bigger
        w = w - 8; 
        h = h - 8;
         // bigger black rectangle
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*20, h*20);
        pop();
        // bigger black circle
        fill(0);
        ellipse(xe, ye, w*17); 
        // big white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*10, h*10);
        pop();
        // really big black circle
        fill(0);
        ellipse(xe, ye, w*8);  
        // big white rectangle
        push();
        translate (x,y);  
        rotate(angle); 
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w*4, h*4);
        pop();
        // smaller black circle 
        fill(0);
        ellipse (xe, ye, w*3); 
        // white rectangle that rotates in opposite direction
        fill(255);        
        translate(x,y);  
        rotate(-angle);
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w, h);
        // small black circle with white outline that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        stroke(255);
        fill(0);
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle - 8;

    }
}

lo: computational fabrication

copyright bengler 2013 | 3D visualization of walking paths in Norway

While looking through the provided resources, one project that really caught my eye was Intersections by Even Westvang and Simen Svale Skogsrud. They looked at data of Norway pertaining to how people travel and live throughout the region and turned it into 3D elevation maps. I take great interest in data visualization and I think cross referencing data to make a 3D model is very very interesting, especially when the visual is representative of the data like it is here being the shape of the region surveyed. Since they were just working with raw data I’m sure the computational side wasn’t too hard. They probably just had to clean and aggregate the data to fit their desired outcome! I think the artistry is in the medium choice: 3D printing what could be a graph with 2 axes is a very compelling way to show arial data like the city information they were looking at. The tangibility of it works to emphasize the comparisons they sought out to make.

More information here.

LookingOutwards-03 Section D

Creator’s name: Sanchtv
Title of work: Foldable Fractal 2.0
Year of creation: 2009

This project by Sanchtv is titled Foldable Fractal 2.0. It is made up of laser-cut pentagons that appear to be folded together to create a “pentagonal dodecahedron”. I admire the repetition of the pattern that moves inwards and continues to decrease in size. This piece reminds me of the drawings of an individual painting a picture of themself, painting a picture of themself and so on, making it appear as though it repeats for infinity. These types of visuals are capable of grabbing the attention of the viewer in a quick and unique manner. The description mentions that this was created through a recursive algorithm. After some research, I learned that it is an algorithm that calls itself using a smaller input to return the result for the current input. From that base definition, I suppose such an algorithm is the cause for the repetition in the design. While I do not know much about the creator, it is apparent that this object was created in a very intentional and methodical manner that utilized an algorithm to create three-dimensional art.

This is a computational digital fabrication developed with a recursive algorithm by creator Sanchtv.

Foldable Fractal 2.0 | foldable fractal is a project origina… | Flickr

Looking Outwards 03

Media Lab’s “Aguahoja”, 2017

Aguahoja

The Mediated Matter Group’s “Aguahoja” is not only inspirational to me but also very compelling. I admire that this work is a collection of digitally fabricated biomaterials that require literally no work. The project integrates material formation, digital fabrication, and physical behavior of the biological world to create biodegradable composites that combine natural life with manmade goods.

The work involves water-based design and technology to integrate the natural materials with manmade goods. The pieces are printed by a robot, which I suppose must receive instructions on how and what to print by the designers. Along with the robot’s work, the pieces are shaped by water which I also suppose must have been programmed by the designers on how to function.

The creators’ artistic sensibilites are manifested in geometric patterns and shapes within the project. While the pieces are created by robots, the creators preserve the look of manmade materials, but also mimick the natural feel of the natural life.

Robotically printed and water-based design of natural materials conjoined with manmade goods

Variable Faces

This project was extremely difficult for me because I kept making tiny mistakes which absolutely broke my code. This was definitely a learning experience, and towards the end I had more fun creating.

sketch
// Kathy Lee
//Section D

// Variable Setup
var faceHeight = 200;
var faceWidth = 200;
var shirt = 200;
var eye = 50;
var mouth = 50;

// Color Variables
var r = 50;
var g = 50;
var b = 50;

// mouthsize, hair length, eyesize

function setup() {
    createCanvas(640, 480);
    text("Smiling Alien", 10, 15);
}

function draw() {
    background (220);
    noStroke();

    // Shirt
    fill(200 - r, 200 - g, 200 - b);
    ellipse((width / 2), (height / 2) + 200, shirt + 100, shirt * 1.5);

    // Face
    fill(r + 50, g + 50, b + 50);
    ellipse(width / 2, (height / 2) + 50, faceWidth, faceHeight);

    // Eyes
    fill(r + 150, g + 150, b + 150);
    ellipse((width / 2.5) + 25, height / 2, faceWidth - 150, eye); // left eye
    fill(r + 150, g + 150, b + 150);
    ellipse((width / 2) + 40, height / 2, faceWidth - 150, eye); // right eye
    fill("black");
    ellipse((width / 2.5) + 20, height / 2, faceWidth - 200, eye - 30); // left pupil
    fill("black")
    ellipse((width / 2.5) + 110, height / 2, faceWidth - 200, eye - 30); // right pupil
    
    // Mouth
    fill(r + 175, g + 175, b + 175);
    ellipse(width / 2, (height / 2) + 75, mouth + 50, mouth / 2);
    fill(r + 50, g + 50, b + 50);
    ellipse(width / 2, (height / 2) + 70, mouth + 50, mouth / 2); // top ellipse to make smiling mouth

}

function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 300);
    shirt = random(200, 300);
    eye = random(50, 60);
    mouth = random(50, 150);
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
}

Project 02-Variable-Face

sketchDownload
//Sofia Rolla
//Section D

var eyeSize = 20;
var pupilSize= 5;
var faceWidth = 150;
var faceHeight = 200;
var noseWidth = 20;
var noseHeight = 30;
var mouthSize = 40;

var faceR = 199
var faceG = 177
var faceB = 140

var pupilR = 112
var pupilG = 166
var pupilB = 233
  
var noseR = 200
var noseG = 190
var noseB = 170

var mouthR = 0
var mouthG = 0
var mouthB = 0





function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(170,10,90);
    //head
    fill(faceR, faceG, faceB)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //eyes
    fill(255)
    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);
    //pupils
    fill(pupilR, pupilG, pupilB)
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    //nose
    var noseY = height / 2 + faceHeight* 0.15;
    fill(noseR, noseG, noseB)
    ellipse(width/2, noseY, noseWidth, noseHeight); 
    //mouth
    fill(mouthR, mouthG, mouthB)
    ellipse(width / 2, height / 2 + .4 * faceHeight, mouthSize, faceHeight/10)
    //hair
    arc(width / 2, height / 2-35, faceWidth+10,  faceHeight-10, PI,2*PI, PI);
   
 
}
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(20, 40);
    pupilSize = random(5,15);
    noseWidth = random(5,20)
    noseHeight= random (10,30);
    mouthX = random (20, 50);
    faceR = random (170,230)
    faceG = random (50,200)
    faceB = random (50,200)
    mouthR = random (50,200)
    mouthB = random (50,200)
    mouthG = random (50,200)
    pupilR = random (50,200)
    pupilG = random (50,200)
    pupilB = random (50,200)
    noseR = random (50,200)
    noseG = random (50,200)
    noseB = random (50,200)
    
}

This was a difficult process for me. I struggled with finding the right variables and with setting proper variables for positions of certain facial features. I hope that this process will get easier as I keep learning.

LO2 Generative Puzzles

The piece of work that I find super interesting is a series of generative jigsaw puzzles from the site called “Nervous System” 

https://n-e-r-v-o-u-s.com/shop/line.php?code=12/

This project was created by two MIT designers who wanted to put a spin on traditional puzzles. These puzzles are created uniquely with custom software which makes the design of the puzzle super intricate, as well as the actual jig-saw pieces themselves. THe pieces are shaped but using natural patterns which are generatively produced, ultimately making these puzzles a bit more challenging than a typical jig-saw puzzle. Although puzzles may be boring for some, I enjoy solving puzzles and these generative puzzles would be even more stimulating. The software that creates the interlocking pieces is based off of a crystal growth process called “dendritic solidification”. This process in an art form becomes quite complex, because in nature, a crystal would grow in one direction; however, for the puzzle, the software must make one puzzle piece that “grows”, and another symmetric piece that matches each extension piece. Additionally, the software has different designs for different states of matter, creating different sort of crystal formations for different puzzles. Based on this, I would assume that the creates are interested in nature, science, and geology as well as programming. Overall, I am very fascinated and impressed with the complexity of this software, and it also has a fun benefit!

Here is an example of one of the puzzles

Looking Outwards 02: Generative Art

Leander Herzog’s project “Radar” really captivated me in terms of color and movement. I admire the split screen of blue and pink, along with the asymmetry of the spiraling design. Another component I admire is how the new “spiral” is formed by the vertical edge of the pink spiral. I admire the split screen of color and asymmetrical design because it is mesmerizing visually, but it’s not too simple. I admire the creation of the new spiral from the vertical edge because the split screen tricks the eye into thinking that the spirals are created as a circle, but when you take a moment to look closer, the spirals are not full circles, but rather start as a semicircle and gradually pan out until they disappear off the page.

The only thing that I can identify in this project is the use of a loop, because the design is continuous and keeps generating new spirals that float off of the page.

The creator’s artistic sensibilities manifest in terms of color and shape. Herzog uses very contrasting colors, creating a pop in the eye and easy distinction between the two spiral sections. The shape is continuous, in terms of connecting between the two sections.

Leander Herzog

“Radar”, 2020

“Radar”, 2020
Another look at “Radar”

https://leanderherzog.ch/2020/radar/

Project 2: My (Variable) Self Portrait

I took my original self portrait and modified it to be variable, as that’s what I thought originally we were supposed to do. My bad for misinterpreting, if I did. But the idea here is that the hair length and color, as well as skin and eye color will change randomly as you click. You may also notice some weird little ditties in the code, as well as the fact that the eyes follow your mouse. Those are the animations I thought we were supposed to do (again, my bad for misinterpreting!) that are now just fun little easter eggs to play with!

sketch
let leftbrowx = 210; //x coordinate of the original vertex of the left brow
let browY = 185; //y coordinate of both brows
let rightbrowx = 273; //x coordinate of the original vertex of the right brow
haircenterX = 225; //x coordinate of the point around which hair rotates and from which it originates
haircenterY = 170; //y coordinate of the point around which hair rotates and from which it originates

let lefteyex = 262; //x coordinate of the center of the left eye
let righteyex = lefteyex-40; //x coordinate of the center of the right eye
let eyey = 198; //y coordinate of the center of both eyes
let mouthY = 225; //y coordinate of the vertices of the mouth
let eyeRed = 33; //Red tint of the iris
let eyeGreen = 6; //Green tint of the iris
let eyeBlue = 4; //Blue tint of the iris
let hairRed = 40; //Red tint of the hair
let hairBlue = 26; //Green tint of the hair
let hairGreen = 34; //Blue tint of the hair
let skinRed = 255; //Red tint of the skin
let skinGreen = 233; //Green tint of the skin
let skinBlue = 199; //Blue tint of the skin
let hairLen = 50; //Length of hair in the back of the head
performingAnim = false; //determines whether or not an animation is occurring, and retains the face until the animation has stopped and the face returns to default (not default color, as in expression)


function setup() {
    createCanvas(500, 500);
    background(255,138,120);
}
function draw() {
    background(255,138,120);

    //behind head hair
    noStroke();
    fill(hairRed, hairGreen, hairBlue);
    beginShape();
    vertex(haircenterX,haircenterY);
    curveVertex(haircenterX,haircenterY);
    curveVertex(haircenterX-20,haircenterY+hairLen/2)
    vertex(haircenterX-10-10,haircenterY+40+(hairLen-30));
    vertex(haircenterX-5-10,haircenterY+53+(hairLen-30));
    vertex(haircenterX+1+10,haircenterY+60+(hairLen-30)+10);
    vertex(haircenterX+4+10,haircenterY+60+(hairLen-30)+10);
    vertex(haircenterX+45+15,haircenterY+62+(hairLen-20));
    vertex(haircenterX+55+15,haircenterY+55+(hairLen-20));
    vertex(haircenterX+63+15,haircenterY+50+(hairLen-20));
    vertex(haircenterX+45+35.5,haircenterY+40+(hairLen-20));
    curveVertex(haircenterX+75,haircenterY+hairLen/2);
    curveVertex(haircenterX+40,haircenterY);
    curveVertex(haircenterX+20,haircenterY-10);
    endShape();
    stroke(hairRed+100, hairGreen+50, hairBlue+50);
    strokeWeight(1)
    arc(haircenterX-10,haircenterY+40+(hairLen-30),30,hairLen,8.5,4.5); //15
    arc(haircenterX+63,haircenterY+50+(hairLen-30),40,hairLen+10,6,8,OPEN); //20
    arc(haircenterX+45,haircenterY+40+(hairLen-30),75,hairLen+10,5.7,6.6,OPEN); //37.5
    arc(haircenterX+55,haircenterY+55+(hairLen-30),40,hairLen+10,6.1,8,OPEN); //20
    arc(haircenterX+45,haircenterY+62+(hairLen-30),40,hairLen+10,6.2,8,OPEN); //20
    arc(haircenterX-5,haircenterY+53+(hairLen-30),30,hairLen,7.6,3.7); //15
    arc(haircenterX+1,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
    arc(haircenterX+4,haircenterY+60+(hairLen-30),30,hairLen,7.6,3); //15
    push();
    rotate(0.1);
    arc(haircenterX+40,haircenterY+40+(hairLen-30),30,hairLen,7.6,3);
    pop();


    //cranium and fillings
    angleMode(RADIANS);
    fill(skinRed,skinGreen,skinBlue);
    noStroke();
    ellipse(246.8,500/2.195-12,71.5,55.8);
    stroke(0);
    arc(249,500/3+8.5,92,90,2.5,7.05,OPEN);
    noStroke();
    ellipse(221,500/2.45,20,30);
    ellipse(282,500/2-42,10,10);
    stroke(0);
    noStroke();
    fill(222, 0, 111);
    ellipse(262,270,100,20);
    triangle(160,500,260,260,388,500);
    stroke(0);
    arc(262,270,100,20,3.2,6.2);

    //neck
    noStroke();
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(239,258);
    curveVertex(240,268);
    curveVertex(285,266);
    curveVertex(281,250);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape();
    noFill();
    stroke(0);
    arc(230,245,20,50,5.5,8);
    arc(290,225,20,80,7.8,10);
    fill(skinRed,skinGreen,skinBlue);

    //clothes (it's just a blanket)
    fill(222, 0, 111);
    beginShape();
    vertex(240,258);
    vertex(225,255);
    vertex(205,257);
    vertex(190,280);
    vertex(180,350);
    vertex(150,470);
    vertex(162,500);
    vertex(180,520);
    endShape(OPEN);
    beginShape();
    vertex(200,400);
    vertex(240,256);
    vertex(250,268);
    vertex(260,258);
    vertex(300,255);
    vertex(320,257);
    vertex(350,285);
    vertex(365,350);
    vertex(400,440);
    vertex(398,500);
    vertex(360,530);
    endShape(OPEN);
    curve(245,264,240,268,197,270,200,220);
    curve(245,264,240,268,183,340,200,220);
    curve(220,390,208,420,160,460,130,420);
    curve(260,265,255,268,335,270,330,220);
    curve(260,265,255,268,365,350,330,220);
    curve(220,370,200,400,365,440,330,220);
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    vertex(239,255);
    vertex(235,278);
    vertex(275,256);
    endShape(OPEN);
    line(200,400,240,500);

    //chin segments
    fill(skinRed,skinGreen-50,skinBlue-20);
    noStroke();
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(250,253);
    curveVertex(260,249);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    stroke(0);
    fill(skinRed,skinGreen,skinBlue);
    beginShape();
    curveVertex(215,231);
    curveVertex(215,231);
    curveVertex(228,243);
    curveVertex(250,244);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    push();
    translate(215, 216.43);
    rotate(-0.2);
    arc(3,0,15,42,8,4.45,OPEN);
    pop();

    //ear
    push();
    translate(284,500/2-32);
    rotate(0.3);
    arc(0,-5,13,26,4.1,8.1,OPEN);
    arc(1,-5,7,15,8,4.6,OPEN);
    pop();
    arc(284.9,500/2-35,4,8,4,7,OPEN);

    //left eye (of body)
    noStroke();
    fill(255);
    ellipse(lefteyex,eyey+1,20,16);
    fill(240);
    arc(lefteyex,eyey-2,20,10,3.2,6.3);
    fill(eyeRed,eyeGreen,eyeBlue);
    noStroke();
    if (mouseY > 208) {
        irisY = eyey+2;
    } else{
        irisY = eyey;
    }
    if (mouseX > 255 & mouseX < 267) {
        leftposX = mouseX
    }
    if (mouseX > 267){
        leftposX = lefteyex+5
    }
    if (mouseX < 255) {
        leftposX = lefteyex-5
    }
    ellipse(leftposX,irisY,10,14) //iris
    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
    ellipse(leftposX,irisY+4,6,5); //under-pupil highlight
    fill(0);
    ellipse(leftposX,irisY,5,8); //pupil
    fill(255);
    ellipse(leftposX-2,irisY-2,3,6); //over pupil highlight
    stroke(0);
    noFill();
    ellipse(leftposX,irisY,9,13);
    
    arc(222,196,20,10,3.2,6.3)

    //right eye (of body)
    noStroke();
    fill(255);
    ellipse(righteyex,eyey+1,20,16);
    fill(240);
    arc(righteyex,eyey-2,20,10,3.2,6.3);
    fill(eyeRed,eyeGreen,eyeBlue);
    noStroke();
    if (mouseX > 218 & mouseX < 230) {
        rightposX = mouseX;
    }
    if (mouseX > 230){
        rightposX = righteyex+6;
    }
    if (mouseX < 218) {
        rightposX = righteyex-4;
    }
    ellipse(rightposX,irisY,10,14) //iris
    fill(eyeRed+200,eyeGreen+150,eyeBlue+150);
    ellipse(rightposX,irisY+4,6,5); //under-pupil highlight
    fill(0);
    ellipse(rightposX,irisY,5,8); //pupil
    fill(255);
    ellipse(rightposX-2,irisY-2,3,6); //over-pupil highlight
    stroke(0);
    noFill();
    ellipse(rightposX,irisY,9,13);

    arc(262,196,20,10,3.2,6.3);
        

    //mouth
    stroke(0);
    if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //frowning action
        while(mouthY < 245){
            mouthY = mouthY+1;
        }
        curve(228, mouthY, 233, 230, 240, 230, 245, mouthY);
        performingAnim = true;
    } 
    else {
        curve(228, 225, 233, 230, 240, 230, 245, 225);
        performingAnim = false;
    }
    if(mouseX > 230 & mouseX < 240 && mouseY > 220 && mouseY < 235 && mouseIsPressed === true){ //makes my mouth open and close randomly, for no good reason.
        stroke(0);
        fill(227, 85, 66);
        ellipse(236.5, 230,10,8);
        performingAnim = true;
    } 

    //nose
    fill(skinRed,skinGreen-50,skinBlue-20);
    noStroke();
    triangle(240,215,232,215,235,218);
    stroke(0);
    noFill();
    arc(226,208,18,20,6.1,7.1);
    arc(240,213,15,10,8.8,9.2);

    //eyebrows
    noStroke();
    fill(hairRed, hairGreen, hairBlue);
    if(mouseX > 235 & mouseX < 248 && mouseY > 183 && mouseY < 191 && mouseIsPressed === true){ //eyebrow furrowing action
        while (leftbrowx < 215 && browY < 190 && rightbrowx > 268) {
            leftbrowx = leftbrowx+1
            rightbrowx = rightbrowx-1
            browY = browY+1

            push();
            rotate(0.01);
            beginShape();
            curveVertex(leftbrowx,browY);
            curveVertex(leftbrowx+7,browY-5);
            curveVertex(leftbrowx+18,browY-1);
            curveVertex(leftbrowx+25,browY-2);
            curveVertex(leftbrowx+20,browY-8);
            curveVertex(leftbrowx+7,browY-8);
            endShape(CLOSE);
            pop();

            push();
            rotate(-0.02);
            beginShape();
            curveVertex(rightbrowx,browY);
            curveVertex(rightbrowx-7,browY-1);
            curveVertex(rightbrowx-18,browY+3);
            curveVertex(rightbrowx-25,browY+2);
            curveVertex(rightbrowx-20,browY-4);
            curveVertex(rightbrowx-7,browY-4);
            endShape(CLOSE);
            pop();
            performingAnim = true;
        }
        if (leftbrowx >= 215 & browY >= 190 && rightbrowx <= 268){
            push();
            rotate(0.01);
            beginShape();
            curveVertex(leftbrowx-6,browY-5);
            curveVertex(leftbrowx-0,browY-3);
            curveVertex(leftbrowx+15,browY-0);
            curveVertex(leftbrowx+22,browY-1);
            curveVertex(leftbrowx+17,browY-6);
            curveVertex(leftbrowx+4,browY-6);
            endShape(CLOSE);
            pop();

            push();
            rotate(-0.02);
            beginShape();
            curveVertex(rightbrowx-2,browY+2);
            curveVertex(rightbrowx-8,browY+4);
            curveVertex(rightbrowx-19,browY+7);
            curveVertex(rightbrowx-26,browY+6);
            curveVertex(rightbrowx-21,browY+1);
            curveVertex(rightbrowx-8,browY+1);
            endShape(CLOSE);
            pop();
            performingAnim = true;
        }
    } else {
        let leftbrowx = 210;
        let browY = 185;
        let rightbrowx = 273;
        beginShape();
        curveVertex(leftbrowx,browY+3);
        curveVertex(leftbrowx+7,browY+2);
        curveVertex(leftbrowx+18,browY+4);
        curveVertex(leftbrowx+25,browY+3);
        curveVertex(leftbrowx+20,browY-1);
        curveVertex(leftbrowx+7,browY-1);
        endShape(CLOSE);
        beginShape();
        curveVertex(rightbrowx,browY+3);
        curveVertex(rightbrowx-7,browY+2);
        curveVertex(rightbrowx-18,browY+4);
        curveVertex(rightbrowx-25,browY+3);
        curveVertex(rightbrowx-20,browY-1);
        curveVertex(rightbrowx-7,browY-1);
        endShape(CLOSE);
        performingAnim = false;
    }
    

    //hair
    fill(hairRed, hairGreen, hairBlue);
    beginShape();
    vertex(200,175);
    vertex(220,140);
    vertex(228,127);
    vertex(290,139);
    vertex(295,160);
    vertex(295,190);
    vertex(285,190);
    vertex(235,162);
    vertex(225,170);
    endShape();

    stroke(hairRed+100, hairGreen+50, hairBlue+50);
    strokeWeight(1)
    arc(haircenterX-15,haircenterY+10,20,50,8,3.5);
    noStroke();
    rect(haircenterX-16,haircenterY+5,5,5);
    stroke(hairRed+100, hairGreen+50, hairBlue+50);

    beginShape();
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-28,haircenterY+2);
    curveVertex(haircenterX-47,haircenterY-9);
    curveVertex(haircenterX-28,haircenterY-7);
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-15,haircenterY-10);
    endShape();

    beginShape();
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-12,haircenterY+8);
    curveVertex(haircenterX-25,haircenterY+10);
    curveVertex(haircenterX-40,haircenterY);
    curveVertex(haircenterX-30,haircenterY+3);
    curveVertex(haircenterX-20,haircenterY-2);
    curveVertex(haircenterX-20,haircenterY-2);
    endShape();

    beginShape();
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX-1,haircenterY+2);
    curveVertex(haircenterX-5,haircenterY+8);
    curveVertex(haircenterX-15,haircenterY+14);
    curveVertex(haircenterX-27,haircenterY+15);
    curveVertex(haircenterX-16,haircenterY+8);
    curveVertex(haircenterX-8,haircenterY);
    curveVertex(haircenterX-8,haircenterY);
    endShape();

    beginShape();
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-15,haircenterY-10);
    curveVertex(haircenterX-28,haircenterY-7);
    curveVertex(haircenterX-50,haircenterY-12);
    curveVertex(haircenterX-35,haircenterY-16);
    curveVertex(haircenterX-15,haircenterY-35);
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX,haircenterY-30);
    endShape();

    beginShape();
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX,haircenterY-30);
    curveVertex(haircenterX-15,haircenterY-35);
    curveVertex(haircenterX-24,haircenterY-50);
    curveVertex(haircenterX-15,haircenterY-40);
    curveVertex(haircenterX,haircenterY-40);
    curveVertex(haircenterX,haircenterY-40);
    endShape();

    arc(haircenterX+36,haircenterY+5,90,90,5.3,6.9,OPEN);
    arc(haircenterX+28,haircenterY-5,90,90,4,5.8,OPEN);

    beginShape();
    curveVertex(haircenterX+55,haircenterY+28);
    curveVertex(haircenterX+55,haircenterY+28);
    curveVertex(haircenterX+64,haircenterY+33);
    curveVertex(haircenterX+65,haircenterY+45);
    curveVertex(haircenterX+72,haircenterY+35);
    curveVertex(haircenterX+75,haircenterY+28);
    curveVertex(haircenterX+75,haircenterY+28);
    endShape();

    //sideburn
    push();
    rotate(-0.2);
    arc(haircenterX+10,haircenterY+88,10,30,8,5.5,CLOSE);

    //sideswoop
    pop();
    push();
    rotate(-1.4);
    arc(haircenterX-365,haircenterY+145,15,30,7.8,4.8,CLOSE);
    rotate(-0.1);
    arc(haircenterX-390,haircenterY+130,15,30,7.8,4.8,CLOSE);
    arc(haircenterX-385,haircenterY+125,15,30,7.8,4.8,CLOSE);
    pop();

    beginShape();
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+10,haircenterY-8);
    curveVertex(haircenterX+20,haircenterY-2);
    curveVertex(haircenterX+28,haircenterY+6);
    curveVertex(haircenterX+40,haircenterY+14);
    curveVertex(haircenterX+65,haircenterY+25);
    curveVertex(haircenterX+48,haircenterY+10);
    curveVertex(haircenterX+40,haircenterY);
    curveVertex(haircenterX+35,haircenterY-8);
    curveVertex(haircenterX+35,haircenterY-8);
    endShape();

}
function mousePressed() {
    if (performingAnim === false) { //runs the code which changes all the variables
        eyeBlue = random(0,100);
        eyeRed = random(0,100);
        eyeGreen = random(0,100);
        hairRed = random(0,80);
        hairGreen = random(0,80);
        hairBlue = random(0,80);
        skinBlue = random(155,215);
        skinGreen = random(skinBlue,245);
        skinRed = random(skinGreen,255);
        hairLen = random(10,100);
    } else { //prevents it from doing that while the mouse is pressed down over the two animation spots
        eyeBlue = eyeBlue;
        eyeRed = eyeRed;
        eyeGreen = eyeGreen;
        hairRed = hairRed;
        hairGreen = hairGreen;
        hairBlue = hairBlue;
        skinBlue = skinBlue;
        skinGreen = skinGreen;
        skinRed = skinRed;
        hairLen = hairLen;
    }
    
}

I misinterpreted the original directions of the project and instead of making the face change, I made it interactive. Because (in all honesty) I was too lazy and didn’t want all my hard work to go to waste, I just left it and incorporated it into the portrait.