Assignment 3 – An array of Memories

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.