Project 02

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

function draw() {
    //backgrond
    if(mouseX<width/2){
        background(186,197,62);
        stroke(112,106,41);
        fill(112,106,41);
    } else{
        background(200,170,161);
        stroke(167,118,94);
        fill(167,118,94);
    }
    
    //stars! left side
    quad(40,30,30,50,40,70,50,50);
    quad(65,55,55,75,65,95,75,75);
    quad(40,80,30,100,40,120,50,100);
    //stars! right side
    quad(350,340,340,360,350,380,360,360);
    quad(350,280,340,300,350,320,360,300);
    quad(320,305,310,325,320,345,330,325);
    
    //left face area
    stroke(158,193,210);
    fill(158,193,210);
    arc(150,130,150,150,15.3,17.8,HALF_PI); //top left area
    fill(158,193,210);
    rect(75,130,40,120);//left hair

    //right yellow area
    stroke(240,216,102);
    fill(240,216,102);
    arc(220,120,90,90,16.9,13.4,HALF_PI);
    fill(240,216,102);
    rect(235,120,30,130);//right hair

    //right dak blue area
    stroke(44,112,171);
    fill(44,112,171);
    arc(200,120,90,90,16.9,13.4,HALF_PI);
    fill(44,112,171);
    rect(215,120,30,130);//right hair

    //eye and noise
    stroke(240,216,102);
    fill(240,216,102);
    circle(125,140,60);
    stroke(240,216,102);
    fill(240,216,102);
    circle(200,140,60);
    stroke(158,193,210);
    fill(158,193,210);
    circle(200,140,55);
    stroke(194,227,245);
    fill(194,227,245);
    circle(200,140,40);
    stroke(0);
    fill(0);
    rect(163,170,5,15);
    rect(158,185,10,3);

    //horizontal lines  From top to the bottom
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,75,50,15);
    stroke(255);
    fill(255);
    rect(235,95,60,10);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,110,70,7);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,120,75,13);
    stroke(255);
    fill(255);
    rect(235,139,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,153,75,8);
    stroke(255);
    fill(255);
    rect(235,167,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,181,75,8);
    stroke(255);
    fill(255);
    rect(235,195,75,8);
    rect(235,209,75,8);

    //clothes
    stroke(240,216,102);
    fill(240,216,102);
    rect(140,230,50,20);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(110,270,90,270,60,390);
    stroke(240,216,10);
    fill(240,216,102);
    triangle(150,270,120,270,90,390);
    triangle(180,270,210,270,240,390);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(220,270,235,270,270,390);

    //button
    stroke(44,112,171);
    fill(44,112,171);
    circle(165,300,20);
    circle(165,330,20);
    circle(165,360,20);
    
    //jaw
    stroke(255);
    fill(255);
    arc(165,170,130,130,7,2.4,HALF_PI); 

    
}