Category: F2026 – Mang

Concept

The main inspiration for this project came from a certain artwork in Casey Reas’ Eyeo talk on chance operations. I really liked the idea of shapes emerging from within other shapes, so I wanted to explore that idea through something more natural. What better example of something emerging than a flower blooming? I sketched a couple of different flower shapes first so I could have them as references while coding.

Progress

I started by creating a class for the flowers and defining their properties. Then I drew the flower and its petals, and used a for loop to add multiple flowers to an array. After that, I experimented with adding inner petals to each flower, which made the blooming process more visible.

But one problem I ran into was figuring out how to make the inner petals appear after the outer petals instead of growing at the same time. I wanted the flowers to feel like they were actually blooming. I solved this by making the inner petals start growing only after the outer flower reached a certain size. This created a delay between the two layers and made the blooming process feel more realistic. I then added different colors to the outer and inner petals and made sure they were not the same color.

While looking at the result, I noticed that all the flowers had the exact same angle of rotation, which made them feel too repetitive. I changed the rotation to be random for each flower, giving them more variation and a more natural feeling.

Finally, I wanted to add an interactive element. I imagined the mouse cursor as a kind of magical sensor: when it gets close to a flower, it makes the flower bloom faster. This makes the viewer feel like they are affecting the growth of the flowers just by moving through the artwork.

//INCREASE GROWTH SPEED WHEN MOUSE IS NEAR FOR OUTER PETALS//
   let distance = dist(mouseX, mouseY, this.posX, this.posY);
   if (distance < 80) {
     this.size += 0.7;
   } else {
     this.size += random(0.05, 0.5);
   }
   //DELAY THE INNER PETAL SIZE INCREASE//
   //INCREASE GROWTH SPEED WHEN MOUSE IS NEAR FOR INNER PETALS//
   if (this.size > 12) {
     if (distance < 80) {
       this.innerSize += 0.6;
     } else {
       this.innerSize += random(0.2, 0.4);
     }
   }

Reflection

I am really proud of this project because I explored many different ideas and developed a deeper understanding of the concepts I was working with. If I were to alter anything, I would experiment with adding more variations to the flower shapes. However, I chose not to include this in the final piece because I felt that too much variation could make the artwork feel messy and take away from the blooming effect.

Based on Chris Crawford’s reading, string interaction acts like a two way conversation that needs solid listening, thinking and responding, and one weak part can break the whole experience.Beyond this idea,I also believe a good interactive system should feel approachable for regular users and give them room to experiment without breaking everything.human comfort also shaped the interaction.Even if a system completes the input-process-output loop, it stills fails as interactive work if users feel worrying they will crash the sketch etc.It should also meet users halfway:it does not demand expert knowledge to participate.New users can find satisfying results with simple actions, while people who dig deeper can still find more complex effects.there should not only be one “correct” way to interact.Multiple different user choice can all lead to interesting outcomes, rather than forcing users to follow one intended path.

For my own p5 sketch, I can make general improvements across Crawford’s three interaction stages. For better listening,  I can try to out some music ,or built some interactions that allow users to record their own voice.For better thinking, I can let the system remember past user activity so responses build over time, instead of always triggering the same fixed outcome. For better speaking, I can add clear feedback so users can tell how their actions affect what they see.

Concept

I wanted to take our in-class example of making a car class/element and use the car as a pen to scribble over the canvas. The point of this type of generative art was to create an unending and random pattern, while giving the viewer an essence of cyclicalness as the cars seemed to rush towards the right end of the canvas, and then reemerge from the other side only to repaint over their own scribbles.

Moreover, I wanted to add meaningful interactivity in the form of terrain creation, where the user can drag their pointer on the canvas to create a muddy region. This muddy region slows down the cars horizontally while maintaining their constant aggressive back-n-forth vertically. This jitter zone eventually populates with ink much faster than the rest of the canvas, and, although the mud is eventually enveloped by the scribbles, the texture of that region remains visibly distinct and dense.

Adding the telemetry HUD showing real-time average speed was a fun experiment too, giving immediate visual feedback as soon as you trap cars in your mud pits.

Code that I’m particularly proud of

 /**
   * Steers agent away from nearby cars to maintain safe personal space.
   */
  applySeparation(nearbyCars) {
    let desiredSeparation = 14;
    let steerX = 0;
    let steerY = 0;
    let neighborCount = 0;

    for (let other of nearbyCars) {
      if (other === this) continue;

      let dx = this.posX - other.posX;
      let dy = this.posY - other.posY;
      let distance = sqrt(dx * dx + dy * dy);

      // Apply repulsive force inversely proportional to distance
      if (distance > 0 && distance < desiredSeparation) {
        steerX += (dx / distance) * (desiredSeparation - distance);
        steerY += (dy / distance) * (desiredSeparation - distance);
        neighborCount++;
      }
    }

    if (neighborCount > 0) {
      this.posX += (steerX / neighborCount) * 0.04;
      this.posY += (steerY / neighborCount) * 0.04;
    }
  }
}

Why: When spawning the initial cars in a grid, I noticed that often times overlaps would happen. I started with 900 cars (30×30) initially and would use per-car seperation logic, that would reduce FPS by a lot. To reduce this calculation, I decided to implement a solution called spatial grid updating. It immidiately boosted the FPS and it future proof.

Embedded sketch

How Was This Made

This project is built around an autonomous agent model combined with an off-screen persistent canvas:

1. 1. Persistent Trails via createGraphics: Normally, calling background() in draw() clears every prior frame. To allow cars to act as drawing pens, I created an isolated rendering layer named trailLayer using p5’s createGraphics(). The car chassis, tires, mud, and HUD are redrawn continuously on the main canvas, while each car leaves permanent line strokes on trailLayer beneath them.
   2. Organic Movement & Drawing: Instead of moving in rigid straight lines, each car is given a small randomized horizontal step and an erratic vertical offset (random(-4, 4)) on every frame. This converts pure vehicle physics into an energetic, hand-drawn scribble texture.
   3. Interactive Mud Physics: The terrainPatches array records coordinates clicked or dragged by the user. On each update tick, each car performs a radius check against active terrain circles. When an intersection is detected, currentSpeed is cut to one-third of its maximum speed, concentrating the scribbles into dense clusters.
   4. Color Scheme: The color palette was curated based on vintage Bugatti racing liveries (French Racing Blue, Rouge Garance, Deep Navy, Atalante Yellow, and Obsidian Black Carbon) rendered against an off-white, parchment-toned canvas (#E4D5B7) to evoke technical drafting or blueprint paper.

References & Inspiration:

• • Craig Reynolds’ Boids Algorithm: The separation logic in applySeparation() is directly adapted from Reynolds’ classic steering behavior rules for autonomous flocking agents.
  • Spatial Hash Grids: The SpatialGrid bucket implementation was referenced from standard 2D broadphase collision detection patterns used in real-time game engines.
  • In-Class Vehicle Class: The starting chassis and wheel coordinate offsets were built out from our foundational class OOP exercise.

Problems Encountered & Solutions:

• • The Screen-Wrap Laser Bug: When cars reached the right edge and wrapped around to x = -10, line(prevX, prevY, this.posX, this.posY) drew a jarring, full-width horizontal stroke across the screen. I fixed this by adding a conditional gate (if (this.posX >= prevX)) so trails are strictly drawn while vehicles travel forward.
  • Input Flooding on Mouse Drag: Dragging the cursor across the canvas pushed hundreds of identical terrain coordinates into memory every second. I added an addTerrainPatch() helper with a minSpacing threshold of 8 pixels, ensuring clean, evenly spaced patches without choking the update loop.

Future Improvements:

Currently, there’s only one type of terrain (mud), I would like to introduce a few more, such as a zero friction zone (ice patch) that boosts horizontal velocity over the zone. Additionally, the canvas currently gets too full, and the user has no way of canvas clearing. I could add a small corner button that clears the trails, or a long press that slowly clears out trails from bottom up. Another experiment would be adding sounds to each car based on spatial circumstances.

I really enjoyed reading the article, because I really like the style, and for most it really opened up my eyes. I think I mostly agree with what it is saying about the features of interactivity, that it has to “listen, think, and speak”, although it made me think of the question, whether this makes AI interactive or not. AI has all three of these features, but I personally wouldn’t put it into the same category as an interactive website, for example. I recognise, that it is a two-way communication, like one between two humans, but it feels like a midpoint between a human interaction and a website. I think, and I might be wrong because I am not entirely educated in this, but a website has more limitations than an AI in regard to their “speaking” or response to the interaction, but a human one is far more natural, AI is just statistically choosing the next best word. The article just made me think of interactivity as a scale, where I was trying to place AI according to my best knowledge.

This ended in me thinking of maybe randomness as a feature of a strong interactive system. The article/chapter mentions 3 (listening, thinking and speaking) but I think randomness, or randomisation in an interactive system makes it interesting to keep using it. For example, I could be talking to my friends every day, and we would have a different conversation each time, and so I have the urge to keep talking to them. Maybe randomness is not even the best word to use here. Responsiveness represents my point better, because randomness can become repetitive in cases of a website. For example I made my self-portrait have chnaging clothes to the click of my mouse, but the colours were chosen from a previously set array of colours. It was random yes, but after a while it just repeated the same colours and it became boring quickly. So I would say then, the fact that a system is able to store previous information and “speak” in regard to that, is another feature of a strong interactive system. I also have to agree that design should accomodate interactivity, and a strong interactive system has a design that is able to support that interactivity.

Just because of my nationality, I have to say that I really enjoyed when he mentioned Hungarian. I actually laughed when I saw it, because I really didn’t expect it, but it felt good to know that my language is being used as an example. I even had to send a picture of it to my family.

As for concrete ideas for my sketches, I can’t really say any examples, however I know that I want to move on from simple mouse clicks and try out something that might be more complicated or requires more research beforehand. I know that when last semester I was in CommLab and making my final assignment I was able to store some informations on the website with cookies. I am not sure how, if even this is possible here, but if it is I wouls love to experiment with it.

After giving Casey Reas’ presentation a watch on behalf of my consideration for what to try out within a coding artwork of mine, it has led me to think about how I wish to incorporate random elements into my works. Perhaps one way that I can incorporate random elements in my work is if there are certain shapes and/or colors that I find myself stuck with or wish to keep as simple as possible. For instance, if I were to try creating an art pattern of lines that I wish to be originally different but don’t know how, I would turn to my code and attempt to apply requests for random elements to be used within each line. Whether it be the shapes that shall be chosen to be featured in each alternative line or the colors randomly given a separate line to represent, the random elements at hand will still share the purpose of helping make my artwork look somewhat original in a sense. But of course, this will be after I share with the coding certain rules of what boundaries/minimum limits to respect and how to at least stay on track. I am still giving the code freedom to create each line featuring an alternate shape/color of the code’s random choice; I am simply letting the computer know the rules of what lines not to cross and how to stay in touch with the goal of creating the artwork without going off-track.

With this in mind, this is why I believe that the optimum balance between randomness and complete control is the presence of rules/expectations of you, yourself, the artist. If one technically thinks about it, without any rules/expectations set for the computer to follow and remember while writing the code for your masterpiece, the computer is going to get convinced that it is free to do whatever it believes is best, and thus create an artwork that is the complete opposite of what you could be looking for. Sure, it will score enough points for trying to be unique and original with its choices of art style on your behalf, but it will lose points in acting with such intention in a careless and rather messy manner. Not to mention that in the world of art, it is almost impossible to execute the concept of artwork that represents some sort of meaning despite its messy appearance. That still doesn’t mean that the chance to create a compelling yet kind of messy artwork can be never reached; it just needs to meet the requirements of how to not go overboard with its creation in which it all lies on your hands to place forth for the computer to take note of.

The bottom line is that any artwork is still free to incorporate random elements into their work for the sake of thrilling mystery, it just calls upon you, the artist, to monitor the workings of the computer in order to see if its random choices are going along with your plan. It can point towards checking how far in height/width the computer is expected to reach while conducting its random outcomes, or even the amount of ordinary elements that it uses and how many times they’ve used otherwise. It all comes down to the idea of being fair with not just yourself but also with the computer as well. It perhaps can be seen as an example of equal collaboration that any artist should always open towards. Overall, this is all of my thoughts in regards to the idea coming from Casey Reas’ presentation.

Concept

For this assignment, I wanted to create something that felt like rain, but also resembled microorganisms under a microscope. After watching Casey Reas’ talk, I became more interested in creating a system rather than manually designing every part of the image. I wanted to start with a clear structure, rain falling downward, and then introduce randomness and interactions between the particles.

The particles are loosely inspired by microorganisms because they have translucent shapes around them and move in groups. However, I did not want to directly draw bacteria or cells. Instead, I wanted the biological feeling to come from the way the particles behave. Each particle reacts to nearby particles by attracting, repelling, and slightly aligning with them. This means that even though I set the rules, I cannot completely predict the patterns they will create.

I also added mouse interaction so that the viewer becomes part of the system. Moving the mouse pushes nearby particles away and creates a disturbance. I liked this because it makes the artwork feel less like an animation that is simply being watched and more like an environment that the viewer can affect.

Code I’m Proud Of

The part of my code I am most proud of is the interaction between particles. Instead of giving every particle a specific path, I made them respond to their surroundings.

if (distance < 70 && distance > 0) {
  nearbyCount++;
  attractionX += distanceX / distance;
  attractionY += distanceY / distance;
  alignmentX += otherParticle.velocityX;
  alignmentY += otherParticle.velocityY;

  if (distance < 18) {
    repulsionX -= distanceX / distance;
    repulsionY -= distanceY / distance;
  }
}

This checks for particles that are nearby and gives them different behaviors depending on how close they are. They are slightly attracted to particles that are farther away, while particles that get too close repel each other. They also look at the movement of nearby particles and slightly align with them. I liked this part because a fairly small amount of code can create much more complicated movement when it is repeated across hundreds of particles.

How Was This Made?

I started by creating an array of 250 particles. Each particle has an x and y position, a velocity, and a size. I initially gave all of them a downward velocity so that the overall system would resemble rain.

After that, I added the particle interactions. For every particle, the code checks the other particles within a certain distance. Based on those distances, the particles attract, repel, and align with one another. I also added random() to their movement so that they do not behave exactly the same way every time.

The background is dark purple and slightly transparent, which allows previous frames to remain visible. This creates trails behind the particles and makes the canvas itself become part of the artwork.

Finally, I added mouse interaction. When the mouse gets close to a particle, the particle is pushed away. Moving the mouse quickly creates a stronger disturbance, so the viewer can influence the behavior of the system.

Reflection and Ideas for Future Work

I think this assignment helped me understand Casey Reas’ idea of balancing structure and randomness more clearly. I started with a very controlled idea, which was simply particles falling like rain, but then allowed the system to become less predictable through randomness and particle interactions. I liked that I was defining the rules without directly defining the final image.

One thing I found interesting was that the particles sometimes begin to move together and form patterns even though some of their movement is random. This relates to Reas’ discussion of swarm dynamics and made me think more about how systems can create order on their own.

I am fairly happy with the final result, especially because the viewer can disturb the system with the mouse. In the future, I would like to experiment with changing the rules while the artwork is running, so the system itself could gradually become more unpredictable.

In the video, Casey Reas talks about moving from total structure toward slowly introducing randomness within a controlled environment, and eventually giving up even more control to the canvas itself. I particularly liked his discussion of structured order, including the structure within his own work, as well as the way he critiques the philosophy behind each artist he presents.

When he says, “I wanna make my own reality,” and begins talking about imitating biology, I understood exactly where he was coming from. As a visual artist, he seems to move from thinking about objects to thinking about behaviors, and then to thinking about the individual elements that make up those behaviors. Once those elements begin interacting according to certain rules, they can produce outcomes that are difficult to predict, what he describes as a form of “chaos.”

I also found his discussion of swarm dynamics interesting. Even when each individual element behaves somewhat randomly, the system can eventually synchronize and settle into a pattern. That raised an interesting question for me: how do you design a system that continues to feel random and alive rather than eventually becoming predictable?

My biggest takeaway from the video was the idea of applying these concepts to multisensory artwork, especially when Reas brings up John Cage’s use of chance in music. A computer can take a simple set of rules or sounds and multiply them millions of times, creating something far more complex and extraordinary than what was originally defined. At first, I might see something like that as just noise or background. But as Reas demonstrates, that “background” can be given its own behavior and brought to life in unexpected ways.

After watching Casey Reas’s Eyeo take on chance operations and the idea of randomness in generative code, I was highly drawn to his idea of the co-existence between control and randomness. His talk particularly reminded me of a moment that I experienced when creating my generative artwork as a new coder. At first, I highly intended to create a piece that sparks a sense of realism to the audience. However, my perspective quickly changed when I typed a piece of code wrong and my entire artwork was changed for the better. The artwork now had more life and interactivity to it, which I believed was the better direction as it opened doors for varied interpretations and understandings. Reas’s particular argument that having a balance between order and chaos definitely illustrated the idea that unexpected results can spark interest and curiosity as opposed to a fully ordered and precise piece. 

Moving forward in the Interactive Media course this semester, I was highly inspired by Reas’s approach to randomness and therefore I plan on incorporating random elements into my work by looking at code as a space for experimentation and play, rather than a set of rules that must be strictly followed. This perspective challenges my previous perception of coding as something restrictive and inflexible. I already began incorporating randomness and chance into my pieces through elements such as color, speed, and space. 

After watching the video and understanding Reas’s perspective on control and randomness, I believe that the optimum balance between total randomness and total control lies in the artist’s intentions for their artwork. A big part of art is how the audience perceives it; therefore, by incorporating randomness through interactivity, artists enable the audience to approach the artwork from their own perspective. This creates and illustrates new meanings and understandings, whereas total control can limit the accessibility/opportunity to discover unexpected possibilities within an artwork. I personally believe that the percentage of randomness should be slightly higher than the percentage of control in generative art as this approach allows for more unexpected outcomes and gives the artwork a greater sense of creative meaning.

One idea from Casey Reas’s talk that stood out to me was the relationship between randomness and control when creating art with code. Since I am still new to coding, I try to make my code as neat as and understandable as possible. The ability to visually comprehend my code is something I find important, such as where an object appears, what size it is, and how it should look. However, Reas made me think differently about randomness. Instead of seeing it as something that makes a piece messy or unorganized, I think randomness can make digital art feel more alive and less predictable. Reas touched on the topic of emotion and how something as simple as randomness can evoke emotion when used with direction and intention. This idea resonated with me because I like looking for deeper meanings behind things that may not initially seem meaningful. Randomness, for example, can easily seem meaningless or accidental, but Reas made me realize that when it is used intentionally, it can contribute to the emotion or message behind a piece of art. If I were to incorporate randomness into my own work, I would probably use it on smaller elements rather than the entire piece. For example, I could slightly change the position, size, or movement of certain shapes each time the program runs. This would allow every version to look slightly different while still keeping the original idea recognizable. I especially like the idea of using randomness to create imperfections or “jitter,” because those imperfections add a human touch, and add more meaning to the artwork.

While watching the video, I came to realize that I do not think there is one perfect balance between randomness and complete control. I think it depends on what the artist is trying to communicate and how they want the artwork to feel. Personally, I would lean more toward control because I still want the message I am trying to convey to be clear. However, Reas examples made me realize that adding elements of randomness does not mean that the meaning of the image would be erased. The artist is still the one deciding what specific code, elements, shapes and amount of randomness in the artwork. This made me question whether randomness in coded art can ever actually be considered completely random if the artist is still the one setting the boundaries for it.