xxxxxxxxxx87
//Setup the canvasfunction setup() { createCanvas(400, 400); // Creates a 400x400 pixel canvas background(135, 206, 235); // Sets the background color to a deeper light blue noCursor(); // Hides the default mouse pointer}// Draws the self-portrait and updates it continuouslyfunction draw() { // Interactive Background Color Change if (mouseIsPressed) { background(random(255), random(255), random(255)); // Changes the background to a random color when the mouse is pressed } else { background(135, 206, 235); // Resets the background to the original light blue color when the mouse is not pressed } noStroke(); // Disables the outline around shapes fill(102, 67, 33); // Fills the shape with a skin-tone color for a Black person ellipse(200, 200, 150, 200); // Draws the head at (200, 200) with a width of 150 and height of 200 // Draw the eyes using ellipses fill(255); // Sets the fill color to white for the eye whites ellipse(170, 180, 30, 20); // Left eye white ellipse(230, 180, 30, 20); // Right eye white // Interactive Pupils Movement fill(0); // Sets the fill color to black for the pupils let leftPupilX = map(mouseX, 0, width, 165, 175); // Maps mouseX to move the left pupil within the eye let rightPupilX = map(mouseX, 0, width, 225, 235); // Maps mouseX to move the right pupil within the eye ellipse(leftPupilX, 180, 10, 10); // Left pupil ellipse(rightPupilX, 180, 10, 10); // Right pupil // Draw the nose using a triangle fill(102, 67, 33); // Matches the skin-tone color used for the head triangle(200, 190, 190, 230, 210, 230); // Draws a triangle at specified vertices for the nose // Draw the mouth using an arc fill(80, 30, 20); // Sets a darker color for the mouth arc(200, 260, 50, 20, 0, PI); // Draws an arc representing a smile // Draw the ears using ellipses fill(102, 67, 33); // Matches the skin-tone color ellipse(125, 200, 30, 60); // Left ear ellipse(275, 200, 30, 60); // Right ear // Draw the hair using rectangles fill(0); // Sets the fill color to black for the hair rect(140, 100, 120, 30); // Top part of the hair rect(120, 130, 30, 70); // Left side of the hair rect(250, 130, 30, 70); // Right side of the hair // Draw the eyebrows using rectangles fill(0); // Sets the fill color to black for the eyebrows rect(155, 160, 30, 5); // Left eyebrow rect(215, 160, 30, 5); // Right eyebrow // Draw the neck using a rectangle fill(102, 67, 33); // Matches the skin-tone color rect(165, 300, 70, 25); // Draws the neck at (165, 300) with a width of 70 and height of 25 // Draw curves to represent the shoulders/chest area fill(102, 67, 33); // Matches the skin-tone color noStroke(); // Disable outline for the curves // Left curve beginShape(); vertex(140, 325); // Start point at the left bottom of the neck bezierVertex(80, 350, 80, 400, 140, 400); // Control points and end point for the left curve endShape(CLOSE); // Right curve beginShape(); vertex(260, 325); // Start point at the right bottom of the neck bezierVertex(320, 350, 320, 400, 260, 400); // Control points and end point for the right curve endShape(CLOSE); // Draw the rectangle to fill the gap between the curves fill(102, 67, 33); // Matches the skin-tone color rect(140, 325, 120, 75); // Draws a wider rectangle to fill the space between the curves // Custom wand cursor fill(0); // Sets the fill color to black for the wand handle rect(mouseX, mouseY, 5, 30); // Draws the wand handle as a small rectangle fill(255, 223, 0); // Sets the fill color to yellow for the wand tip ellipse(mouseX + 2.5, mouseY - 5, 10, 10); // Draws the wand tip as a small circle}