I tried to imitate a character called “Bao” from a short film with a lot of curve vertexes, and other elements. I also added an interactive feature to add to the cuteness.
let value1x = 193;
let value1y = 250;
let value2x = 190;
let value2y = 265;
let value3x = 187;
let value3y = 250;
function setup() {
createCanvas(400, 400);
background(227, 114, 124);
}
function draw(){
fill(177, 204, 234)
strokeWeight(0)
ellipse(200, 410, 460, 300)
//body
fill(248, 235, 230);
strokeWeight(0);
beginShape();
curveVertex(200, 200); //top
curveVertex(200, 200);
curveVertex(175, 230);
curveVertex(150, 270); //left handle
curveVertex(125, 280);
curveVertex(120, 285);
curveVertex(135, 300);
curveVertex(160, 288);
curveVertex(200, 290); //lowest point
curveVertex(240, 288);
curveVertex(265, 300);
curveVertex(280, 285);
curveVertex(275, 280);
curveVertex(250, 270); //right handle
curveVertex(225, 230);
curveVertex(200, 200);
curveVertex(200, 200);
endShape();
//face
fill(248, 235, 230);
strokeWeight(0);
beginShape();
curveVertex(200, 100);
curveVertex(200, 100);
curveVertex(180, 135);
curveVertex(125, 170);
curveVertex(120, 200);
curveVertex(200, 220); //low tip
curveVertex(280, 200);
curveVertex(275, 170);
curveVertex(220, 135);
curveVertex(200, 100);
curveVertex(200, 100);
endShape();
//left eye
fill(40)
circle(170, 175, 20)
//left eye shine
fill(248, 222, 126);
strokeWeight(0);
beginShape();
curveVertex(180,175); //right point
curveVertex(180,175);
curveVertex(173,178);
curveVertex(170,185); // lowest point
curveVertex(167,178);
curveVertex(160,175);
curveVertex(167,172);
curveVertex(170,165);
curveVertex(173,172);
curveVertex(180, 175);
curveVertex(180, 175); //top point
endShape();
//right eye
fill(40)
circle(230, 175, 20)
//right eye shine
fill(248, 222, 126);
strokeWeight(0);
beginShape();
curveVertex(240,175); //right point
curveVertex(240,175);
curveVertex(233,178);
curveVertex(230,185); // lowest point
curveVertex(227,178);
curveVertex(220,175);
curveVertex(227,172);
curveVertex(230,165);
curveVertex(233,172);
curveVertex(240, 175);
curveVertex(240, 175); //top point
endShape();
//mouth
fill(248, 235, 230);
strokeWeight(1);
circle(192.5, 200, 15);
fill(248, 235, 230);
strokeWeight(1);
circle(207.5, 200, 15);
//coverup
fill(248, 235, 230);
strokeWeight(0);
rect(170, 190, 60, 10);
//blush
fill(247, 134, 144)
strokeWeight(0)
circle(140, 190, 24)
fill(247, 134, 144)
strokeWeight(0)
circle(260, 190, 24)
//left arm
fill(248, 235, 230);
stroke(140)
strokeWeight(1);
beginShape();
curveVertex(value1x, value1y);
curveVertex(value1x, value1y);
curveVertex(value2x, value2y);
curveVertex(value3x, value3y);
curveVertex(value3x, value3y);
endShape();
//right arm fill(248, 235, 230);
stroke(140)
strokeWeight(1);
beginShape();
curveVertex(207, 250);
curveVertex(207, 250);
curveVertex(210, 265);
curveVertex(213, 250);
curveVertex(213, 250);
endShape();
}
function mouseClicked() {
if (value2y === 265) {
value2y = 230;
} else {
value2y = 265;
}
}