Assignment 1: (self) Portrait – Aneeka

(Click on screen- Audio on)

For this assignment, I initially wanted to create a self-portrait. However, I didn’t like the idea of recreating myself using basic shapes because they could never encompass some of my features. I was then thinking of a character that I would like to create a portrait of. I decided on the character Satoru Gojo from the anime Jujutsu Kaisen for two reasons: one being that I’m currently obsessed with the show, and second being that he covers his eyes usually with a blindfold which meant that I didn’t need to spend time on creating eyes.

I chose mostly simplistic features so that my code doesn’t become too complex. The portrait was inspired by this particular scene below.

I decided to animate the background as a moving gradient. The direction of the gradient switches after a while. I was inspired by this code: https://editor.p5js.org/stalgiag/sketches/webaJ2Dpe and I modified the algorithm to move the gradient downwards and change the colors (pink was to refer to the scene, blue was to refer to his bright blue eyes under the blindfold). This is the part of my code that I wanted to highlight since it added a different dynamic to my portrait.

if (startColor > height + 255 || startColor < 255) {
    speedAnimate *= -1; } //reversing direction if goes beyond screen
  startColor += speedAnimate;
  let numRectangles = 21;
  let rectHeight = height / numRectangles;
  for (let y = 0; y < height; y += rectHeight) {
    let pinkShade = startColor - y; //calculates  pink shade based on the distance from the top of the canvas.
    let red = 255-pinkShade; // Adjust red color to create gradient
    fill(red, 191, 210); 
    rect(0, y, width*2, rectHeight);
  }

I also wanted to add an interactive feature. When one clicks on the portrait, it plays the character’s signature laugh. I used this tutorial to add the audio: https://www.youtube.com/watch?v=MDX5VaMOzZg

Overall, I am happy with the result and how some features such as the hair turned out. If I had to improve on this particular portrait, I would try to add shading and more details. I would also add an alternate version of him without the blindfold. Furthermore, I want to experiment more with animation and audio in future assignments.