Month: September 2020

Project 2 Variable Face!

Instead of just varying the sizes of the elements of the faces I decided to go with having 2 or 3 set options for each element, then by assigning them numbers and calling them out via the random command, I could get a variation of faces from the set.

tjchen face
//tjchen
//15-104 section a

var face = 2;
var eyesright = 2;
var eyesleft = 2;
var eyesizeL = 5;
var eyesizeR = 5;
var hair = 2;
var mouth = 2;
function setup() {
    createCanvas(480, 600);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(220);
    rectMode(CENTER); 
    var cenx = (width/2);
    var ceny = (height/2);
    fill(255);
    rect(width/2, height/2, 50, 50);
    // short face
        if (face <=2 ){
            noStroke();
            rect(width/2, height/2, 80, 200, 40);
        } else if (face <= 3){
            noStroke();
            rect(width/2, height/2, 200, 200, 40);
        } else {
            noStroke();
            circle(width/2,height/2 ,200);
        }
    // eyes right
        if (eyesright<=2) {
            fill(0);
            circle((width/2)+ 10, (height/2)-20, eyesizeR);
        } else if(eyesright <=3) {
            fill(0);
            circle((width/2)+ 10, ((height/2)+ 3)-20, eyesizeR);
        } else {
            fill(0);
            circle((width/2)+ 10, ((height/2)- 3)-20, eyesizeR);
        }
    // eyes left
        if (eyesleft<=2) {
            fill(0);
            circle((width/2)- 10, (height/2)-20, eyesizeL);
        } else if(eyesleft <=3) {
            fill(0);
            circle((width/2)- 10, ((height/2)+3)-20, eyesizeL);
        } else {
            fill(0);
            circle((width/2)- 10, ((height/2)-3)-20, eyesizeL);
        }
    //hair 
        if (hair<=2) {
            //fro
            noStroke();
            fill(161, 119, 96);
            circle(cenx,ceny-100,80);
            circle(cenx+30,ceny-100,80);
            circle(cenx+80,ceny-100,80);
            circle(cenx-55,ceny-100,80);
            circle(cenx-80,ceny-100,80);

            circle(cenx,ceny-140,80);
            circle(cenx+30,ceny-135,80);
            circle(cenx+80,ceny-155,80);
            circle(cenx-55,ceny-140,80);
            circle(cenx-80,ceny-145,80);

            circle(cenx,ceny-180,80);
            circle(cenx+30,ceny-190,80);
            circle(cenx+80,ceny-185,80);
            circle(cenx-55,ceny-170,80);
            circle(cenx-80,ceny-180,80);
        } else if (hair<=3){
            //tophat
            noStroke();
            fill(0);
            rect(cenx,ceny-200,80,200);
            rect(cenx,ceny-100,100,20);
        }
    //mouth 
        if (mouth <=2) {
            stroke(0);
            strokeWeight(2);
            line(cenx-40, ceny+20, cenx+40, ceny+20);
        } else {
            fill(255,0,0);
            ellipse(cenx,ceny+20, 40,20);
            stroke(143, 4, 25);
            strokeWeight(2);
            line(cenx-20,ceny+20,cenx+20,ceny+20);
        }

}

function mousePressed(){
    face = (random(1,4)); 
    eyesright = (random(1,4));
    eyesleft = (random(1,4));
    eyesizeR = (random(5,10));
    eyesizeR = (random(5,10));
    hair = (random(1,4));
    mouth = (random(1,4));
}

Project 2: Variable Face

This project shows variable faces of a girl.

sketchDownload
/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*Project 02- Variable Faces; Face Variables
*
*/

var eyeSizeX = 40;
var eyeSizeY = 20;
var faceWidth = 150;
var faceHeight = 200;
var noseLength = 20;
var noseWidth = 10;
var browHeight = 170; //determines general brow height
var browExpression = 4; //determines brow arch
var leftMouth = 170; //determines the left edge of mouth
var rightMouth = 230; //determines the right edge of mouth
var mouthHeight = 250; //determines the height of the edges of the mouth
var mouthExpression = 260; //determines the expression of the mouth

function setup() {
    createCanvas(400, 400);
    //background(255, 255, 255);
}
   

function draw() {
	stroke(0);
	strokeWeight(2);


	//background changes color when mouse is on
    // left or right side of screen
	 if (mouseX < 0.5 * width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

    //hair
    point (width / 2, height * 0.2);
    point (width * 0.7, height * 0.3);
    point (width * 0.75, height / 2);
    point (width * 0.75, height * 0.8);
    point (width * 0.25, height * 0.8);
    point (width * 0.25, height / 2);
    point (width * 0.3, height * 0.3);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.7, height * 0.3);
    curveVertex(width * 0.75, height / 2);
    curveVertex(width * 0.75, height * 0.8);
    curveVertex(width * 0.25, height * 0.8);
    curveVertex(width * 0.25, height / 2);
    curveVertex(width * 0.3, height * 0.3);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    fill(227, 180, 171); //skin color
    ellipse((width / 2), (height / 2), faceWidth, faceHeight) //face shape

    point (width / 2, height * 0.2);
    point (width * 0.4, height * 0.35);
    point (width * 0.3, height * 0.4);
    point (width * 0.4, height * 0.25);

    point (width / 2, height * 0.2);
    point (width * 0.6, height * 0.35);
    point (width * 0.7, height * 0.4);
    point (width * 0.6, height * 0.25);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.4, height * 0.35);
    curveVertex(width * 0.3, height * 0.4);
    curveVertex(width * 0.4, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.6, height * 0.35);
    curveVertex(width * 0.7, height * 0.4);
    curveVertex(width * 0.6, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();
    //eyes
    fill(255, 255, 255); //whites of eyes
    var leftEyeX = width / 2 - faceWidth * 0.25; //placement of left eye
    var rightEyeX = width / 2 + faceWidth * 0.25; //placement of right eye
    var eyeIrisX = 20; //placement of iris
    ellipse(leftEyeX, height / 2, eyeSizeX, eyeSizeY);
    ellipse(rightEyeX, height  /2, eyeSizeX, eyeSizeY);
    fill(149, 85, 73); //light brown

    ellipse(leftEyeX, height / 2, eyeIrisX, eyeSizeY); //left Iris
    ellipse(rightEyeX, height / 2, eyeIrisX, eyeSizeY); //right Iris
    fill(0, 0, 0); //black
    ellipse (leftEyeX, height / 2, 10); //left pupil
    ellipse (rightEyeX, height / 2, 10); //right pupil

    //if the eyes are big enough, this program will add
    //an eye reflection to make the face seem more "cute"
    if (eyeSizeY > 20) {
        fill(255, 255, 255);
        ellipse((leftEyeX + 3), height / 2, 5);
        ellipse((rightEyeX + 3), height / 2, 5);
    }
	
    //nose
    noFill();
    beginShape();
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 + noseWidth, height / 2 + noseLength);
    curveVertex(width / 2, height / 2 + 25);
    curveVertex(width / 2 - 5, height / 2 + noseLength);
    endShape();

    //mouth
    fill(152, 41, 41);
    //mouth outline
    point(leftMouth, mouthHeight);
    point(rightMouth, mouthHeight);
    point(width / 2, mouthExpression);
    //mouth shape
    fill(255, 255, 255);
    beginShape();
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(rightMouth, mouthHeight);
    curveVertex(width / 2, mouthExpression);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    endShape();

    //adds blush if the face is grinning or not frowning
    if (mouthExpression > 260) {
        strokeWeight(0);
        fill(251, 195, 204);
        ellipse(leftMouth - 10, mouthHeight - 20, 15);
        ellipse(rightMouth + 10, mouthHeight - 20, 15);
        strokeWeight(2);
    }

    //eyebrows
    strokeWeight(5);
    var leftBrowFront = width / 2 - faceWidth * 0.15
    var rightBrowFront = width / 2 + faceWidth * 0.15

    //left brow outline
    point(leftBrowFront, browHeight);
    point(leftBrowFront - 20, browHeight - browExpression);
    point(leftBrowFront - 35, browHeight);

    //left brow shape
    noFill();
    beginShape();
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront - 20, browHeight - browExpression);
    curveVertex(leftBrowFront - 35, browHeight);
    curveVertex(leftBrowFront - 35, browHeight);
    endShape();

    //right brow outline
    point(rightBrowFront, browHeight);
    point(rightBrowFront + 20, browHeight - browExpression);
    point(rightBrowFront + 35, browHeight);
    
    //right brow shape
    noFill();
    beginShape();
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront + 20, browHeight - browExpression);
    curveVertex(rightBrowFront + 35, browHeight);
    curveVertex(rightBrowFront + 35, browHeight);
    endShape();
    strokeWeight(2);

}

function mousePressed() {
    faceWidth = random(130, 170);
    faceHeight = random(230, 160);
    eyeSizeX = random(35, 45);
    eyeSizeY = random(15, 25);
    noseLength = random (15, 25);
    noseWidth = random (5, 15);
    browHeight = random (160, 180);
    browExpression = random (0, 10);
    leftMouth = random (160, 180);
    rightMouth = random (220, 240);
    mouthHeight = random (240, 260);
    mouthExpression = random (230, 270);


}

LO: Generative Art

noise wrap, 2019 I

One generative art that I find inspiring is the “noise warp” series by Holger Lippmann. Using processing, Lippmann created his art by using a 2D X/Y noise structure that elongated shapes to produce brushstrokes. Lippmann was inspired heavily from the 20th-century artists who painted with expressive fluid brushstrokes. Even though his art was created through various long rectangles, they flow well and create fluidity. Through his code and noise, he was able to imitate that way of painting with various landscape photos he had taken himself. His generative art reminds me heavily of Van Gogh and Monet, but with Monet, the lines are more fluid. It distorts the reality of the landscape yet creates a beautiful fluidity of colors. I find this series very tranquil and pleasing to the eye, almost as if looking at his art in a dream state.

Holger Lippmann: http://www.lumicon.de/wp/?p=3623

Looking Outwards 02: Generative Art

UCracking, Marius Watz

This piece was published as part of Absolut Art Exchange, 2014.

The piece uses 2D geometric figures to create 3D textures and forms. I admire the use of bright colors and the different geometric shapes in the art. It looks very clean and detailed, but there is also a level of creativity in the piece.
This piece also makes me question how artists can express their creativity in art that is made out of code and algorithms.

Watz named these pieces “UCracking” based on “cracking” algorithms that are based on subdivision algorithms.


Fundamentally, logic and creativity are completely different – logic follows a set of rules and bounds, while creativity encourages freedom of thought, and lacks any boundaries. How do creativity and computer logic interact? How do you express creativity through something that fundamentally has rules and bounds?

The visuals are based on subdivision algorithms, also known as cracking. Subdivision algorithms split triangles into a new set of smaller triangles through some coded operation. The triangles are colored accordingly, and those triangles are further split, until the result is an art piece.

Project 2: Generative Faces

How I feel after having to eat Resnik because I left my lunch at home.

sketch
var eyeSizeL = 20;
var eyeSizeR = 20;
var faceWidth = 100;
var faceHeight = 150;
var chinHeight = 300;
var irisSizeL = 10;
var irisSizeR = 10;
var browHeightL = 130
var browHeightR = 130
var cheekSizeL = 70
var cheekSizeR = 70
var lusciousLips = 15
var juicyLips = 17
var thickLipsTop = 13
var thickLipsBottom = 22

let moodColor = 50
 
function setup() {
    createCanvas(300, 500);
}
 
function draw() {
    background(moodColor);
    noStroke ();
    fill ('#86BB43');
    ellipse(width /2, height / 3, 135,140); //head shape
    fill('#F2BE80');
    rect(width/2 -15,250,30,60); //neck
    fill('#E856AD');
    ellipse(width/2, height,210,360,); 
    rect(width/2 -20, 300, 40,60)//shirt
    rect(width/2 -25, 280, 50,25, 10)
    fill('#86BB43');
    ellipse(width /2, 230, 80); //chin
    fill('#86BB43');
    circle(width/2-40, height/7*3,cheekSizeL); //left cheek
    circle(width/2+40, height/7*3, cheekSizeR); //right cheek
    fill (150);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill('#2B3D15');
    ellipse(eyeLX, browHeightL,30,20); //eyebrow
    ellipse(eyeRX, browHeightR-3,30,20); //eyebrow
    fill('#86BB43');
    ellipse(eyeLX, browHeightL-6, 35, 20); //eyebrow
    ellipse(eyeRX, browHeightR+3, 35, 20); //eyebrow
    fill(225)
    circle(eyeLX, height / 3, eyeSizeL); //eyeball
    circle(eyeRX, height / 3, eyeSizeR); //eyeball
    fill(10);
    ellipse(eyeLX, height / 3, irisSizeL, irisSizeL); //pupil
    ellipse(eyeRX, height / 3, irisSizeR, irisSizeR); //pupil
    fill('#D25A27');
    arc(width/2-5, 222, thickLipsTop,lusciousLips, PI,TWO_PI) //top lip
    arc(width/2+5, 222, thickLipsTop,lusciousLips, PI, TWO_PI) //top lip
    arc(width/2, 224,thickLipsBottom,juicyLips, 0,PI) //bottom lip
  
    
    
    
}
 
function mousePressed() {
    faceHeight = random(100, 200);
    eyeSizeL = random(15, 35);
    eyeSizeR = random(15, 35);
    irisSizeL = random(7,15);
    irisSizeR = random(7,15);
    browHeightL = random(125,135);
    browHeightR = random(125,135);
    cheekSizeL = random(70, 90);
    cheekSizeR = random(70, 90);
    lusciousLips = random(13, 25);
    juicyLips = random(15,25)
    thickLipsTop = random(13, 20)
    thickLipsBottom = random(20, 30)
  
    moodColor = color(random(30), random(95), random(40))
}

LO: Generative Art

Generative art has become such a tool to reflect on what we have seen until now and use those tools to create new scenes and dream-like experiences. Refik Anadol does exactly this.

‘Machine Hallucinations’, a synesthetic reality experience explores the connections between collective memories and archival tendencies of humans.

Click images to in larger view.

Powered by an algorithm fed over 100 million photographs of New York City, this 30 minute cinematic installation helps us to understand why we record experiences and hold onto memories into every step of a coming reality. Using the immense data that it has been provided and learned from, the algorithm produces scenes of a transforming New York City (in a possible future) and a multitude of similar dream-like ‘hallucinations’.

Examples of algorithmic studies done based on NYC photography.

Anadol’s work stood out to me as it begins the exploration in answering why we as humans act the way we do, all while introducing machines and AI as the possible vehicle for carrying out these considerations. His work not only serves to explore alternate realities through a visual medium, but also to bring a more hopeful narrative to the apocalyptic relationship between AI and humans that we often see today. 

Project 2 – Variable Faces

sketch 

var facewidth = 200;
var faceheight = 200;
var lefteary = 149; //y coordinate of the left ear
var righteary = 149; //y coordinate of the right ear
var eyebrowx1 = 295; //x coordinate of the left eyebrow
var eyebrowy1 = 230; //y coordinate of the left eyebrow
var eyebrowx2 = 345; //x coordinate of the right eyebrow
var eyebrowy2 = 230; //y coordinate of the right eyebrow
var eyewidth = 15;
var eyeheight = 15;
var mouthwidth = 15;
var mouthheight = 11;
var cheekwidth = 65;
var cheekheight = 65;

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

function draw() {
  background(255,243,169);
  noStroke();
  fill(255,197,197);
  ellipse(266,lefteary,70,172); //left ear
  ellipse(373,righteary,70,172); //right ear
  ellipse(320,267,facewidth,faceheight); //face
  fill(255,171,195);
  ellipse(250,291,cheekwidth,cheekheight);//left cheek
  ellipse(389,291,cheekwidth,cheekheight); //right cheek
  fill(107,43,43);
  ellipse(286,251,eyewidth,eyeheight);//left eye
  ellipse(353,251,eyewidth,eyeheight); //right eye
  rect(313,268,mouthwidth,mouthheight); //mouth
  strokeWeight(5);
  stroke(107,43,43);
  line(277,230,eyebrowx1,eyebrowy1); //eyebrow left
  line(eyebrowx2,eyebrowy2,362,230); //eyebrow right
  
  
}

function mousePressed(){
  eyebrowy1 = random(225,235);
  eyebrowy2 = random(225,235);
  eyewidth = random(5,30);
  eyeheight = random(5,30);
  mouthwidth = random(5,30);
  mouthheight = random(5,30);
  cheekwidth = random(40,70);
  cheekheight = random(20,70);
  lefteary = random(120,170);
  righteary = random(120,170);
  
}

LO2- Generative Art

I really liked Allison Parrish’s Compasses.
http://sync.abue.io/issues/190705ap_sync2_27_compasses.pdf

It “has two parts: a “speller,” which spells words based on how they sound, and a “sounder-out,” which sounds out words based on how they’re spelled. In the process of sounding out a word, the “sounder-out” produces a fixed-length numerical vector, known as a “hidden state,” which is essentially a condensed representation of a word’s phonetics. The “speller” can then use the phonetic information contained in this hidden state to produce a plausible spelling of the word.” (http://portfolio.decontextualize.com/) It really drew my eye on how it’s reproducing what has been produced. I like how it’s poetic and artistic yet very dry at the same time because of its mechanical nature. I have no idea of how she created the algorithm to generate this work, but I guess it’s some kind of machine learning. I liked how she took the multiple layers of the words and regenerate different forms of the words.

Variable Face

sketch
//Jasmin Kim
//Section D

var eyeSize = 70;
var faceWidth = 200;
var faceHeight = 250;
var mouthSize = 80;
var mouthW = 80;
var mouthH=40;
var R = 188;
var G = 212;
var B = 246;


var value = 0;

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

function draw() {
    background(R,G,B);

    //Face Shape
    fill(243,213,B); //Beige
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  //Face
    var faceX = (width/2);
    var faceY = (height/2);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Body Shape
    var bodyW = faceWidth*1.8
    var bodyH = (height/2)+(height*0.6)
    rect((width/2)-(faceWidth/1.1),(height/2)+(faceHeight/2.4),bodyW,bodyH,80,80,20,20);
    
    //glass rectangle
    fill(158,157,156);
    stroke(1);
    rect(eyeLX,(height/2)-3,faceWidth/2,5);
    
    //Eyes
    stroke(7);
    strokeWeight(1);
    var eyeH = height/2
    ellipse(eyeLX, eyeH, eyeSize*1.3, eyeSize*1.3);   //gray glasses
    ellipse(eyeRX, eyeH, eyeSize*1.3, eyeSize*1.3);
    fill(255);
    ellipse(eyeLX, eyeH, eyeSize, eyeSize);           //white eyes
    ellipse(eyeRX, eyeH, eyeSize, eyeSize);
    
    //eyes moving
    fill(0);
    var moveXr = constrain(mouseX,eyeLX-(eyeSize/5),eyeLX+(eyeSize/5));
    var moveYr = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    var moveXl = constrain(mouseX,eyeRX-(eyeSize/5),eyeRX+(eyeSize/5));
    var moveYl = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    ellipse(moveXr, moveYr, eyeSize/2, eyeSize/2);       //black eyeball
    ellipse(moveXl, moveYl, eyeSize/2, eyeSize/2);

    //Mouth
    if(faceWidth <230){
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-40,eyeLX+(eyeSize/2),eyeH-50);               //sad eyebrow
        line(eyeRX-(eyeSize/2),eyeH-50,eyeRX+(eyeSize/2),eyeH-40);
        noStroke();
        fill(79,129,255)
        circle(eyeLX,(height*0.65),20);                                           //tears
        triangle(eyeLX-10, height*0.65, eyeLX, height*0.6,eyeLX+10, height*0.65);   //tears#2
        fill(0);
        ellipse(width/2,(faceY+(faceHeight/4.5))+10,50,45);     //black mouth
        if(faceHeight<290){
            stroke(4);
            line(280,90,(width/2)-20,130);      //hair
            line(300,90,(width/2)-14,125);
            line(320,90,(width/2)-8,118);
        }
        
    } else{
        fill(R,G,B);
        strokeWeight(1);
        var mouthY = faceY+(faceHeight/4.5);
        var mouthX = faceX-(mouthW/2);
        rect(mouthX, mouthY, mouthW, mouthH,25,25,25,25);       //normal mouth
        //Angry Eyebrows
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-50,eyeLX+(eyeSize/2),eyeH-40);
        line(eyeRX-(eyeSize/2),eyeH-40,eyeRX+(eyeSize/2),eyeH-50);
        //tongue
        strokeWeight(1);
        fill(239,133,154);
        arc(mouthX+(mouthW/2),mouthY+mouthH, mouthW/1.8, mouthH*0.8, PI, TWO_PI);

    }

    
}


function mousePressed() {
    faceWidth = random(200, 300);
    faceHeight = random(250, 350);
    eyeSize = random(40, 70);
    R = random(0,255);
    G = random(0,255);
    B = random(0,255);
    mouthW = random(55,85);
    mouthH = random(30,45);

}

For this project, I tried to show two different facial expressions while I limited the probability of hairs too. Skin color, background color, and eyebrows change as I click the mouse. An interesting part of this project is that I also tried to move the pupils according to the screen mouse.

Project 02- Variable Face

For my project, I decided that instead of coding a typical human face, I wanted to show different animal faces. I wanted the variability to come from the colors of the physical attributes of the animal, its background color, as well as its species! I chose four different animals– a cat, a bear, a koala, and a bunny. I kept the size of their attributes the same since I wanted some consistency with the other randomness.

mk24sketch02 
//Mirie Kim
//section A

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

var animal = 0;
var backgroundColorR = 230;
var backgroundColorG = 220;
var backgroundColorB = 250;
var headEarColorR = 0;  //and whiskers
var headEarColorG = 0;
var headEarColorB = 0;
var innerEarNoseColorR = 250;  //and  snout
var innerEarNoseColorG = 210;
var innerEarNoseColorB = 230;
var eyeColorR = 0;
var eyeColorG = 0;
var eyeColorB = 0;
var smile = 3;
var bearNoseColorR = 90; //and bunny's
var bearNoseColorG = 209;
var bearNoseColorB = 49;
var smileX = 15;
var smileY = 40;

function draw() {
	if(animal >= 0 & animal < 1){ //cat
		noStroke();
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		triangle(205,205, 260, 145, 200, 130); //ears
		triangle(435,205, 380, 145, 440, 130);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(215,195, 250, 155, 215, 150); //inside ears
		triangle(425,195, 390, 155, 425, 150); 
		fill(255);
		ellipse(260,240, 80, 85); //eyes
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);	
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		triangle(320,280, 310, 270, 330, 270); //nose
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);

	}
	else if (animal >= 1 & animal < 2) { //bear
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,165,90); //ears
		ellipse(415,165,90);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,165,50); //inside ears
		ellipse(415,165,50);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270); 

	}
	else if (animal >= 2 & animal < 3) { //koala
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(225,185,140); //ears
		ellipse(415,185,140);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(225,185,80); //inside ears
		ellipse(415,185,80);
		//head
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220);
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		//nose
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320,275, 45, 57);

	}
	else if (animal >= 3 & animal < 4) { //bunny
		background(backgroundColorR, backgroundColorG, backgroundColorB);
		noStroke();
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(260,145,60,250); //ears
		ellipse(380,145, 60, 250);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(260,145,30, 150); //inside ears
		ellipse(380,145,30, 150);
		fill(headEarColorR,headEarColorG,headEarColorB);
		ellipse(320,240,240,220); //head
		//eyes
		fill(255); 
		ellipse(260,240, 80, 85);
		ellipse(380,240, 80, 85);
		fill(eyeColorR,eyeColorG,eyeColorB);
		ellipse(268,240, 50, 60); //pupils
		ellipse(372,240,50,60);
		fill(255);
		ellipse(280,236, 25,35);
		ellipse(360,236 ,25,35);
		fill(innerEarNoseColorR, innerEarNoseColorG, innerEarNoseColorB);
		ellipse(320, 280, 55,40); //snout area
		fill(bearNoseColorR, bearNoseColorG, bearNoseColorB);
		triangle(320,280, 310, 270, 330, 270);
		stroke(headEarColorR,headEarColorG,headEarColorB);
		strokeWeight(2);
		line(390, 285, 460, 280); //whiskers
		line(390, 295, 450, 300);
		line(180, 280, 250, 285);
		line(180, 300, 250, 295);	
	
	}
}

function mousePressed() {
	animal = random(0,4); //produces decimal so have to refer to range in if/else statements
	backgroundColorR = random(0,255);
 	backgroundColorG = random(0,255);
 	backgroundColorB = random(0,255);
	headEarColorR = random(0,255);
	headEarColorG = random(0,255);
	headEarColorB = random(0,255);
	innerEarNoseColorR = random(0,255);
	innerEarNoseColorG = random(0,255);
	innerEarNoseColorB = random(0,255);
	eyeColorR = random(0,255);
	eyeColorG = random(0,255);
	eyeColorB = random(0,255);
	bearNoseColorR = random(0,255);
	bearNoseColorG = random(0,255);
	bearNoseColorB = random(0,255);
}