Assignment 1: Self-portrait

For this assignment, we were tasked to create a self-portrait using p5.js. In the class, we worked with different shapes and how to check x and y positions on the canvas so that it was easier to place our shapes. I wanted to think about creating something that was really representative of me while also making it fun. So, after going through a couple of ideas, I decided to create a self-portrait of me in my snowboarding attire, with some subtle animation and interactivity on the side.

In the portrait, you can see me in full snowboarding gear with snow falling down. I’m particularly proud of the animated snowflakes because it did take me a bit to animate it. The logic behind it is composed of 4 key elements. First, I initialize/declare an array of snowflakes with the necessary key parameters: x, y, and the size.

let snowflakes = [
  { x: 250, y: 50, size: 20 },
  { x: 50, y: 50, size: 30 },
  { x: 80, y: 90, size: 15 },
  { x: 150, y: 120, size: 30 },
  { x: 200, y: 200, size: 15 },
  { x: 220, y: 1500, size: 20 },
];

Second, in the last part of the draw() function, I include a for loop to create snowflakes based on the specifications of the list of snowflakes. In addition, if the y coordinate of the snowflake is bigger than the height, it is reset to 0 and the x coordinate is randomized:

for (let i = 0; i < snowflakes.length; i++) {
  let snowflake = snowflakes[i];
  drawSnowflake(snowflake.x, snowflake.y, snowflake.size);
  snowflake.y += 1; 
  if (snowflake.y > height) {
    snowflake.y = 0;
    snowflake.x = random(width);
  }
}

The drawSnowflake function utilizes the x, y, and size parameters passed to actually create the snowflake shapes by drawing 6 “arm” lines and 6 perpendicular smaller lines through a for loop. I learned that I need to push() to save the current transformation matrix and then pop() to restore it, such that each snowflake is drawn independently without affecting the transformations applied to other snowflakes or elements on the canvas.

function drawSnowflake(x, y, size) {
  stroke('white');
  strokeWeight(2);

  for (let i = 0; i < 6; i++) {
    push();
    translate(x, y);
    rotate(i * PI / 3);
    line(0, 0, size, 0);
    line(size * 0.5, -size * 0.2, size * 0.5, size * 0.2);
    pop();
  }
}

A fun little Easter Egg is that you can click on my ski mask to remove it to reveal my face! : -> Have a look: