Assignment 1: Self-Portrait in P5.js!

 

Concept

As part of the first assignment, I have produced an animated face, alongside a Captain America Shield, and a Flash Logo on a Canvas.

Flash has been a superhero that I have watched my entire childhood, and Captain America eventually became my favorite as I grew older and started watching Marvel Movies – I draw inspiration from the Captain!

Since my drawing skills are not that amazing, I wanted to sketch something that looked simple and clean. Hence, I went forward with representing things that I thought represent myself. Though I like simplistic things, I try to work towards perfection, and so I could not help but learn to add some interactivity on my Canvas that would draw the user’s attention and add complexity in the skills that would be needed to produce such a sketch.

Embedded Canvas

The final production for my assignment is as follows:

Code

For me, personally, a clean and understandable code is always admirable. Therefore, I am proud of the entirety of the well structured and commented code. However, there are certain sections that I would choose to highlight here.

The first segment of my code that could stand out was the usage of different functions to draw the different objects. This allowed me to structure my code, but also allow dynamic positioning of the objects on the canvas, instead of fixed positions. For this purpose, I had to have relative measurements within each function from a specific starting point. Therefore, in this manner, I have adapted my objects to be usable in place of even pngs or other graphics:

// Call to the function that draws the Iron Man Mask
face(ispx, ispy);

// Call to the function that draws the Captain America shield
captainAmerica(cspx, cspy);

// Call to the function that draws the Flash Logo
flash(fspx, fspy);

The way I positioned every element with a reference point is as follows:

// Function to Draw the Captain America Shield
function captainAmerica(cspx, cspy) {
  // To leave no strokes, and for smooth edges of the shield
  noStroke();

  // Drawing the border layer with 'Grey' for the entire sheild
  fill(192);
  circle(cspx, cspy, 385);

  // Drawing the red outermost circle
  fill(170, 20, 40);
  circle(cspx, cspy, 380);

  // Drawing the grey 'in-between' circle
  fill(192);
  circle(cspx, cspy, 325);

  // Drawing the innermost red circle
  fill(170, 20, 40);
  circle(cspx, cspy, 265);

  // Drawing the 'grey border' for the 'Blue' circle
  fill(192);
  circle(cspx, cspy, 205);

  // Drawing the inner 'Blue' circle
  fill(0, 0, 66);
  circle(cspx, cspy, 200);

  // Setting the grey color for filling the star
  fill(180);

  // Drawing the shape of the star with the following vertices
  beginShape();
  vertex(cspx, cspy - 100);
  vertex(cspx - 60, cspy + 80);
  vertex(cspx + 92, cspy - 40);
  vertex(cspx - 92, cspy - 40);
  vertex(cspx + 60, cspy + 80);
  vertex(cspx, cspy - 100);
  endShape(CLOSE);
}

Moreover, the computational logic for allowing the drag and drop of an object was something that also took some creative logical thinking. I researched and utilized the ‘mousePressed() and the mouseReleased() functions, coupled with the usage of an IF Statement.

function mousePressed() {
  // Checks if the mouse is pressed in the periphery of the Face,
  if (
    mouseX > ispx - 80 &&
    mouseX < ispx + 80 &&
    mouseY < ispy + 100 &&
    mouseY > ispy - 110
  ) {
    onface = true;
  }

function mouseReleased(event) {
  // If the face was being held, releases it on the mouse released position on the canvas
  if (onface == true) {
    onface = false;
  }

The following segment of the code is within the ‘draw’ function:

// Checks if the mouse is being held on the face,if so, it drags it along!
if (onface == true) {
  ispx = mouseX;
  ispy = mouseY;
}

Improvements

I certainly believe that my on-paper creativity, keeping the coding aspect aside, could be improved. The lack of an artsy touch in this canvas is evident, and that is something I could spend more time on!

The full canvas is linked here.