Coding Assignment – Week 10

Concept and Approach: 

In this assignment I found experimenting with matter.js somewhat challenging so I decided to have my sketch be simple. My inspiration was the few rainy days that we had on campus, and specifically the one day over fall break where it rained heavily. I remember looking at the raindrops hitting the floor and then bouncing back until there was a thin layer of water forming on the ground. Through introducing matter.js into my sketch I attempted to create a similar effect wherein the raindrops would fall and hit one another on their way down, eventually they collide with the ground and form a layer of water on it.

Knowing I wanted to create a particle falling from the sky effect I began first by just looking into how I could do that. Getting inspiration from the revolute constraints example that we did in class, I was able to create a bunch of circles falling through the canvas. I realized then that I needed to create a ground of some sort to have the raindrops land on it. This is when I came across The Nature of Code’s tutorial on matter.js. I learnt through it how to create a world based on the matter.js engine, and have this world contain all the attributes of my sketch including the ground and the raindrops.

I think what I found a bit challenging was deciding on the effects that would take place at collisions, so when the raindrops collide with one another, as well as when they collide with the ground. I decided that the effect that could possibly mimic reality would be having the raindrops become less apparent, that is, they dried out, or merged into one upon impact with one another. I did that by having their opacities decrease upon collisions. For colliding with one another I created the isColliding function which basically measures the distance between the raindrops. If they were found to be colliding then their opacities would decrease. Eventually once they fall on the ground two elements get checked, their position (on or off screen) and their opacities (<=0). If either is true the raindrops get removed.

 // Check if the particle is off the screen or has zero opacity
  isOffScreen() {
    let pos = this.body.position;
    return pos.y > height + 100 || this.opacity <= 0;
  }

  // Check if the particle is colliding with another particle
  isColliding(otherParticle) {
    let distance = dist(this.body.position.x, this.body.position.y, otherParticle.body.position.x, otherParticle.body.position.y);
    return distance < this.body.circleRadius + otherParticle.body.circleRadius;
  }
}

// Check for collisions with other particles and adjust opacity
   for (let other of otherParticles) {
     if (other !== this && this.isColliding(other)) {
       this.opacity -= 2; // Decrement opacity when it collides with other particles
     }

for (let i = particles.length - 1; i >= 0; i--) 
{
  if (particles[i].isOffScreen()) 
  {
    particles.splice(i, 1); // Remove the particle at index i
  }
}

An element that I was glad I included was the wind force. Prior to having it, the rain drops all fell in the exact same way making the sketch seem somewhat consistent and less realistic. With that said, I am still very bothered with the way they land on the ground, as the change in their opacities still does not reflect the disperse of water particles that I was looking for. I couldn’t really think of way to incorporate that though I experimented with having the raindrops change into lines upon impact, it still just looked unnatural.

// Apply wind force
   let wind = createVector(0.01, 0);
   Matter.Body.applyForce(this.body, this.body.position, wind);

Reflection and Ideas:

For future improvements I think the main thing I would work on is the issue of colliding with the ground because as of now they look like solid particles rather than liquid raindrops. I could possibly incorporate sound effects and other forces that could cause disturbances to the way raindrops fall. I think one other thing I could work on is having them bounce back a bit higher to mimic the way raindrops fall when there is already a heavy layer of water that has formed on the ground. Otherwise, I am pretty satisfied with the outcome of the sketch especially since running the matter.js engine was causing a lot of lags on my computer that made sketching any thing on the canvas a lot harder.