Month: September 2023

Raindrop Simulation Documentation

Introduction

The Raindrop Simulation is a p5.js project that simulates the behavior of raindrops falling from the sky. This project is an example of using rules and physics to replicate a real-world natural phenomenon. In this documentation, we will provide a detailed description of what the simulation does, how it works, and how users can interact with it.

Project Description

What It Does

The Raindrop Simulation replicates the following characteristics of raindrops:

1. Gravity: Raindrops are affected by gravity, causing them to accelerate as they fall.
2. Wind: A simulated wind force pushes raindrops horizontally, creating a drifting effect.
3. Variable Gravity: Users can interact with the simulation by temporarily increasing the gravity force when the “Up Arrow” key is pressed. This causes raindrops to fall faster and create a denser rainfall.
4. Splash Effect: When a raindrop hits the ground (the bottom of the canvas), it creates a splash effect.
5. Raindrop Removal: Users can decrease the gravity force by pressing the “Down Arrow” key, making raindrops fall more slowly. This allows for the removal of raindrops from the simulation.

User Interaction

The user can interact with the Raindrop Simulation using keyboard inputs:

• Up Arrow Key: When pressed, it increases the gravity temporarily, causing raindrops to fall faster and more intensely.
• Down Arrow Key: When pressed, it decreases the gravity, making raindrops fall more slowly. This also allows for the removal of raindrops from the simulation.

Implementation

Setup and Draw Functions

In the p5.js setup function:

• The canvas is created with a size of 400×400 pixels.
• A predefined number of raindrops (100 in this case) are created and stored in an array.
• The initial gravity value is set to 0.2.

In the p5.js draw function:

• The canvas is cleared with a light gray background (RGB 220, 220, 220).
• Wind force is applied to each raindrop, creating a horizontal drifting effect.
• Gravity is applied to each raindrop, causing them to accelerate vertically.
• The position and appearance of each raindrop are updated and displayed on the canvas.

Raindrop Class

The Raindrop class represents individual raindrops in the simulation. Each raindrop has the following properties and methods:

• constructor: Initializes the position, velocity, length, and splash state of each raindrop.
• applyForce(force): Applies a force vector to the raindrop, affecting its velocity.
• update(): Updates the raindrop’s position based on its velocity and applies constraints to keep it within the canvas.
• splash(): Checks if a raindrop has hit the ground and creates a splash effect if it has.
• display(): Renders the raindrop as a blue line and calls the splash() method to display the splash effect.

Demo

Full-source code

Conclusion

The Raindrop Simulation project successfully replicates the behavior of falling raindrops and provides an interactive experience for users. It showcases how computational rules and physics can be used to simulate natural phenomena. Here are some key reflections on the project:

• Realism: The simulation captures the basic behavior of raindrops, including gravity, wind, and the splash effect, providing a visually convincing representation.
• Interactivity: User interaction via the keyboard adds an engaging element, allowing users to control the intensity of the rainfall and observe the immediate impact on the simulation.
• Educational Value: This project serves as an educational tool, demonstrating principles of physics and programming in an accessible and fun manner.

While the Raindrop Simulation is functional and engaging, there is room for improvement and expansion. Here are some ideas for future work:

1. Particle Interaction: Add more complex interactions between raindrops, such as collisions or cohesion, to enhance realism.
2. Dynamic Wind: Implement a more dynamic wind pattern, including changes in wind direction and intensity over time.
3. Realistic Splash: Enhance the splash effect by considering the angle and speed of impact to create more realistic splashes.

Concept and Inspiration:

Ever since I was young one of my favorite pass times was to go to the beach and feed the seagulls bread. For that reason, my program aims to capture that movement of the bread and the following of the seagull, by using acceleration and velocity, alongside user mouse interaction.

Watch the video bellow:
seagull

Above Code Description:

What the “update” method does is it calculates the bird’s acceleration towards the mouse cursor, then it would updates the velocity and position, and limits its speed.

Execution of Code:

 Improvements: 

One thing I would really want to implement is to have multiple birds chase the bread. Or perhaps to have the bird disappear once it touches the bread. I also would really like to have more dynamic elements to the sketch like moving water or a sunrise or sunset perhaps.

After going through the class slides and watching a few videos from The Coding Train that demonstrated how to code the basic functions of random walker and vectors, etc., I decided to combine levi flight (a specific type of random walk) and walk through RGB space to add colors as well. I really liked how levi flight worked with its spontaneous stretches of lines, and I also thought it could be turned into an artwork if I added colors onto it, making both the direction and the color of the line unpredictable.

Concept

Watching the demonstrations of levi flight got me thinking about the traditional Korean painting classes that I used to take back at home, because the contrast between the long, shooting lines and concentrated, zig-zag lines were similar aspects between the two. Building upon this, I thought it might be fun to try to recreate these paintings’ general mood/style through the levi flight.

image link

Code Highlight

As for the process, I first created the vector element, then established levi flight (for which I referred to this video), then worked on the RGB aspect. A part of my code that I had a hard time with was adjusting the randomly generated probability and just how enlarged the size of steps were going to be based on that, which was this part:

var r=random(100); // setting probability
  if (r<5) {
    step.mult(random(25,50)) //enlargens the steps randomly from 25 to 50
  } else {
    step.setMag(2); //setting the magnitude
  }

After many trials, I finally settled on setting the step.mult factor to be randomly generated from 25 to 50 and the probability of r<5 because they gave me the product that is most similar to the “painting style” that I was aiming for. At this point of my progress, my assignment was looking something like this:

Then I began adding the RGB aspect, which I was really proud about just because adding colors into the canvas was so fun. I also referred to this link to learn more about the colorMode () function.

colorMode(RGB);
stroke(random(255), random(255), random(255));

At this point, I had this:

And here is the final sketch.

Reflection

I think I detoured a bit from my original inspiration/idea of what I wanted to create, but I actually ended up being happy with the final result! The pop of colors and the unpredictability really made me satisfied because it gave a futuristic/disco pop vibe.

For the future, I thought it’d be fun to also incorporate a sound element into this so that depending on each note, the graphics/lines will be affected in some ways such as color, direction, length, etc.! I also think it’d be great to add limits so that the lines won’t stay off the canvas for too long, which seemed to happen once in a while.

For this project, I chose the following from the two lists:

• • Create a random walker with dynamic probabilities
  • Walk through RGB or HSB space (as opposed to XYZ)

This project features a bee which appears when the user presses the mouse and disappears when the mouse is released. The bee has a 70% chance of following the cursor and moves through HSB space. I chose this concept to demonstrate the impact that humans can have with nature, whether it be positive or negative. This is illustrated by the fact that the bee only appears when the user interacts with the program, and it’s more likely to follow/be impacted the direction that the user chooses. 

• A highlight of some code that I’m particularly proud of
  
  

  if (random(0,1) < 0.7) { // 70% chance of moving toward the mouse cursor
       // Calculate the vector pointing towards the cursor
       let mouseVector = createVector(mouseX, mouseY);
       let direction = p5.Vector.sub(mouseVector, this.position);
       let velocity = direction.mult(this.speed);
  
       // Normalize the direction vector
       direction.normalize();
  
       // Adjust the bee's position based on the velocity vector
       this.position.add(velocity);
     } else {
       let direction = p5.Vector.random2D().mult(random(5, 15)); // Move in a random direction
       this.position.add(direction);       // Adjust the bee's position based on the direction vector
  
     }
  

  I’m proud of the fact that I was able to implement the concepts we learned in Vectors into this assignment. I used vector mathematics to calculate the direction and velocity needed for the bee to move toward the cursor. I’m also proud of how I implemented the 70% probability by using conditional logic.

• Embedded sketch
  

  Link of Sketch:https://editor.p5js.org/ahm9979/sketches/slZfNiW9H

• Reflection and ideas for future work or improvement
  • Create a bee that looks more like an actual bee – with wings and black and yellow stripes for example
  • Add more interactive elements, such as moving flowers or a starry nightsky
  • What was most challenging about this assignment is organizing the code into different classes rather than writing everything under the draw function. It does make the code neater and easier to understand but it was a long process to get there.

 

An interesting and core debate the author brings up in the reading was the clash and the balance between reductionism and taking a wider view when looking at the things around us. The author, despite bringing up valid points of view from both sides for the readers to make judgments themselves, seemed to be siding with the latter perspective, for he stresses on how reductionism and dissecting everything into its core elements is essentially no use if you are lacking the context behind them. Chewing on this, I found a correlation between the author’s example of reductionists describing the universe down to its “subatomic particles” can be isn’t necessarily the best way of explaining the entire picture as well as how I view my own life. If I had to pick a view that is more similar to my own, I also think having a wider perspective is how I live my life because I always put my emphasis on the “bigger picture” and rely on the general vision that I have for myself rather than focusing on smaller details such as which classes or even major I will choose, what kind of assistantships I will apply for at the moment, etc. Just like what the author points out, without context, or, for me specifically, without meaning or purpose, it doesn’t matter how detailed you are in planning out your actions or steps in life because you are bound to be lost without a general direction to guide you. 

Another thought that appealed to me was his mention of how the computer is the first invention that proved that engaging simultaneously in theory and experimentation is possible, because according to the reading, “someone who creates and uses a simulation” is utilizing both theory and experimentation at the same time. This made me realize just how unique and influential the invention of computers is because it is the first invention that allows us to also engage in combining these two elements together. Reflecting on my own experience with coding and computer science so far, I can definitely see how the computer wills us to use both skills at the same time because I might be learning the theoretical idea and methods of how the code will work in class or through videos, but I won’t be able to make it mine or know for sure whether it is actually applicable unless I try it out myself, which is the experimentation part. 

Just sharing some extra designs I have been working on:

These use randomness with some variations in sin and cosine to give a repetitive but iterative pattern.

The idea is that there’s an arm which randomly rotates about an axis or a pivot point and varies in size. A point is plotted at the end of the arm which gives the desired results.

In the following design, not just the point, but the arm itself is plotted.

https://editor.p5js.org/oae233/sketches/k9Xd8e1gW

Concept

So for this assignment, my working title was Random Walker “with a purpose”. Watching my random walkers wander around the screen until i refresh my code made me aware of how each walker has a little life span, which it spends doing nothing but aimlessly wandering around, so I thought I’d give it a purpose. My idea was to have my walkers start out in a random position, with a random color on a canvas. The canvas is divided into 3 areas, each area assigned one of the primary digital colors RGB. The movers move around randomly but are also able to check their surroundings, compare the colors they see to their own colours, and move toward the colors most similar to them. Finally, I wanted the movers at any point to have an equal chance at either affecting their environment (changing the color of their surroundings) or being affected by it (changing colors based on their surroundings). In this setup, you get to watch the walkers move around the canvas transforming it into an abstract landscape with varying colors. I also used points that move around randomly in a confined space to create the walkers themselves, so that they look like they’re constantly on the move, and I also think it gives them more personality

Some Code I’m Proud Of

shapeGen() {
    // Generate shapes based on noise values
    this.prepareNoise();
    for (let i = 0; i < this.vrtcsListLength / 2; i++) {
      this.vrtcsX[i] += this.mv[i];
      this.vrtcsX[i] = constrain(this.vrtcsX[i], -5, 5);
    }
    for (let i = 0; i < this.vrtcsListLength / 2; i++) {
      this.vrtcsY[i] += this.mv[i + this.vrtcsListLength / 2];
      this.vrtcsY[i] = constrain(this.vrtcsY[i], -5, 5);
    }
  }

I’m proud of the shapegen() function because of how simple it is, yet it gives so much life to the creatures. I’m also proud of the checksurroundings() function because it took me a lot of time and effort to get right as I explain in the reflections section.

Reflection & ideas for future work 

When it came to coding the part where the movers check the pixels surrounding them, I was initially using nested for loops to do this and copying the pixel data to an array, then sorting that array using the built-in sort function. This was causing my program to become very very slow even with just two movers. I spent a really long time on this issue, trying out different solutions, and eventually, with some suggestions from chatGPT as well, I was able to fix the issue. Instead of the nested for loops and going through all the pixels in the surrounding area I used one for loop to generate only 100 random pixels from the area. Also since sorting is famously very computing intensive I switched to a function that just checks for the smallest value in a list by going through it and updating a variable called “smallestIndex” whenever it finds a number. chatGPT pointed out that it was redundant to copy pixel data to a list when I could just access the pixel array directly after loading the pixels.

My project does not work if you set the pixel density to 2, In a future version I’d love to fix that because I think the smoother motion makes it more enjoyable to watch the walkers, especially at their size. I’d also love to have the walkers be able to see each one another so maybe walkers with similar colours can come together and create more concentrated areas of colour on the canvas.

https://editor.p5js.org/oae233/sketches/k9Xd8e1gW: Week #1 – Random Walkers “with a purpose”

Random Walker through RGB Space

My approach for this assignment was very simple. I decided to simply create the random walker like we did earlier in class and give it a 50% chance of moving towards the mouse pointer, at the times where it was not moving towards the pointer, I assigned it a random movement through the RGB space. 

While my code was mostly based on the random Walker we had already worked on in class, the section with the movement within the RGB space was something I explored and was glad I was able to accomplish. 

Below is a snippet of that section: 

else {
      // Random walker changing color in RGB
      let choice = floor(random(3)); // 0 for R, 1 for G, 2 for B

      //changing color components with =in respective range
      if (choice === 0) {
        this.r = (this.r + random(-5, 5)) % 255;
      } else if (choice === 1) {
        this.g = (this.g + random(-5, 5)) % 255;
      } else {
        this.b = (this.b + random(-5, 5)) % 255;
      }

As shown above this was part of my if statement that determined the movement of the Walker. If the Walker did not move towards the mouse, that is, the randomly generated value was less than the probability, then the color of the random Walker would change. In this case I decided to make the change specific to every color component. I created assigned a random number from 0-3 to the variable choice and from there I created nested if statements that were responsible from changing the RGB color components accordingly. I created a range for change between (-5, 5) to ensure that the respective components do not change drastically allowing for a smooth look in the color transformations. 

Challenges: 

The main challenge I faced was in terms of having the Walker move at first. I had all the elements of the code according the example we did in class but it turned out that I was failing to update the value of the coordinates of the direction which would result in my Walker staying still on the page. Once I added the lines that incremented the value of the coordinates I eliminated the issue in hand. I also added the p5js embedded ‘normalize’ function to the direction vector this way I was able to scale the vectors length to 1 while preserving its direction. This prevented a scattered display of the walker but rather a uniform continuous line. 

Reflection and Ideas:

When working on this assignment I was unsure of whether or not I was meeting the exact guidelines of creating a random walker with dynamic probabilities, while also having it walk through the RGB space, however I attempted to work on it to the best of my abilities. For the future I would want to experiment with ways that could combine both prompts together rather than having them in an if statement. This was not something I was able to accomplish as I have not yet grappled the concept of moving through RGB or HSB spaces, but I believe it is certainly possible to accomplish both prompts simultaneously and I plan on hopefully returning to update this code using a different approach. 

Below is the editor link for reference:

https://editor.p5js.org/dhabialhosani/sketches/08pvhUyNH

1. introduction
2. set up and initialization
3. drawing the walker
4. dynamic probability
5. https://editor.p5js.org/xw2399/full/aEYZ3H2AV
6. <a href=”http://<iframe src=”https://editor.p5js.org/xw2399/full/aEYZ3H2AV”>http://<iframe src=”https://editor.p5js.org/xw2399/full/aEYZ3H2AV”></iframe>

In “The Computational Beauty of nature” Gary Flake explores the various methods used to understand the universe and the inherent attributes that are always present in nature. Flake highlights the importance of considering different approaches to study the same topic as each approach can result in a different outcome. Flake’s example of studying ants using reductionism highlights how such an approach can strip away the intricate beauty of their colony systems. On the other hand, studying humans as groups takes away the individualistic essence of each person. This concept underscores the realization that many aspects of life remain imperfectly understood due to the universe’s intricate complexity.

This concept has made me realize how mimicking nature in programs can be done in many different ways depending on the task required. For instance, mimicking an ant colony system might require a holistic approach to capture its intricate beauty, while emulating individual human behaviors may necessitate a more nuanced focus. It is hard to understand how we should interpret each of these subjects because of the complexity of the universe knowing that some systems are parallel while others adapt and evolve due to their environment. So many things could be studied and mimicked using different approaches which could result in different outcomes.