Month: September 2024

I totally agree with Chris Crawfords definitions and explanation of interactivity and how he breaks it down to three simple actions ; listening, thinking and speaking. While I found these insights  valuable, I felt like he downplayed the concept of unpredictability  in interactions. He relates good interactions to conversations, which I agree, but fails to acknowledge the fact that real conversations have moments of misunderstanding and confusion. How should a program  respond when it doesn’t comprehend user commands? This made me to think deep and come to appreciate the importance of having systems that handles unexpected interactions from users.

Other than that, I find it interesting how Crawford draws a fine line between reactive and interactive systems. Prior to reading I had often confused reactions to interaction, a perception which has now been changed. The way he puts interactive programs as ones that adapt and change based on user input has made me look into how I implement my user interactivity in future projects. I have learnt how incorporating adaptability helps to achieve deeper engagement with inputs by evolving dynamically instead of sticking to a rigid pattern.

Crawfords work has really challenged me and how I come up with my p5 works. I hope to use his ideas of interaction to ensure better user interactivity in my projects

Concept
My work was inspired by my exploration of recreating the kaleidoscopic visuals using the concept of optical art that I learnt from the artist Victor Vasarely. His works plays with perception and geometric patterns and color. His work inspired me to create infinitely evolving visuals that portray the kaleidoscope. I was also looking into exploring the concept of randomness in creating art as learnt from Casey Reas In the previous weeks reading.

Visual code
Click mouse to change color and press keys to change rotating speed.

Code Highlight

 
class Tile {
  constructor(x, y, w, h, size, col) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.size = size;
    this.angle = 0;  // Rotation angle
    this.growthSpeed = random(0.01, 0.03);  // Controls how fast size oscillates
    this.rotationSpeed = random(0.02, 0.05);  // Controls the rotation speed
    this.col = col;
  }

  // Update the size and angle of the tile
  update() {
    this.size += sin(frameCount * this.growthSpeed) * 2;  // Size oscillates over time
    this.angle += this.rotationSpeed;  // Rotate over time
  }

  // Display the tiles
  display() {
    push();
    translate(this.x, this.y);  //Move origin to center
    rotate(this.angle);  //rotate on angle
    fill(this.col);
    noStroke();
    rectMode(CENTER);
    rect(0, 0, this.size, this.size);  
    pop();
  }

  // color of tile
  changeColor() {
    this.col = color(random(255), random(255), random(255));
  }

  // increase/decrease rotation speed
  changeSpeed() {
    this.rotationSpeed += random(-0.03, 0.03);  // Change speed randomly 
  }
}

// Change colors of all tiles when the mouse is pressed
function mousePressed() {
  for (let i = 0; i < tiles.length; i++) {
    tiles[i].changeColor();  // Change color 
  }
}

// Modify the rotation speed of tiles when a key is pressed
function keyPressed() {
  for (let i = 0; i < tiles.length; i++) {
    tiles[i].changeSpeed();  // Change rotation speed 
  }
}

My code implementation was quite smooth since I took a simple approach. I am proud of how I implemented my class function in a very simple way.

Reflection/Future improvements
I am really proud of my progress so far. I have been able to be more creative in coming up with the art work and my implementation. I am also proud of how I have implemented the object oriented programming for the assignment. I have also incorporated user interactivity to my work which is really impressive. However, there is still room for improvement. In future works I would like to improve my user interactivity more and also work on having a 3D version. Overall I am proud with what I have been able to come up with

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.

Concept

Thinking of the interactivity aspect in my works, I have decided to explore video games that involve playing repetitively with similar characters. One of the first examples that came to my mind was Slither.io, so I have decided to create a work inspired by it. I started with the “Bubbles” code we have worked on in class, adding new parameters for controlling the bubbles and implementing the interaction from the user.

The final result is a reinterpretation of visuals and functionality of Slither.io – I have adjusted transparency of the background and the circles, so that the fading trace would be visible. There are three initial “snakes”, and as the user presses the mouse more of them appear on the screen. Furthermore, the bigger the radius of the circle, the faster it moves – just as the bigger snakes are more powerful in the video game.

Highlight of the code I am proud of

class Bubble {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
// setting up the radius of the bubble
    this.r = r;  
// setting up a random colour choice
    this.colour = [random(255), random(255), random(255)]; 
// setting up speed that depends on the bubble's size
    this.xSpeed = map(this.r, 5, 30, 3, 7);  
    this.ySpeed = map(this.r, 5, 30, 3, 7); 
  }

// movement of the bubble
  move() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;
  }

// bouncing off the canvas' edges
  bounce() {
    if (this.x > width - this.r || this.x < this.r) {
      this.xSpeed *= -1;
    }
    if (this.y > height - this.r || this.y < this.r) {
      this.ySpeed *= -1;
    }
  }

// displaying the bubble of with a trace of a certain opacity
  show() {
    noStroke();
    fill(this.colour[0], this.colour[1], this.colour[2], 150);
    ellipse(this.x, this.y, this.r*2);
  }
}

Working with randomised values took some time. As I was altering the code we have worked on in class with the professor, several parts had to be adapted to match my vision. I have watched a video tutorial to figure out how to set up the radius value, read a guide on using the map() function that allowed me to work with specific ranges of values, and a guide on the array methods in JavaScript. Setting up the Bubble class was the most challenging, but a very interesting part since I have researched and learned a lot in the process.

Sketch

Image 1: One of the stages of the visuals in my interpretation

Image 2: One of the stages of Slither.io video game

Reflection

I am satisfied with the final result of my work, as it matches my initial vision of how the interpretation of the game would look like. Moreover, I have managed to include interaction from the user and have learned several new functions by myself, so I am proud of the complexity of the code at this stage. It was difficult to figure out the setup of the randomised features and their interconnectedness, as I wanted the speed to depend on the radius.

However, in the future I would like to experiment more with the movement of objects, especially with their trajectories. Setting up an object following a direction that is not simply straight and predetermined would be one interesting path to go down.

 

Inspiration:

After attending both RealAD shows this past week, I haven’t been able to get the songs out of my head. RealAD is a theater performance that is offered every year, intended for First Years to know they’re not alone throughout their new college journey, as everyone has their ups, downs, bad, and good. The show being so relatable while remaining positive made it stand out to me since my Freshman year, so I was inspired to somehow implement it into my project. I ended up deciding to use a mix of the mini-projects we tested out to learn in class, and out came “Starry Self-Love.”

For the background of this piece, I got help from Rio’s code.

Concept:

“Starry Self-Love” is a rather simple piece, whose purpose is to be more mindful and caring rather than jaw-dropping. An empty canvas of a starry night sky lies ahead of the audience. When their mouse is clicked, a little self-care tip/reminder pops on screen that floats around and bounces off the edges of the screen. To remove the most recent tip, simply press any keyboard key.

The Piece:

Highlight:

The code I was most proud of was one that can’t do much on its own in p5.js, but can make a big impact on those reading it. It’s the array of self-care tips that I programmed to randomly appear on screen when the mouse is clicked. Being such a huge advocate of self-care and well-being, I find that this piece of code is what carries the project, as the lack of this code would change the concept and overall point of this piece.

// Array of Self-Care Tips
let tipList = ["Why are you competing? Get some sleep in",
"Practice self-care and personal time",
"I've got to make peace with my body",
"Set realistic goals. Burn out is real",
"Set boundaries with yourself and others around you",
"Getting no sleep is not an achievement",
"Spend time doing something you enjoy",
"Stay connected with friends and family",
"Do what makes you happy",
"It's okay to have cheat days",
"Celebrate even the smaller things in life",
"Remember to eat a balanced and nutritious diet",
"Learn to say no",
"Do what makes you feel comfortable",
"Try a digital detox",
"Find a balance in all aspects of your life",
"Out of my mind and into my body"
];

In case I needed to show a piece of “code-code,” this basic code that we learned in class was what I was second most proud of because it allows for the interactivity of the night sky.

function mousePressed() {
  
  let randomTip = random(tipList); // Choose a random tip
  let interactiveTipMovement = new TipMovement(mouseX, mouseY, random(-2,2), random(-2,2), randomTip); 
  movements.push(interactiveTipMovement);
}

  // Remove the last Self-Care tip when any key is pressed
function keyPressed() {
  movements.pop();
}

Reflection & Future Improvements:

This project took me a lot longer than I expected because I was trying so hard to make something cool and sophisticated. I ended up struggling a lot and having to come up with new project ideas. Eventually, I landed on this one because of a RealAD song stuck in my head.  In the last project, I tried sitting there making something from scratch without looking back at the slides that much. For this project, I used the slides and what I learned from class, which made it a lot easier and faster to complete.

Something I didn’t get to resolve was the randomness of the tips popping up. A lot of the time, the same tip pops up twice or even three times in a row even though not all of the phrases have been used yet. I would like to expand the list and fix that issue so that there would be a very slim chance of the same tip coming up twice. Additionally, almost a third of the text would get cut off on the side of the canvas before it “bounced off” the edge. I would want to fix it so the very first or last word would immediately bounce off.

In the future, I would like to make it more colorful and interactive. I would want to add a lot of cute small features, like a moon, meteor, and a planet in the distance.

 

Concept:

For this project I did my research more about generative artwork and I saw this picture from the following website: https://panopticon.am/generative-art/ Inspiration for my project

I really got inspired by this artwork, so I decided to create my project based on this piece. My idea was to loop squares on a black screen with random colors and when the mouse is clicked the squares start moving and if the mouse is clicked again the squares move faster, there are three different speeds and every time you click the speed changes from 1 to 3 to 10 to 1 and the cycle repeats.

Highlighted code:

// MovingSquare class
class MovingSquare {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.speedX = 0; // Initial horizontal speed
    this.speedY = 0; // Initial vertical speed
  }
  
  // Method to set the speed of the square
  setSpeed(speedX, speedY) {
    this.speedX = speedX;
    this.speedY = speedY;
  }
  
  // Move the square based on its current speed
  move() {
    // Move the square
    this.x += this.speedX;
    this.y += this.speedY;
    
    // Bounce back when hitting the canvas edges
    if (this.x <= 0 || this.x + this.size >= width) {
      this.speedX *= -1; 
    }
    
    if (this.y <= 0 || this.y + this.size >= height) {
      this.speedY *= -1; 
    }
  }

The part of code I am particularly proud of is the MovingSquare class. I am proud of this code because I was having difficulties while I was doing the in class exercise that was related to the classes. It was still quite difficult to use the classes in this project but with trial and error I did it.

Future Improvements:

For the future I wish I could bring the animation back to its static position where all the squares were aligned in a loop function after the mouse is pressed for the fourth time, I tried to do it in this project but it was quite hard to figure it out.