Author: Michael

Looking Outward-04 Sound Art

Link: https://www.youtube.com/watch?v=_gk9n-2lBb8&ab_channel=MediaArtTube

I looked at the project The Prouduct – Soundmachines, where it is three rotating disks mimicking the form of a vinyl disk player. Different from a traditional disk player, the disk contains visual information displayed through color and black and white patterns and the receiver reads these patterns and returns a sound for each color. The project includes three of these disks, each holding different visual information.

What I really admire about the project is its abstraction of sound, where in many music software, sound is displayed in a sonogram, which is often harder for people of comprehend. However, the abstraction of the audial qualities into easy-to-understand visual patterns make very simple for one to understand the audio qualities which otherwise is illegible.

The algorithm as the description as said, “translates concentric visual patterns into control signals.” I assume the receiver would reads the color values on the disk as the disk rotates in concentric motion, in the algorithm, each color would represent a different signal input into a music software, and outputs a sound through the software.

The artist’s sensibilities with both visual and audible qualities is clearly expressed in the project, where the artist uses simple geometric shapes to create a symphony of sounds. The artists is also most likely a follow of digital music, where the output comes from a music sequencer.

Looking Outward Blog 03

Image 1 Shows the part of the structure, and how people interacts with the project.

https://www.jennysabin.com/polyform
I am looking at the project “PolyForm” constructed by Cornell University. What
What I admire about this project is its ability to achieve organic shapes through
the repetition of somewhat geometric surfaces. I really like the modular system
of using the same geometric logic and through repetition, creating something
complex and organic. What is also really like is that the structure seems to
be enclosed in a transparent box, an illusion created by the glass walls
around the structure, making the piece latch onto a surface.

I suppose the algorithm works by initially creating a geometric pattern that
mimics the patterns of nano-leveled cellular structure and creates a system
through parametric generation to achieve the ideal density of the material and
empty spaces in the project to generate the form. Then the structure would be

disassembled into different sheets and sent to a laser cutting lab or other 3-D
construction methods to create the panels, piecing the components
together to assemble the project.

The project is a collaboration between the school of architecture and the
college of human ecology within the university, thus it is apparent the
creators would have a higher appreciation of biomimicry structure. The
creators have supported this idea where they claim the concept is to bridge
the nanoscale to the human scale.

Project 03 Dynamic Drawing

This is my dynamic drawing of a cityscape with the fore, mid, and background each moving at a different pace as the mouse moves from left to right. The sun also rises and sets and the moon rises while the background changes color. The buildings also reverse in color as the background changes color

sketch
//Michael Li
//Section C 

function setup() {
    createCanvas(600, 450);
    rectMode(CENTER);
   
}

var diam = 50 // diameter for sun & moon
var opacity = 255 //set opacity & grey value
var timer = 0 // for star blinking

function draw() {

    //Background Change color

    //the opacity value is remapped so mouseX would return 
    //0-255 by inputing canvas width
    opacity = map(constrain(mouseX, 0, width), 0, width, 0, 255)
    background(192, 215, 218)
    background(4, 27, 46, opacity); //revealing the second background color as mouse moves to the right
    
    fill(255, 255, 0);

    // restrict mouseX within the canvas
    //remapping the mouseX value in different domains by inputing the canvas width

    //three different remapped values for each layer of the cityscape's translation
    var mapX = map(constrain(mouseX, 0, width), 0, width, 0, width*2);
    var mapX2 = map(constrain(mouseX, 0, width), 0, width, 200, width*2-200);
    var mapX3 = map(constrain(mouseX, 0, width), 0, width, 400, width*2-400);

    //variables used to change the sun&moon sizes
    var mapSunSizeX = map(constrain(mouseX, 0, width), 0, width, 0, 40);
    var mapSunSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 100);

    var mapSun = map(constrain(mouseX, 0, width), 0, width, 180, 310);
    var mapMoon = map(constrain(mouseX, 0, width), width/2, width, 180, 270); 
    //width/2 so the moon appears halfway of the canvas

    //variables used to change the building heights
    var bSizeY = map(constrain(mouseY, 0, height), 0, height, 0, 40);
    var bSizeY2 = map(constrain(mouseY, 0, height), 0, height, 0, 20);
    var bSizeY3 = map(constrain(mouseY, 0, height), 0, height, 0, 10);
    fill(0)
    

    //Sun
    push() //saves all the conditions set before

    diam = 30 - mapSunSizeX +  mapSunSizeY 
    //the sun size changes as mouse moves across the canvas
    
    strokeWeight(0);
    translate(mapSun+diam/4, height*1);
    rotate(radians(mapSun));
    //the sun moves and rotates as the mouse moves 

    //two different stages of the sun
    //the opacity decreases to reveal the other sun
    fill(247, 240, 25); //yellow
    ellipse(width/2, height/2, diam, diam);

    fill(243, 88, 22, constrain(map(opacity, 0, 125, 0, 80), 0, 80));//orange glow
    ellipse(width/2, height/2, diam*2, diam*2);

    fill(243, 88, 22, opacity); //orange
    ellipse(width/2, height/2, diam, diam);

    pop() //return to previous set conditions

    //Moon
    push()

    noStroke();

    translate(mapMoon+diam/4, height*1);
    rotate(radians(mapMoon));
    //the moon moves and rotates with the mouse

    fill(255); //white
    ellipse(width/2, height/2, diam, diam); //cirlce for moon

    //circle to block the moon to form a crescent 
    fill(151, 202, 240)
    ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
    fill(4, 27, 46, opacity)
    ellipse(width/2+diam/3, height/2+diam/3, diam, diam);
    
    pop()

    //clouds

    push()

    translate(mapSun+diam/4, height*1);
    //clouds move with the sun, but only 1/4 the distance traveled

    //ellipses to form the clouds
    fill(255, 120);
    strokeWeight(0);
    ellipse (0, 0-height*9/10, 200, 50);
    ellipse (30, 0-height*8.5/10, 200, 50);
    pop()

    //Stars

    push()

    timer += 1 //the timer ticks
    if (timer%40 ==0){ //every interval of 40 the stars blink once
        if (opacity >= 120){ 
        //the stars only appear when the background is in trasition between two colors
            for (var i = 0; i <= 300; i++){
                //use variable i to count, and draws 300 stars in the range set
                fill(255);
                ellipse(random(0-width*3/5, width*2.7-width*3/5), 
                random(0-height, height*2), random(3, 8), random(3, 8));
            }
        }
    }

    pop()

    //Translate Layer 0
    //the last layer in the back

    push()

    opacity = map(constrain(mouseX, 0, width), 0, width, 30, 200);
    //remap the grey value to create a gradient of grey

    fill(opacity);
    translate(mapX, 0);
    strokeWeight(0);
    rectMode(CORNER); //changes so the rectangles draw from the left corner

    //ground
    rect(0-width*1.9, height*7/8+ bSizeY, width*3, height/5);
    var bSize = map(constrain(mouseX, 0, width), 0, width, 20, 50);

    //buildings last layer
    //drawing each individual building with variious set heights and width
    //the height changes by the value of bSizeY
    rect(0-width*2, height*3/5 + bSizeY, 60, height);
    rect(0-width*1.95, height*2/5 + bSizeY, 75, height);

    rect(0-width*1.75, height*2.5/5 + bSizeY, 40, height);
    rect(0-width*1.7, height*1.5/5 + bSizeY, 60, height);
    rect(0-width*1.6, height*1.8/5 + bSizeY, 40, height);

    rect(0-width*1.5, height*2/5 + bSizeY, 40, height);

    rect(0-width*1.4, height*1.5/5 + bSizeY, 80, height);
    rect(0-width*1.35, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.35, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.25, height*3/5 + bSizeY, 50, height);
    rect(0-width*1.2, height*2/5 + bSizeY, 50, height);

    rect(0-width*1.1, height*1/5 + bSizeY, 50, height);
    rect(0-width*1.05, height*3/5 + bSizeY, 70, height);
    rect(0-width*1.03, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
    rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
    rect(0-width*0.7, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.8, height*1/5 + bSizeY, 50, height);
    rect(0-width*0.85, height*2.3/5 + bSizeY, 70, height);
    rect(0-width*0.7, height*2/5 + bSizeY, 40, height);

    rect(0-width*0.6, height*1.5/5 + bSizeY, 50, height);
    rect(0-width*0.55, height*2.7/5 + bSizeY, 70, height);
    rect(0-width*0.44, height*1.5/5 + bSizeY, 50, height);

    rect(0-width*0.3, height*3/5 + bSizeY, 50, height);
    rect(0-width*0.22, height*2.5/5 + bSizeY, 50, height);

    rect(0-width*0.1, height*2.8/5 + bSizeY, 50, height);

    rect(0+width*0.02, height*2.3/5 + bSizeY, 70, height);
    rect(0+width*0.1, height*1.8/5 + bSizeY, 60, height);
    rect(0+width*0.15, height*3.2/5 + bSizeY, 60, height);
    pop();


   //Translate Layer 1
   //second layer of buildings
   push()
    opacity = map(constrain(mouseX, 0, width), 0, width, 60, 150);
    //grey value is remapped to have a smaller range than layer 0

    fill(opacity)
    translate(mapX2, 0)
    strokeWeight(0);
    rectMode(CORNER)

    //buildings second layer
    //drawing each individual building with height varing by bSizeY2
    rect(0-width*1.9, height*11/12 + bSizeY2, width*2.8, height/5)

    rect(0-width*1.7, height*1.8/5 + bSizeY2, 100, height)

    rect(0-width*1.5, height*3/5 + bSizeY2, 80, height)
    rect(0-width*1.4, height*3.2/5 + bSizeY2, 40, height)

    rect(0-width*1.3, height*3/5 + bSizeY2, 80, height)
    rect(0-width*1.25, height*2.2/5 + bSizeY2, 60, height)

    rect(0-width*1.12, height*2.2/5 + bSizeY2, 80, height)
    rect(0-width*1.05, height*3.2/5 + bSizeY2, 60, height)

    rect(0-width*0.8, height*2.2/5 + bSizeY2, 80, height)
    rect(0-width*0.75, height*3.2/5 + bSizeY2, 60, height)

    rect(0-width*0.6, height*3.2/5 + bSizeY2, 80, height)
    rect(0-width*0.5, height*2.2/5 + bSizeY2, 60, height)

    rect(0-width*0.2, height*3.3/5 + bSizeY2, 80, height)
    rect(0-width*0.1, height*4.2/5 + bSizeY2, 60, height)
    pop()

//Translate Layer 2
//front layer

    push();

    opacity = map(constrain(mouseX, 0, width), 0, width, 90, 100);
    //grey values are further remapped to be in a lesser raneg than layer 1
    fill(opacity)
    translate(mapX3, 0)
    strokeWeight(0);
    rectMode(CORNER);

    //buidlings front layer
    //drawing buildings with varied heights adjusted by bSizeY3
    rect(0-width*1.35, height*17/18 + bSizeY3, width*2.8, height/5)

    rect(0-width*1.35, height*3.2/5 + bSizeY3, 100, height)

    rect(0-width*1.1, height*2.8/5 + bSizeY3, 100, height)

    rect(0-width*1.0, height*4/5 + bSizeY3, 80, height)
    rect(0-width*0.9, height*4.2/5 + bSizeY3, 40, height)

    rect(0-width*0.85, height*4/5 + bSizeY3, 80, height)
    rect(0-width*0.8, height*3.2/5 + bSizeY3, 60, height)

    rect(0-width*0.6, height*2.9/5 + bSizeY3, 50, height)
    rect(0-width*0.55, height*3.8/5 + bSizeY3, 60, height)

    pop();
}

Blog-02 Generative Art

The piece I’ve examined in the noise series by Holger Lippmann. The first part
of the series, Holger uses landscape photos in his vicinity to generate digital
paintings composed of elongated shapes. What I admire about the piece is
the strategic generative composition that has allowed the rectangular shapes to
mimic textures that of a brushstroke, which gives the painting a vintage feeling
and a sense of movement throughout the canvas. Further, the layering of the
different colors of the geometry and the control of the density of the geometry
creates an illusion of color blending, which I believe has made the painting much
more interesting than if it was just one layer.

What I suppose the algorithm would be the program repeatedly draws the same
elongated rectangle and each geometry would have a small variation in the
start and end coordinates than the previous points to create a continuous
curvature through the straight geometric shapes. The color of the shapes would
be detected from the image itself with minor variations in the RGB value by
around 10-15 to create a variation that would further help simulate the brush
stroke texture.

The artist has taken inspiration from 20th-century impressionist painters such
as Monet and Van Gogh, where from close, the viewer can observe the stacks of
geometry like in paintings one would see the brush stroke but backed up, a
the scenic landscape is formed

Noise Series: http://www.lumicon.de/wp/?p=3623

Project-02

This is my variable face

sketch
// Michael
// Section C

//Variables
//face
var faceWidth = 100;
var faceHeight = 100;
var faceround = 10
var randomSkin = 0
//background
var r = 140
var g = 200
var b = 230
//eye
var eyeBrow = 1
var browHeight = 10
var eyeSize = 20;
var pupilPos = 0
//moith
var mouthType = 1
var mouthLevel = 50
var noseType = 1
//hair
hairType = 1
stubble = 2
hairColor = 0

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    print (pupilPos.toString())
    //background color
    background(r, g, b);

    //Eye Variables
    //use facewidth to determine the eye positions
    var eyeLX = width / 2 - faceWidth * 0.2; 
    var eyeRX = width / 2 + faceWidth * 0.2;

    //hair color
    //Randomize hair color with different shades of grey
    fill(hairColor)

    //hair back
    //Two different thicknesses of hair
    //Use FaceWidth and faceHeight to determine the hair thickness
    if(hairType == 1){  //Thick Hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.2,  faceHeight*1.2);
        fill (r, g, b);
        rect(0, height/(faceHeight/60), width, height)
    } else if (hairType == 2) //Thin hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.1,  faceHeight*1.1);
        fill (r, g, b);
        rect(0, height/(faceHeight/53), width, height)

    //skincolor
    //4 different skin types
    //predetermined skin colors
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }   
    
    //ears

    ellipse(width/2 - faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    ellipse(width/2 + faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    fill(95, 44, 5)
    ellipse(width/2 - faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
    ellipse(width/2 + faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
  
    //Skin Color 
    //Randomize skin color 
    //Fill the skin colors again due to the fill command in the ears
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }  

    //neck
    //use facewidth to determin neck width
    rect(eyeLX - faceWidth/18, height/2, faceWidth/2, 70)

    //Face
    //Use to ellipses to draw the face
    strokeWeight(0)
    ellipse(width / 2, 1.15*height / 3, faceWidth,  faceHeight);
    ellipse(width / 2, 1.45*height / 3, faceWidth/1.25, faceHeight/1.25)
    fill(hairColor+30)

    //eyes
    //Use the eye positions variable to draw the eyes and the pupils
    fill(255)
    ellipse(eyeLX, 1.25*height / 3, eyeSize*1.3, eyeSize*1.3);
    ellipse(eyeRX, 1.25* height / 3, eyeSize*1.3, eyeSize*1.3);
    fill(0);
    //Use pupilPos to randomize the pupil position whenever mouse clicks
    ellipse(eyeLX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    ellipse(eyeRX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    

    //eyebrows
    //two different eyebrows, straight and curve
    if (eyeBrow == 1){ //Curve
        strokeWeight(5) //use eyesize to determin eyebrow position
        curve (eyeLX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeLX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, //browHeight to randomize brow when click
               eyeLX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeLX + eyeSize/3, height/2 - eyeSize/1.5)
        curve (eyeRX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeRX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, 
               eyeRX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeRX + eyeSize/3, height/2 - eyeSize/1.5)
        strokeWeight(0);
    } if  (eyeBrow == 2){ //straight
        rect (eyeLX-eyeSize/1.5 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
        rect (eyeRX-eyeSize/1.8 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
    }

    //mouth
    //5 different types of mouths
    //use faceHeight and width to determine mouth position
    if (mouthType <= 2){ // Open Mouth
        fill(255, 166, 193)
        ellipse(width/2, height/2 + faceHeight/mouthLevel, faceWidth/3, faceHeight/10)
        fill(255)
        ellipse(width/2, height/2.06 + faceHeight/mouthLevel, faceWidth/6, faceHeight/20)
    } else if (mouthType == 3){ //Meh face No. 1
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height*2.75/5)
        strokeWeight(0)
    } else if (mouthType == 4){// Straight Face
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if (mouthType == 5){//Meh face No.2
        strokeWeight(5);
         line(eyeLX, height*2.75/5, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if(mouthType == 6) {//Smile
        strokeWeight(4)
        noFill()
        curve (eyeLX - eyeSize/10, height/2.7 - faceHeight/20,
               eyeLX - eyeSize/10, 1.5*height/3 - faceHeight/50, 
               eyeRX + eyeSize/10, 1.5*height/3 - faceHeight/50,
               eyeRX + eyeSize/10, height/2.7 - faceHeight/20)
        strokeWeight(0)
    }
   
    //nose
    //two different types of noses
    //use faceheight and width to determine mouth position
    if(noseType == 1) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/5, faceWidth*0.05, faceHeight/5)
    } else if (noseType == 2) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/10, faceWidth*0.1, faceWidth*0.1)
    }

}


function mousePressed() {
    // Randomize the variables when the use clicks their mouse
    //Background color, high rgb for faded colors
    r = random (200, 250)
    g = random (200, 250)
    b = random (200, 250)
    //face
    //Max width less than max height
    faceWidth = random(100, 120);
    faceHeight = random(100, 150);
    //skin color
    randomSkin = int(random (0, 4)) 
    //eyes
    eyeSize = random(20, 28);
    browHeight = random(0, 10)
    eyeBrow = int(random(1, 3))
    pupilPos = random (0, 0.5)
    //mouth
    mouthType = int(random(1, 7))
    mouthLevel = random (6, 50)
    //hair
    hairColor = random (0, 100)
    stubble = int(random(0, 3))
    hairType = int(random(1, 3))
    //nose
    noseType = int(random(1, 3))
}

Project 01

This is my self portrait

sketch
//Michael Li
//Section C
function setup() {
    createCanvas(800, 750);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //Background If Condition
    var buildingcolor = 150;//default buildin color light grey
    var windowcolor = 70;//default window color dark grey
    if (mouseY < height * 0.33) {
        background(189, 184, 220);//purple
        fill(25, 53, 79);
        noStroke()
        rect (0, height*0.66, width, height/3); //uses default building and window color


    } else if (mouseY > height * 0.66) {
        background (60, 73, 120) //dark blue
        fill(25, 53, 79);
        noStroke()
        rect (0, height*0.66, width, height/3);
        buildingcolor = 20 //changes building color to dark grey
        windowcolor = 255 //change window color to white

    } else {
        background (58, 126, 146); //Light blue
        fill(25, 53, 79); 
        noStroke()
        rect (0, height*0.66, width, height/3);
        buildingcolor = 120 //changes building color to grey
        windowcolor = 150 //changes window color to light grey
    //depends  on mouse position on canvas, change background from early morning, mid day to night
    }

    // Building 1 in Background (right building)

        fill(buildingcolor)
        noStroke()
        rect(520, height*0.33, 130, height/3);
        fill(windowcolor)

        //windows
        var row1 = 530
        var row2 = 570
        var row3 = 610
        
        rect(row1, (height*0.33)+10, 30, 20)
        rect(row1, (height*0.33)+50, 30, 20)
        rect(row1, (height*0.33)+90, 30, 20)
        rect(row1, (height*0.33)+130, 30, 20)
        rect(row1, (height*0.33)+170, 30, 20)

        rect(row2, (height*0.33)+10, 30, 20)
        rect(row2, (height*0.33)+50, 30, 20)
        rect(row2, (height*0.33)+90, 30, 20)
        rect(row2, (height*0.33)+130, 30, 20)
        rect(row2, (height*0.33)+170, 30, 20)

        rect(row3, (height*0.33)+10, 30, 20)
        rect(row3, (height*0.33)+50, 30, 20)
        rect(row3, (height*0.33)+90, 30, 20)
        rect(row3, (height*0.33)+130, 30, 20)
        rect(row3, (height*0.33)+170, 30, 20)

    // Building 2 in Background (left taller building)

        fill(buildingcolor)
        noStroke()
        rect(170, height*0.05, 170, height/1.64);
        fill(windowcolor)

        //windows
        row1 = 180 //changes window row variable since second building
        row2 = 220
        row3 = 260
        var row4 = 300

        rect(row1, (height*0.33)-190, 30, 20)
        rect(row1, (height*0.33)-150, 30, 20)
        rect(row1, (height*0.33)-110, 30, 20)
        rect(row1, (height*0.33)-70, 30, 20)
        rect(row1, (height*0.33)-30, 30, 20)
        rect(row1, (height*0.33)+10, 30, 20)
        rect(row1, (height*0.33)+50, 30, 20)
        rect(row1, (height*0.33)+90, 30, 20)
        rect(row1, (height*0.33)+130, 30, 20)
        
        rect(row2, (height*0.33)-190, 30, 20)
        rect(row2, (height*0.33)-150, 30, 20)
        rect(row2, (height*0.33)-110, 30, 20)
        rect(row2, (height*0.33)-70, 30, 20)
        rect(row2, (height*0.33)-30, 30, 20)
        rect(row2, (height*0.33)+10, 30, 20)
        rect(row2, (height*0.33)+50, 30, 20)
        rect(row2, (height*0.33)+90, 30, 20)
        rect(row2, (height*0.33)+130, 30, 20)
        
        rect(row3, (height*0.33)-190, 30, 20)
        rect(row3, (height*0.33)-150, 30, 20)
        rect(row3, (height*0.33)-110, 30, 20)
        rect(row3, (height*0.33)-70, 30, 20)
        rect(row3, (height*0.33)-30, 30, 20)
        rect(row3, (height*0.33)+10, 30, 20)
        rect(row3, (height*0.33)+50, 30, 20)
        rect(row3, (height*0.33)+90, 30, 20)
        rect(row3, (height*0.33)+130, 30, 20)

        rect(row4, (height*0.33)-190, 30, 20)
        rect(row4, (height*0.33)-150, 30, 20)
        rect(row4, (height*0.33)-110, 30, 20)
        rect(row4, (height*0.33)-70, 30, 20)
        rect(row4, (height*0.33)-30, 30, 20)
        rect(row4, (height*0.33)+10, 30, 20)
        rect(row4, (height*0.33)+50, 30, 20)
        rect(row4, (height*0.33)+90, 30, 20)
        rect(row4, (height*0.33)+130, 30, 20)

    strokeWeight(0) //No stroke for the main portrait

    //neck
    fill(204, 172, 125);
    rect(335, 300, 130, 140)

    //head part 1 circle
    fill(235, 209, 168); //skin color
    ellipse(387, 200, 260, 236); 
    stroke(235, 209, 168)

    //head part 2 chin
    bezier(257, 200, 244, 453, 411, 398, 487, 269);
    
    //Eyes whites
    fill(255);
    ellipse(286, 218, 36, 42)//left eye
    fill(255);
    ellipse(373, 218, 36, 42)//right eye

    //eyes pupils
    fill(70, 50, 21)
    ellipse(294, 218, 20, 32);
    fill(70, 50, 21)
    ellipse(383, 218, 20, 32);
    
    //Eyes Highlights
    fill(255)
    ellipse(297, 209, 3, 7);
    fill(255)
    ellipse(387, 209, 3, 7);

    //nose
    fill(204, 172, 125)
    beginShape()
        vertex(327, 225);
        vertex(327, 286);
        vertex(306, 284);
        vertex(303, 276);
    endShape(CLOSE);


    //Hair
    fill(50)
    beginShape();
        vertex(238, 218); //bottom left
        vertex(238, 163);
        vertex(233, 140);
        vertex(288, 68);
        vertex(349, 52);
        vertex(400, 47);
        vertex(469, 77);
        vertex(515, 110);
        vertex(537, 164);
        vertex(524, 221);
        vertex(521, 258);
        vertex(493, 296);
        vertex(498, 211);
        vertex(480, 205);
        vertex(473, 231);
        vertex(462, 247);
        vertex(462, 219);
        vertex(455, 207);
        vertex(441, 200);
        vertex(421, 164);
        vertex(394, 172);
        vertex(356, 162);
        vertex(319, 200);
        vertex(298, 160);
        vertex(291, 166);
        vertex(280, 164);
    endShape(CLOSE);

    //Ears
    fill(204, 172, 125);
    bezier(478, 212, 515, 211, 515, 259, 464, 279);
    fill(235, 209, 168);
    bezier(478, 218, 497, 211, 497, 259, 464, 267);

    //mouth
    fill (0);
    bezier(314, 324, 327, 333, 373, 330, 381, 315);
    fill(255);
    beginShape();
        vertex(319, 323);
        vertex(319, 325);
        vertex(377, 318);
        vertex(377, 315.5);
        
    endShape(CLOSE);

    //Arms

    fill(235, 209, 168);
    beginShape();
        vertex(216, 659);
        vertex(207, height)
        vertex(125, height);
        vertex(154, 650);
    endShape(CLOSE);

    beginShape();
        vertex(623, 667);
        vertex(643, height);
        vertex(728, height);
        vertex(695, 655);
    endShape(CLOSE);



    //Shirt

    fill(230);
    beginShape();
        vertex(207, height);
        vertex(235, 463);
        vertex(318, 411);
        vertex(358, 438);
        vertex(471, 399);
        vertex(567, 455);
        vertex(615, height);
    endShape(CLOSE);

    //Sleeves

    fill(180);
    beginShape();
        vertex(235, 463);
        vertex(147, 520);
        vertex(110, 641);
        vertex(216, 659);
    endShape(CLOSE);

    beginShape();
        vertex(567, 455);
        vertex(674, 515);
        vertex(703, 656);
        vertex(588, 676);
    endShape(CLOSE);

    //Eye brows
    fill(0);
    bezier(270, 195, 273, 182, 303, 182, 308, 208);
    bezier(357, 199, 362, 184, 391, 184, 401, 203);

    //Glasses
    noFill();
    stroke(154, 136, 49);
    strokeWeight(6);
    ellipse(276, 225, 77, 59); //frame left
    ellipse(392, 225, 92, 59); //frame right

    beginShape(); //Glasses connecting the Framse
        vertex (317, 220);
        vertex(330, 218);
        vertex (342, 220);
    endShape();

    stroke(49, 42, 19); //Glasses legs
    line(436, 218, 480, 210);

}