Category: F2025 – Mang

• What do you consider to be the characteristics of a strongly interactive system?

The author defines interactivity as a cyclic process where two actors listen, think, and speak, with the interaction’s quality depending on these three elements. While I initially agreed with this perspective, I began to question it as I read further.

I believe that while some forms of interactivity are more creative than others, this doesn’t invalidate simpler or “weaker” interactive experiences. For me, a system is interactive if my physical actions cause its output to change. For example, a traditional book isn’t interactive because flipping the pages doesn’t alter the story itself.

However, the perception of interactivity is highly subjective. A beginner in an IM course might find a simple mouse click that changes the canvas in p5.js to be incredibly interactive. In contrast, a more advanced student, familiar with more unique methods, might see it as basic. This relativity reminds me of the broader philosophical question, “What is Art?”

• What ideas do you have for improving the degree of user interaction in your p5 sketches?

As someone with experience in p5.js, I want to explore more complex forms of interactivity. However, I think it’s important to balance visual complexity with interactive complexity. If a piece is already visually intricate, adding a highly complex interaction might overwhelm the user.

Therefore, I believe advanced interactive methods would be most effective in my more visually simple pieces. For these, using the computer’s camera or microphone could be a unique way to increase engagement. I previously used ML to detect faces in another class, and I am interested in incorporating that type of interactivity into my future work.

I could even approach more simpler methods such as drag bars.

Inspiration

So I absolutely love space, I just think the science, visuals, and grandness of it is so crazy and something we will never be able to interpret properly. From music to visuals, I have always wanted to create some art related to space and so I decided to create some sort of simulation of our solar system in the 2D space of p5. However, I didn’t want circular rings, I wanted more elliptical rings to give it that 3d effect. 

Design

This is just a quick mockup of what I would want the sketch to look like, I will also have moons for some of the planets like Earth, Saturn, and Jupiter.
I need classes for the planets, moons, stars of the background.
For all 3 of these ‘Objects’ I will make a parent class called SpaceBody which will host some basic attributes, such as position (x,y) and size.
I will also host all these objects in a SolarSystem class for encapsulation.

Background

I wanted a deep-purple background with stars that grow a little then get smaller again, to give that illusion of glowing stars. I can do that by having the stars randomly drawn on the canvas and changing the alpha value change its ‘brightness’.

My ‘stars’ will have 4 attributes: x,y, size, twinkle. These will be js objects with x,y being random and the size being random between 1-3. Twinkle will be our variable that alters the alpha value. (quality of image isn’t the best, apologies)

SpaceBody

This will be my parent class and will host the basic attributes mentioned previously. I will also have a draw function here that will simply display circles. (Only Saturn will be a circle PLUS the ring).

class SpaceBody {
    constructor(x, y, size, color) {
        this.pos = createVector(x, y);
        this.size = size;
        this.color = color;
    }
    
    // display method - simple circle
    display() {
        push();
        translate(this.pos.x, this.pos.y);
        fill(this.color);
        noStroke();
        circle(0, 0, this.size);
        pop();
    }
}

Sun

Here I will have the Sun at the very centre. For my interactive element of this project, I will have the mouse position be the Sun’s location and the centre of the solar system essentially. I wanted the Sun to stand out compared to the other planets so I will have a few less opaque circles around it to give that ‘glow’ effect.

update() {
        // follow mouse - interactivity
        if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
            this.pos.set(mouseX, mouseY);
        }
    }
    
    display() {
        push();
        translate(this.pos.x, this.pos.y);

        // the soft glow around the sun
        for (let r = this.size * 1.5; r > this.size; r -= 5) {
            let alpha = map(r, this.size, this.size * 1.5, 100, 0);
            fill(255, 200, 50, alpha);
            noStroke();
            circle(0, 0, r);
        }

        // main body of the sun
        fill(this.color);
        noStroke();
        circle(0, 0, this.size);

        pop();
    }

I overrode the display function here as I wanted to add the glow of the sun.
I also wanted the rings of the planets to be drawn here.

//  elliptical orbit rings around the sun
    drawOrbitRings() {
        push();
        translate(this.pos.x, this.pos.y);

        let orbitData = [
            {radius: 80, factor: 0.2},   // Mercury
            {radius: 110, factor: 0.25}, // Venus
            {radius: 140, factor: 0.3},  // Earth
            {radius: 180, factor: 0.35}, // Mars
            {radius: 250, factor: 0.4},  // Jupiter
            {radius: 320, factor: 0.45}, // Saturn
            {radius: 380, factor: 0.5},  // Uranus
            {radius: 420, factor: 0.55}  // Neptune
        ];

        // each orbit draw with faint blue
        for (let orbit of orbitData) {
            stroke(100, 100, 150, 80); 
            strokeWeight(1);
            noFill();
            ellipse(0, 0, orbit.radius * 2, orbit.radius * 2 * orbit.factor);
        }
        pop();
    }

Moon

When having my original code drafted, I was using the SpaceBody class as the base for both Moon and Planet. I then realised, I could use Moon as a child class of SpaceBody AND THEN use Planet as a child of Moon.

I did this because both Moon and Planet do some sort of orbiting, whether it be the Sun they orbit, or a planet. I would say this realisation / code was the part I was most impressed with.

class Moon extends SpaceBody {
    constructor(x, y, size, color, orbitRadius, orbitSpeed, parentBody) {
        super(x, y, size, color);
        this.orbitRadius = orbitRadius;
        this.orbitSpeed = orbitSpeed;
        this.angle = random(TWO_PI); // random starting position
        this.parentBody = parentBody; // the body this orbits around
        this.ellipticalFactor = 0.3; // 3D effect - stronger ellipses
    }
    
    update() {
        // elliptical orbit around the parent body for 3D effect
        this.angle += this.orbitSpeed;
        
        // elliptical orbit (wider than tall for 3D effect)
        let x = this.parentBody.pos.x + cos(this.angle) * this.orbitRadius;
        let y = this.parentBody.pos.y + sin(this.angle) * this.orbitRadius * this.ellipticalFactor;
        this.pos.set(x, y);
    }
}

Planet

For the planet class, I added some extra attributes to the Moon class such as hasRings ( Boolean for Saturn) and moons[] for planets with moons. Because Planet inherits the Moon class, there were fewer lines of code which was nice to have.

SolarSystem

This class was to hold all the objects (Sun, Moons, Planets).

I used AI to help me with the creation of the planet objects by adjusting the size and moon knowledge. Example, Jupiter is the biggest planet so having that planet with the largest size.

let planetData = [
    [8, color(169, 169, 169), 80, 0.04, 0.2, false, []], // Mercury
    [12, color(255, 198, 73), 110, 0.03, 0.25, false, []], // Venus
    [14, color(100, 149, 237), 140, 0.025, 0.3, false, [[4, 25, 0.1, color(220, 220, 220)]]], // Earth
    [10, color(205, 92, 92), 180, 0.02, 0.35, false, []], // Mars
    [28, color(255, 140, 0), 250, 0.015, 0.4, false, [[6, 40, 0.08, color(255, 255, 224)], [4, 55, 0.06, color(139, 69, 19)], [5, 70, 0.04, color(176, 196, 222)]]], // Jupiter
    [24, color(255, 215, 0), 320, 0.012, 0.45, true, [[5, 45, 0.07, color(255, 255, 240)]]], // Saturn
    [18, color(64, 224, 208), 380, 0.008, 0.5, false, []], // Uranus
    [17, color(30, 144, 255), 420, 0.006, 0.55, false, []] // Neptune
];

Challenges

Honestly, as I was coding this, I kept on seeing more way to use OOP such as having Planet and Moon extend this new class I made. Originally I had them as children of SpaceBody and then the update function was a global helper function then it was part of my new class. There was a lot of restructuring so I wish I spent more time focusing on the structure of the classes.

Next Time

I added the mouse position as a part of the interactivity but I want to come up with something more creative next time. Maybe having the whole system be on an angle?

Final Product

I find the final review questions delightfully absurd, so I really want to start my reflection by pondering over them.

1. 1. Are rugs interactive?
      • Before I read Crawford’s clear division of interactivity, I had never really thought about this question before, and I probably would have said yes because of its interactive tactility. But by Crawford’s definition, no—rugs don’t “listen” or “think.” However, if we glue Arduino sensors to one, making it play synth sounds when stepped on, it becomes interactive. While his definition is useful, interactivity’s boundaries blur with creativity; anything has the possibility to be interactive when reimagined with tech. Socrates’ fear of silent text feels ironic in the age of AI. What if books “could” argue back? Maybe that’s the next Kindle update.
   2. My own damn definition of interactivity:
      
      • Interactivity is when a system not only reacts to me but also alters how I react the next time. It’s a loop of influence, not just a one-off cause and effect. If the system surprises me or teaches me something about myself, that’s when it’s truly interactive.
        
   3. Throw this book across the room. Measure the distance it traveled and the angle of impact:
      •  I didn’t actually throw the book (my roommate might object), but imagining it, I realize the question is poking fun at how we measure “outcomes.” Distance and angle are just the physical data. The real interaction is in the frustration, laughter, or satisfaction I’d feel when the book is thrown on the floor. 

When I think about the characteristics of a strongly interactive system, what strikes me most is not the sophistication of the technology but the reciprocity of the relationship. An interactive system is strong when it feels alive: it doesn’t just accept my input but adapts, resists, or even surprises me in return. Instead of a flat cause-and-effect chain, it’s more like a conversation with another mind. I see this quality echoed in the text’s emphasis on feedback loops—interactivity emerges from cycles of action and response rather than one-time events.

For my p5 sketches, I want to push beyond the “click to change color” type of interactions. One idea is to give the sketch a form of “mood” that evolves depending on how the user treats it. If the mouse lingers gently, shapes might bloom and expand; if the cursor jerks around aggressively, the system could retreat or glitch out. In other words, I’d like to design sketches that don’t just follow orders but perform a little interpretation of the user’s intent. This would make interaction less like pressing buttons and more like building an emotional relationship with the code.

Concept

This project is inspired by Yayoi Kusama’s immersive polka-dot installations at the Queensland Gallery of Modern Art in Australia and her collaborations with Louis Vuitton. I’ve always admired how her work visualizes the flow of her inner world and allows viewers to enter an environment of rhythm and playfulness. My goal was to adapt this experience into a digital dot space, where users are also not only observers but active participants.

Yayoi Kusama’s Collab with Louis Vuitton

Yayoi Kusama’s Interactive Installation at the Queensland Gallery of Modern Art in Australia

Embedded Sketch

Highlighted Code

The part I am most proud of is the growth logic of my Dot:

function mouseDragged() {
//   let user to draw their own dots on top of the background
//   when mouse is pressed, add a new color dot
  let colorpick = random(colors);
  let d = random(5,20);
  let newDot = new Dot(mouseX, mouseY, d, colorpick);
  dots.push(newDot);
  
//   expand all nearby dots when dragged/clicked
  for (let i = 0; i <dots.length; i++) {
    if(dist(mouseX, mouseY, dots[i].xPos, dots[i].yPos) <= 10) {
      dots[i].grow();
    }
  }
  
}

This method became powerful when paired with mouse interactivity and repetition. In mouseDragged(), every time the mouse is close to a dot, that dot grows and creates a new one. By continuously dragging the mouse, viewers can continuously add new dots and expand them, creating a swirling, psychedelic canvas that evokes Kusama’s sense of infinity.

This small combination of object-oriented design created an effect where the user’s movement actively reshapes the artwork. It transformed the piece from a static background into a living, evolving canvas.

Reflection and Future Work 

Working with OOP in p5.js helped me think in a modular way. By separating Dot objects and their behaviors, I avoided repetitive code and could focus on experimenting with interactivity. One challenge was deciding which mouse functions to use: mousePressed() felt more like stamping stickers, while mouseDragged() created a more immersive, “infinite swirl” effect that matched Kusama’s style better.

For future work, I want to experiment with the analogical distribution of dots according to the real-life exhibit of the show. I’m also excited to explore Kusama’s “Infinity Nets” in a 3D or VR environment, where users could walk through an endless dot universe instead of only drawing on a flat canvas. I want to keep exploring how interactive code can reinterpret her immersive art (e.g., Pumpkin) in digital spaces.

I was very surprised by the opening sentence of this week’s reading as I had an Understanding IM class with Professor Shiloh just this Thursday discussing how the word “interactivity” loses so much meaning when applied to works that are at most immersive and not at all actually interactive.

“Here’s a key point about the interactive process: There are two actors, not one” was a quote from page 5 that I noted down. Some of my fellow classmates in UIM defended the popular claim that the Mona Lisa is interactive because her eyes “follow you” as you admire the artwork; they defended it because they themselves feel the magic of their favorite paintings. However, I think interactivity as a term often gets confused with “immersion” yet seems to almost be used interchangeably for so many people.

Another thing I noted down from the reading was “We tend to think of interactivity as a Boolean like virginity. But why not think of interactivity as a continuous variable with relative measures?” Although the phrasing of this comparison was a little bizarre on my first read, I actually found myself agreeing with it a lot. Crawford’s three emphasis on three characteristics of Listening, Thinking, and Speaking may naturally apply to human conversation more, but could apply to our artworks as well.

I really liked this next section on the thirteenth page– where Crawford essentially provokes the reader on the topic of books as an interactive medium. Crawford says that if you think books should be considered an interactive medium then say the word, although he’s possibly thousands of miles away and unable to ever perceive your opinion, oops! “…if you’re frustrated, you are welcome to throw this across the room, but even then, there still won’t be anybody listening to your frustrations or thinking about them.”

Overall, I thought Crawford had some good points with great ways of expressing how frustrating the nothingness burger the word “interactivity” has become and will become. And to answer his question listed at the end– “Are rugs interactive? Explain in your own words why or why not?” – I believe that rugs fall near low-interactivity at best on the interactivity spectrum. This is because some party games, such as twister, could use a rug with complex designs to form a set of rules and a gameplay loop.

Before watching the video, I used to doubt modern art a lot. Many times I would look at paintings or installations and feel they were meaningless or random, like they didn’t really say anything. But after listening to Casey Reas’ Eyeo 2012 talk, I realized that even when art looks random, there can be hidden patterns within it, patterns the artist sets into motion but doesn’t fully control. That changed how I see modern art or arts with randomness not as nonsense, but as something that balances freedom and structure.

One of the moments that stuck with me was when Reas mentioned Jean Arp’s practice of dropping paper shapes and gluing them where they landed. At first, this felt almost like a joke to me like how could that be art? But the more I thought about it, the more I understood the courage it takes to let go of total control. Arp allowed a chance to step in and become part of the artwork, and in doing so he opened up a space for something unexpected to appear.

Moreover, I was surprised at how alive his examples felt. Even though they were created by code, they reminded me of nature like plants growing in unpredictable directions or waves forming on the surface of water. When Reas used the word “homeostasis,” it clicked for me. I paused the video and looked up the meaning to understand it better. I learned that it’s a biological term describing how systems keep balance, like how our bodies regulate temperature or how living things adjust to survive. That connection made the talk feel deeper, because I began to see his generative art almost like a living organism rather than just random code. It showed me that what seems like chaos can actually be a system constantly finding its own balance, just like in nature. Later, when I stepped outside my room, I noticed how randomness and order combine all around us in the way stars scatter across the sky or the way tree branches spread into patterns.

After this talk, I don’t see randomness as meaningless anymore. I see it as another tool, maybe even a partner, that can push art into places the artist alone couldn’t reach. For me, that was the biggest takeaway: the idea that beauty can emerge not just from control, but from the spaces where control ends.

 

My Concept

When I thought of making art, many things came to mind. As a child, if someone asked me to make art, I would draw a flower. As time went on, my commitment to art slowly faded, and I began spending more of my time with friends and family. During my teenage years, I mostly loved hanging out with my friends.

Now, being far away from both my family and friends, I find myself missing them deeply. That feeling is what gave me the idea: I will make a bunch of flowers to represent myself, my social circle, and my family.

While writing the code, I wasn’t sure at first what kind of pattern I wanted for the flowers. I began with a line-like structure, but it didn’t look very good. So I looked for inspiration watching Casey’s video, exploring art documents and the first thing that came to mind was the Fibonacci series, with its spiral winding endlessly around and around. I tried to mimic that. I searched online for how to make it, and eventually created spirals.

 

I chose to make the flowers of the same kind rather than all different because, whenever I am with people, I tend to absorb their energy and reflect it back. It feels as though we are on the same wavelength, sharing a similar rhythm. That is why the flowers look alike. They represent that shared harmony. At the same time, each flower carries different colors within it, symbolizing the unique personalities of the people around me.

That’s how I ended up weaving together my love for math, my love for art, and my love for people. At the center of it all is me, the centerpiece flower. The background shifts too: it turns dark when left alone, showing the loss of color I feel whenever I lose someone in my life, and it turns light when surrounded by many flowers, reflecting the joy of being with people I love.

 

Code I am proud of:

When I was figuring out how to arrange my flowers, my first thought was to place them in a straight line, almost like a little garden bed, or maybe clustered together like a garland. But as I kept searching for better ideas and experimenting, I stumbled upon the Fibonacci spiral. It looked so elegant that I couldn’t resist trying to recreate it. Honestly, that attempt to mimic the spiral became one of my favorite parts of the code.

To bring it to life, I leaned on functions like cosine, sine, theta, and square root things I found online that could help shape the spiral pattern. But there was another challenge I faced: keeping everything centered as the pieces came closer and closer to one another. That’s when I discovered the translate function. It allowed me to shift and position the flowers neatly, and suddenly, the whole design came together in a way that felt intentional and balanced.

My Sketch

Reflection

If I had more time with this artwork, I would love to explore different ways of arranging the flowers and spirals. For example, I can imagine adding some interactive elements where the flowers respond to the user, maybe glowing when hovered over so that the piece feels alive, just like real connections between people. Another thing I would like to try is experimenting with different mathematical patterns beyond the Fibonacci spiral, to see how other sequences or shapes could carry meaning. Also, If I had time I would like to explore more on how I could make the cursor make the flower move smoothly. Currently, it feels a bit weird.

Moreover, what I really learned through this assignment is how much balance there is between creativity and problem-solving. At first, I was only thinking about how the flowers should look, but as I kept coding, I had to figure out how to make them align, how to center them, and how to keep the spiral flowing naturally. I realized that art in this form isn’t just about the final design. It’s about the small challenges along the way, the adjustments, and the discoveries that give the piece life.

Overall, this project showed me how I could bring together my love for math, art, and people into one place. The flowers don’t just make a pattern, they tell a story of connection, loss, and light, and I think that’s what makes this piece meaningful to me.

 

My concept: Continue reading “Week 1: Self Portrait”

I love Disney animated films, and one of my most favorite movies to date is Tangled. As someone who has the lantern festival at the top of her bucket list (hopefully I will get to cross it out someday), I wanted to recreate the festival + the scene from the movie in my artwork. Since these lanterns are used to make wishes, I wanted my sketch to give its users the ability to “send in” their wishes as well. Thus, there are 2 kinds of interactive elements in this sketch. First, users can click anywhere on the screen, and a new lantern will be generated there. I made these lanterns glow a little brighter than the ones that are generated randomly; it’s a subtle but important difference, I think. Second, there’s a text box where users can type in their wish, and when they press “Enter”, their wish appears on the canvas and floats up and fades away with the lanterns. I really like that part!

There were a couple of new things I learnt through this artwork. First was how to make a gradient background in p5js. I searched online and found this code, which I used as is, just by changing the colors as per my needs. The trick is to use the lerpColor() function which blends two colors to find a third color between them. Second was how to add a text box to take user input and then insert that text in the canvas. For this, I used the createInput() function. I couldn’t really find an aesthetically pleasing position within the canvas to place the text box, so I placed it right below the canvas.

This sketch took a lot of time for 2 reasons. I started by first making just a sketch of a lantern and the little glow orb around it, and after I got the look I wanted, I had to look at the coordinates and do the math so that I could generalize it for the Lantern class. I’m pretty bad with ratios, so this was definitely a challenge. I also ran into the problem of the glow becoming opaque, since the opacity level added up every time the draw() function was called, so the transparency would immediately go away. This was solved by generating the background again under the draw() function. The second reason was the castle. I had to figure out the coordinates for every single rectangle and triangle involved. In the initial idea, the hill on each side of the main castle had a different design, but in the interest of time, I took the design I made first on the left side and flipped it for the right side of the hill using what we learnt in Wednesday’s class. But I am still quite happy with how the silhouette turned out.

I’m particularly proud of the organization of the lantern code:

// spawn a new lantern
if (random(1) < 0.09) {
  // min size = 7 and max size = 15
  let size = random(7, 15);
  // don't want lanterns touching the edges
  let x = random(width * 0.1, width * 0.9); 
  // start at 2/3 the height of the canvas
  let y = height * 0.67;     
  // min lantern speed = 0.3 and max lantern speed = 1.5
  let speed = random(0.3, 1.5);
  // add lantern object to the array of lanterns
  lanterns.push(new Lantern(x, y, size, speed, 30));
}

for (let i = lanterns.length - 1; i >= 0; i--) {
  let lantern = lanterns[i];
  // Move the lantern upwards
  lantern.update();
  // Draw lantern
  lantern.draw();

  // If the lantern has floated off the top of the screen,
  // remove it from the array so it no longer gets updated/drawn
  if (lantern.isOffScreen()) {
    lanterns.splice(i, 1);
  }
}

Making a class for each Lantern object and an array to store the currently visible lanterns made the above part of the code very modular, organized, and easy to understand.

For future improvements, instead of keeping the text separately floating with the lanterns, I would want to transform the text into a lantern as it floats upwards, and make the lantern store the message so that if the user clicks on it while it’s floating it displays the wish stored in it. I would also want to spend more time on the silhouette and make the two sides of the hill different.