WEEK FOUR: REORGANIZING CODE

This week, our assignment was to revisit past projects and reorganize our code based on our new knowledge of creating functions.

Determined to get the Ripple program running the way I originally envisioned it, I saw this as a good opportunity to expand on it, reorganize it, and set it up for when we learn arrays this coming week.

I chose to make the expansion of the ripple its own function. What is kind of liberating about code is that though there are rules in terms of syntax, or how certain elements are defined, in the end, how we want to do something or what we want to do is up to the programmer. I could have made a modifiable function that takes parameters, or have it do a calculation that returns a value. However, I decided I just wanted a standard rate of growth, so the resulting function looks pretty simple:

 grow() {
    this.rw += 2;
    this.rh++;
  }

The cool part is that now any shape can have grow applied to it. Check that out here.

To challenge myself, I created a Ripple class. I know this will serve me in the long run, because the goal is to create a new ripple object with each click of the mouse.

Defining what it means to be a ripple:

class Ripple {
  constructor(clickX, clickY, rw, rh) {
    this.clickX = clickX;
    this.clickY = clickY;
    this.rw = rw;
    this.rh = rh;
  }

  display() {
    noFill();
    ellipse(this.clickX, this.clickY, this.rw, this.rh);
  }

  grow() {
    this.rw += 2;
    this.rh++;
  }
}

With the class I am able to make multiple ripple objects. However, because the position of a ripple is determined by a mouse click, there is no way now to make two different ripples starting at different positions or different times of growth. In other words, ripple size is modifiable (fig.A) and position only if ClickX or ClickY is changed with equation. The former will show two ripples inside one another, and the latter scenario will have two ripples grow at the same time in different locations.

Fig A. Line 32 & 33 show two ripple objects, the only difference between them is the size of ripple width and height. This creates concentric ripples upon a mouse click.

Fig B. Line 33 indicates that position is being modified when clickX and clickY are multiplied by two. This causes both ripple objects to appear at the same time, but at different positions with the click of the mouse.

Final thoughts:

Location, location, location! This applies to code as well. My biggest take away from this week is that where functions are placed in the program truly determines what will or will not happen. Watching Dan’s videos, we see our first example of a class object being run by putting the constructor in the setup() function. I quickly learned that my program wouldn’t run that way. If I want a ripple created when a mouse is clicked, then that is where the constructor function should be placed – inside mouseClicked! A simple order change can be a determining factor too. This reinforces why having variables at the top makes sense. The computer won’t be able to use variables if i doesn’t know what they are, or what they have initially been set to.

I constantly have to remind myself that the computer doesn’t think like a human does. So abandon your humanity, it’s the only way to code! Jk jk.

See the final organized ripple program here.