Month: September 2024

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.

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.

In my opinion, after reading the chapter, interactivity can be characterized as responsiveness and ability of the system to give a reaction in relation to the reaction given by the user (so when we say that movies are not interactive, it means that there is only reaction from the user and it is not processed by the movie itself). However, as was written in the chapter, I don’t know to what extent the features of conversation between two people are applicable as a basis of interaction features between an object and a user, because the quality will definitely differ. But, I do certainly agree that there are different levels of interaction, and their quality depends on how invested both of the actors are.  

I think the world today is more knowledgeable about interactivity, stemming from the fact that many companies try to make their products interactive. When I read about “If the movie were interactive, you might see our heroine pause and say”, it reminded me of how Netflix introduced interactive series on their platform, where viewers themselves decide what kind of action the character should do next. And the same thing actually is introduced in the books, where a reader, based on their choice, switches to specific pages to continue reading their chosen storyline. I think even though the interactivity of such products can be marked as low, it is still present there. 

Reflecting on the ideas, I thought about using buttons, as a form of interaction in my p5 sketches. Moreover, since I am the one who usually picks the style of the visual, maybe I can try making the user choose the color palette and style that they want to see as well. In that way, sketches will reflect choices the user makes.