Author: Shota Matsumoto

I totally agree with the author’s essential idea that it’s all about balancing competing priorities including usability, attractiveness, cost, reliability, manufacturability, marketability, and so on. I realized through reading that nowadays people care more about aesthetics rather than functionality, which undermines the usability of the product. Although aesthetics are quite important to attract a larger audience, I truly think that preserving usability is a must and should never be compromised. Otherwise, it would be bad if we, as producers, confuse users about how to use the product. As someone who likes minimalistic design, in my future projects in interactive media, I would like to keep the design simple and modern, while still being attractive to users. Muji is a great example. Its product designs are super simple, yet their usability is pretty good. Thus, I would like to balance usability and attractiveness like Muji does. 

 

I also realized that what’s being discussed in this reading is quite similar to the software development life cycle I learned in my software engineering class. Back in the old days, communication between clients and producers was not prioritized. However, in modern days, we use the agile method, where communication among users, developers, and business people is the most important factor in increasing usability and satisfying users’ expectations. I drew a connection here with the reading in the sense that we put more emphasis on facilitating communication to better understand and design the product itself. 

 

Something that drives me crazy is a washlet. As a Japanese person, I’m proud that so many foreigners are fond of it. But I don’t know how to use it even to this day. It has too many buttons, and sometimes there are buttons called “massage,” which I’m scared to press because I cannot imagine how a toilet would massage me while sitting. Also, there are multiple buttons to spray water, so I don’t know from which part of the toilet the water will spray. I’m just scared of getting wet and confused. I wish it could reduce the number of buttons for usability and add some simple text to explain what will happen when I press a certain button.

I agree with the author’s point that interactivity only happens when two subjects are actively engaging with each other through purposefully listening, thinking, and speaking to each other. In my personal experience, I used to feel lonely and left out when a person who I was talking to was scrolling on their phone while I was seriously talking to them about my idea during the team project back in my high school. I felt like I was ignored and I thought I was talking to myself. I think there was no interactivity at all in that situation. 

Also, from what I learned in the class called Immersive Experiences I took in the fall semester last year, I think interactivity also needs to incorporate as much sensory information as possible. For example, if you close your eyes and block your ears completely when someone is talking to you, you won’t be able to know who that person is and what that person is talking about. So, a lack of interactivity can also lead to a lack of information and understanding in real-life situations.

Concept:

When I was watching the video from our first reading assignment, I came across one of the speaker’s demonstrations where he explained, while generating a maze (image below), that incorporating randomness into art allows the audience to come up with their own conclusions using their own imagination. I truly think that is the beauty of art.

He also mentioned that the same, ordinary structure produces only a single meaning, and I believe is not the point of art. Art is about subjectivity, and I wanted to achieve this by introducing randomness in this assignment. That is why I created an artwork that automatically generates a maze for you to solve. Every time you run the code, you get a different maze so you can enjoy it in a new way each time rather than solving the same maze again and again. Try solving my maze below!

Part of code I’m proud of:

It was pretty hard for me to do it from scratch so I searched for a tutorial video on YouTube. From the video ( https://www.youtube.com/watch?v=jQFYh3nRfSQ ), I was able to learn how stack and class can work together to keep generating paths and filling out all the grids of the canvas. I am especially proud of this mazeIterate() function, which is the most fundamental part of this project. It basically allows you to find an unvisited neighbor that is connected to the grid you are currently standing on. I had to be careful when marking the wall between the current grid and the neighbor grid, because that wall is shared by both of them, meaning that the interpretation from each side is different. Specifically, I created another function called oppositeBlock() to make sure that the same wall is marked as open from the opposite side as well. I was also able to use a stack properly to push the current grid back onto it so that we can return to it when we hit the dead end. 

//function to search for and go to the next tile 
  mazeIterate(){
    let currentGrid = this.stack.pop(); 
  
    let connectedWall = this.pickNeighbor(currentGrid); //find unvisited neighbour that connects with the current tile
    
    if (connectedWall){
      this.stack.push(currentGrid); //put the current tile into the stack so that you can come back when you hit the dead end 
      
      connectedWall.grid[connectedWall.block] = "open"; //mark the wall as open 
      
      currentGrid[oppositeBlock(connectedWall.block)] = "open"; //mark the opposite wall (the same wall) as open 
      
      connectedWall.grid.visited = true; //mark it visited 
      this.stack.push(connectedWall.grid); //push the tile to the stack 

      currentGrid.current = false; 
      connectedWall.grid.current = true; 
    } 
    else if (this.stack.length != 0){ //if there are no neighbors left, 
      currentGrid.current = false;
      this.stack[this.stack.length - 1].current = true; //move back to the previous tile to seek for unvisited neighbor 
    }
  }

Problems I ran into:

I forgot that I needed to mark the border grids as visited at the beginning. This issue was tricky, because if I didn’t do it, the maze would grow outward and go out of bounds. In order to fix this issue, I restricted the boundary by marking all the grids at the border as visited in the constructor so that we can only generate the maze inside our canvas. 

Reflections & Future Improvements:

I am very satisfied with the outcome because I was able to incorporate randomness into my artwork. The learning process took a lot of time because I had to understand how to automatically generate a maze from the tutorial video. However, it was very beneficial for me overall because I was able to reflect upon how to use an array and a class to generate the maze automatically. I think I was able to fully apply all of the concepts we have learned in class so far, so I am very satisfied. For future improvements, I definitely need to work on my comments and variable names, as they are a bit messy right now. But for this assignment, I think my comments would be good for everyone to understand how each part of my code works. 

I think randomness plays two roles. One is to embed the messages of an artist against the structured society they lived in. The other is to ignite our imagination through unexpected results. In terms of the first one, there were many artworks introduced by the speaker where artists incorporated randomness to imply the message that they wanted to use their own imagination within the structured society. Thus, in those earlier times, randomness represented people’s desire to bring chaos into the society they lived in to free themselves from structure so they could live in their own world. I guess that was their way of manipulating their own imagination to find out who they are. I really resonated with the second role of randomness, which is to allow the audience to use their own imagination to interpret an artwork. There was a project I learned about in the course I took in the fall semester in 2024 called “immersive experiences”, where the producer of the artwork brought a group of random people together in the same place without giving any instructions, and simply let them play with what they had in the room. I felt this was very similar to the concept of randomness the speaker described, in the sense that randomness can lead to unexpected events that we can then interpret using our imagination. Unlike structured artwork, there is no right or wrong way to interpret it. Therefore, you have total freedom in how you interpret and critique a piece of artwork. You can either agree with it or disagree with it. However, with structured artwork, there is usually only one way to interpret it from a single perspective. 

 

I also found the example shown in the video very intriguing, where the speaker demonstrated different codes to show the effects of having randomness by comparing structured codes. The code with the functionality of generating random numbers allowed us to use our imagination to think, for example, that generated things might be a maze or to enjoy tracing where a particular path might go. However, the code without that functionality only generated one dedicated path, which is expected from the process of coding. In this sense, incorporating randomness into artwork adds an intriguing aspect and allows us to freely use our imagination to analyze, interpret, and critique it. I think that is the beauty of incorporating randomness into artwork. But I also agree with the author’s point that it is about achieving a balance between randomness and order. For instance, in one of his artworks where things emerged from the top, bottom, and sides, he defined conditions where, if particles collided with each other, they would deviate away. Those general functions that create interesting animations are absolutely necessary, and humans should be in charge of defining them. However, the way things appear can be controlled by randomness, because if there is only one way for things to emerge, then the result is always expected. I think the result should always be unexpected so that viewers can use their own imagination to interpret the art. At the same time, artists should define some core functionalities or general rules of interaction so that the structure itself has meaning. My conclusion is that a fusion of structure and randomness gives meaning to artwork. If one of them is lacking, the result is either predictable or too chaotic to the point where the meaning is not interpretable. Having a strong balance between structure and randomness allows us to freely use our imagination to explore the meanings of artwork.

Fullscreen sketch

My main concept:

My concept originally came from the Japanese horror anime called “渦巻き（うずまき）”, which literally means a spiral in English. I watched this anime during the last summer vacation back in Japan. At first, I was surprised by how it was even possible for humans to be able to create such peculiar and disturbing animations using only black and white colors and spirals. The animations were too powerful and creative to the point where I almost threw up. However, I really liked how the author incorporated his originality and personality into this anime. I was especially intrigued by the scene where the main character’s girlfriend was infected by a contagious disease where if you get infected, you become obsessed with spirals. One of her eyes started to fall out and twist inward into a spiral.

It was very gross at first when I looked at it, but I really liked the animation there, so I decided to draw it as a simple artwork this time. If you hover over the drawing, you can change the color of spirals into either green, red, or blue. Also, if you click the eye going around, its color changes into red, implying inflamed eyes. Try it out!

Part of code that I particularly like:

The part of my code that I particularly like is this block of code dedicated to producing continuous spiral movement. At first, I had no idea how to make a moving spiral other than using a for loop, sin(), and cos(). Thus, I explored some tutorials on YouTube about how to make spirals. These videos (https://www.youtube.com/watch?v=Z3PvLZYLW0U  and  https://www.youtube.com/watch?v=U_2WwjKEasc) really helped me understand that incrementing angle each time moves x and y coordinates and eventually helps create a static spiral and by adding a change (being incremented each time) to angle each time, you can make it move continuously. I also realized that it was important to distinguish between polar and cartesian coordinates, since cos() and sin() are based upon a unit circle. Furthermore, I learned some new functions called beginShape() and endShape(), both of which are responsible for drawing a line between points. Overall, I struggled a lot to create a moving spiral, but these tutorials really helped me understand new concepts I needed to learn. 

//spiral 
  beginShape(); 
  for (let angle = 0; angle <= TWO_PI * n; angle += angleInc){
    let radius = scaler * angle; //radius
    let x_position = radius * cos(angle + change); //x coordinate
    let y_position = radius * sin(angle + change); //y coordinate 
    change += changeInc; //increment change by changeInc
    vertex(x_position, y_position);
  }
  endShape();

Reflections & Future Improvements:

In terms of reflection, it took me a lot of time to figure out how to make a spiral using for loops and other functions we haven’t yet learned in class. Thus, I had to watch tutorials to learn these new functions and how to apply them. But this assignment helped me learn various concepts and how to integrate them with the concepts that we already learned in class. For future improvements, I would like to make the animation more interactive so that people can actually engage with it. Right now, it only changes the color of the spiral and eyes using your mouse, but I want to add interactive elements, where someone’s face gradually appears inside the spiral to make it creepier. I remember I got shocked when the main character’s father’s face appeared from the middle of the spiral in the anime. I think adding these kinds of elements can engage users by scaring them. Furthermore, I need to improve how I name my variables, because  many of my variables have lengthy names, which makes the code a bit messy. 

Fullscreen sketch

Main Concept / Background:

My original concept was to draw the most beautiful self-portrait that I’ve ever made in my life, because, honestly, I’ve only drawn the worst self-portraits ever my friends used to make fun of. So, I wanted to capture every tiny detail of my face as accurately as possible. This was my first plan. But, once I looked at my passport picture, I realized that it was not going to happen due to the complicated structure of my hairstyle. 

What I struggled with and How I overcame it:

During the ideation phase, I came up with the idea of trying to use as many different shapes as possible for my hairstyle to make it as realistic as possible. For example, I realized that the sides of my hair can be represented by two ovals tilted at 30 degrees to make fluffiness. The top of my hair can be imitated by a trapezoid, and the bottom sides can be represented by two opposite triangles. I also added the feature where users can move the top of my hair up and down because I wanted to incorporate a funny interactive element. At the same time, I embedded my personal wish that I don’t go bald in the future. You can make me bald by moving your cursor downward from the middle of the self-portrait! This is my self-portrait: 

I drew a Japanese flag and cherry blossom at each corner to represent Japan. It was really hard to locate each petal at the correct transformation (position and rotation). I first used for loops but they did not work in a way I wanted, so I calculated each position and rotation one by one.

My Favorite Code:

The part of the code that I particularly like is the sides of my hair composed of two ovals. I struggled to position and rotate them in a way that matched the structure of my face. After about  half an hour of searching methods online, I found three functions that were really useful for controlling transformations of those geometries. These functions are push(), pop(), and translate(). The translate() function allows you to reset the origin, while push and pop() allow you to apply changes only to specific objects you want. 

//sides of hair 
  fill(0); 
  stroke(0); 
  push(); 
  translate(x1, y1);
  rotate(10); 
  ellipse(0, 0, hairWidth, hairHeight); 
  pop();   
  
  push(); 
  translate(x2, y2);
  rotate(-10); 
  ellipse(0, 0, hairWidth, hairHeight); 
  pop();

 

Reflections & Future Improvements:

Since it was my first time using p5, it took some time for me to get used to some functions. But, after using the same geometry functions multiple times and exploring new functions that I’ve never seen before, I was able to build a solid foundation in how p5 works. Although I believe I could have made a better self-portrait, considering the fact that I am bad at drawing, I think I did relatively well this time!

In terms of future improvements, I think I should use for loops for the cherry blossom part to make the codes more readable and reduce repetition. I tried to auto-generate all five ellipses simultaneously, but due to strange positions and rotations, I was not able to achieve it, even  after I tried multiple times. Also, all the objects are not fully centered, so the shapes are slightly misaligned. Next time I create my self-portrait again, I want to reduce the number of values I use for positions of each shape and use more variables instead to centralize each shape and improve the readability of my code.