Java Methods, Variables & Simple Animation

Today we have five main tasks.
Follow along with me by importing Lec03Notes.zip into Eclipse.
Additoinal notes are provided below the agenda.

Review Java Methods: Drawing a Face
Learn about Java variables: Animation
Learn about a new math operator called mod (in code, use %)
Learn about the mouseClicked Processing method
Start Partner Work 1 and assign Individual Work 1

Methods with Parameters

Parameters allow a method to operate based on input data. For example, suppose that we were interested in drawing a square in our program at various locations and with various sizes. We could use a method with parameters for that. Since a square is drawn using a point but has equal width and height, the method only needs three parameters: x, y, and size.

public void setup() {
}

public void draw() {
  // draw a small square
  drawSquare(160, 140, 20);

  // draw a larger square
  drawSquare(90, 60, 70);
}

// a method with three parameters
public void drawSquare(int x, int y, int size) {
  rect(x, y, size, size);
}

In the drawing of the larger square:

the argument value 160 is copied into the x parameter
the argument value 90 is copied into the y parameter
the argument value 100 is copied into the size parameter

So in the line
rect(x, y, size, size);
it uses the values passed into the method and translates into writing
rect(90, 60, 70, 70);

Using Variables

In class, we discussed how creating an animation requires two main things:

vary at least one aspect of drawing something, such as its size
remember the most recent value of that aspect

To accomplish this, we introduced the concept of a class-level variable which stores data available to be used and edited by all the methods in the class. Below we introduce the variable.

  int sqwh = 10; // square width and height
                 // initial value of 10

  public void setup() {
  }

  public void draw() {
    // draw squares of the same size at different locations
    drawSquare(160, 140, sqwh);
    drawSquare(90, 60, sqwh);
  }
	
  public void drawSquare(int x, int y, int size) {
    rect(x, y, size, size);
  }

Notice that a class-level variable is written just after the line the defines the name of the class, but not inside any of the class' methods.

To accomplish animation, we'll need to edit the value of the variable each time we draw.

  int sqwh = 10; // square width and height

  public void setup() {
  }

  public void draw() {
    // increase the size of the square
    sqwh = sqwh + 2; // line 10

    // draw squares of the same size at different locations
    drawSquare(160, 140, sqwh);
    drawSquare(90, 60, sqwh);
  }
	
  public void drawSquare(int x, int y, int size) {
    rect(x, y, size, size);
  }

In line 10 above, we increase the current value of sqwh by 2. If we translated line 10 to English, we would need two sentences:

First, determine the value of sqwh and add 2
Then, store that result back in sqwh

In the current code, sqwh would essentially keep increasing by 2 forever. At some point the animation appears to stop because sqwh is so huge that most drawing occurs outside of the drawing space. We need a way to restart the animation once the value of sqwh gets too big. That's where mod comes in.

The concept of mod

Mod is a different name to refers to something you learned in grade school: the remainder after division. For example, we probably all remember this:

Recall that the remainder is never larger than the divisor. Above, the remainder is never larger than 3. It is also never smaller than 0. This property makes Mod attractive for animation... we can force a value to be between 0 and a number of our choosing, allowing drawing to take place on the screen and repeat.

For example, suppose that we wanted the square to grow in size until it reached 100, then cycle back down to 0 befor increasing again. We would write the code as follows.

  int sqwh = 10; // square width and height

  public void setup() {
  }

  public void draw() {
    // increase the size of the square
    // but cycle back down to 0 after reaching or exceeding 100
    sqwh = (sqwh + 2) % 100;

    // draw squares of the same size at different locations
    drawSquare(160, 140, sqwh);
    drawSquare(90, 60, sqwh);
  }
	
  public void drawSquare(int x, int y, int size) {
    rect(x, y, size, size);
  }

Again, remember that % does the division of two numbers but returns the remainder, not the quotient. If for example the initial value of sqwh is 99, then sqwh + 2 returns a value of 101. 101 mod 100 is 1 because 1 is the remainder from dividing 101 by 100.

A final note: we probably all remember PEMDAS from grade school too. This is the acronym for the order of operations:

Parentheses
Exponents
Multiplication
Division
Addition
Subtraction

In our class, the acronym sounds the same but adds a letter: PEMMDAS.

Parentheses
Exponents
Multiplication
Mod
Division
Addition
Subtraction

Since mod happens before addition, we needed the parentheses in the code in make sure to add 2 to sqwh first, then do the mod.

Reacting to a mouse click

The final note for today concerns mouse clicking. There are certain method names in Processing that refer to actions in the interface. For example, mouseClicked is a method that can be implemented to do something when the user clicks the mouse in the drawing space. In the example below, we will draw a square of size 20 centered at the mouse click point.

public void setup() {
  rectMode(CENTER);
}

public void draw() {
}

public void mouseClicked() {
  // draw a small square at the click point
  drawSquare(mouseX, mouseY, 20);
}
	
public void drawSquare(int x, int y, int size) {
  rect(x, y, size, size);
}

A sample project illustrating all of today's new concepts is available for import: Lec03Anim.zip

Also note: The are lots of other pre-named functions that aid processing programs. You can find more information in the official Processing reference.