Category: F2025 – Aya

While reading Chris Crawford’s chapter on “What Exactly Is Interactivity?”, it was interesting to him use the metaphor of listening, thinking, and speaking as the foundation of interactivity. This conversational model made the concept easier to grasp because it parallels something we intuitively understand, human dialogue. However, when Crawford extended these terms into a more literal context, insisting that actors must possess intellectual ability, I found it difficult to relate to his perspective.  For me, interactivity is whether one actor’s input produces a meaningful change in the other. Therefore, I found myself questioning some of Crawford’s examples. For instance, he dismisses the refrigerator light as non-interactive because it does not truly “think.” Yet I feel that even in his own terms, the refrigerator does listen and respond. When someone opens a refrigerator they are giving an input and the refrigerator is listening to it and by thinking it then turns on the light. To me, that still counts as a form of interactivity, even if it is simplistic or mechanistic.

Additionally, I agreed with several of his distinctions. His argument that reading a book is not interactive made sense: the book only “speaks,” but it does not adapt to or acknowledge the reader. The same applies to dancing: two dancers interact with each other, but the music itself is not interacting with them. These examples clarified for me the difference between experiences/ participation and genuine interaction.

Moving forward, when Crawford discussed movies, I started thinking about the children’s show Dora the Explorer. On the surface, it seems interactive because Dora asks the viewer questions. However, as Crawford would point out, the show fails at “listening.” It cannot actually register or respond to the viewer’s input, which makes the interactivity an illusion rather than reality. This helped me recognise that some systems or media may simulate interactivity without fully achieving it.

Ultimately, I interpret interactivity as a cause-and-effect relationship. If my input changes the receiver’s action, then interactivity has occurred. This perspective also ties into what we are learning in class. Functions like mousePressed() or keyPressed() are fundamental building blocks that create interactive spaces. In my Week 3 assignment, I experimented with this by coding a response to mouse clicks. Looking ahead, I want to experiment with creating interactions that are not uniform for every user but instead feel more personal and dynamic. For example, rather than coding a mouse click to always trigger the same outcome, I could design the system so that each person’s click produces a different reaction. This could be achieved by introducing elements of randomness, personalisation, or memory.

When I first read that activities like reading or dancing are not really interactive, I was confused. I always thought that simply reacting to something counted as interacting, so I had to question my own assumptions. Crawford explains that strong interaction requires three elements: listening, thinking, and speaking. Listening is when the system notices what the user does, thinking is when it figures out how to respond, and speaking is when it actually shows that response. I realized that many of my sketches are more reactive than interactive. They respond to clicks or mouse movement, but they do not really “think.” Without all three elements, interaction feels one-sided or unsatisfying. Thinking about this helped me see that interactivity is really a two-way conversation, where the program and the user are both active participants. The reading also made me reflect on the balance between predictability and surprise. If the sketch always responds the same way, it quickly becomes boring. If it responds randomly without logic, it can feel confusing. Strong interactivity happens when the user feels like their actions truly matter, but the system also has its own personality and reasoning.

For my p5 sketches, I want to build this type of interactivity. In my most recent mosaic-style sketch, the program could listen to which shapes the user clicks or where the mouse moves, think by changing the lines, colors, or arcs, and speak by  updating the patterns on the canvas. I also want to add keyboard functions so pressing keys can change the color of something or the layout. By including randomness or subtle variations, each interaction would feel unique while still making sense. This way, the user is not just observing the sketch, they are influencing it, experimenting, and finding out how different interactions can lead to different outcomes. Adding these layers of responsiveness would make the sketch feel alive and engaging, showing the strongest form of interactivity that Crawford describes.

“We are all mosaics of the people we’ve met.”

This artwork started as an idea I couldn’t stop thinking about: what if all the people and experiences in our lives were shapes in a giant, messy mosaic, connected by invisible lines we carry with us? So I made it happen. Each shape, circles, squares, triangles, and some random oddballs, represents a person or a memory. The lines connecting them are the invisible threads of influence that never really go away, no matter where you move or who you become.

I wanted this mosaic to feel alive. It’s not static. The shapes can move around when you click on them, but the connections always stay. It’s a simple interactive twist, but I love how it visually represents the idea that we carry pieces of each other wherever we go. You can almost imagine it breathing, like a community of little tiles that are all related in some way.

How I Built It: 

I used Object-Oriented Programming because I wanted each shape to feel like its own little character, with its own position, size, rotation, and even “friends,” aka connections to other shapes. All the shapes live in an array, which makes it super easy to loop through them to draw, animate, and update lines.

The movement was trickier than I thought. I used lerp() to make shapes glide smoothly toward new spots instead of jumping around like they were hyperactive. And here’s a cool tip I learned from The Coding Train: push() and pop() are lifesavers for isolating transformations like rotation and translation. Without them, every rotation or move would have messed up all the other shapes. Honestly, watching that video was a game-changer. I finally understood why isolating transformations is so important in generative art.

The hardest part was keeping the lines connected while shapes moved independently. At first, I tried drawing straight lines, but it looked rigid and didn’t feel like a living mosaic. I solved it by using curved lines with quadratic vertex and a little randomness to the midpoint, which made the connections feel fluid and unique. I also had to carefully loop through each shape’s connections array so that every connection stayed accurate even when shapes moved.I must have spent hours fiddling with arrays and connections, trying to get it to feel smooth but not rigid. I think it ended up working, and honestly, I kind of love the little quirks. The lines stretch and bend in ways that feel alive. The code snippet: 

// Draw connecting lines
stroke(255, 100);
strokeWeight(2);
for (let i = 0; i < shapes.length; i++) {
  for (let target of shapes[i].connections) {
    // curved line for mosaic effect
    let mx = (shapes[i].x + shapes[target].x) / 2 + random(-20, 20);
    let my = (shapes[i].y + shapes[target].y) / 2 + random(-20, 20);
    noFill();
    beginShape();
    vertex(shapes[i].x, shapes[i].y);
    quadraticVertex(mx, my, shapes[target].x, shapes[target].y);
    endShape();
  }
}

The Interactivity:

You can click on any shape, and it will move to a new random location. The lines stretch and follow, showing that even if things move around in life, the connections remain. I considered adding drag-and-drop or color changes, but I kind of like it simple. Letting the shapes shift on their own feels like they have a mind of their own.

Reflection : 

This project taught me a few things:

• Classes and arrays are magical once you get them to work together 
• lerp() is a lifesaver for smooth motion 
• push() and pop() are your best friends for rotations and translations (thanks, Coding Train) 
• Generative art can be messy and chaotic, but sometimes that’s exactly the point 

If I did this again, I’d probably add more personality to each shape, maybe tiny patterns or colors that reflect “who” each piece is. For now, I like how it’s simple, a little messy, and interactive, like a mini community on the screen.

The inspiration for this art piece came from cherry blossoms in Japan. My friend was telling me stories of when she visited and how beautiful, peaceful, and calming being around the blossoms felt for her. While exploring generative art online, I also came across examples of flow fields that captured a similar sense of beauty. I liked one of the examples and decided to integrate that idea with the concept of cherry blossoms.

For this piece, I try to mimic the nature of cherry blossoms and recreate that positive, calming environment around them. Each circle in this artwork represents a blossom, drifting softly in circular motion like petals swaying in a spring breeze. They begin large and vivid, then slowly shrink, mirroring the delicate, short-lived bloom of cherry trees that peak for only a brief moment before fading. Because cherry blossoms symbolize new beginnings and fresh starts, every click becomes a moment of renewal. The background’s soft pink hue further evokes this atmosphere.

move() {
    // moving ball in a circular motion
    this.angle += this.speed;

    // Calculate new position
    this.x = this.x + (this.d / 2) * cos(this.angle);
    this.y = this.y + (this.d / 2) * sin(this.angle);
  }

The above code defines the movement of class and is particularly something I’m really proud of. In class so far we have only talked about linear motion but I have observed that many of my classmates have used sin and cosine functions, hence, for this project I decided to venture out, learn something new and incorporate it into the sketch. In the code the angle increases by speed and while mapping it in x-coordinate, y-coordinate I know that x=r*cos(angle), y=r*sin(angle) and since we are increase the x by this value, I add it to this.x.

One challenge I faced while creating this artwork was drawing the circular path of motion. At first, I wasn’t sure how to model this in p5.js. After some research, I discovered that sine and cosine functions could be used to trace circular paths, and I learned how to increase the angle gradually to animate the motion. Another challenge was resizing the blossoms: initially, all my circles shrank to a fixed diameter of 20, but I wanted each to reduce to a random size. To solve this, I introduced a  targetSize variable, which allowed each blossom to shrink smoothly to its own unique final size.

In the future, I would like to add gradual color transitions. Specifically, I imagine the blossoms changing from colorful hues to red, where red represents the fading or “death” of the blossoms. I think this would add another poetic layer to the theme of impermanence.

Concept – Inspiration
I want to keep my portfolio for this class associated with Dexter series as long as possible because assignments are not very specific and require some kind of inspiration to make. I thought while I’m passionate about this TV show, why not save myself time and just pursue doing this assignment inspired by it. For this assignment I used OOP, classes, and different mouse functions as I mentioned in my previous post. My inspiration were blood stains on white walls. Dexter was a blood spatter analyst, and he had pictures of some in his office. So, by holding left-click and dragging across the screen user would draw thinner blood lines along the cursor, while when pressing the key, user would draw big chunk of blood in form a circle where cursor is located. Also, by scrolling mouseWheel user would be able to clean the wall from blood using pop().

Highlight of the code

function mouseDragged() {
  if (mouseButton === LEFT) {
    marks.push(new BloodCluster(mouseX, mouseY)); // one cluster per drag
  }
}

function keyPressed() {
  marks.push(new Tomato(mouseX, mouseY));
}

function mouseWheel() {
  if (marks.length > 0) {
    marks.pop(); // remove last (cluster or tomato)
  }
}

(Do not give too much attention to class called ‘Tomato’ it is just for me to navigate throughout the code better). Apart from that, I think this part of the code the crucial rule. it helps with drawing blood lines and bigger blood drops on the wall and cleaning it using mouseWheel(). Generally, I think also using arrays to store blood stains and then applying .pop() was the part of the code that helped a lot to perform next actions. Of course, in order to understand how those functions work, I looked through p5js reference page for keyPressed() and mouseDragged().

Sketch
Initially, I had some issue with class Tomato drawing oscillating circles as blood marks and troubles with cleaning the wall from blood marks in general when using mouseWheel(). But, after storing marks inside the array, applying .pop(), and some clever code arrangement the issues were solved. To be honest, took a lot of time to figure it out.

Reflection
I’m quite fulfilled by the work I’ve done. It definitely followed my initial vision of how I wanted my final result to look like. I like how neat everything looks in code, the organization is very easy to understand. I learned new functions and wise use of arrays to store blood marks using marks = []. In the future, I want to incorporate more mouse functions in my projects to enhance the interactivity of the project like mouseReleased() would also draw some different kind of blood. Also, I would want to make specific type of blood pattern when pressing the key, so blood marks would be kind of the same – more like in real life.

What do you consider to be the characteristics of a strongly interactive system?
After reading Chris Crawford’s chapter on Interactivity, I would strongly agree with what he has to say. It is definitely when both parties (actors as he says) are listening, thinking, and speaking. Otherwise, in more computer terms providing input, processing, and producing output. How would we measure the strength of interactivity of each system? To be honest, as long as it has those three components, I would consider the system interactive. However, whether it is super interactive or less interactive I think depends on person’s perception of what’s is enough interactivity for artwork and what’s not. For example, for me any type solo video-game like ‘Jedi Fallen Order’ is already a peak of interactivity because you control the character, you listen what the game instructs you to do, you think, and game also challenges you too. I feel like making the user think critically and act is an excellent characteristic for strong interactive system.

What ideas do you have for improving the degree of user interaction in your p5 sketches?
The one thing that comes to my mind is how we use mouseX and mouseY commands to make something move along our cursor. Also, new commands introduced by the end of the class using mousePressed, scroll, mouseReleased are too a way to interact in p5js. I would love to incorporate more of such functions in my future sketches to express my feelings and interests.

Randomness in computer art is integrating a level of unpredictability into a work, creating a piece that is ever changing and transforming. Casey Reas’ presentation on introducing randomness to creative coding pieces, opened my eyes to the value such an approach can add to a work. Coding can seem like a rigid mechanical process that is deprived of nature, however, with an added touch of randomness we can emulate the natural phenomenon of chance. One of the things that one would notice if they observed their surroundings is the existence of chance and randomness everywhere. You can never predict when you’ll bump into a childhood friends years later or when a leaf will fall off a tree as you pass by it. These uncertainties that we face in our everyday life are what define our everyday experiences, they are not mechanical and precise. Bringing that same sense of unpredictability into our code to some extent gives a piece life, where the viewer cannot tell what the work’s next move will be.

Randomness comes with  countless merits, but it does raise the question of where do we draw the line. How much randomness before we define a piece as chaos? Reas’ claim that a strong foundational code that randomness is to be built on is essential and is a factor that I do believe is important to integrate into works, though I do also believe that relying on chance to a larger extent is not creating disorder and taking away from the work’s value. Chaos and spectacle have always been an essential part of art, and an integration of randomness to the extent that it leaves the viewer confused to me is not necessarily a bad thing. It could leave the audience with an overwhelming feeling, which is a chance to explore a certain intersection of art where appreciation and discomfort come together. Digital and algorithmic art is a relatively new practice, and shying away from too much randomness in fear of chaos might hold us back from exploring this type of art to it’s full potential. In some cases foregoing the foundational code that the randomness is built on could result in intriguing work. Art is about experimentation and risk and unless we let go of order we will never reach an understanding of what that really means.

Concept

This idea came from something super ordinary: looking at the lamp on my desk. I liked how objects close to it felt sharp and bright, while things farther away faded quietly into the background and into the wall. I wanted to capture that shift in attention, where one small light changes the way everything around it feels.

My sketch uses a grid of circles and a drifting light. As the light moves, the circles respond by glowing more when it’s near and dimming when it’s far. The result is a simple pattern that looks somewhat steady but comes alive as the light passes through.

Code I’m proud of

The bit of code I like most is the distance calculation, and how just a few lines of code could turn geometry into behavior!

let d = dist(x, y, lightX, lightY);

if (d < 150) {
  fill(255 - d, 200, 100);
} else {
  fill(50);
}

Reflections

If I keep developing it, I’d like to make the light follow the mouse so the viewer can interact directly. Multiple lights with different colors could overlap and create more interesting patterns. I could also vary the size or shape of the circles to add depth, so the sketch feels less like a flat grid and more like a living surface.

For now, though, I’m happy with how it turned out. It’s a small experiment, but it was indeed very fun to implement.

I think Casey Reas’ talk was beneficial in how it helped me rethink my understanding of randomness in creative work. Before watching his presentation, I viewed chance as leaving artistic control, a way in which an artist makes pieces without intent. Reas’ presentation, however, provides compelling evidence to the contrary. His determined works gave way to systems where a tiny bit of injected “noise” was the crucial element preventing the entire structure from becoming homogenous and static. To be clear, his idea that a slight, random “jitter” is what keeps a system dynamic and alive has fundamentally changed my perspective in a way. It’s not about letting go of control entirely; it’s about building a system of rules and then introducing a controlled element of unpredictability to see where it goes. The quote Reas shared perfectly captures this: “It’s a chance that is always planned, but also always surprising.” This has made me think; is the artist’s role less about being a creator of objects and more about being a designer of ecosystems, carefully balancing deterministic rules with probabilistic life? I think this point is very interesting and eye-opening to me in some way.

Moving forward, I feel like I want to incorporate randomness more into my own work as, let’s say, a subtle disruptor of stillness and rigidity. All my life, I was focused on creating art pieces that are rigid. Going forward, instead of creating a perfectly symmetrical digital pattern, I want to play with the form and introduce a slight, randomly determined offset to the position or rotation of each element. The overall structure would still be mine, but the final texture would feel more organic and less sterilely perfect. For me, the balance between total randomness and complete control will lie in intentionality. The balance is right when randomness serves the artist’s goal, whether it’s to create surprising juxtapositions or whatever the goal is. Complete control often leads to predictable, “lifeless” results, while total randomness leads to incoherent noise. The sweet spot for me is a well-defined system where chance is given just enough freedom to introduce variations that I could not have conceived of on my own, making the final output a true collaboration between my intent and the unexpected.