After joining the Intro to Interactive Media course on the second lecture, I already felt as though I had fallen behind and missed out on the most important basics that we needed to know for our first assignment. Nevertheless, I took this as an opportunity to try and discover the basic features of p5.js on my own.
Our first assignment is to create a self-portrait in p5.js. As I began brainstorming what I wanted to create, I looked outside my window, viewing the Abu Dhabi city skyline, and an idea struck me. I reflected on the past two years of my life and realized that I have traveled to over 15 different cities and towns after having to leave my home in Ukraine. This idea inspired me to create a self-portrait of myself behind various city skylines.
Initially, I began by creating numerous rectangles of varying shapes and colors; however, once my code reached over 70 lines for just the background, I realized that there had to be a different way to implement my idea into the code. I remembered from my time trying to self-study Python the concept of loops. Though unknown to me in the p5.js environment, I looked through the reference section and learned more about the “for” loop. After numerous failed attempts, including an infinite loop that crashed the website, I was able to create a look that generated a random city skyline upon running the code.
Nevertheless, my exploration did not stop there, and after getting closer to the final code, I realized that the randomly generated city skyline would go unnoticed if my self-portrait wasn’t interactive. Specifically, I wanted the skyline to regenerate upon each mouse press. This pushed me to look further into how this would be possible and I realized that I have to create a separate function to generate the skyline, which I could then connect with the mouse pressing functionality.
Despite many efforts to create a separate function to do what I wanted it to, I couldn’t get it to work. Nevertheless, as I was experimenting with my code, I got it to create an interesting and fast-paced loop that would regenerate the city skyline extremely fast. This inspired me to modify my concept for the self-portrait. Since I left Ukraine, I haven’t felt completely at home anywhere, thus I decided to transform my first assignment for the Interactive Media into a reflection on how I currently perceive home.
Though I am sure my code could be written in a much better way, I am still proud for being able to create an interactive self-portrait which also reflects upon certain aspects of my life. This text of code was the hardest for me to figure out:
//randomly generated city skyline upon mouse pressed
if (mouseIsPressed) {
background(246, 235, 144);
for (X = 0; X < 600; X++) {
X = X + 30;
fill(random(BC));
noStroke();
rect(X, Y, random(width), random(height));
}
}
Final Self-Portrait “HOME?” in p5.js:
Overall, despite the challenges I faced whilst learning JavaScript from complete zero, I am well satisfied with my result and I enjoyed this project a lot. I am looking forward to learning more about how to improve my code, as well as increase its complexity, and work with interactive and animation elements.