Concept

For this assignment, I wanted to create something that moves and looks alive using the programming concepts and techniques that I know and have learned so far. The idea that came to me was to create a weather scene showing a house during rainy weather. This idea was inspired by the difference between the weather in my home country, Fiji, where it is currently the rainy season, and Abu Dhabi, where the weather is generally very sunny. I decided to represent these two different environments in the same artwork. I used concepts like arrays, loops, Boolean variables, functions, conditionals, randomness, and animation to create a lively artwork.

Click on it!

Code I am Proud of

function draw() {
  // To draw and move the raindrops
  if (raining == true) {

    // Goes through all 100 raindrops 
    for (let i = 0; i < 100; i++) {
      // To draw the current raindrop 
      drawRainDrop(i);

      // To move the current raindrop
      moveRainDrop(i);
    }
}
// Function for drawing individual raindrop
function drawRainDrop(i) {
  fill(50, 100, 255);
  noStroke();

  // For making each raindrop
  ellipse(rainDropX[i], rainDropY[i], 5, 10);
}

// Function for moving an individual raindrop
function moveRainDrop(i) {
  rainDropY[i] += 5;

  /* If the raindrop reaches the ground, Its moved back randomly to the top with a random x position also */
  if (rainDropY[i] > 500) {
    rainDropY[i] = random(-50,0);
    rainDropX[i] = random(0, width);
  }
}

The part of the code I am most proud of is the falling rain effect. It took me several attempts and a lot of thinking to figure out how I wanted the raindrops to behave. At first, I was thinking about how I could continuously generate new raindrops while older ones were still falling. I eventually realized that I did not actually need to create completely new raindrops every time. Instead, I could create 100 raindrops and continuously reuse them by changing their positions after they reached the ground.

The arrays were important for this because they allow the program to store the position of every raindrop. The for loop then goes through all 100 raindrops and updates each one. I particularly like this approach because there are only 100 raindrops being managed, but they can continue falling and respawning throughout the entire animation. This creates the impression of continuous rain without needing to continuously create more and more objects. I am also proud of use of randomness when the raindrops respawn. If every raindrop started at exactly the same x and y position, the rain would look artificial and repetitive. Randomizing the positions makes the scene look more natural. I was able to connect this programming technique to Casey Reas’ idea of Chance Operation. Rather than using randomness just because it was useful for the animation, I was able to think about randomness as part of the artistic design of the project.

Implementation

I created arrays called rainDropX and rainDropY to store the x and y positions of the 100 raindrops. These arrays allow the program to keep track of every raindrop individually. In the setup() function, I used a for loop to create 100 raindrops and give each one a random starting position. The x-position is randomly generated across the width of the canvas, while the y-position is randomly generated across the canvas. This means that when the program starts, the raindrops are already distributed throughout the scene.

The main animation happens inside the draw() function. I used a Boolean variable called raining to determine which weather condition should be displayed. When the program starts, it shows a rainy scene, and when the mouse is clicked, the rain stops and the scene changes to a sunny one. Clicking again brings the rain back. I used a for loop to go through all 100 raindrops every frame. For each raindrop, the program calls drawRainDrop(i) to draw it and moveRainDrop(i) to move it downward. The movement of each raindrop is relatively simple. Every frame, its y-position increases by 5.

Reflection

The most challenging part was creating the falling rain, but working through it helped me better understand how arrays and loops can be used to manage multiple objects at the same time. In the future, I would like to improve the project by making the transition between rainy and sunny weather smoother, perhaps adding moving clouds and lightning, and possibly adding sound effects. I would also like to experiment more with randomness and explore how I can use programming to create more interactive and visually interesting artwork. Overall, I am happy with the project because I was able to use the programming concepts I have learned to create something animated, interactive and personal.