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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//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;
}
//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; }
//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.

 

Leave a Reply