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.
