Concept
Unlike previous assignment, I was more confused on what kind of visual idea I could implement using arrays, classes and OOP. But, then I was reminded my love for Disney movies, and a complete picture came to my mind and I transferred it on paper.
Being obsessed with Inside Out 2 movie the whole summer had its own benefits, and it gave me the idea of creating a storage of memories in my code. I struggled a couple of days, failing to implement the functions and array concept we learned in class to my own work. After watching some videos on OOP in p5.js, I decided to implement the idea of random moving of circles in the form of “sense of self” that was present in the movie. In my vision, moving circles would symbolize the amount of experiences and emotional background the person accumulates, and with time it only expands.
What I’m Proud of
function setup() { createCanvas(500, 500); //circle animation for(let i=0;i<700;i++){ memories[i] = new Memory (250,400); } } //performing functions for an array for(let i=0;i<memories.length;i++){ memories[i].display(); memories[i].move(); }
// creating a class for moving circles class Memory { constructor (x, y) { this.x = x; this.y = y; } // creating a function for circles to move around randomly move(){ this.x = this.x + random (-2,2); this.y = this.y + random (-2,2); } // creating a function for visual of the circles display (){ stroke (251, 254, 151, 80); strokeWeight (2); noFill(); ellipse (this.x, this.y, 80, 80); } }
I think exactly the “Sense of Self” thing that I implemented is the one I am most proud of, because it took me couple of days to really understand what function each element performs and what its role. So I created a class and two function for it on separate files.
First sketch
Updated version
I updated my original sketch, utilizing the concepts we covered in the class, like push(), pop(), scale () function. I created a new array to implement interactivity for changing colors of the Sense of the Self, where each color represents the emotion from Inside Out, like ennui, sadness, fear, anger, anxiety, etc. I also moved the text line and scaled down the image of happiness to make it more aesthetically pleasing.
Reflection
Overall, I am proud of what I’ve accomplished with my code. You can see different emotions flowing into different directions, and then there is sense of self, which symbolizes character of the person and different emotional experiences. Moreover, I’ve added the sketch of the happiness image from the movie to add to the style.
However, I would like to work more the interactivity of my project. Currently, there is only way you can interact with the sketch, which is by changing color of Sense of Self. But I have some ideas of how I could develop it, for example adding memories balls to the lines when the mouse is pressed in particular location. Moreover, maybe I would elaborate on the concept of emotions, and work on more logical ways to show how different emotions evolve, like when happiness and sadness meet, there is a new emotion of nostalgia, something like that. I would also want to work on the similarity of my project to the movie’s reality, so it could be recognized from first seconds by viewers.