Author: Dachi Tarughishvili

For this assignment, I wanted to create a self portrait that not only resembled the way I looked like but also had an alternative appearance which would be activated using interactive component. Last year, I went to Halloween party where I dressed as character called Walter White from a TV show called Breaking Bad. I added a button (titled “Say My Name”) which repeats the iconic dialogue from one of the show’s most important episodes . This button also acts as a toggle for transformation between enlarging strokes, as well as changing the background color, shirt color, adding glasses, a hat, removing hair, adding a beard etc. It also activates iconic music from the show as soon as it’s pressed.

This is the part where everything happens and all the classes are activated from. As such, it is the most important part of my code and also handles the audio (it is a toggle button hence I want it to toggle between two states, and therefore I need several checks and booleans). Although I would say getting the shapes right and drawing them proportionally was equally hard to do. Fortunately, I had experience with P5 before which is why I wanted to add more stuff than it was initially proposed in the assignment. Overall, I really enjoyed making this portrait and hope you like it. In the future, I could potentially add more interactive components in the background or some dynamic elements like eyes that follow a mouse cursor.

function toggleTransform() {
  hatvisible = !hatvisible;
  toggleGlasses();
  toggleHair();
  toggleBeard();
  toggleShirtColor();
  toggleBackgroundcolor();
  displaytext = !displaytext; 
  if (songcheck == false) {
    song.play();
    songcheck = true;
  } else {
    songcheck = false;
    song.stop();
  }
}