Month: September 2024

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.

 

Concept

What’s wrong with how are you?

There is nothing wrong with asking or answering how are you, so to speak. It’s just a way to break the ice, to open the conversation. It’s just a filling word for an empty greeting.

There is nothing wrong with how are you, but replying to or initiating countless ‘how are you’ every day can be overwhelming. I want to generate a piece that speaks to this kind of social anxiety. Also I realized that I have never played with text before so this will be a nice chance.

As user presses their mouth, the sentences are going to enlarge to occupy the whole screen, creating the sense of suffocation.  While enjoying the simplicity brought by B&W, I utilize a lot of randomness to make the page look too dull. The inspiration of the basic design comes from this example I found on p5.js website.

Highlighted codes & improvements:

Base on how we generated the bouncing ball, I created the words class in the word.js and called all the functions we set up in the sketch.js. Thanks to this Youtube tutorial, I also learned how to do fade-in fade-out action which is essential for my code.

// Method to fade in the word (255=black)
 fadeIn() {
   if (this.alpha < 255){
     this.alpha = this.alpha + this.fadeSpeed; // Increase transparency
   }
 }

 // Method to fade out the word
 fadeOut() {
   if (this.alpha > 0) {
     this.alpha = this.alpha - this.fadeSpeed; // Decrease transparency
   }
 }

I’m not entirely sure how to keep the text within the edges. I might run another if statement to improve that in the future or just by putting limits on this.x? Also, it would be interesting if the user could click on something to trigger the decrement of the sketch.

Things I wanna try out in the future: 2D collision and blendmode in color.

I found myself very entertained by this piece. Crawford’s tone was serious yet unserious, and his examples and references were quite funny to me. I was very shocked over the language and way he framed his words, but I’m not complaining about his writing style at all since it made it way easier for me to read and digest his points. The Boolean property comparison made my jaw drop.

After reading his piece, I learned that what he considers to be the characteristics of a strongly interactive system is the mutual ability to alternately listen, think, and speak. I do somewhat agree with this to an extent after reading his examples of what isn’t interactive, but I also feel like context, intention, interest, and bias of one party can play a much bigger role on how “interactive” something may be viewed as. For example, the difference between a little kid stumbling across your interactive portfolio website could find it to be a higher degree of interactivity than if a professor assigned her students to collectively view and critique the interactive portfolio. The student may have reasonings like jealousy or carelessness that could cause them to find the portfolio as “not interactive enough” because it doesn’t speak out to them. Meanwhile, the little kid might be fascinated with how this portfolio is basically like a short video game.

Just like a conversation, both sides must be interested in one another for it to flow, otherwise, it would be very one-sided and unwanted. There needs to be proper and authentic involvement and engagement between the two. This ties in with the author’s point of the different degrees of interactivity, rather than a concept of “one or the other.”

I find it really interesting how he exposed companies for claiming their products as “interactive” when they are just the same product. The word being tossed around so often under so many different meanings seemed to tick off the author.

Some very brief ideas I had to improve the degree of user interaction was to make my work intriguing from the get go. People’s attention spans have gone down so much, especially with the usage of social media, so I would have to grab their attention immediately if I want them to, in turn, willingly interact with my work. Another improvement would be to find a creative way to “bring out” the interactivity by viewing my piece in several possible lenses to get an assumption of how other people may react to it given their point of view. I’d like to increase the visual and auditory appeal of my work, and to also create content that is for more than one audience group. By this, I mean making it interactive so that it’ll listen and respond to other people’s interests to in turn, maintain and even increase their level of interaction and interest.

Sketch: 

Concept:

There wasn’t a specific artwork that inspired my piece, instead my inspiration just came from watching basketball over the  weekend. The artwork features a stickman dribbling a basketball, and the ball and stickman follows the horizontal movement of your mouse.

 

Code Highlight:

class Stickman {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.ly = y + 65;    //seperate variable for the left arm y to make it move
    this.lyspeed = 1;     //speed variable of left arm
  }

  show() {
    // Draw the stickman's body parts
    circle(this.x, this.y, this.size);                     // Head
    line(this.x, this.y + 37, this.x, this.y + 186);       // Body
    line(this.x, this.y + 186, this.x - 49, height);       // Left leg
    line(this.x, this.y + 186, this.x + 52, height);       // Right leg
    line(this.x - 2, this.y + 60, this.x - 81, this.ly);  // Left arm with moving ly
    line(this.x - 2, this.y + 60, this.x + 36, this.y + 112);  // Right arm remains static
  }

  move() {
    // Move the left arm
    this.ly = this.ly + this.lyspeed;
  }

  limit() {
    // Limit the arm movement between y+65 and y+80
    if (this.ly > this.y + 80 || this.ly < this.y + 65) {
      this.lyspeed = this.lyspeed * -1;  
    }
  }
}

This class I created was in charge of the stickman. Specifically I want to focus on the arm movement part of the code, which is the variables ly, lyspeed, and the functions move and limit. Initially I had all the variables for all four limbs be the same, which resulted in all four limbs moving at the same time in my sketch, which was not what I intended. Instead, i solved this issue my creating a separate variable that would only vary the y variable of the line that was being drawn, creating an illusion of hand movement, bouncing the ball.

Future Improvements:

One part of the assignment where I wasn’t able to figure out was how to connect the movement of the bouncing ball and the hand movement, to ensure they are always synced up. Right now, they are moving at different speeds, so the animation could go out of sync sometimes. I also want to improve by adding more functions, such as being able to shoot into the hoops.