sketch
function setup() {
createCanvas(400, 600);
}
function draw() {
background(54, 47, 117);
// print(mouseX, mouseY);
// hair
beginShape();
strokeWeight(2);
stroke(0)
fill(0);
curveVertex(40, 600);
curveVertex(40, 600);
curveVertex(63, 358);
curveVertex(108, 255);
curveVertex(198, 216);
curveVertex(288, 255);
curveVertex(334, 358);
curveVertex(360, 600);
curveVertex(360, 600);
endShape();
// shoulder and neck
beginShape();
strokeWeight(2);
stroke(0)
fill(253, 236, 231);
curveVertex(92, 600);
curveVertex(92, 600);
curveVertex(114, 555);
curveVertex(147, 534);
curveVertex(173, 521);
curveVertex(184, 490);
curveVertex(216, 490);
curveVertex(227, 521);
curveVertex(253, 534);
curveVertex(286, 555);
curveVertex(308, 600);
curveVertex(308, 600);
endShape();
// face
beginShape();
strokeWeight(4);
stroke(0)
curveVertex(199, 500);
curveVertex(199, 500);
curveVertex(135, 466);
curveVertex(120, 369);
curveVertex(159, 334);
curveVertex(198, 300);
curveVertex(218, 334);
curveVertex(280, 369);
curveVertex(265, 466);
curveVertex(199, 500);
curveVertex(199, 500);
endShape();
// clothes
beginShape();
fill(253, 151, 156);
curveVertex(92, 600);
curveVertex(92, 600);
curveVertex(114, 555);
curveVertex(147, 534);
curveVertex(173, 521);
curveVertex(201, 546);
curveVertex(227, 521);
curveVertex(253, 534);
curveVertex(286, 555);
curveVertex(308, 600);
curveVertex(308, 600);
endShape();
// eyes
fill(0);
circle(160, 400, 26);
circle(240, 400, 26);
// eyelids
strokeWeight(8);
noFill();
arc(160, 393, 34, 16, PI + PI/24, - PI/6);
arc(240, 393, 34, 16, PI + PI/6, - PI/24);
// eyebrows
arc(160, 380, 52, 20, PI + PI/16, - PI/6);
arc(240, 380, 52, 20, PI + PI/6, - PI/16);
// mouth
strokeWeight(8);
stroke(0)
line(192, 450, 210, 450);
// nose
arc(201, 430, 14, 8, PI + PI / 10, TWO_PI - PI / 10);
// stars
noStroke();
fill(251, 255, 5);
triangle(112, 54, 120, 24, 128, 54);
triangle(112, 56, 120, 86, 128, 56);
triangle(90, 56, 120, 48, 120, 64);
triangle(120, 48, 120, 64, 150, 56);
triangle(312, 154, 320, 124, 328, 154);
triangle(312, 156, 320, 186, 328, 156);
triangle(290, 156, 320, 148, 320, 164);
triangle(320, 148, 320, 164, 350, 156);
circle(50, 80, 8);
circle(170, 150, 16);
circle(230, 50, 12);
circle(360, 100, 12);
/* when mouse is on canvas,
the circle stars will start blinking,
and the character will open her mouth */
if ((mouseX > 0) & (mouseX < width) &&
(mouseY > 0) && (mouseY < height)) {
// add rings for blinking effect
let starR1 = random(8, 16);
let starR2 = random(16, 24);
let starR3 = random(12, 18);
noFill();
strokeWeight(1);
stroke(251, 255, 5)
circle(50, 80, starR1);
circle(170, 150, starR2);
circle(230, 50, starR3);
circle(360, 100, starR3);
// open mouse
strokeWeight(6);
stroke(0);
fill(254, 97, 97);
arc(201, 451, 22, 30, 0, PI);
}
}