Self Portrait: Assignment_01

Concept: The concept comes from my favourite childhood cartoon Masha and Bear. I always loved how the bear’s room looked so cozy and peaceful in the cartoon. As I grew older, I noticed my younger brothers acting mischievously, much like Masha. In response, I found myself playing a protective role similar to the Bear’s in the series. So, I choose the bear as my concept for this assignment and tried to create a stylized portrait of the bear using basic 2D shapes in P5.js. While the result may not be an exact replica of the Bear, I tried to capture the essence of his character as seen in cartoon.

Highlight Code: One part of the code that I’m particularly proud of is the drawing of the bookshelf. It’s my first time working with Java and doing a full sketch on P5.js, so I had to go through quite a few tutorials from this channel to understand basics of the drawings. I tried to code the bookself using loops technique from this video. I calculated the positions of the shelves and books using variables and loops. This method allowed me to place multiple shelves and books at regular interval but I had to go through a lot of trials and errors so took me quite some time to figure out how to work with the perspective drawing in P5.js. On my first try, I tried to make a 2D bookshelf, but that didn’t look satisfactory so I added some depth in the drawing using

Code:

function setup() {
  createCanvas(600, 500);
  setGradient(0, 0, width, height, color(255, 182, 193), color(255, 228, 225)); // Gradient background
  drawHelloKitty(); //function that I am using to draw the main character 
  drawBookshelf();
}

function drawHelloKitty() {
  noLoop();
  noStroke();

  // Draw face
  stroke(0);
  strokeWeight(0.2);
  fill("rgb(252,245,225)");   
  ellipse(200, 200, 180, 180); 

  // Draw ears
  fill('rgb(244,230,215)');
  ellipse(120, 130, 70, 70); // Left ear
  ellipse(280, 130, 70, 70); // Right ear

  //inner ear color

  fill(160, 82, 45); // Medium brown
  ellipse(120, 130, 50, 50); // Left inner ear
  ellipse(280, 130, 50, 50); // Right inner ear

  // eyes
  fill(0); 
  ellipse(170, 200, 22, 22); // Left eye
  ellipse(230, 200, 22, 22); // Right eye

  // Draw nose
  fill(160, 82, 45); // Medium brown
  ellipse(200, 230, 22, 18); // Nose

  // Draw mouth
  
  stroke(0);
  strokeWeight(2);
  noFill();
  arc(200, 245, 50, 25, 0, PI); // Mouth

  // Draw whiskers
  
  stroke(0);
  strokeWeight(2);
  line(100, 200, 50, 190); // Left whisker 1
  line(100, 210, 50, 210); //2
  line(100, 220, 50, 230);  //3

  line(300, 200, 350, 190); // Right whisker 1
  line(300, 210, 350, 210); //2
  line(300, 220, 350, 230); //3

  
  // Drawing body
  fill(255, 0, 0);
  stroke(0);
  strokeWeight(2);
 
  fill(160, 82, 45);
  ellipse(200, 480, 260, 400);
  stroke(0);
  strokeWeight(2);
  fill("rgb(250,204,109)")
  rect(155, 270, 90, 100);


  // hand details
  fill('rgb(252,245,225)'); 
  ellipse(140, 300, 70, 40); // Left hand
  ellipse(260, 300, 70, 40); // Right hand 
  
stroke(0); 
  
strokeWeight(2); 

  // lines for left hand
line(140, 295, 170, 290); // First finger
line(140, 305, 173, 305); 
line(140, 315, 165, 315); 
  
// lines for right hand
line(228, 295, 265, 297); // First finger
line(225, 305, 265, 305); 
line(240, 315, 266, 315); 
}

function drawBookshelf() {
  // Adjusted position of the bookshelf
  const shelfX = 400;
  const shelfY = 150; 
  const shelfWidth = 160;
  const shelfHeight = 360;
  const shelfThickness = 19;
  
  // Draw the bookshelf
  fill(150, 75, 0); // Wood color
  rect(shelfX, shelfY, shelfWidth, shelfHeight); // Main body of the bookshelf
  
  // Draw the shelves
  fill(120, 60, 0); // Slightly darker wood color
  for (let i = 1; i <= 5; i++) { // Adjusted to have more shelves
    rect(shelfX, shelfY + i * 60, shelfWidth, shelfThickness); // Horizontal shelves
  }
  
  // Draw the sides for depth
  fill(100, 50, 0); // Darker wood color for sides
  beginShape();
  vertex(shelfX, shelfY); // Top left corner
  vertex(shelfX + 10, shelfY - 10); // Slightly to the right and up
  vertex(shelfX + 10, shelfY + shelfHeight - 10); // Down to the bottom
  vertex(shelfX, shelfY + shelfHeight); // Back to the bottom left corner
  endShape(CLOSE);
  
  beginShape();
  vertex(shelfX + shelfWidth, shelfY); // Top right corner
  vertex(shelfX + shelfWidth + 10, shelfY - 10); // Slightly to the right and up
  vertex(shelfX + shelfWidth + 10, shelfY + shelfHeight - 10); // Down to the bottom
  vertex(shelfX + shelfWidth, shelfY + shelfHeight); // Back to the bottom right corner
  endShape(CLOSE);

  // Draw the books
  fill(200, 0, 0); // first row
  drawBook(shelfX + 10, shelfY + 60, 40, 80);
  drawBook(shelfX + 60, shelfY + 60, 40, 80);
  drawBook(shelfX + 110, shelfY + 60, 40, 80);
  
  fill(0, 200, 0); // second row
  drawBook(shelfX + 10, shelfY + 130, 40, 80);
  drawBook(shelfX + 60, shelfY + 130, 40, 80);
  drawBook(shelfX + 110, shelfY + 130, 40, 80);

  
  
  // a quote below the bookshelf
  fill(0); 
  textSize(18);
  stroke(0);
  strokeWeight(0);
  textFont('Arial');
  textStyle(NORMAL);
  textAlign(CENTER);
  
 // Text lines
let line1 = "Read,";
let line2 = "Masha!";

// position of the quote
text(line1, width / 3, 320); 
text(line2, width / 3, 340); 
  
}

function drawBook(x, y, w, h) {
  fill(255);
  rect(x, y, w, h); 
  fill(0); 
  rect(x + 10, y, 20, h); //the book spine

}

function setGradient(x, y, w, h, c1, c2) {
  noFill();
  for (let i = y; i <= y + h; i++) {
    let inter = map(i, y, y + h, 0, 1);
    let c = lerpColor(c1, c2, inter);
    stroke(c);
    line(x, i, x + w, i);
  }
}

P5.js Sketch:

Reflection and ideas for future work or improvements:

I felt as a beginner I learnt a lot while doing this basic shape based portrait. From brainstorming to implementing, I changed some ideas, colors and techniques but at the end, I am pretty happy with this little drawing. However, there are areas for improvement and future exploration.

The bear doesn’t look or match with the bear color from the cartoon, so it can be enhanced by using different color pallets from rgb colors. The face shape of the bear can be refined a bit more with some curves to give a bear like feature.  Interactivity can be added into this portrait to make it more appealing and fun. The color combination makes the brown color heavy on eyesight, it can be changed as well.