Month: September 2024

As I searched for the definition of “interactivity,” I found two distinct meanings placed side by side: (1) the process of two people or things working together and influencing each other, and (2) the ability of a computer to respond to a user’s input. In The Art of Interactive Design, Chris Crawford claims that the term “interactivity” is commonly “misused and misunderstood” due to the prevalence of the second definition. He challenges this misinterpretation by outlining three essential criteria for true interaction: (1) listening, (2) thinking, and (3) speaking. Importantly, Crawford argues that all three principles must be equally present in both “actors” of the interaction, with no trade-offs. This helps to clearly differentiate between interaction and mere reaction (such as reading a book) or participation (like dancing to music), which, as I agree, are not truly interactive activities.

While I found the text enjoyable overall, some examples provided by Crawford were based solely on his personal assumptions (for instance, his discussion of performance art and the extent of interaction involved). This led me to reflect on a question posed at the beginning of the chapter that remained unanswered: what is the role of subjectivity in interactivity? How much of interaction depends on the perspective of the individual interactor?

From the text, I gathered that there is some subjectivity in interactivity, which Crawford acknowledges. However, he also emphasizes that an objective foundation for interactivity exists as well, rooted in the essential definition of interaction. I agree with this view and also concur that defining interactivity merely as “the ability to respond to input” is a misuse. Such a limited definition can constrain designers. Therefore, in my future artworks, I plan to implement Crawford’s “rule of three” when assessing the interactivity of my code.

Concept

I have decided to continue the ideation I have worked on in the first work – as such, the colour palette and the style of visual elements remain the same, but the story has developed.

The picture is almost surreal – the frame is filled with identical eyes staring at the viewer, but as soon as the user presses the mouse some eyes close and some start looking to the side. This motion captures the moment of secret surveillance – as soon as someone looses the focus, someone else becomes a spy. The spying eyes are careful – when sight of the others comes back, everything seems normal. The change of eye colour also indicates the differences between two.

Highlight of the code I am proud of

Using the mouseIsPressed() condition seemed a bit confusing to me at first, since I had to define what happens when the mouse is not pressed (therefore the original image) in the end, but I have managed to figure out the order.

//pupils when eyes are closed
  noStroke()
  for (let x=0; x<=width; x+=200) {
    for (y=0; y<= height; y+=50) {
      if (mouseIsPressed){
        fill('#FFBB00');
        circle (x+90,y,25)
      }
      // pupils when eyes are open
      else{
        fill('#2D96BC')
        circle (x+100,y,25) 
      }
      fill('#2D96BC')
      circle (x, y, 25)
       }

Sketch

Reflection

Although the idea of the story behind the image was represented correctly, I believe that the “spying” process can be developed further in a more detailed way. For instance, different eyes can look into different directions, and the order of closing eyes can be randomised. More user interaction can be implemented – for example, the movement of the eye can be controlled only when the mouse presses on it.

Concept

Thinking of ways to present myself using simple geometric forms, I was looking for reference and discovered works of Carolina Melis, who is famous for using generative art to create geometric portrait. It inspired me to think in a similar direction, making sketches of a symmetrical and minimalist image.

My first sketches 

The final portrait captures me looking at p5.js coding tutorials for the first time – I was slightly scared of starting to lear something new from scratch, but immediately started to visualise possible projects. The spinning star in my eye represents this hypnotising process of generating ideas.

Highlight of the code I am proud of

Learning how to rotate the shapes was the most difficult part for me. Since I have not done this before, I looked for tutorials which helped me to figure out how this function works and how it can be applied to different shapes. I had to improvise with the translation of the centre point for triangles, since the tutorial only explained how to do so with shapes, but after long calculations I have managed to do this – and I am very proud of the smooth outcome.

//left pupil-star animated
  push() ;
  translate(145, 190) ;
  
  rotate(angle) ;
  
  fill('#FFBB00')
  triangle(-12.5, 0, 12.5, 0, 0, 30)
  triangle(-12.5, 0, 12.5, 0, 0, -30)
  triangle(0, 12.5, 0, -12.5, 30, 0)
  triangle(0, 12.5, 0, -12.5, -30, 0)
  pop();
  
  angle += radians(1);

Sketch

Reflection

I hope to implement more complex animations and interactive elements into my future works. For this specific work, I could add a more detailed background or add other body parts to the lonely head – moving hands? running legs? Furthermore, many parts of this code are repetitive – I believe there is a way to make it more concise while maintaining the functionality. For now, I am satisfied with the minimalist style of the portrait, since this aspect was inspired by my references, but in the future I hope to learn how to create more complex shapes and even detailed 3D objects.

Concept & Inspiration.

How do we understand time? How do we grasp its relativity, and how does time differ across the globe in each corner of the world?

These questions came to mind as I reflected on the nature of time. My inspiration came from a piece of artwork I encountered on Pinterest titled “Rhythm.” As I observed the moving rectangles in the artwork, they reminded me of the movement of a clock. But what do these many clocks represent? For me, they symbolized two key ideas: (1) the relativity of time, and (2) the global nature of time, with its 24 time zones that shape the rhythm of life around the world.

Additionally, I drew heavy inspiration from a talk by Casey Reas, which I reflected on in a recent writing assignment. His discussion on randomness and order heavily influenced the way in which I approached my work.

Highlights.

In my interpretation, the background of the piece represents a chaotic flurry of clock dials, moving at a faster pace than the clock hands themselves. This fast-paced, seemingly erratic animation of ellipses symbolizes the relativity of time—its ability to feel both slow and fleeting, elusive and constant. Through this hectic background, I aimed to convey how time can feel overwhelming, moving quickly yet still slipping away before we can fully grasp it.

One aspect I’m particularly proud of is the grid of 24 clock hands, which I arranged to move with a calculated precision. Each clock hand is offset by PI/6 radians, representing a one-hour difference in the 24 time zones of the world. Although the movement of the arrows may seem chaotic when viewed all at once, there’s an underlying pattern — each line is meticulously timed to reflect the rhythm of global time. I have also learnt how to implement such functions as push() and pop().

for (let lineX = 0; lineX < 4; lineX++) { 
  for (let lineY = 0; lineY < 6; lineY++) { 
    push(); 
    translate(100 + lineX * 120, 100 + lineY * 120); 

    let offset = (lineX * 6 + lineY) * PI / 6; 
    rotate(baseAngle + offset); 
    line(-50, 0, 50, 0); 
    pop();
  }
}

Reflection.

I loved working on this project, as it gave me opportunity to master the basic knowledge of loops (specifically, “nested loops” which I got particularly curious about during the class). Furthermore, I aimed to focus more on the idea and conception (relying on the talk by Casey Reas and “randomness in order”), and gave myself more time to understand what I want to achieve before sitting to code.

Probably, the only thing I could not figure out is how to properly indicate time in numerical aspect in my artwork. In the future, I would like to create more sophisticated animated shapes so the idea is conveyed clearly.

In essence, this piece is an exploration of time’s complexity — how it can be experienced in so many different ways, how slowly yet at lighting speed it can pass by, and how it is governed by a specific order we all live within.

Embedded Sketch.

Concept

The inspiration started with the for loop lesson where we made a pattern in grid format, and in class I made a repeating pattern of an orange laid out in rows and columns. As opposed to the black and white designs from computer art magazines provided for reference, I wanted to do something more colorful and fun. Brainstorming from the ‘orange’ idea, I thought of a picnic setting! So I went onto Pinterest and looked it up for inspiration. Then I found this:

In my head, it was possible to recreate the iconic red pattern look of the picnic blanket using the for loop we learnt in class, so that’s exactly what I did. Red blocks displayed in a grid format using for loops, with lighter red blocks on the right and bottom of the red blocks to give the effect of overlapping strips of red fabric.

Highlight

For the cake, I’ve always wanted to learn how to rotate shapes on p5js so I challenged myself into making the cake with strawberry toppings which are repeated ellipses in a for loop that increase in angle of rotation each iteration. And I also got to use the translate function in the process!

I learnt how to rotate from here!

 // strawberry toppings

angleMode(DEGREES);
translate(200, 200);
noStroke();
fill("rgb(238,96,67)");
for (angle = 0; angle <= 360; angle += 45) {
rotate(angle);
ellipse(0, 40, 20, 25);
}

Sketch

Psst! Try hovering over the bottom right of the cake 😉

Link to the “Want a Slice?” p5js code.

Reflection

I really enjoyed making this piece because I learnt so many new functions, like the translate and the angleMode function, as well as applying what we learnt in class (for loops, if statements, movement of shapes).

In the future, I would love to learn how to make it less glitchy (like the strawberry here looks as if it isn’t moving in sync with the slice of cake in the back), and also maybe challenge myself into making my own version of the designs from the old computer art magazines instead of sticking to manually building images using colorful shapes!

The video opened my eyes to the possibility of making art with the random function. I’ve used the random function before in my code for my computer science class in high school, like to generate a random number for a user to guess; but I never thought of it to be used in code to make art. After watching Casey Reas’ video, I was reminded of a TikTok video of someone using code to make an image from a single branch and over time branches off into a tree. I didn’t think much of it at the time, but now that I know what ‘randomness’ can do, I think a random function was used in the making of that tree. If I could find that video again, I’ll definitely take a closer look and see how randomness was used in the making of that art piece.

What interested me the most is how you can combined technology and non-technological ideas to make art. In the example from the video, it’s biological ideas. From an interpretation of nervous systems to computing art; this pipeline is one that I have not seen before and definitely not one I’ve thought of. So it’s something I want to explore myself. Maybe not with nervous systems, but what came to mind is how massive objects have a higher gravitational force compared to less massive objects (think sun vs planets) and it would be interesting to make code and make art using this idea.

Context:

Rather than creating my own version of an inspiration piece, I decided to spend this time exploring the functions of p5.js and to mess around with one variable at a time to really understand what it does. I knew I wanted to create something colorful and interactive, so I kept adjusting the variables until I got an idea of something I liked. Ironically, the newly learned “for” looping function was the one thing that stayed consistent throughout my trial and error process. I played around with many mouseX and mouseY functions to see the way it affected my piece. The journey to my final piece was a little long and complicated, but I eventually managed to conclude at “Eye-versity.”

Concept:

This piece consists of a grid of lines all connected to one eye. When you move your cursor around, the lines stretch to follow the eye and the eye changes shape and color. The different variations of how the eye shape can look depends on how you move your cursor on the x or y-axis, therefore the name “Eye-versity” to represent diversity in eyes. As someone who comes from a culture where I lack the big round eyes that are the beauty standard, this piece resonates a lot with me and my experience of learning how diverse eye shapes can be amongst all ethnicities and my journey with learning to feel secure about my eyes.

The Piece:

Highlight:

 for(let x=0;x<400;x+=35){
    for(let y=0;y<400;y+=35){
      fill(mouseX,mouseY,mouseX,mouseY,x,y)
      ellipse(mouseX,mouseY,mouseX/2,mouseY/4,x)
}
}

I’m proud of this code because it contains everything I wanted to come out of this project: using the looping function, making it colorful, and making it interactive. I’m also proud of it because I managed to fix an issue I had with my old code that eventually resulted in this code to fix that problem.

Reflections & Future Ideas/Improvements:

“Eye-versity” wasn’t the initial project idea that I wanted to create. The piece to the right is what I wanted to keep working on, but I couldn’t manage to get the cursor to follow the main target of the artwork, so I added a small black dot that was aligned with the cursor, and created a piece called “Pesky Fly.” I wasn’t exactly a fan of how it looked despite how cool I found the layered base to be. I tweaked the code a bit to find something that would be centered and the “fly” was still there, so I thought I could turn it into an eye for fun and then came “Eye-versity.”

For improvements, I wish I had more time to try to fix my code and create the ideal centered piece I wanted to achieve with the first idea without having to add a “fly.” I really liked how its colors looked and the way it moved, but it was really unfortunate that the cursor wasn’t centered because it bothered me a lot. In the future, I would like to work with more interactivity to make a work that’s more complex and has more movement to it. I also had an idea to create a loop of multiple paparazzi cameras flashing and clicking, so it would be nice if I could create something more aligned with my personal interests and hobbies (I like being a photographer not paparazzi.)