Self Portrait 2.0 - HW

Date: Sunday, 07/12/2026

Class: Creative Coding (IMALR-GT 102)

Section: 002 (Carrie)

Name: Janice Vuong

Week: Week 1

A link to your working sketch: https://editor.p5js.org/basicallyjanice/sketches/luPuSxCz0

A paragraph describing your process. What worked? What didn’t work as planned? What issues did you encounter and how did you solve them?

I first started using the function random() in my code to change the background to a random color. It later was a boring change (boring to me), because fill(random(255)); mostly gave me different shades of grey (which! I did remember from class, but for some reason, I was still hoping to get some color.

I later decided to change the background color to the shade: “Thistle” I found from:

HTML Color Codes Color Names

Issues I encountered:

I was trying out different shapes, to have the element that responds to the mouse using mouseX and/or mouseY

I tried square()

Which gave me this, distortion-like effect (I realize the shape wasn’t dissapearing?)

I also tried triangle(mouseX, mouseX, mouseX, mouseY, mouseY, mouseY);

That one was cool, because the triangle would change size diagonally only, because I kept some variables the same.

p5.js Web Editor

I landed back to circle() for the element that would utilize MouseX and MouseY

Following the reusable code template from Week 01, Using system variables, I copied the code line of:

circle(mouseX, mouseY, width / 50);

I adjusted the diameter to be width / 10

but it still looked too big on my canvas

I later adjusted to width / 50, which meant the diameter of the circle was 1/50th of the width of the canvas, and it looked much less distracting since now I also made the color of the circle to be random!

Did any code-related questions come up for you?

Yes! I’m not sure why :_( when mouse is moving around, that the shape (circle) I have decided for my mouse, in my code isn’t disappearing??

Self-Portrait Code 2.0 by jan

function setup() {
  createCanvas(400, 400);


  // constants
  center = 200

  // use degrees as units for angles
  // the arc() function uses angles
  angleMode(DEGREES);

  // 2.0 edits, change the background to shade called Thistle
  background('Thistle');
}

function draw() {
    // constants
  center = 200

  // use degrees as units for angles
  // the arc() function uses angles
  angleMode(DEGREES);


  // my head
  // ellipse(center, center, 100, 100);
  fill("#FBCEB7");
  //skintone taken from passport photo
  arc(center, center, 100, 100, 180, 0);
  arc(center, center, 100, 115, 0, 180);

  //my eyes and lashes
  fill(51);
  ellipse(center+15, center+5, 10, 10);
  arc(center+18, center-2, 10, 10, 10, 90, OPEN);
  //left eye
 ellipse(center-15, center+5, -10, -10);
  arc(center-18, center-2, -12, -10, -10, -290, OPEN);
  //left lash needs to be fixed

  // my smile :)))
  arc(center, center+35, 15, 10, 0, 180, OPEN);

  // lil nose
  noFill();
  arc(center, center+15, 5, 15, 60, 200, OPEN);
  

  // hair portion right
  // front bangs
  fill(51);
  stroke(51);
  //seperation line
  line(center, center-50, center+50, center)
  //half ellipse
  arc(center, center, 100, 100, -90, 0, OPEN); 
  //other half of the ellipse
  arc(center+50, center-50, 100, 100, 90, 180, OPEN);
  //left bang seperation line
  line(center, center-50, center-50, center)
  //top half-left ellipse portion
  arc(center, center, 100, 100, 180, -90, OPEN);
  //bottom half-left ellipse portion
  arc(center-50, center-50, 100, 100, -360, 90, OPEN);

  
  // curly hair strand
  noFill();
  arc(center+60, center+0, 20, 180, 80, 150);
  //arc(center+60, center+0, 40, 180, 75, 90);
  arc(center-60, center+0, -20, -180, -30, -260);
//2nd last number is straight portion hair strand, and last number is curl angle portion

    noStroke();
  fill(random(180));
  //2.0 edits makes the color of the circle, a random color from 0-180 shades
  
  circle(mouseX, mouseY, width / 50);
  //2.0 edits diameter being 1/50 of the width of the canvas
}