Week 1 | Self-Portrait Assignment: Luna 🐈‍⬛

Portrait:

Concept:

For this assignment, I attempted my first-ever p5.js project, creating a self-portrait of my beloved cat, Luna. As a beginner, I relied on tutorials and lecture notes to learn how to craft different shapes and apply colors effectively.  This project marked the beginning of my journey into coding, and I enjoyed the challenge of capturing Luna’s character on the canvas.

Code:

This is my code. I’ve aimed to keep it well-organized while providing step-by-step explanations for clarity in understanding the outcome.

function setup() {
  createCanvas(400,400);
  background('orange');
 
}

function draw(){
  
  //luna's head
  fill('gray');
  noStroke();
  ellipseMode(CENTER);
  ellipse(200, 200, 150, 150);
  fill('');
  
  //luna's body
  fill('gray');
  noStroke();
  arc(205, 320, 150, 150, PI, TWO_PI);
  rect(130, 320, 150, 150);
  
  
  //luna's left ear
  fill('gray');
  triangle(160, 140, 180, 80, 200, 140);
  fill('white'); triangle(170, 135, 180, 85, 190, 135);
  
  
  //luna's right ear
  fill('gray');
  triangle(240, 140, 220, 80, 200, 140);
  fill('white');
  triangle(230, 135, 220, 85, 210, 135);
  
  //luna's eyes + puplis
  fill('white');
  ellipse(170, 180, 35, 35);
  ellipse(230, 180, 35, 35);
  
  fill('black');
  ellipse(170, 180, 20, 20);
  ellipse(230, 180, 20, 20);
  
  //luna's nose
  fill('pink');
  triangle(200, 190, 195, 200, 205, 200);
  
  //luna's mouth
  stroke('black');
  strokeWeight(2);
  noFill();
  arc(200, 220, 80, 40, 0, PI);

  //luna's left whiskers
  line(150, 200, 110, 195);
  line(150, 210, 110, 205);
  line(150, 220, 110, 215);
  
  //luna's right whiskers
  line(250, 200, 290, 195);
  line(250, 210, 290, 205);
  line(250, 220, 290, 215);

}

Reflection:

This code was a journey filled with challenges. It took time and dedication to overcome errors, and I spent hours reviewing tutorials and lecture notes. Despite the difficulties, I’m proud of the final outcome.

Leave a Reply