Assignment #1 – Self Portrait | Rashed Alshamsi

For this assignment, I did not want to recreate an image of myself, but I also wanted to add elements of my personality. One thing everyone knows about me is my ongoing passion for music; I collect vinyl records, CDs, and Cassettes. I cannot go anywhere without my headphones and I thought it would be a great idea to include that particular element as well as my ongoing love for music in my self-portrait.

I was particularly proud of the animated musical notes. Originally, I was not planning on animating them but I wanted to challenge myself to try and play around with creating variables and the “If()” function. I initially knew how to animate them but I did not know how to have them bouncing back and forth in the same location. I resorted to YouTube and watched a tutorial on how to animate in P5.js https://youtu.be/s2PZvaP4dSg?si=Q81GurZ6GAjqfVSs . Even after watching the video, I did not know how I could animate multiple variables at the same time that could move altogether. I then realized I could add the condition that if the variable “MusicNoteY1” would exceed a certain point, it would have the variable “ySpeed” equal negative “ySpeed” which would make it move in the opposite direction. Then I had all other music note variables move in their own value + ySpeed which had them all move together.

//Variables
let MusicNoteY1 = 130
let MusicNoteY2 = 70
let MusicNoteY3 = 120
let MusicNoteY4 = 60
let MusicNoteY5 = 81
let MusicNoteY6 = 69
let MusicNoteY7 = 55
let MusicNoteY8 = 70
let MusicNoteY9 = 395
let MusicNoteY10 = 335
let MusicNoteY11 = 330
let MusicNoteY12 = 350
let MusicNoteY13 = 360
let MusicNoteY14 = 341
let ySpeed = 2

function setup() {
  
  createCanvas(500, 500);
}
function draw() {
  background(104,191,255);
  
  //Grass
  noStroke();
  fill(157,231,121)
  arc(250, 500, 700, 250, PI,0,OPEN)
  
  print(mouseX + "," + mouseY);
  
  //Musical Note
  fill('black')
  ellipse(40,MusicNoteY1, 35,25);
  rect(48,MusicNoteY2, 10,60);
  ellipse(92,MusicNoteY3, 35,25);
  rect(100,MusicNoteY4, 10,60);
  quad(48,MusicNoteY5,48,MusicNoteY6,110, MusicNoteY7,110,MusicNoteY8)
  ellipse(442,MusicNoteY9, 35,25);
  rect(450,MusicNoteY10, 10,60);
  quad(450,MusicNoteY11, 450, MusicNoteY12, 474, MusicNoteY13,477,MusicNoteY14);
  MusicNoteY1 = MusicNoteY1 + ySpeed
  MusicNoteY2 = MusicNoteY2 + ySpeed
  MusicNoteY3 = MusicNoteY3 + ySpeed
  MusicNoteY4 = MusicNoteY4 + ySpeed
  MusicNoteY5 = MusicNoteY5 + ySpeed
  MusicNoteY6 = MusicNoteY6 + ySpeed
  MusicNoteY7 = MusicNoteY7 + ySpeed
  MusicNoteY8 = MusicNoteY8 + ySpeed
  MusicNoteY9 = MusicNoteY9 + ySpeed
  MusicNoteY10 = MusicNoteY10 + ySpeed
  MusicNoteY11 = MusicNoteY11 + ySpeed
  MusicNoteY12 = MusicNoteY12 + ySpeed
  MusicNoteY13 = MusicNoteY13 + ySpeed
  MusicNoteY14 = MusicNoteY14 + ySpeed
  
  if (MusicNoteY1 > 180) {
  ySpeed = -ySpeed;  
  }
  if (MusicNoteY1 < 100) {
    ySpeed = -ySpeed;
  }

I am looking forward to adding an interactive element to my work in the future.