Week 3 – OOP Array Production – Joy Zheng

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.

Week 3 – Functions, Arrays, and Object-Oriented Programming

For this project, I started with the really basic car code that was shared with us as an example. I liked how simple and clear it was, so I decided to build on that idea. I kept the general structure and movement the same, but instead of a car, I turned it into a spider. That meant changing the shapes, adding legs, and making it look a little more alive.

One thing I found pretty challenging was getting the legs to wiggle naturally. At first, they either didn’t move at all or moved in a really awkward way. It took me some trial and error, especially using functions like sin() and playing around with timing, to get it just right. In the end, I was able to make the spider’s legs move in a subtle way, which makes it feel like it has a bit of personality as it crawls around the canvas.
// make legs wigle
  legWiggle(index) {
    const phase = index * 10;
    return sin((frameCount + phase) * 0.05) * (this.legLength * 0.15);
  }
This piece of code makes the spider’s legs wiggle a bit, and it was honestly the hardest part for me. I had to keep experimenting with the numbers until the movement looked smooth and natural instead of random or awkward.

Week 3 – Reading Reflection

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.

In response to “What do you consider to be the characteristics of a strongly interactive system? What ideas do you have for improving the degree of user interaction in your p5 sketches?”, I think the strongest characteristic of an interactive system is a feedback loop that rewards curiosity and engagement. As for ideas for improving the degree of user interaction in my sketches, I believe variability is vitally important to the repeatability of an experience. 10 people could interact with the same interactive sketch and each of them would experience something noticeably different.

Reading Reflection: Week 2

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.

Week 2: Art Work

 

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.

 

Week 3: Make a Wish <3

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.

Reading Reflection – Week 3

“Any idea worthy of my attention is probably too big and too complicated to be reduced to some schoolmarmish formula.”  I was quite shocked when I read this sentence. Not because I disagree, but because I feel like the whole world should read this sentence. I have always thought that society tries to package thought into neat definitions and slogans, which is not only convenient but, in my opinion, shallow. This line reminded me that oversimplification can actually strip an idea of its essence, turning something profound into something hollow. This reading overall was peppered with ideas that made me question most of what I knew about interactivity. Examples include the idea that many things typically labelled as ‘interactions’ are actually ‘reactions’, that interactivity could be a subjective concept that exists in the eye of the interactor, and that two strong factors cannot, in fact, outweigh the weakness of the third (a principle I personally used a lot).

All this combined, I think there are a few characteristics that would define a strongly interactive system. Firstly, I think the level of interactivity should be “high”. In terms of the metaphors used in the text, that would mean strong listening, speaking, and thinking simultaneously. Secondly, adaptability needs to work both ways. The system should be able to adapt to the user and the user to the system. Thirdly, I think it’s important that the user feel in control, rather than fighting the system, which is what happens when ‘interactive’ systems are built without proper understanding of what interactivity is. Finally, and this may sound vague, but a system is “strongly interactive” when the user’s “interaction” is so absorbing that it makes them not want to stop.  When the author brought up movies, it reminded me of the interactive story game apps that were popular a few years ago, where the user played a part in how the story moved forward. Maybe this is a “low” level of interaction, but it seemed to really have people hooked at the time. That said, I would agree with Crawford that interactivity is more of a spectrum, and it’s important to maintain its balance in artworks.

Through these ideas, I thought about how the user can have the chance to influence my p5js sketches. Maybe this could be through having a say in the color palette or the illustration style, or by having buttons that change the nature of the sketch completely. Maybe clicking on the canvas can add more of already existing elements, or cause different elements within the sketch to interact with each other. The possibilities are endless.

Week 3 – Functions, Arrays, and Object-Oriented Programming

My artwork shows three race cars speeding along a simple racetrack. I love Formula 1 racing, so I wanted to recreate that feeling of speed. I was inspired by the basic car sketch example from our course website but decided to add my own twist and take it a step further by making it interactive. The cars keep looping so it looks like they are racing, and when you click a car, the FPS increases so it look like the race speeds up. Pressing R resets everything back to normal speed. I also designed a simple racetrack with grass, yellow side lines, and dashed lane markers so the cars look like they have their own lanes.

The inspiration for this piece came from our course website, which is where I found the basic car sketch as well as our substitute lesson last week with professor Riad where we explored the ball example using arrays and classes together. I used that same logic but applied it to race cars instead of balls. I also watched a few beginner p5.js tutorials on YouTube to understand how to make objects move, wrap around, and respond to mouse clicks. It took me a lot of time because I am a beginner, but I learned so much through the process.

Before starting to code, I sketched out my track layout and car design on paper. This helped me visualize the dimensions of the canvas, where the grass and track edges should be, and how many dashed lanes I needed to divide the road evenly. I also planned the car shape very simply just a rectangle with two filled circles as wheels  because I wanted something that looked good but stayed beginner-friendly to code. On the side, I brainstormed interactions like clicking for color changes or speed boosts, eventually deciding on the speed change because it made the race feel more alive. This sketch was a key part of my process because it gave me a clear plan and made the coding step much easier and less confusing. It also reminded me that even with simple shapes, I could create something that feels playful and interactive.

In terms of how I organized my code, I used a setup() function to create the canvas and make three cars with different colors and speeds. These cars are stored in an array so I can easily loop through them. The draw() function runs every frame and draws the track, moves the cars, and displays them. I made a Car class with three main functions: move() to update the car’s position, show() to draw the car’s body and wheels, and clicked(Mx, My) to check if the mouse is inside the car. I also made separate functions called drawTrack() and drawDashedLine() to handle the background design so that my code stays neat and organized.

One of the parts I’m most proud of is this snippet of code:

// make cars faster when mouse is pressed (click on any car)
function mousePressed() {
  for (let i = 0; i < cars.length; i++) {
    if (cars[i].clicked(mouseX, mouseY)) {
      fps = min(fps + 10, 120); // increase frame rate
    }
  }
}

// reset when R is pressed
function keyPressed() {
  if (key === "r" || key === "R") {
    fps = 60; // reset fps
  }

This code is what makes the program interactive and fun. When the mouse is pressed, the for loop goes through every car in the array and checks if we clicked on it using the clicked() function. If we did, the frame rate (fps) goes up by 10, but never past 120 because I used the min() function to cap it. This makes the cars look like they are racing faster. The keyPressed() function resets the speed when I press R. It took me some time to this figure out how to change the FPS, but once I got it working, it felt very satisfying and made the project feel like a real race.

This was my first time using classes and arrays together in JavaScript, so it took me a long time to get it right. I had to watch many videos, look at examples, and experiment with my code to get the movement, wrapping, and interactions working correctly. The biggest challenge was figuring out how to make the cars speed up when clicked I first tried changing only one car’s speed, but it looked strange. Eventually, I made the whole race go faster when you click, which feels much more exciting and gives the sense of a real race picking up speed. Even though it was challenging, I am proud of how it turned out and I learned a lot in the process.

Week 3 – Reading Response

A strongly interactive system, in my view, must first be intuitive. This doesn’t mean it has to be entirely self-explanatory, but if users need several pages of instructions just to figure out how to interact, the design has already failed. I mean who is going to even read 2 pages of manual/instructions these days, right? The interaction should feel discoverable through exploration.

As Crawford explains, any interaction has three parts: listen, think, and speak. If even one of these elements is weak, the entire interaction becomes unsatisfying. I think that in creative computing or digital art we often overemphasize the input (listening) and visuals (speaking) but ignore the algorithm or logic (thinking). The system should have enough diversity in its logic to produce interesting, varied outcomes rather than repeating the same response every time. Take Super Mario as an example. Imagine a version where you could only press the spacebar to jump, and Mario never actually moves only the background scrolls to simulate motion. Technically, that would still be “interactive,” but it would quickly become boring. A good interactive system allows you to achieve multiple outcomes for example move left, right, jump, pause, and even fail in different ways, giving players control. This diversity of interaction is what makes it engaging.

I also think interaction should strike a balance between predictability and surprise as we’ve discussed in class. Too much predictability leads to boredom  for instance, a game with only one level becomes dull after you memorize where every obstacle is. But if an interaction is completely chaotic it becomes unintuitive  and confusing. The balance is a design where users can learn patterns but still encounter enough new elements to stay curious.

Reflecting on my own p5 sketches, I realize I rely heavily on mouse clicks, which makes them feel reactive rather than truly interactive. To improve, I could add keyboard controls, use microphone input for both visual and audio effects, and introduce randomness so every run feels slightly different. Immediate feedback maybe by simulating animations, color changes etc. would also make interactions more interesting. Finally, asking friends to try the sketches and improving based on their feedback would help me design from the user’s perspective, not just my own.