Category: F2024 – Aya

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.

Concept:

• As someone who occasionally plays first-person shooter games and is admittedly very bad at them, Aimlabs is a great tool for honing my aiming skills with a mouse. The most common mode of training in Aimlabs involves clicking on a number of orbs that are suspended mid-air; with each well-placed click, the targeted orb disappears and a new one appears in another position. Since I haven’t incorporated any interactive elements in my previous assignments, I decided to challenge myself by roughly recreating Aimlabs in p5js.

Highlight:

• A challenge I faced during this project involved setting up the mousePressed() function so that orbs are replaced with new ones when clicked on. Since the coordinates of the orbs are randomized in the Orb class, I was unsure how to reference their current coordinates in the main sketch while trying to calculate the distance between the mouse and the center of the orb at the time of the click. I ultimately set up a clickPos() function within the Orb class that checks if the distance of the mouse from the orb center is less than the orb’s radius. Then, I simply referenced clickPos() within the if statement of the mousePressed function in the main sketch.

let orbs = [];

function setup() {
  createCanvas(400, 400);
  for (let i = 0; i < 5; i++) {
    orbs[i] = new Orb();
  }
}

function draw() {
  background(0);
  print(mouseX + "," + mouseY);
  noStroke();
  fill(90);
  quad(0, 0, 400, 0, 340, 100, 60, 100);
  fill(160);
  rect(60, 100, 280, 230);
  fill(130);
  quad(0, 0, 60, 100, 60, 330, 0, 400);
  quad(340, 100, 400, 0, 400, 400, 340, 330);
  fill(195);
  quad(60, 330, 340, 330, 400, 400, 0, 400);

  for (let i = 0; i < orbs.length; i++) {
    orbs[i].display();
  }
}

function mousePressed() {
  for (let i = 0; i < orbs.length; i++) {
    if (orbs[i].clickPos()) {
      orbs[i] = new Orb();
    }
  }
}


class Orb {
  constructor() {
    this.x = random(50, 350);
    this.y = random(50, 350);
    this.diameter = 70;
    this.color = color("rgb(167,226,241)");
  }

  display() {
    fill(this.color);
    stroke('#2CA9C9');
    strokeWeight(3);
    ellipse(this.x, this.y, this.diameter);
  }
  
  clickPos(){
    let d = dist(mouseX, mouseY, this.x, this.y);
    return d < this.diameter/2;
  }
}

Sketch:

Try clicking on the blue orbs!

Reflection and Future Improvements:

• Overall, I’m proud of myself for managing to incorporate an interactive element despite how intimidating it felt at first as a beginner. However, this project isn’t the most accurate when compared to the actual Aimlabs. In my sketch, the orbs are static while the cursor is free to move around to click on the orbs. In Aimlabs, however, the cursor is fixed on the center of the screen as a crosshair; while the crosshair remains static on screen, the orbs move in relation to the movement of the crosshair even though they are supposedly static as well. In the future, it would be interesting to recreate this so that the program feels three-dimensional and more immersive.

Concept

I aimed to build on my previous assignment by creating flowers using the lollipop example from class and crafting a bee inspired by the bouncing ball technique. Having already created a tree, I wanted to continue developing this theme.

Sketch

press to move the bee

I chose the color of flowers to be this pink/magenta shade because there use to be a similar flower that would bloom very high we could never pick them as kids.

Highlight
My original bee looked like this. I couldn’t figure out how to get the bee to look like how I originally wanted it to. But then I remembered that I could -/+  this.x/this.y and it worked. I’m happy with the current bee especially since looking back, this one just looks weird.

show() {
  // bee's wing
  fill("#D5EBEE");
  stroke("#EBFAFC");
  ellipse(this.x - 3, this.y - 15, 15, 23);
  ellipse(this.x + 6, this.y - 15, 17, 24);

  // bee's body
  stroke("#E7D534");
  strokeWeight(3);
  fill("#FFEB3B");
  ellipse(this.x, this.y, 40, 30);
  
  // bee's stripes
  fill("rgb(15,15,15)");
  noStroke();
  ellipse(this.x, this.y, 3, 30);
  ellipse(this.x - 8, this.y, 3, 25);
  ellipse(this.x + 8, this.y, 3, 25);
  ellipse(this.x + 15, this.y, 3, 20);

  // bees' eye
  stroke(0);
  point(this.x - 15, this.y - 2);
}

I got the petals to rotate from Fasya Rahmadhani ‘s rotating strawberries.

Reflection

Overall I’m happy with the final piece. I did want to add the push/pop function to add/remove bee’s but they ended up just following each other. When I added the bee after the flowers the flowers shifted, I used chat gbt to figure out what went wrong, I ended up needing to add push(); and Pop(); to restore the transformation and style to isolate them from translate() and rotate().

For future improvements I wish to make It way more interactive. like adding/removing bees but also using the mouse pressed and key pressed function for visual changes.

 

While it may be obvious that anything “interactive” should involve two parties that engage with each other with inputs and outputs, I found the article’s discussion of the varying degrees of interactivity to be very interesting. The most accepted definition for interactivity also happens to be too broad, generous to a degree where one can define the act of using a refrigerator as an interactive activity despite there being no meaningful outcomes; a high-level interaction should go beyond programmed responses.

Video games are obvious examples for interactivity, but there is one game that I think truly exemplifies the author’s expectations for high-level interaction — Alien: Isolation. The author argues that for an interaction to be high-level, “both actors…must perform all three steps [of] listening, thinking, and speaking…well” (Crawford 7). The impeccable programming of Alien: Isolation makes it a game that “thinks” and reacts to player input in increasingly dynamic ways. In the game, the player has to run and hide from the xenomorph, which runs on artificial intelligence that learns from  the player’s tactics and then adjusts its strategy so that the player cannot reuse the same tricks and gameplay remains unpredictable. This very well exemplifies the “iteractive process” of a high-level interaction in which both the player and the AI of the xenomorph have to learn and evolve together. While it is far beyond the scope of my current coding capabilities to create a highly intelligent program like the xenomorph of Alien: Isolation, I think the element of surprise and unpredictability is something I can think about when designing user interactions in my p5 sketches.

References:

18 things we learned about Alien: Isolation last night

https://intro.nyuadim.com/wp-content/uploads/2020/08/theArtOfInteractiveDesign.pdf

I believe that interactivity comes from the use of our senses. Sight, touch, hearing, smell, and even balance. While not every interactive system needs to involve all of these senses, it must engage at least one. I agree with the idea that anything can be interactive because we can interact with everything around us. However, what’s crucial is distinguishing the level of interactivity (as he mentioned) whether it’s high, moderate, or low, since different forms of interaction have different impacts. 

When the author claimed that printed books aren’t interactive because they can’t “speak,” I would argue that interactivity can also be one-sided. For instance, I am reading this author’s views, which may or may not influence or challenge my own thinking. The author created the book, and I am engaging with it—how can that not be considered a form of interaction? The experience of reading may not be a conversation, but it’s an intellectual exchange, a dialogue between the creator’s ideas and the reader’s mind. 

Regarding Improving User Interaction in p5 Sketches I think allowing users more control over the artwork itself, such as changing colors, adding or removing elements, etc, could make the experience feel more personal and engaging. And offering users guidance on how to interact with the sketch, such as through on-screen prompts or hints, would help them understand how to navigate and manipulate the artwork more effectively. Also, adding sounds or auditory information. Though I haven’t seen any examples of that so I don’t know if It is possible. 

When I changed my major from Biology to Interactive Media, I didn’t fully understand what interactivity really meant. Reading Chapter 3 of The Art of Interactive Design by Chris Crawford helped me make a clear distinction between interactivity and related concepts like reaction, participation, and design. Crawford defines true interactivity as a cyclical process where two actors alternately give input, process it, and provide output, much like a conversation.

Before reading, I assumed that systems allowing user participation, such as clicking buttons, were interactive. However, Crawford’s explanation made me realize that true interactivity requires meaningful feedback. Unlike simple reactions, which are one-way responses, interactive systems respond to the user’s input in ways that adapt and engage, creating a dynamic loop.

This new understanding has changed how I approach design, as I now realize the importance of creating systems that actively respond to user input in meaningful ways. Crawford’s insights will guide me in future projects, pushing me to design experiences that are truly interactive, with a focus on creating dynamic, engaging feedback loops between the user and the system.

“Form follows (?) function”

Chris Crawford provides valuable insights into the nature of using and misusing the word “interactivity” referring to both physical and digital spaces, without avoiding his subjective evaluation of such instances. In the context of studying Interactive Media, full understanding of what such media really mean is crucial. I agree with Crawford that interactivity should be regarded as a spectrum, yet I believe that there are certain characteristics defining strong interactive systems at least in the digital space. “Form follows function”, a long ago established design principle, can be followed (at least to an extent) – the designer should not overcomplicate the user’s experience, making the function unclear in a pursuit of a more unconventional form. Although I do not think that this principle must be implemented without exceptions, at this stage of my coding experience I lean towards making interaction with my works more straightforward for the user. Unplanned and random additions should not be forbidden, as we have already learned, but it is important to maintain a balance. 

“The rule of three” proposed by Crawford in this chapter will be a helpful guideline for me while designing a truly interactive work. However, I want to experiment in my p5.js projects with expanding the degree of interactivity, not limiting the system to inputs and outputs but adding more steps of interpretation. This could involve implementation of that very randomness, development of a complex algorithm that considers a variety of scenarios, or something even more thought-provoking.