For this assignment, I decided to do a simple portrait as it was my first time coding. However, I did want to play around with the background and try new codes, so I decided to do a background that changes color at random when you toggle around the mouse. At first, I thought it was too hard, and it took me time to figure out the codes, but I watched some tutorials on YouTube and went over the presentations in class, and I finally figured it out and was definitely proud of the outcome. I honestly found it difficult to figure out the shapes and where everything goes, but the Mouse X and Y function was a lifesaver, and it was a matter of getting the hang of it. The hair, however, was my least favorite part as it was getting really confusing with the placements of each circle. Maybe there was an easier way instead of just repeating each circle in a different location, so hopefully, I will figure it out in the future. Overall, after a long process of figuring out each shape, size, and code I’m happy with the outcome.
here is the background code which I am most proud of:
let x, y, r, g, b; function setup() { createCanvas(400, 400); } function draw() { // background that changes color background(mouseX, mouseY, 100, 7); r = random(0, 255); g = 0; b = random(0, 255); x = random(0, 600); y = random(0, 400); noStroke(); fill(r, g, b, 100); circle(x, y, 24);
here is my portrait!
here is the code:
let eyeRX = 170; let eyeLX = 225; let speed = 15; let x, y, r, g, b; function setup() { createCanvas(400, 400); } function draw() { // background that changes colour background(mouseX, mouseY, 100, 7); r = random(0, 255); g = 0; b = random(0, 255); x = random(0, 600); y = random(0, 400); noStroke(); fill(r, g, b, 100); circle(x, y, 24); print(mouseX + "," + mouseY); //neck fill(240, 190, 120); stroke(0, 0, 0); strokeWeight(1); rect(200, 280, 70, 150, 100); // left ear fill(240, 190, 120); stroke(0, 0, 0); strokeWeight(1); circle(135, 177, 25); // right ear fill(240, 190, 120); stroke(0, 0, 0); strokeWeight(1); circle(264, 177, 25); // face fill(240, 190, 120); stroke(0, 0, 0); strokeWeight(1); ellipse(200, 160, 125, 185); //nose noFill(); arc(199, 183, 20, 15, 270, 90); // hair noStroke(); fill(46, 28, 17); // top hair circle(140, 60, 40); circle(183, 95, 40); circle(205, 88, 40); circle(160, 100, 40); circle(170, 50, 40); circle(200, 40, 40); circle(230, 50, 40); circle(233, 94, 40); circle(260, 60, 40); // More top curls fill(46, 28, 10); circle(160, 80, 40); circle(190, 70, 40); circle(220, 70, 40); circle(250, 80, 40); // Left side curls fill(46, 28, 17); circle(130, 90, 40); circle(120, 120, 40); circle(134, 135, 40); circle(142, 113, 40); // Right side curls fill(46, 28, 17); circle(270, 90, 40); circle(280, 120, 40); circle(262, 134, 40); circle(256, 115, 40); // eyebrows stroke(21, 19, 19); strokeWeight(2); noFill(); arc(170, 135, 30, 10, PI, TWO_PI); arc(225, 135, 30, 10, PI, TWO_PI); //right eye fill(255); ellipse(eyeRX, 150, 20, 20); //left eye fill(255); ellipse(eyeLX, 150, 20, 20); //right pupil fill(51, 0, 0); ellipse(eyeRX, 150, 10, 10); //left pupil fill(51, 0, 0); ellipse(eyeLX, 150, 10, 10); // mouth up strokeWeight(1); fill("pink"); rectMode(CENTER); arc(200, 209, 30, 15, PI, 0); // mouth down strokeWeight(1); fill("pink"); rectMode(CENTER); arc(200, 209, 30, 15, 0, PI); // lip line arc(200, 210, 27, 1, 0, PI); //shirt fill(126, 167, 189); noStroke(); rect(200, 380, 199, 200, 50); // shirt neck line fill(240, 190, 120); noStroke(); arc(200, 280, 90, 80, 0, PI, CHORD); // short neck shadow noFill(); strokeWeight(8); stroke("#212E2D"); arc(200, 280, 90, 80, 0, PI); noStroke(); fill(64, 102, 122); triangle(128, 315, 135, 400, 150, 400); triangle(265, 315, 267, 400, 250, 400); }