Project 1- My Self Portrait

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

function draw() {
    background(120);
    strokeCap(ROUND);
    scale(0.93);

    //DYNAMIC BACKGROUND
    noFill();
    noStroke();
    var c = width/2;
    var alt = true;

    if (mouseX >= c){
        alt = true;
        fill(244, 162, 97);             // orange
        triangle(0,0, c, c, 100, -50); 

        fill(38, 70, 83);               // dark blue
        triangle(400, -50, c,c, 600, -50);
        
        fill(42, 157, 143);             //teal
        triangle(-200, 300, c, c, -300, 400);
        triangle(650, 20, c,c, 650, 50);

        fill(233, 196, 106);            // yellow
        triangle(-400, 400, c, c, -600, 650);
        triangle(650, 200, c, c, 650, 340);

        fill(231, 111, 81);             // red
        triangle(100, 650, c, c, 350, 650);
        triangle(300, -50, c, c, 380, -50);

        fill(96, 108, 56);              // green
        triangle(650, 400, c, c, 650, 500);

    } else {
        alt = false;
        fill(40, 54, 24);             // dark green
        triangle(0,30, c, c, 0, 250); 

        fill(254, 250, 224);             // cream
        triangle(400, -50, c,c, 600, -50);
        
        fill(221, 161, 94);             //tan
        triangle(-200, 300, c, c, -300, 400);
        triangle(600, 0, c,c, 650, 0);

        fill(43, 45, 66);            // dark purple
        triangle(-400, 500, c, c, 0, 580);
        triangle(650, 200, c, c, 650, 340);

        fill(131, 197, 190);             // light blue
        triangle(0, 650, c, c, 80, 650);
        triangle(100, 0, c, c, 210, 0);

        fill(255, 221, 210);              // salmon
        triangle(650, 500, c, c, 650, 650);
    }

    //FACE 
    noStroke();
    fill(255, 255, 255);

    beginShape();
    vertex(147, 240);
    vertex(147, 290);
    vertex(153, 295);

    vertex(300, 300);
    vertex(195, 434);
    vertex(203, 460);
    vertex(208, 490);
    vertex(209, 510);
    vertex(208, 530);
    vertex(201, 570);
    vertex(181, 645);
    vertex(518, 645);
    vertex(645, 645);
    vertex(645, 540);
    vertex(550, 538);
    vertex(550, 497);
    vertex(500, 250);
    endShape();

    stroke(10);
    
    bezier(280, 519, 210, 500, 90, 310, 228, 163);
    bezier(228, 163, 287, 95, 390, 117, 422, 147);
    bezier(422, 147, 600, 320, 370, 540, 280, 519);
    noStroke();
    triangle(280, 519, 228, 163, 422, 147);

    //NOSE
    stroke(7);
    noFill();
    bezier(261, 339, 236, 321, 260, 315, 269, 295);
    bezier(269, 295, 275, 254, 278, 228, 267, 212);
    bezier(321, 338, 334, 320, 309, 310, 297, 282);
    bezier(324, 324, 312, 305, 289, 304, 297, 282);

    //MOUTH
    bezier(238, 396, 253, 369, 309, 374, 351, 400);
    bezier(238, 396, 260, 474, 331, 433, 351, 400);

    //HAIR
    stroke(10);
    fill(255);
    curve(-500, 1000, 291, 83, 550, 538, -200, 1003);
    curve(600, 600, 291, 83, 147, 290, 620, 250);
    //curve(1000,-700, 550, 497, 490, 645, 0, 0);
    bezier(291, 123, 460, 90, 380, 320, 500, 350);
    noFill();
    bezier(195, 434, 220, 500, 210, 550, 180, 645);
    curve(305, 105, 291, 123, 165, 297, 800, 193);
    
    noStroke();

    fill(255, 255, 255);
    triangle(291, 83, 220, 180, 291, 123);
    triangle(291, 83, 350, 115, 291, 122);

    //NECK
    stroke(7);
    bezier(255, 507, 290, 550, 260, 620, 247, 645);
    noFill();
    bezier(425, 442, 460, 530, 460, 540, 645, 540);
    
    //EYES
    fill(237, 189, 64, 200);
    noStroke();
    ellipseMode(CENTER);
    circle(353, 246, 23);
    ellipse(222, 251, 18, 20);

    stroke(8);
    noFill();
    bezier(331, 257, 347, 220, 391, 230, 409,  249);
    bezier(257, 256, 231, 228, 210, 241, 206, 261);


    //TEXT
    var s = 'Ceci n\'est pas un autoportrait.';
    var f = 'Is this a self portrait?'
    fill(0);
    if (alt){
        textSize(30);
        text(s, 150, 50);
    } else {
        textSize(20);
        fill(255);
        noStroke();
        text(f, 50, 50, 70);
    }

}