Category: F2026 – Aya

One thing from Don Norman’s “The Psychopathology of Everyday Things” that made me think about my own experiences is his discussion of discoverability. I realized that I often get frustrated in malls because I cannot easily figure out where I am or where I need to go. Many malls have maps, but they are not always in places where I can easily find them, and sometimes I still have to spend time looking around to understand which direction I should walk. This made me question what makes something technically available but still difficult to use. If a map exists but I cannot find it or understand it quickly, is it really doing its job as a design or not. Norman’s idea of signifiers also changed how I think about this problem. A better mall map could use clear signs, icons, and arrows to show me where I am and where I should go. An interactive mall map could make this even easier by allowing me to search for a specific store and showing me a route from my current location. This would also have feedback within it.

What stood out to me most is that Norman argues that good design should make things understandable rather than forcing people to figure them out through trial and error. Before reading this, I usually thought that getting lost in a mall was just my own problem or lack of attention.  It makes me think differently about interactive media because I realize that even simple things like buttons, maps, and directions need to communicate clearly with the user. Overall, these principles can make interactive media more intuitive, easier to use, and less frustrating

Concept

The first new thing I tried was learning how to create waves using the sin() function from the p5.js reference. I used:

let y = 15 * sin(x * 0.1) + 5;

I learned that sin() creates a smooth up-and-down movement, which makes it useful for creating waves. The 15 controls the amplitude, or how tall the wave is. The 0.1 controls how quickly the wave changes as x increases, which affects how spread out the wave is. The + 5 is the vertical position, so it moves the whole wave down by 5 pixels.

I experimented with this by creating multiple waves and changing their positions, colours, and stroke weights. This was useful because I learned a new way to create movement instead of only moving objects from one position to another.

However, when I tried combining the waves with the rest of my project, I started getting errors and some of my other code stopped working. Because of this, I eventually removed the waves from my final version. Even though I removed them, I still wanted to include them in my process because learning how sin() works was something new I learned this week.

After that, I worked on making interactive bubbles. This is where I started using the concepts from this week more directly, especially arrays, functions, and Object-Oriented Programming. I created an empty array called bubbles. An array is basically a list where I can store multiple things. Instead of creating a separate variable for every bubble, I can put all of my bubbles inside this one array.

I then created a class. This connects to Object-Oriented Programming because, instead of manually describing every bubble, I created a template for what a bubble should be and move. I then created different functions inside the class for what the bubble can do. The move function changes the bubble’s position every frame. This makes the bubble move instead of staying in one place. I wanted to give the bubbles a limit on how high they can move. Therefore, I added a conditional if statement that checks whether the bubble has reached a certain part of the canvas. If it does, its speed changes direction, which makes it bounce. Through a show function, I was able to make the appearance of the bubble I wanted to include 3 ellipses to give the bubble a 3d illusion and make it more realistic.

To make the bubble interactive, I updated the code so it creates a new bubble every time the mouse is pressed. I also set the horizontal speed xspeed to 0, meaning the bubble will not move left or right. Finally, I set the vertical speed yspeed to 2, which allows the bubbles to move straight up and down instead of moving randomly. I also added a pop to remove the bubbles when pressing the keypad.

function mousePressed(){

  interactiveBubble = new Bubble(mouseX, mouseY, 0,2);
  bubbles.push(interactiveBubble);

After the bubbles, I created the fish. I wanted them to be colourful, so instead of making the fish one colour, I used multiple ellipses layered inside each other. For example, I used an ellipse for the main body and a triangle for the tail. Then I added smaller ellipses in different colours inside the body. At first, I had a stroke around all of the shapes, but I realized that this made the fish look messy because you could see the outline around each coloured section. I fixed this by using noStroke for the smaller coloured ellipses while keeping the stroke around the outside and the tail. This made the fish look cleaner.

I created two fish at different positions and gave them different speeds:

let bubbles = [];
let interactiveBubble;

let fish1X = 100;
let fish2X = 100;
let speed1 = 2;
let speed2 = 3;

Every time draw runs, the position increases by the fish’s speed. Since the draw function repeats over and over, the fish looks like it is swimming across the screen.

I also wanted the fish to keep swimming instead of disappearing when they reached the edge. Using an if statement, I was able to check if the fish has gone past the right side of the canvas. If it has, its position is moved back to the left side. This creates a loop where the fish continuously swim across the screen.

 

Code particularly proud of:

For this project, I chose an ocean theme. I wanted something with movement and interaction, so I created fish and bubbles and experimented with waves.

The first new thing I tried was learning how to create waves using the sin() function from the p5.js reference. I used:

let y = 15 * sin(x * 0.1) + 5;

I learned that sin creates a smooth up-and-down movement, which makes it useful for creating waves. The 15 controls the amplitude, or how tall the wave is. The 0.1 controls how quickly the wave changes as x increases, which affects how spread out the wave is. The +5 controls the vertical shift, so it moves the whole wave down by 5 pixels.

I experimented with this by creating multiple waves and changing their positions, colours, and stroke weights. This was useful because I learned a new way to create movement instead of only moving objects from one position to another.

However, when I tried combining the waves with the rest of my project, I started getting errors and some of my other code stopped working. Because of this, I eventually removed the waves from my final version. Even though I removed them, I still wanted to include them in my process because learning how sin works was something new I learned this week.

I learnt this using p5 tutorials: https://p5js.org/reference/p5/sin/.

I would also say this is the code I am most proud of, since it is something new I learned on my own and enjoyed very much. Next time, I would like to learn how to integrate this into my work.

Reflection

In the future, I would like to be able to mix different types of code and try to learn more code on my own. I would also like to add different types of code and designs into my work. For example, in this project, I could have added new animals that were less basic and more challenging to make. In terms of using ChatGPT, I only used it when adding new code and for the bubbles, mainly to learn how to make them move up and down. I would like to become more independent with coding so that I can experiment and figure out more things on my own.

Reference

I think a strongly interactive system would be a system that does more than just react in one simple way. In the reading written by Chris Crawford, he explains that interactivity isn’t always one level but actually can have different degrees, from high to low. One example he gave of strong interactivity is a conversation as it isn’t one way but both ways as both sides do the talking, listening, and responding. From this, I understood that in order for a system to have a high level of interactivity it should understand what the user is actually doing and give a response, so both ways. He also gives the example of low interaction which is the refrigerator light, because it only turns on when the door opens and turns off when it closes, yes, the fridge is responding so its interactive however only in a really simple way. I think if an interactive design is really strong it would respond in different ways depending on what the user does. It should also be able to change its response depending on the users actions instead of just always giving the same response. 

For my p5 sketches, I could improve the level of interaction by giving the user more control over what happens so instead of just having one same response each click I could use the mouse position or the movement to create different outcomes. For example, in my new sketch instead of only one click to open the door and keeping it there I would also add  another click to close the door. From this it would make my sketch feel more like a back and forth conversation between the user and the program rather just one straight simple reaction.

Before this reading, I never really gave much thought to what interactivity actually means. I knew when something was interactive, but I never really stopped to think about what makes one interaction stronger than another. I really liked the idea that interactivity can exist at different levels rather than something simply being interactive or not. For example, I obviously knew that a conversation was interactive because you respond and reply to another person, but I never thought about how the way a conversation flows can actually affect the level of interactivity. If one person is doing most of the talking and the other is barely responding, it is very different from a conversation where both people are listening, thinking, and responding to each other. I think this helped me understand interactivity much better because it is not just about getting a response, but about how much of an exchange is actually happening. For me, a strongly interactive system would be one where the users actions actually matter, and the system responds to what they are doing in a way that keeps that exchange going.

Thinking about my own p5 work, I honestly have not really included much interaction in my projects so far. I feel like this is something I need to start adding, even if I begin with really simple interactions. For my project this week, for example, I could use mousePressed() so that the user can pop things on the screen, add more objects, or decide how many they want to add rather than everything already being decided for them. I think even simple interactions like these could make a big difference because the user would actually be participating in what is happening on the screen instead of just watching it.

Since the beginning the reading has been enthralling. The questions asked by the author seem to still be relevant today. I have always thought of interactivity as a way to “communicate” both with other people and HMI. I like to think of it as questions and responses; depending on one’s contribution (the input) they get different answers. When someone declares something to be “interactive” the first thing that pops to mind is technology that communicates back to the person. For example, when I was little I had an interactive alphabet board (in Bulgarian) that when it had its buttons pressed would in turn produce a noise (the sound of the letter that is). Depending on the mode it could also recite the word associated with the letter. I do believe that toys could be interactive, even when the interaction is included in its simplest form, but the Interactive Children’s Rug gives no response to the user and is therefore, not interactive. To this day I still believe that marketing strategies have failed me on multiple occasions with false advertising. Some years ago interactive dolls entered the market with a promise for a new era of playing. What a disappointment it was when the only feature of said dolls was blinking (and only when their heads are tilted). The questions remain: is interactivity subjective, are the objects really interactive? I say yes to both. To a certain extent everything is interactive, but it is the level of interaction that makes it differ. To my mom the washing machine is very interactive, but to me it has a low level of interaction, so I would say that some of the subjectivity may come from previous experience.

The paragraph about books not being interactive was really interesting and it made me think. While I agree with the majority saying that books are indeed interactive, the author’s point should not be overlooked. My proposal is the introduction of a distinction: direct and indirect interaction. What if books are indirectly interactive in the sense that you communicate with the author’s thoughts, but they are not there to respond? At some point the author was doing the “input”, now the reader is accessing existing media and is interacting with the output. With this new idea though we have to be open-minded enough to also accept that interaction could disregard one of the three principles of listening, thinking, speaking (that the author simply deems as participation) and agree that it is indirect interaction.

The tone is notably witty and overall very pleasant and I cannot help but agree with the author on most of the points. I am yet to form my own opinion on what is considered interactive or not, but I definitely am willing to adopt this way of thinking. While reading it, I constantly thought of the different scenarios and examples of questionable interactivity arose. In the future I would try to include more interactivity in my projects like moving elements, sound, change of colors or a combination, in order to explore it (interactivity) from a designer’s standpoint instead of just being the user.

Concept

For my concept, I wanted to make an interactive artwork using objects and functions. I decided to make a simple game where the user has to catch apples that randomly fall into a basket that they control using their mouse.

I wanted the artwork to have a simple, colorful, and playful appearance because I wanted it to feel more like an interactive cartoon than a realistic scene. I used a light blue sky and different shades of green for the trees and grass to create a bright outdoor environment. I also used multiple layers of leaves on the trees to give them more depth instead of making them a single flat shape.

I chose to give the apples faces because I wanted the objects the user interacts with to feel more playful and expressive. I also placed the trees toward the sides of the canvas, leaving an open area in the middle where the apples can fall and where the basket can move. This makes the gameplay easier to see while also creating a clear visual composition.

Here are my inspiration and references pictures

How this was made

I first started by creating the sky and grass (this was very simple, just rectangles and background). Next, I made the two trees, I made the trunks and branches using beginShape(), vertex(), and endShape(). For the leaves, I used ellipses of varying shapes and sizes. In order to add more dimension, I had a set of leaves behind and in front of the trees. This code was initially in my draw function, but once I had my desired trees, I moved both trees into separate functions treeL() and treeR().  Next I used loops to create the fences out of rectangles and lines. This was also moved to their own function fence() that was later called in the draw function.

Now that the backdrop was complete, I started with creating the apples. First in the draw function I drew the apple using primitive shapes. Once I was happy with that, I made a separate file called apple.js. I made the class with the constructor that contained the following variables: this.x, this.y and this.speed. For the x and y positions, these are random and the apple will appear anywhere along the x axis and as for the y, it will appear above the upper bound of the diagram.  I then moved the apple drawing to a function and allowed for varying positions. I also created a fall() function which increases the apple’s y position downwards unless it hits the floor or the user catches it with their basket. In both cases, the apple’s x and y coordinates are back to the random starting points.

For the basket it was quite simple, I created a basket() function which takes the user’s mouse positions and draws a basket in that area.

I also created another class for the clouds, this follows the same logic as the Apple class. It has the same variables and functions. The only difference is that the clouds spawn on the leftmost side and move to the right, hence instead of the y position changing, it is the x position which is decreasing. The cloud disappears once it reaches the leftmost side and will respawn back on the right.

For both the apples and clouds, I made arrays to be able to store and display multiple objects from each class. I had 4 apples and 3 clouds.

Code I am proud of

I am most proud of the trees and apples. Here is the function for the tree on the left that use the vertices and ellipses:

function treeL(){
  // leaves behind tree L
  noStroke()
  fill('#91bd42');
  ellipse(30, 55, 150);
  ellipse(275, 25, 70);
  ellipse(120, 40, 140, 100);
  ellipse(130, 80, 60, 50);
  ellipse(190, 40, 80, 70);

  // trunk L
  stroke();
  fill('#865830');
 beginShape();
 vertex(0, 90);
 vertex(48, 90);
 vertex(58, 98);
 vertex(38, 180);
 vertex(38, 220);
 vertex(45, 250);
 vertex(55, 285);
 vertex(65, 315);
 vertex(72, 327);
 vertex(78, 345);
 vertex(0, 345);
 vertex(0, 90);
 endShape();
 arc(0, 345, 156, 40, 0, PI);

 //branches
 beginShape();
 vertex(0, 35);
 vertex(35, 35);
 vertex(25, 90);
 vertex(0, 90);
 vertex(0, 35);
 endShape();

 beginShape();
 vertex(25, 90);
 vertex(30, 86);
 vertex(35, 81);
 vertex(40, 74);
 vertex(45, 68);
 vertex(50, 60);
 vertex(55, 58);
 vertex(60, 58);
 vertex(80, 58);
 vertex(58, 98);
 vertex(25, 90);
 endShape();

 //leaves in front of tree L
 fill('#b8dc58');
 ellipse(0,0, 48, 175);
 ellipse(80, 25, 130, 90);
 ellipse(145, 13, 50, 33);
 ellipse(210, 10, 100, 80);
 ellipse(290, 0, 90, 60);
 }

Here is the apple class as explained above:

class Apple{
constructor(){
 this.x = random(50, 650);
 this.y = random(-400, 0);
 this.speed = random(1, 1.2);
}
 draw(){
 // apple base
  strokeWeight(3);
  stroke('#390102');
  noFill();
  arc(this.x + 20.5, this.y - 25, 15, 40, PI, PI + 1.55);
  fill("#ea5973");
  arc(this.x, this.y, 50, 60, HALF_PI - 0.5, HALF_PI + PI + 0.5);
  arc(this.x + 27, this.y, 50, 60, HALF_PI + PI - 0.5, HALF_PI + 0.5);
  noStroke();
  quad(this.x + 13.5, this.y - 25, this.x + 28, this.y, this.x + 13.5, this.y + 25,   this.x - 2, this.y);
  stroke('#390102');
  fill('#9ad76e');
  arc(this.x + 10.5, this.y - 44, 23, 28, HALF_PI - 0.05, HALF_PI + 2);
  arc(this.x + 0.5, this.y - 36, 23, 28, -HALF_PI + 0.05, -HALF_PI + 2);

  // apple face
  fill('#390102');
  ellipse(this.x - 2, this.y, 10);
  ellipse(this.x + 29, this.y, 10);
  noFill();
  arc(this.x + 13.5, this.y + 3, 8, 7, 0, PI);
  }

  fall() {
  this.y += this.speed;
  this.x += random(-0.5,0.5);
  let centerX = this.x + 63.5;
  let centerY = this.y + 50;
  //checking to see if it reached the ground
  if (this.y > 420) {
    this.y = random(-400, 0);
    this.x = random(30, 650);
  }
  //checking to see if user has caught an apple
  if (dist(centerX, centerY, mouseX, mouseY) <= 40){
   this.y = random(-400, 0);
   this.x = random(30, 650);
   }
 }
}

Problems I ran into

One problem I ran into was the collision detection between the apples and the basket. This was because I passed  the wrong apple coordinates to the dist() function, therefore the apples were either not being “caught” or were only sometimes being caught. I realized that the x positions of the apple was not from the center but from the left side. I had to add a constant factor (used in drawing the apple) to the x position in order to fix the problem.

Another challenge was creating the trees using beginshape(), vertex(), and endshape(). I had to experiment with the coordinates and proportions several times to get the trees to look the way I wanted them to.

Final result:

Reflection

Overall, I am quite happy with how it turned out. I believe I am getting better at executing my concepts as well as honing my creativity. In the future I would maybe add more complexity to the game. For example, the user would only have 3 lives and would lose a life for each apple missed, as well as a tally in the corner which counts how many apples the user has caught.

I feel like I have used the term “interactive” so many times to describe artworks but I’ve never really sat down and defined what it means to me. The author identified the same issue, and I really like how they view it as a “conversation” — a “cyclic process in which two actors alternately listen, think, and speak.”

This reading also allows me to reflect critically about the difference between interactivity, reactions, participation, etc. I think I have used them interchangeably before, and looking at the author’s classification, my two biggest questions are:
1). Who decides what category something belongs to? is it perhaps the creator, the person who experiences it, or someone else?
2) Can something fall into 2 categories at the same time?

I find this distinction useful, but I also want to complicate a claim that Crawford made. The author strongly suggests that printed books are not interactive, for no matter what the audience do or say or think, the content of the page does not change. Though this is true, I also think it exposes a gap in Crawford’s definition of interactivity. Crawford insists that the emotional engagement one experiences when reading a book is a reaction, not an interaction. Is this really true, I thought. In murder mystery books, for example, many authors leave clues and hints and expect their audience to try to solve the mystery along with the reading process. Isn’t this an interaction? Actively trying to solve the book like it’s a puzzle. Even at this exact moment, I’m having internal conversations about what Crawford wrote in this first chapter of “The Art of Interactive Design.” I’m contemplating, finding examples, finding contradicting details, trying to justify my thoughts—I think that encapsulating all of that in the term “reaction” will not do it justice. Maybe, it’s some degree of interaction, I suppose.

We tend to think of interactivity as a Boolean property…but why not think of interactivity as a continuous variable with relative measures…we might speak of interactivity as high, moderate, low, or even zero, thus solving our problem with the subjective nature of interactivity.

– Chris Crawford, page 6

On to the guiding question of how I will create a strong interactive system in my p5 sketches. I think this is a big question overall, but at the moment I’m thinking of meaningful interactions. For example, instead of mouse-pressed or key-clicked interactions, perhaps I can have more complex ones that make sense to my project. Also, decision-making can be a really fancy way of interaction. For example, in the in-class example we had with the floating balls appearing as we click on the mouse, the new ball appears at mouseX, mouseY instead of at a pre-defined coordinate. Then, the user can choose where to add a new ball. I also think that a strong interactive system makes it clear to the audience that this artwork is interactive. This can be done through explicit instructions or strong visual cues.

I really enjoyed doing this reading. What actually got me thinking was how strict he is about needing all three steps. Like it has to actually process what the user does and hold onto some kind of memory so the response can change based on more than just the current input and then respond in a way that reflects that processing instead of just playing back a fixed effect. I think I agree with his sentiment (for now atleast).

That is actually a useful way to look at my own p5 sketches because most of what I have built so far leans hard on that same idea of reacting instantly, so it feels interactive but there is no real thinking step. A way to fix that would be introducing an actual state like tracking things like how long the users cursor lingers in an area and letting the sketchs behavior shift over time instead of resetting every frame. Even something simple, like the sketch remembering the last few interactions and varying its response based on that instead of just the instantaneous mouse position would push it from Crawford’s “reaction with good production values” into something closer to his actual definition of interaction. Though I’ll be honest I do not know how to go about doing it but I am definitely excited to learn and explore it in the coming classes!!!

My Sketch

Please view the full sketch here.

My concept

I really love how much freedom we have for this assignment! I came up with an idea to create a garden of flowers, called “vy’s garden.” I wasn’t inspired by any particular sources but I’ve always wanted to create a game of planting flowers =)

My idea was to have the user click on their mouse to plant a new flower, which would have random characteristics. This way, every click comes with curiosity and surprise. When all the flowers in the garden are unique and random, each final garden feels personalized and special.

My highlight code

My canvas size is 700x400, and my garden can hold up to 7 flowers (the number of flowers it can hold is 1/100 of the width of canvas). After the 7th flower, if the user continues to click their mouse, all of the current flowers will be removed and they can plant up to 7 new flowers.

// if garden.length > 7
  if (garden.length > width/100) {
    //loops until garden is empty
    while (garden.length > 0) {
      garden.pop();
    }
    x = 100;
  }

In my mousePressed() function, after creating a new flower and adding it to the array, I have an if-statement checking the size of the garden. If it is larger than (width/100) (in this case, 7), then remove all the flowers in the array garden by using pop() until the garden is empty. After that, I reset x to 100, this is the starting x-coordinate of the first flower.

How this was made

I created a class Flower, which serves as the template for my flowers! The flower objects are stored in the garden array.

Each flower can be one of two species (tall/short), have a random petal color, a random center circle color, and a random number of leaves. The details are as follow:

• 2 possible species: short & petals creating an “X” shape OR tall & petals creating a “+” shape.
• 4 possible petal colors
• 4 possible flower center colors

  let petals = ["#FF6B6C", "#f1b709", "#FC814A", "#9ecb15"];
  let flower_center = ["#5f247b", "#095314", "#AD1F2D", "#202C59"];

• 3 possible variation of leaves: no leaves, left leaf, right leaf

There are 96 possible variations of a flower (2×4×4×3). For a garden of 7 plots, where flowers can be repeated, and the order of the 7 plots do matter, there are 96⁷ possible unique gardens. That is equal to 75,144,747,810,816 aka ~75 trillion variations!!
To put 75 trillion into perspective, it is:
~2.5 times the amount of cells in the human body
~38 times the number of galaxies in the universe
~642 times the number of humans ever been born in the human history

To create the randomization, when I instantiate a new flower, its arguments are randomized. For example, int(random(2)) gives 0 or 1, which will indicate the species. Similarly, petals[int(random(0, 4))] returns the string hexcode at a random integer index of the array petals.

//constructor(species, x, petal, center, leaves)
  /*
  2 possible species: 0 for the tall one and 1 for the short one
  x: x-coordinate of the flower
  petal: a random color from the array petal, accessed by indexing at a random integer index
  center: a random color from the flower_center array
  leaves: 0 = no leaves, 1 = right leaf, 2 = left leaf
  */
let newFlower = new Flower(
    int(random(2)), //random(2) is exclusive of 2
    x,
    petals[int(random(0, 4))],
    flower_center[int(random(0, 4))],
    int(random(0, 3))
  );

Each new flower is then pushed into the garden array and the entire garden is being drawn in the draw() function.

Reflection

I’m super proud of this artwork since I’ve wanted to create a digital garden of my own for sooooo long! I love how interactive it is, and I’m really amused at how many possible variations of flowers and gardens there are!

I’m also incredibly happy that this simple assignment involves many of the concepts we learned in class. I used for loops, while loops, conditionals, the random function, multiple arrays (garden, petals, flower_center), and most importantly, objects and classes. If I had more time, perhaps I would also want to give some movement to the flowers when they appear rather than just abruptly appearing like it is right now. For example, I could have it “rise” from the ground by controlling with speedy. But overall, I’m super happy with what I came up with already!

Resources I Used

https://p5js.org/reference/p5/text/
https://p5js.org/reference/p5/textStyle/
https://p5js.org/reference/p5/textFont/

No Artificial Intelligence was used in the making of this sketch or its documentation.

What really stood out to me were the examples of how different everyday objects or nature can be used as inspiration for projects. I think that is because people’s minds are programmed to work with mental models or just things that they are familiar with. On a subconscious level, we are more likely to prefer something we already know (a pattern, a person, naturally occurring phenomena) over things we are yet to familiarize ourselves with, even if we claim that we are open-minded and love challenges. For example, I think that the thing he said about symmetry is very true. It may not look like something, but when we introduce symmetry to randomness, the brain starts recognizing the patterns.

With that being said, it is exactly because of that reason we think that “random” is wrong. But as the video mentions we should associate randomness with the unexpected rather than with the chaotic. The truth about randomness lies somewhere between order and chaos. It is impressive how much variety there is when we make minimal changes. I really enjoyed some of his examples of essentially “patching” already existing buildings or pieces of art. These small changes can have a huge impact on our overall idea and I deem it important that we delve deeper into exploring randomness as a way to create controlled varieties. To a certain extent I could see how that may apply to the usage of AI when coding. One may take inspiration from it, twist it, and produce something unrelated. It is our choice how we will make use of the resources around us but we should do it in an original way.

The video evoked some questions in me. Now I wish to explore how tiles with repetitive patterns seem to fit together, creating new patterns in the corners without ruining what was first there. Similarly to how we often feel inspired from the world around us, I thought about the traditional way this was designed and felt the desire to figure out how to do it with code. The video changed my assumptions about randomness and I hope to be able to use it in moderation in the future.