WEEK FIVE: ARRAY SAVES THE DAY! / by Maya Pruitt

This week was especially exciting because I finally got to create the program I originally conceptualized in week two. Learning arrays is what truly made this vision possible, so I was itching to finally implement it.

By creating the ripple class last week, I already understood the concept of constructing objects with distinct properties. I also experimented with creating multiple ripple objects manually, but this was not the main objective.

The time had finally come. An array to the rescue!

With my object class already in place, it was pretty easy to build my program following Dan’s format for his bubble example in video 7.3 Arrays of Objects. This exercised again solidified the importance of order and placement of code within the program. What I mean is that code is quite logical. If I want a new ripple to be created with the click of the mouse, then the constructor code needs to be placed within the MouseClicked function:

function mouseClicked() {
  let ripple = new Ripple(mouseX, mouseY, 0, 0);
  ripples.push(ripple);
}

Here a new ripple is created (at mouseX and mouseY, size of 0 width and 0 height) with each click of the mouse. The ripple object is then stored in the array and placed (“pushed”) to the end of the array.

In a continuous loop, I want the array to grow in length, and I need each ripple object to run (which is just a function containing display() and grow() functions). This translates into a for loop inside the draw() function. 

function mouseClicked() {
  let ripple = new Ripple(mouseX, mouseY, 0, 0);
  ripples.push(ripple);
}

Sound on if you want to hear the satisfying click of the mouse!

FINAL THOUGHTS:

Writing about this program and my process here in the blog, makes it sound like building it was so easy, but in reality, it truly took me until this week to really grasp these concepts. It’s crazy how difficult this idea felt at week two…in fact, more than difficult, it felt impossible. Arrays open up the possibilities. While I am super pleased to have finally executed this original idea, I look at it now and think it’s too simple. I tried to spruce it up with minor aesthetic changes, but the future goal would definitely be to create some sort of realism. How do I make real looking water in code?

Interact with my sketch here.

Posted in