sketch
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);
}
}