Yaakulya’s Assignment 1: Portrait using 2D Primitive Shapes

Concept: Since my childhood, I’ve been a big fan of Batman. Therefore, I decided that my concept for this assignment would be to create a stylized portrait of Batman using basic 2D shapes in P5.js. I aimed to capture the iconic features of Batman, such as his mask, ears, and expression, while keeping the overall design simple yet recognizable.

Highlight Code: One part of the code that I’m particularly proud of is the mouth drawing section where I depicted Batman’s calm neutral expression by simple Trapezoid shape instead of just putting some simple rectangle. This was achieved by using the beginShape() and endShape() functions to create a custom shape representing the mouth, emphasizing Batman’s facial expression. Moreover I’m also proud of the iconic text “I am BATMAN !” on the body, I achieved this by using textStyle()and textAlign() functions.

Here’s my Portrait:

Here’s my Code:

function setup() {
  createCanvas(800, 600);
  background('#81838C');
}

function draw() {
  // Mask
  fill('#262626');

  
  beginShape();
  vertex(220, 110);
  vertex(160, 320);
  vertex(210, 470);
  vertex(410, 508);
  vertex(390, 485);
  vertex(410, 508);
  vertex(610, 470);
  vertex(660, 320);
  vertex(600, 110);
  endShape(CLOSE);

  // Ears
  // Left
  beginShape();
  vertex(170, 235);
  vertex(220, 10);
  vertex(280, 100);
  endShape(CLOSE);

  // Right
  beginShape();
  vertex(650, 235);
  vertex(600, 10);
  vertex(540, 100);
  endShape(CLOSE);

  // Skin
  fill('#D3B296');
  beginShape();
  vertex(200, 380);
  vertex(230, 480);
  vertex(410, 508);
  vertex(590, 480);
  vertex(620, 380);
  endShape(CLOSE);

  // Mask
  fill('#262626');
  triangle(200, 380, 410, 400, 620, 380);

  // Eyes
  fill('#EFEFEF');
  ellipse(260, 320, 100);
  ellipse(560, 320, 100);

  // Nose
  fill('#333333');
  triangle(409, 340, 385, 392, 408, 395);
  triangle(411, 340, 435, 392, 413, 395);

  // Mouth (showing neutral expression)
  fill('#A85555');
  beginShape();
  vertex(300, 440);
  vertex(340, 470);
  vertex(480, 470);
  vertex(520, 440);
  endShape();

  // Shoulders
  fill('#262626');
  rect(200, 530, 400, 80);
  fill('#FFFF00'); // Yellow color
  textSize(18);
  textStyle(BOLD);
  textAlign(CENTER, CENTER);
  text("I AM BATMAN!", 400, 570);
}

Reflection and Ideas for Future Work or Improvements: Reflecting on this assignment, I’m proud of how I utilized basic shapes to create a recognizable portrait of Batman. However, there are areas for improvement and future exploration:

1. While the overall design captures the essence of Batman, refining the details such as adding more intricate features (Curves) to the mask and ears could enhance the likeness.

2. Exploring different color palettes and textures (batman logos and yellow emblem) could add depth and dimension to the portrait, making it more visually appealing.

3. Incorporating dynamic elements such as animations or interactive features (like cape flying behind) could bring the portrait to life and engage the viewer in a more immersive experience.

Overall, this assignment was a great opportunity to experiment with primitive 2D shapes and express creativity within the constraints of P5.js. Moving forward, I look forward to further refining my skills and exploring new techniques to create even more compelling artworks.