CS1335 Documentation¶

Course Overview¶

Declaration and Initialization¶

In the example code below, the first line of code prints the sum of 2 integer literal values. In the code that follows, int and float variables are declared and assigned values.

println( 5 + 7 );  //two integer literal values are added together

int num1;  //declare an integer variable

int num2 = 5;   // declare an integer and assign it a literal integer value

float num3 = 5.0 //declare a floating point variable and assign it a literal decimal value;

Typed Variables¶

When using P5js and the Khan-Academy Javascript Tutorials, variables were all of the type var. There was no distinction between different types of variables. However, with Processing, all variables must be declared as a specific data-type such as int, float, boolean, char, etc. Typed variables allows the computer to allocate enough memory to hold the value.

Integers¶

Whole numbers like -1, 0, 1, 2.

println( 5 / 3 );     // 1

int num1 = 5 / 2;   // 2   the remainder from division is truncated.

int num2 = 5.0 / 2  // error cannot convert from a float to an int

Floats¶

Decimal numbers like 1.0, 5.5, -1.0. Also, whole numbers like 1, 0, 1 can be stored as floating point numbers.

When initializing floating point numbers which are created using math operators, it’s important to realize that integer division can cause unexpected results. Multiplying each division expression by the float value 1.0 can help insure no truncation occurs.

In the code below, since both 2 and 5 are written as integer literals, then expression 5/2 is evaluated using integer division. Make sure that at least 1 value is a decimal value to insure correct division of numbers assigned to float variables:

float someFraction = 5 / 2;   // 2.0   integer division of 5/2 is truncated so the result is 2.0

float correctFraction = 5.0 / 2;    // 2.5

float correctFraction2 = 5 / (2 * 1.0)  // 2.5  multiplication by 1.0 insures decimal division

Integer and Float Type-Conversion¶

Care must be taken when using float and int variables in expressions or mathematical operations together, particularly when doing division. In general, an error will be generated if an operation will result in truncation. Processing can automatically convert an int to a float value, however an error will occur when trying to convert a float value to an int value.

int num1 = 5;
int num2 = 2;

float val1 = num1 / num2;       //2.0  integer division expression is evaluated then assigned to val1.

int num3 = val1;        // error cannot convert from a float to an int

Processing provides type conversion functions to allow conversion between int and float variable types. There are 2 different but equivalent syntax conventions for type conversion displayed in the example code below:

float val1 = 5.2;

int num1 = int( val1 );  // 5   With this syntax, int( ) works like a function to convert a float value to an integer.  The value is truncated.

int num2 = ( int )val1;   //5   This syntax also works to convert a float to an  int, and results in truncation of the number.

Modulus Operator¶

The modulus operator % calculates the remainder of integer division. Modulus is often used to determine if a number is odd or even where n % 2 equals 0 if n is even.:

println( 5 % 2 );   // 1        2 goes into 5 two times with a remainder of 1
println( 5 % 3 );   // 2        3 goes into 5 one time with a remainder of 2
println( 12 % 2 );  // 0        test to determine if 12 is even, for any number n, if n % 2 = 0 then n is even.
println( 2 % 5 );   // 2        5 goes into 2 zero times with a remainder of 2

Booleans¶

Boolean variables can have the value true or false; Boolean variables are useful for storing the state some program element to control some branch option within the program, often within a conditional branch, the boolean variable value is changed to indicate the state of the program has changed.:

var isActive = true;
if(isActive){
        doSomething();  //trigger some state dependent behavior
        isActive=false  //change the state variable after the state behavior has been triggered
        }

Characters¶

Single letters or other unicode symbol like ‘a’, ‘b’, ‘A’, ‘%’ . The char variable type must use single quotes around a single character. When multiple characters are used in a single variable, then the :code: String variable type should be used.

char someChar = 'a';
char otherChar = '&';

Random Numbers¶

The random( ) function in Processing can be used to generate psudo-random variables. The random(float min, float max) function takes 2 input parameters and returns a floating point number ranging from the first argument to the second argument. If only 1 argument is used, then 0 is the default minimum value.:

float randVal1 = random( 1 , 100 );   //returns a float between 1 and 100.
float randVal2 = random( 100 ); //returns a float between 0 and 100.

Questions¶

What are the values of the following?

1. int num1 = 2 % 10;
2. int num2 = 10 % 2;
3. int num3 = int(4.999);

Function Syntax¶

When writing a code for function, the following components define the syntax of a function definition.

returnType functionName( int arg1, float arg2){  // int and float parameter arguments
        // body code of a function
}

For an example function that adds an int and a float values, the function syntax is

• function name: addNumbers

• function return type: int  //the variable type of the function's return type must be declared

• function arguments: int arg1, float arg2 //arguments must have a declared variable-type

  int addNumbers( int arg1, float arg2){   //function signature
          int sum= arg1 + int(arg2);
          return sum;
  }
  

Functions and Variable Scope¶

In Processing, variable scope is defined by code blocks which are enclosed within curly brackets: { }. When designing functions, it’s important to understand that function input parameters and any variables declared within the function body are local variables to the function. When a function is executed, those variables are initialized for use within the function, but when the function execution terminates, those variables are effectively destroyed, and the memory space is returned to the computer system so it is available for use by other processes. In contrast, global variables exist for the entire life of the program execution, they aren’t destroyed until the program terminates.

When designing programs and functions, it’s important to consider which variables should be global, there should be a compelling reason why any variable has global scope, most variables should be local variables.

Function Arguments¶

When designing functions, it’s helpful to think of the input parameters as being values that you’d like to have access to modify from outside the function. Often when designing functions, as you iterate through several design steps, you may decide to add more input parameters to your function so that you have more flexibility when calling the function. If the Processing rect() function only had x,y position as input parameters, then we’d be quite limited in how we could use the function. The addition of width and height parameters gives more flexibility. There’s also another version of the rect() function that takes and additional parameter to specify the radius of corners so you can create rounded rectangles, this is an example of function overloading which is explained below.

rect(float x, float y, float width, float height, float radius); // rounded rectangle version of the rect() function

Function Overloading¶

Often when designing functions, we can design multiple versions of a function, where each version of the function takes a different number or type of input parameters. In Processing this conveniently allows for several different versions of the fill function.

fill(float grayScale);   //one input parameter corresponds to grayscale colors

fill(float redVal, float greenVal, float blueVal);  //three input parameters corresponds to RGB.

/* Using a global state variable, set with colorMode(), allows the same fill( ) function signature
create HSB colors while still using the same function definition. */

colorMode(HSB);   //the the colorMode function changes a global color-state variable to control how fill() behaves

fill(float hueVal, float saturationVal, float brightnessVal);  // now the fill color is HSB

HSB Color-Slider Example¶

The HSB Color-Slider Example project creates an interactive HSB color selector to demonstrate the iterative design process for designing functions. In order to create this UI-widget, first we need to figure out the required components. First, let’s plan to create a simple rectangle that is filled with the full HSB hue-range. Then we’ll need to figure out how to let the user interact with it to select a color. Then we’ll want provide a way to use that selected color in another part of the program.

• Input values: position and size of the slider widget.
• Output values: a hueValue that has been selected.
• Display: some representation of a range of hues, and indication of currently selected hue value.
• Interactivity: a means for the user to modify and select a hue value.

Project and Code: HSB Color-Slider Example

The image below shows the widget we’ll design in this code project.

Overview¶

The project below creates an interactive HSB color selector as an example project to demonstrate the iterative design process for designing functions. In order to create this UI-widget, first we need to figure out the required components. First, let’s plan to create a simple rectangle that is filled with the full HSB hue-range. Then we’ll need to figure out how to let the user interact with it to select a color. Then we’ll want provide a way to use that selected color in another part of the program.

• Input values: position and size of the slider widget.
• Output values: a hueValue that has been selected.
• Display: some representation of a range of hues, and indication of currently selected hue value.
• Interactivity: a means for the user to modify and select a hue value.

The image below shows the widget we’ll design.

HSB ColorMode¶

HSB Color works well for a color picker because it allows for a full color spectrum to be represented by making incremental changes to a single color variable. In Processing, we can use the ColorMode(HSB) function so that the fill() and stroke() functions can use the HSB color values instead of the default RGB color values. Whereas when using the fill(float redVal,float greenVal,float blueVal ), the input values specify red, green, and blue color components. With HSB, the 3 input parameters for fill(float hueVal,float saturationVal, float brightnessVal) specify hue, saturation and brightness values.

For the HSB slider, we’ll keep the saturation and brightness fixed at the maximum values of 255, so the only value that changes for this widget is the hue value, which will range from 0-255. The image below shows that the top surface of the HSB color-space cone represents values where the Brightness value is maximum. The top surface of the cone represents a color wheel with saturation varying from 0 at the middle of the cone to a maximum saturation at the outer perimeter of the wheel. At the outer perimeter, the saturation and brightness are at the maximum values, the hue varies in values from 0 to 360 degrees. So, the minimum value of hue = the maximum value of hue = Red.

Our color slider (above) also shows that red occurs at the both the maximum and minimum values. Although the circular values for hue range from 0 to 360 degrees, we will use the Processing convention of having color values that range from 0 - 255, which corresponds to 8 bits of color information for each color input parameter. We will have to insure that our slider shows the full range of hue values, so we’ll need to transform the 0-255 values to fit within the width of our rectangular slider sWidth dimensions.

Image from: TomJewett.com

Function Declaration¶

Because this will be an interactive widget, then we’ll need to use the processing draw() loop. We’ll also start with the setup() function so we can set the canvas size. We also know that we’re going to create a function that displays an HSB Slider so we can create the declaration that function using the information we identified above:

void setup(){
size(300,100);
}

void draw(){
        float hueValue = drawSlider(20,20,200,50);  //draw the slider at x=20,y=20, 200px wide, 50 px tall
}

//function to create interactive HSB slider, returns the selected hueValue
float drawSlider(int xPos, int yPos, int sWidth, int sHeight){

}

Function Design - Step 1¶

So, now we need to think about what code we will write inside of the function. The things we need to do in the function are:

• Draw an HSB hue gradient inside a rectangle to show available colors for selection.
• Draw another small rectangle to show the selected color.
• Draw an indicator rectangle that slides along the slider to modify the color.
• Write code to allow changing values when the user drag the slider indicator.

Hue Spectrum- Rectangle¶

The first thing to do is to draw a basic rectangle using our function’s input values. Then we need to figure out how to create a RoyGBiv rainbow spectrum inside the rectangle that corresponds to the full range of hue values from 0-255. One idea is that we could fill the rectangle with points of color, where we vary the hue value of each point along the x and y values of the rectangle. However, for our needs, we can actually use lines since we don’t need to vary the color along the y-axis, all points in the rectangle that have the same y value will have the same hue value. So, to color lines, we need to use the stroke() function in Processing. We’ll want to use a loop, and for each value of x in the rectangle, we’ll want to vary the hue value. We can do that with a for loop, where each value of i corresponds to a 1 pixel increment in the x direction. If our rectangle was 255 pixels wide, each pixel would represent 1 possible hue value. That code would be something like this:

colorMode(HSB);   //set the colors to HSB

for( int i = 0; i <= 255 ; i ++ ){

        stroke( i , 255, 255 )  // i is hue value, 255 is max value for saturation and brightness

        line(i, yPos, i, yPos + sHeight )  // the line is vertical at x=i, y values are yPos, and yPos+ sHeight

}

This would work fine if we always wanted to have our slider have a width of 255 pixels, however we’d like to give ourselves more flexibility so that we can create sliders of any width, based on the input value sWidth of our function parameters. We basically need to determine the fractional position for each location and multiply that by the max hue value of 255. We could write a separate function to do that calculation like below

float hueMapping( int i, float sWidth ){  // i is the current value of 'i' in the for loop

        return ( i / sWidth ) *  255 ;  // will return values in range of 0.0 - 255.0
}

Then we could use in the following manner in the for-loop of our function

for( int i = 0; i <= 255 ; i ++ ){

        float hueValue = hueMapping( i, sWidth) // local variable within for loop: values in the range of 0-255

        stroke( hueValue , 255, 255 )  // i is hue value, 255 is max value for saturation and brightness

        line(i, yPos, i, yPos + sHeight )  // the line is vertical at x=i, y values are yPos, and yPos+ sHeight

}

Map() Function¶

This type of calculation is a mapping between 2 value ranges, we have a current range of 0-sWidth of the rectangle and we need to map that to the target range of hue values which is 0-255. This is such a common type of calculation that Processing provides us with a function to do this called: map() with the function signature: map(value, start1, stop1, start2, stop2) The map function takes 5 values: the first parameter is the actual value you’re trying to determine the mapping for and the other 4 parameters are the min-max values for the 2 different numeric ranges which are the current and target ranges; the return value is the answer for your conversion calculation, so in our case we’d use:

float hueValue = map( i, 0.0 , sWidth , 0.0 , 255.0 );  //current range is the 0-sWidth, target range is 0-255 possible hueValues

So we can actually just use the map function, no need to create our own function mapping function. The benefit of using a separate function for such a calculation is that we can test code to make sure it’s working correctly.

float hueValue= ( i / sWidth ) * 255;  // hueValue=0.0  division with integers i and sWidth causes truncation

float drawSlider( float xPos, float yPos, float sWidth, float sHeight )  //new function signature using floats for input params

Interactivity¶

We have decided to provide a narrow rectangle to represent the interactive component of the slider, so we need to create this rectangle and set it’s fill color to the currently selected hueValue. Then we’ll need to use a conditional statement to determine when the user is moving the slider so that we can change the hueValue. The code below tests to see if a users mouse is within the rainbow filled rectangle and if the mouse is pressed, if this is true, then we need to store the x-location of the mouse within the rainbow filled rectangle. We will use the variable sliderPos to store the position of the pressed-mouse, and we need to subtract the rectangle’s xPos so that we’re recording the location within the rectangle, not the mouseX position relative to the overall canvas as seen in the image below this code example:

if(mousePressed && mouseX>xPos && mouseX<(xPos+sWidth) && mouseY>yPos && mouseY <yPos+sHeight){
        sliderPos=mouseX-xPos;  //only change sliderPos if the user is within the slider area
                hueVal=map(sliderPos,0.0,sWidth,0.0,255.0);  // get new hueVal based on moved slider
}

Global Variables¶

The sliderPos variable is used to capture the current location of the slider due to the user’s interactivity, but we need to keep track of this value between each function call, so we know where to position the slider, and what the current selected hueValue is. We also need a means to initialize this value before it’s been moved by the user. These 2 variables are related to each other as discussed above when using the map() function. We have determined that we need access to the hueValue in the draw loop so we can use it to set color for other items that the user draws, but we really don’t have a need for this sliderPos value outside of this function, therefore, it should be a local value to this function, it has no meaning outside of this function.

However, the _hueValue variable should be a global variable because it will be an input to our function as well as an output value from our function, and we need to set an initial value for the slider so that there’s a default color even if a user hasn’t touched the slider. However, if we created and initialized it as a local variable within the draw loop then it would be re-initialized each time the draw loop code was executed, therefore, this is justification for why we can declare this as a global variable, although there would be other ways we could achieve this initialization and we’ll cover that when we learn object-oriented program design. We’ll name the global variable using an underscore at the beginning of the word _hueValue so that we can distinguish it from the local hueValue variable that we’re modifying within the drawSlider function itself. The sliderPos value will be created and initialized using the map() function each time our function executes, based on the input value of hueValue, it will only change if the user drags the slider.

So, we need to modify our function so that we’re passing hueValue in as a parameter, and then we return that value from the function so that any changes to the hueValue caused by user-interaction with the slider are reflected in the updated global _hueValue. Below is our final function signature, and the complete code is shown at the bottom of this page:

float drawSlider(float xPos, float yPos, float sWidth, float sHeight,float hueVal){
        //function body
        return hueVal;
}

Finally, the last bit of code for this slider is that we want to draw a white rectangle behind our slider, so our animation doesn’t have ‘trails’. We don’t want to use a background(255) in the actual draw loop because we want to allow the user to be creating drawings when dragging the mouse. Below is the final code for this slider. We also have put a fill() and rect() functions in the draw loop to verify that shapes drawn in our app are being updated as the slider is moved.

Final Version of Code¶

//global values

float _barWidth=300.0;    //slider-bar width;
float _hueVal=_barWidth/2;  //initial hueValue global value
  
void setup(){
  background(255);
  size(400,400);
  colorMode(HSB);
  stroke(0,0,0);
}

void draw(){
  _hueVal= drawSlider(20.0,300.0,_barWidth,30.0,_hueVal); 
 fill(_hueVal,255,255);  //use the new _hueValue to set fill for drawing canvas object
 rect(10,10,100,50);  // verify color changes when slider is moved
}

float drawSlider(float xPos, float yPos, float sWidth, float sHeight,float hueVal){
  fill(255);
  noStroke();
  rect(xPos-5,yPos-10,sWidth+10,sHeight+20);  //draw white background behind slider
  
  float sliderPos=map(hueVal,0.0,255.0,0.0,sWidth); //find the current sliderPosition from hueVal
  
  for(int i=0;i<sWidth;i++){  //draw 1 line for each hueValue from 0-255
      float hueValue=map(i,0.0,sWidth,0.0,255.0);  //get hueVal for each i position //local variable
      stroke(hueValue,255,255);
      line(xPos+i,yPos,xPos+i,yPos+sHeight);
  }
  if(mousePressed && mouseX>xPos && mouseX<(xPos+sWidth) && mouseY>yPos && mouseY <yPos+sHeight){
     sliderPos=mouseX-xPos;
     hueVal=map(sliderPos,0.0,sWidth,0.0,255.0);  // get new hueVal based on moved slider
  }
  stroke(100);
  fill(hueVal,255,255);  //either new or old hueVal 
  rect(sliderPos+xPos-3,yPos-5,6,sHeight+10);  //this is our slider indicator that moves
  rect(sWidth+40, yPos, sHeight,sHeight); // this rectangle displays the changing color to the right side
  return hueVal;
}

Questions¶

1. Can you create a Saturation Slider to let the user change the HSB saturation value.
2. Can you create a Brightness Slider?
3. Can you create an Alpha Slider?
4. What representations can you use so the user understands how interaction with these sliders changes their selected color?
5. Can you create a small random variation in these values so when the user draws artwork, the colors show very slight random variation?
6. How can you incorporate these sliders into a drawing program so the user can create interesting artwork?
7. Why is it better to have hueValue as an input parameter to our function rather than modifying the global variable _hueValue within the function itself?
8. How would you use the map() function to determine the xPosition for the indicator rectangle if you only know the current hueValue?
9. When using i as the x-postion of our colored lines that fill the slider rectangle, what adjustments do we need to make to insure that we can draw our slider anywhere on the canvas. How can i be determined, relative to the slider xPostion?

MouseOver¶

Now we need to create code that will respond to a user’s mouse being over the rectangle, so let’s create a function to test if the mouse is over the button. The function input parameters will be the button’s position and shape, we want to have it return a boolean true or false value

boolean isMouseOver(float xPos, float yPos, float bWidth, float bHeight){
     if(mouseX> xPos && mouseX < xPos + bWidth && mouseY > yPos && mouseY < yPos+bHeight){
                        return true;
        }
        return false;
}

Responsive Button¶

Now we need to use our isMouseOver function to add some interaction feedback to the user. We will consider 4 different states of our button where we will design our button to have toggle behavior, this means that it changes state from active to default every time the user clicks on it:

• default: button is inactive

  • red fill circle and black stroke outline

  

• hover: the mouse is over the button, but not pressed or clicked

  • red fill circle and white stroke outline

  

• pressed: the mouse is over the button and is being pressed

  -dull green fill circle and white stroke outline

  

• clicked: the user clicked on the button to put it in the active state.

  -bright green fill circle and white stroke outline

  

Mouse Event Handlers¶

We can use nested if blocks and the isMouseOver function to add this logic to the drawButton function. First, we’ll want to define a variable that we can use to track the buttonState as _btnActive. Since this value will be used in the draw loop and needs to have be initialized in the setup() function, we will make it a global variable. Similarly logic can be used to justify creating a global varialbe _btnHover that will be used to track whether the user’s mouse is over the button. We can use this variable in the mouseClicked function to determine if the button state should be modified by the mouse-click. The following code is part of the drawButton() function and controls the coloring of the button circle as identified above.

// inside drawButton() function

_btnHover=isMouseOver(xPos,yPos,bWidth,bHeight);

if(_btnHover){
        stroke(255);    //white outline
        if(mousePressed){
                fill(160,200,0);        //dull green
        }
}

if(_btnActive){
        fill(100,200,0);        //green
        stroke(255);
}

ellipse(xPos+25,yPos+25,bWidth-5,bHeight-5);  //draw the button's circle with fill that was executed

MouseClicked¶

We also need to create the code to toggle the state of _btnActive when it the mouse is clicked and the mouse is located directly over the button. We can use the global variable _btnHover as an initial conditional check to determine if any action needs to be executed, otherwise, the user has clicked outside of the button area.:

void mouseClicked(){
  if(_btnHover){  //only change btnState if the user is over the button when clicking
      if(_btnActive){
          _btnActive=false;
          rectState=1;
      }
      else {
          _btnActive=true;
          rectState=0;
      }
  }
}

Here is the processing sketch:

Below is the full code to create a responsive button that controls the behavior of a separate rectangle.:

int rectState=1;
  boolean _btnActive=false;
  boolean _btnHover=false;

  void setup(){
    size(250,150);
  }

  void draw(){
      background(255);
      switch(rectState){
        case 0:
           fill(0,0,255);  //bright blue when button is active
           break;
        case 1:
          fill(150, 150,250);  //light blue when button is off
          break;
      default:
        fill(100);  // if neither state, have a gray rectangle
        break;
    }
    stroke(20);
    rect(10,10,100,100);  // draw rectangle which will be controlled by button
    drawButton(150,40,50,50);
  }


void drawButton(float xPos, float yPos, float bWidth, float bHeight){
      fill(100);
      stroke(20);
      strokeWeight(3);
      rect(xPos,yPos,bWidth,bHeight);
      fill(255,0,0);

      _btnHover=isMouseOver(xPos,yPos,bWidth,bHeight);
      if(_btnHover){
        stroke(255);  //white outline
        if(mousePressed){
          fill(160,200,0); //dull green
        }
       }
       if(_btnActive){
          fill(100,200,0);  //green
          stroke(255);
       }
      ellipse(xPos+25,yPos+25,bWidth-5,bHeight-5);
 }

boolean isMouseOver(float xPos, float yPos, float bWidth, float bHeight){
       if(mouseX> xPos && mouseX < xPos + bWidth && mouseY > yPos && mouseY < yPos+bHeight){
        return true;
    }
    return false;
}

void mouseClicked(){
  if(_btnHover){  //only change btnState if the user is over the button when clicking
      if(_btnActive){
          _btnActive=false;
          rectState=1;
      }
      else {
          _btnActive=true;
          rectState=0;
      }
  }
}

Mouse Speed¶

In Learning Processing chapter 3, exercise 3.6, Daniel Shiffman uses the mouseX, mouseY and pmouseX, pmouseY variables to draw a line following the mouse movement:

line( pmouseX, pmouseY, mouseX, mouseY);

We can determine the distance that the has mouse moved since the last frame by observing that in the x direction, the mouse has moved the absolute value of (mouseX-pmouseX) and the same can be determined in the y direction. Absolute value gives us the positive difference between 2 points. Since (pmouseX-mouseX) might be a negative value, depending on which direction the mouse was moving, but we’re just interested in the magnitude or amount of movement, then we need to use the absolute value function. This provides a few interaction parameters that we can use to create a more interactive drawing brush than just drawing a line between successive mouse positions. So, the speed of the mouse would be the distance traveled in a given amount of time. We can use the fact that the time between frame execution is a measure of time, so one measure of speed would be:

float speed = abs(pmouseX-mouseX) + abs(pmouseY -mouseY); //abs is absolute value or magnitude of difference which is always positive

Then we can use that speed value to control some aspect of the elements drawn. In Shiffman’s example, he suggests using speed to vary the value of the strokeWeight, below is one possible expression which could create an interesting drawing brush.:

strokeWeight( 1 + (.05* speed));

Mouse Distance¶

Processing provides a distance function we can use to determine the distance between points. It takes as input, the x,y positions of 2 points. We can use the pmouse and mouse positions to determine the distance between 2 points, or we can create some global position variables _x, _y and use those to determine distance from the mouse position. This will allow us to control how far the mouse must move between drawing positions. If we were to draw ellipses at the current mouse position, and only want to allow the drawing application to allow drawing another circle if the mouse has moved atleast some minimum distance between each circle before drawing the next circle, these global location values can provide more control than using pmouseX, pmouseY which are updated by the system each frame execution.

float _x;  //global variables which are initialized outside of draw
float _y;  // _x, _y mark the location of the last drawn element, only updated when an element is drawn.

  void setup(){
        size(400,400);
        _x=width/2;
        _y=height/2;
                background(255);
  }
  void draw(){
        float distance=dist(_x,_y,mouseX, mouseY);
        if((distance > 10) && mousePressed){  //make sure  mouse has moved 10 pixels between the start of each new ellipse
                ellipse(mouseX,mouseY,20,20);
                        _x=mouseX;   //update value of last draw position
                        _y=mouseY;
        }
  }

Creative Brushes¶

One thing to consider is the range of possible values when using a parameter like speed to create variation in a drawing feature. If no mouse motion occurs, then speed=0. Using println(speed) is a good way to see the range of values for typical mouse motion. Once that’s been determined then it’s easier to find an interesting way to integrate speed into the drawing program. We can use speed to modify values of color, alpha, shape dimensions, scale, rotation angle etc. If we use any transformations in our drawing app, then we’ll want to use pushMatrix(), and popMatrix() to help insure that other drawn elements like our sliders which are drawn at the end of the draw loop, aren’t distorted by any transformation we’d apply for our brush effects. Here’s an example of using speed along with some small random variations to modify a wide range of values, so that just drawing 2 ellipses creates a somewhat interesting brush. One important goal is that we want the drawing brush to somewhat intuitive so that a user can realize, if I draw slower, then I get smaller shapes, this is essential in order for the brush to be useful for creating an interesting artwork:

void setup(){
        size(400,400);
        background(255);
        colorMode(HSB);
}
void draw(){
        float speed=abs(mouseX-pmouseX) +abs(mouseY-pmouseY);
        if(mousePressed){  //only draw if the mouse is pressed
                pushMatrix();
                translate(mouseX, mouseY);
                fill(40 +(speed*.95), 200+(random(-10,10)),200+(random(-10,10)),100 +(speed*.55));  //use speed to modify fill
                stroke(60 +(speed*.95), 200+(random(-10,10)),200+(random(-10,10)),100 +(speed*.55));  //use speed to modify stroke
                ellipse(0,0,2+(speed*.25),6-(speed*.25)); //use speed to modify width, height
                ellipse(3+random(-5,5),5+random(-5,5),5+(speed*.25),6-(speed*.25)); //use speed to modify width, height
                popMatrix();
        }
}

Below is a screen-shot from the brush created above where there’s not even a color slider option for the user to modify. These images show that there were predictable behaviors of the brush that allowed the user to create a composition based on understanding the brush behavior, in this case: drawing pattern varied with mouse speed.

Questions¶

1. How can we determine some measure of the mouse speed, given the current mouse positions and the previous mouse positions?

Physical Objects¶

When we use a physical button, like the on-off button of a light-switch, we understand that the button has a physical configuration that controls electrical current to the bulb. The physical movement of the switch itself is responsible for controlling the state of the lightbulb as well as controlling the state of the switch itself, so we can look at the switch and understand if it’s in the on or off position. However, when we think about a virtual button on a device such as our mobile phone, there is not a tangible, physical configuration of the button that controls these behaviors. To be intuitive for a user, the virtual button should behave analogously to the physical version, so it is helpful for us to think of buttons that we create as if they were physical objects.

Object Responsibilities¶

If we think of our button as a physical object, then it makes sense for our button object to be responsible for it’s own behaviors and states. A physical button has a configuration that controls and indicates if it’s on or off. For our button, we need to create a state variable, on, so the button object can remember whether it is currently on or off. Similarly, we want the button to be responsible for responding to user-events whether it is and it’s display (behavior), and for knowing it’s current state, size, position and orientation (state and configuration). Then we can have many button instances, each responsible for is own object properties, and the object behaviors (methods) will be consistent across all instances.

Objects and Classes¶

To create objects, we write code to define a class, which we can think of as the blueprint for creating objects. When creating objects in code, it’s helpful to think of object responsibilities in terms of what information an object knows about itself, and the behaviors an object can do. In our code, we will use instance variables to store an object’s state and configuration information. To implement an object’s behaviors, we’ll write functions, these are referred to as the object’s methods. Once we write code to define the Button class, then we can create an unlimited number of button objects. When our code is executed, then the button objects are created where the compiler uses the class code as the blueprint.

Object - Class Structure¶

The image below is a UML Class Diagram. UML Unified Modeling Language is modeling language specification that provides formal structures for designing models of systems. The UML website states that ‘modeling is the designing of software applications before coding.’

The class diagram shows the name of the class, the instance variables, and the methods. In UML, we can use class diagrams to show relationships between several different classes. There are a wide variety of UML diagrams, some are designed to show structure like this class diagram, while other UML diagrams are designed to model behavior and interaction of system entities.

Processing Tabs¶

Processing provides tabs to allow us to organize our code when using classes, the main tab is the name of the sketch, while each other tab should be the name of the class, such as Button. The image below shows the Button tab with the basic code elements which define the class.

When looking at the code in a Class definition, we can see a similarity with the structure of code that we’ve been writing in our previous examples. The table below shows these similarities, in the left column, we can see that the code we write in the main tab can be though of as having 3 sections, the top of our programs is where we declare global variables, then the setup() function is executed once, while the draw() function is where the main behavior of our program is typically executed. When we write code for a class definition, we are required to write our instance variables at the top, then we must write the constructor functions, these are similar to setup() in that the constructor for an object is a function that is only executed once, when the object is first created and it’s used to initialize all of the instance variables for our object. Finally, the bottom of the tab contains all of the functions / methods that we write for our object’s behaviors. Within these methods, we can also have local variables, but they will only exist for the duration of that method’s execution. The instance variables exist for the life of the object instance, store all of the information about the state and configuration of our object instances throughout the duration of an object’s lifetime.

Questions¶

1. What is the difference between a class and an object?

Bouncing Ball - No Vectors¶

In the PVector tutorial and in Learning Processing Section 5.7, the example programs create a bouncing ball. The bouncing ball programs provide a good example of how to program object motion. The code below is from the Processing.org PVector tutorial and it creates a simple bouncing ball.:

float x = 100;
float y = 100;
float xspeed = 1;
float yspeed = 3.3;

void setup() {
  size(200,200);
}

void draw() {
  fill(255,10);
  rect(0,0,width,height);  //transparent overlay background

  // Add the current speed to the location.
  x = x + xspeed;
  y = y + yspeed;

  // Check for bouncing
  if ((x > width) || (x < 0)) {
    xspeed = xspeed * -1;  //reverse speed
  }
  if ((y > height) || (y < 0)) {
    yspeed = yspeed * -1;   //reverse speed
  }

  // Display at x,y location
  fill(175);
  ellipse(x,y,16,16);
}

Bouncing Ball with PVector¶

The PVector object provides variables to hold the data of the ball’s location coordinates and also provides methods that allow for easy use of vector operations for movement. In the code above, the ball’s location is updated during each loop, so the new location = location + speed, and this is calculated separately for each of our canvas’s 2 dimensions: x and y. We can instead use a PVector to hold the location and another PVector to represent speed, and then we can use the PVector add() method to calculate the new location of the ball. Below is the same bouncing ball program using PVectors for location and velocity.:

PVector speed = new PVector(1 ,  3.3);  // create a new PVector object instance
PVector location = new PVector(100,100);

void setup() {
    size(200,200);
}

void draw() {
    fill(255,10);
    rect(0,0,width,height);  //transparent overlay background

    // Add the current speed to the location: vector addition
    location.add(speed);

    // Check for bouncing
    if((location.x > width) || (location.x < 0)) {
        speed.x = speed.x * -1;  //reverse speed
    }
    if ((location.y > height) || (location.y < 0)) {
        speed.y = speed.y * -1;   //reverse speed
    }

    // Display at x,y location
    fill(175);
    ellipse(location.x,location.y,16,16);
  }

Below is a processing sketch for the PVector Bouncing ball. Click on the image to stop / start the animation.

PVector Object¶

The PVector object allows us to explore the processing object syntax. When we want to create an instance of an object, we use the object’s constructor function. According to the processing PVector reference, the PVector class has 3 different constructor functions. Notice that each constructor has a unique function signature, this is an important concept called function overloading. We can have several versions of the same function, but the signature of each function must be unique. For objects, it’s helpful to have different constructor functions, for the PVector, this allows it to represent both 2D or 3D vectors depending on how we initialize our instance.

PVector();  //default constructor function
PVector(float x, float y);  // 2 dimensional constructor function
PVector(float x, float y, float z);  //3 dimensional constructor function

To create a new instance of a PVector object we must use the Processing object syntax depending on which constructor we choose to use, the default constructor has no arguments, therefore the x and y properties are initialized using dot notation. Dot notation the syntax for calling a class’s method or for setting a property value for a data element that belongs to the object’s own object class. We set the x value of the location PVector instance using location.x=100; Note that in the code below, the object type is PVector.

PVector location = new PVector();  // declare a new PVector object
location.x= 100;        // initialize the x data element using dot notation
location.y= 120;        // initialize the y data element using dot notation

PVector speed = new PVector(3 , 4 );  // declare and initialize a new PVector object speed has x,y components

location.add(speed)  // use add method to add vector components of speed to location.

Object Dot Notation¶

PVector is an object and has both functions and data elements which are associated with that object. As mentioned above, we use the dot notation when accessing and modifying properties of an object. For PVector, x and y are properties or data elements. Below is an example of setting a property value for an instance of a PVector object.:

PVector location = new PVector();
location.x = 100;   // use dot notation to initialize the x property of the location PVector
location.y = 200;

location.x = location.y + 10 ; // dot notation allows accessing and resetting object properties like x and y

ellipse(location.x, location.y, 50,50);  // use dot notation to access the x and y properties of the location PVector object

We also use dot notation when using methods that belong to an object. Methods are functions that belong to an object so they act on that object. We use dot notation to make it clear that we want to use the object’s method, rather than some global function that does not belong to the object’s class. This allows the compiler to understand which function we intend to use. A common example of this would be the function the print() function. It is useful for debugging to be able to print some meaningful information about an object, so when we design an object class, we’ll often either create a print(), display() or a toString() method that belongs to the class so that we can easily access and view data associated with an object. On the other hand, processing provides it’s own print() function, so if PVector had it’s own print() method, then the compiler would need to understand whether we intend to call the processing print() function or the PVector print() method. Dot notation syntax tells the compiler that we want to call the method associated with the object calling the function. Actually PVector has a toString() method, so we could use dot notation to call the method in the following way:

print(location.toString());              // prints '[ 100.0 , 200.0 , 0.0 ]'  which are the values for the x,y,z properties.

Functions: Pass by Reference¶

So far, when we’ve created functions, we have only used primitive variable types like int, float, booleans, or literal values. When these values are passed into a function, a copy of the value is passed into the function, so within the function, any modification to a value only affects the local variable. We’ve made the distinction between local and global variables based on the understanding that variables passed into a function are a local copy of a global variable, and so any corresponding global variable isn’t changed when the local function variable is modified. Example of primitive-type function arguments: pass-by-value

float someVal=20;  // declare global variable

void doSomething(float inputVal){
        inputVal += 5;  // modify local variable
}

void doSomethingElse(float someVal){
        someVal += 10;  // modify local variable
}
void setup(){
        doSomething(someVal);   // call the function using someVal as input
        doSomethingElse(someVal);     // call the function using someVal as input

println("someVal " + someVal);  // someVal=20.0 because it is a global and a primitive-type, so pass-by-value appliees
}

This is not the case when using passing objects into a function. For most cases, when we pass an object variable into a function, we actually want to have the changes take place on the object that we pass into the function. Therefore, what is passed into a function is not a copy of a variable, but is a reference or a pointer to the object. here’s an example of pass-by-reference for an PVector object instance

PVector location = new PVector(20,20);   //create and initialize a PVector instance

void doSomething(PVector somePV){
        somePV.x += 5;          //modify the input PVector object x attribute;
}

void setup(){

        doSomething(location);

        println("location.x " + location.x);    // 25.0  location.x was modified due to pass-by-reference
}

So now that we have had experience working with the PVector object, in the next section, let’s create a very simple ball class so we can create ball objects. Then we’ll move on to the example in chapter 8, however where the Learning Processing book creates a car class we will make a fish class.

Questions:¶

1. Which of the following concepts can be represented by a PVector object? location, velocity, friction, acceleration?

2. What would be the value of location.x in the code below:

   PVector location=new PVector(5/2, 20);
   

3. What would be the value of location.x in the code below:

   PVector location= new PVector( 5.0/2 , 20);
   

Ball Class¶

We’ll continue with the last example of a bouncing ball for our first class. The syntax for a creating a class involves first naming the class, and this introduces a completely new type of syntax:

class Ball{

}

Notice there is no return type and there are no ( ), so this is not like declaring a function. Next we need to declare the class outside of all other functions. The processing environment is setup so that we can use a new tab for creating our class code, but we could create our class on the current, main tab. It’s also a convention that we use capitalization for class names. If we create a new tab, processing will prompt for the tab name, and we’ll name it the same as the class name. Below we’ve created the code for the Ball property variables and we’ve also created the default constructor which has no input arguments, we have given default initialization values to the property variables:

class Ball{
  // Variables or Properties
  color c;
  float xpos;
  float ypos;
  float xspeed;

  //Constructor

  Ball(){  //default constructor
    c=color(255,0,0);
    xpos=width/2;
    ypos=height/2;
    xspeed=1.0;
  }

}

In the image below we have a new tab, named Ball, where we’ve created the code for the Ball class. The tab must have the same name as the class in order for us to access this class from the main ball_sketch tab where we’ll have our setup() and draw() functions.

Next we can create another constructor that allows us to set initial values for the property variables when we create the object instance. The syntax is similar to what we’ve used in writing other functions, except now we’ll use the input parameters to initialize the class property variables, so this may seem a bit strange:

Ball(color tempColor, float tempXpos, float tempYPos, float tempXspeed){

        c=tempColor;   //initialize c with input tempColor
        xpos=tempXpos;
        ypos=tempYpos;
        xspeed=tempXspeed;

}

PVector Ball Class¶

Let’s define the Ball class using PVectors and see what that looks like. We will need to initialize our PVector objects as part of the object constructor functions. Again here we have defined 2 different constructors.:

class Ball{
  // Variables
  color c;
  PVector position;
  PVector speed;
  float diameter;

  //Constructor
  Ball(){  //default constructor
    c=color(255,0,0);
    position=new PVector(width/2,height/2);  // create new PVector objects and initialize them
    speed=new PVector(3,5);
  }

  // constructor with initializations
  Ball(color tempc, float tempXpos,float tempYpos, float tempXspeed, float tempYspeed){
    c=tempc;
    position=new PVector(tempXpos,tempYpos);
    speed=new PVector(tempXspeed,tempYspeed);
  }

Class Methods¶

Then the final part of the class definition is that we need to define methods for the class, these methods are the code we’ll write to create the behaviors for our ball. As mentioned in the previous section, it’s convenient to create a method that will allow you to print out the values for the Ball Ojbect’s property values that might be changing during a program execution, one way to do that is to create a function called toString() as shown below, this can be called from the processing global print() function because it takes a string as an input argument. This code would be included within the Ball class tab.

// class methods
  void display(){
     fill(c);
     ellipse(position.x,position.y,diameter,diameter);
  }

  void move(){
    position.add(speed);
    if(position.x > (width-diameter/2) || position.x < (0+diameter/2)){
      speed.x *= -1;
    }
    if(position.y > (height-diameter/2) || position.y <(0+diameter/2)){
      speed.y *=-1;
    }
  }

  String toString(){
    return " [ " + this.position.x + " , " + this.position.y + " ]";
  }

Main Sketch¶

Then, let’s include the code that is in the main sketch page where we’ll actually create our Ball object instance:

Ball myBall;

void setup(){
  size(300,300);
  color ballColor=color(100,200,100);
  myBall=new Ball(ballColor, 20,20,3,5);
  background(255);

}

void draw(){
   background();
   myBall.move();
   myBall.display();
   println(myBall.toString());
}

void background(){  //over-ride the processing background function to allow trails.
  fill(255,15);
  rect(0,0,width,height);  //background alpha doesn't work in processing
}

Below is the full code for the Ball class which includes 3 methods and 2 constructor functions and is called in the above main sketch code.:

class Ball{

  // Variables
  color c;
  PVector position;
  PVector speed;
  float diameter;

  //Constructor
  Ball(){  //default constructor
    c=color(255,0,0);
    position=new PVector(width/2,height/2);
    speed=new PVector(3,5);
  }

  // constructor with initialization arguments
  Ball(color tempc, float tempXpos,float tempYpos, float tempXspeed, float tempYspeed){
    c=tempc;
    position=new PVector(tempXpos,tempYpos);
    speed=new PVector(tempXspeed,tempYspeed);
  }

  // class methods
  // this method is responsible for creating the displayed ball object
  void display(){
     fill(c);
     ellipse(position.x,position.y,diameter,diameter);
  }

  //this method is responsible for determining movement of the ball
  void move(){
    position.add(speed);
    if(position.x > (width-diameter/2) || position.x < (0+diameter/2)){
      speed.x *= -1;
    }
    if(position.y > (height-diameter/2) || position.y <(0+diameter/2)){
      speed.y *=-1;
    }
  }

  // this is a convenience method to help with debugging
  String toString(){
    return " [ " + this.position.x + " , " + this.position.y + " ]";
  }

} //end of the Ball class definition

To review, in order to create a class, we need the following things which are all specified within a class definition:

1. Class Name
2. Instance Variables - these are properties / attributes of an object
3. Constructor functions
4. Methods, which are functions that control behavior of an object

Questions¶

1. Can you modify the speed attribute of a ball so that it’s speed is dependent on the diameter of the ball? Smaller Balls move faster than bigger ones?
2. How can we compare to see if 2 different ball objects are equal? How would we define equal for Ball objects?

this Keyword¶

When referring to properties and methods from within a class definition, the keyword this is used to refer to the actual object itself. We can use the keyword this to clarify some of the code we write when creating a class definition. For example, if we create 2 different class constructors, we can use the keyword with function notation: this(), as a way to call one constructor from within another constructor. For example, the default constructor can call another constructor using this() as a way to simplify the class code like below:

class Ball{
        color c;
        PVector position;
        PVector speed;
        float diameter;

        //default constructor uses this( ) to call the main constructor

        Ball(){
                this(color(255,0,0), 100.0, 100.0, 2.0, 2.0, 30.0);  //call the other constructor from the default constructor to initialize variables
        }

        // constructor that accepts input parameters

        Ball(color c, float xpos, float ypos, float xspeed, float yspeed, float diameter){
                this.position.x=xpos;
                this.position.y=ypos;
                this.speed.x=xspeed;
                this.speed.y=yspeed;
                this.diameter=diameter;
        }
}

Comparing Objects isEqual¶

So far, the methods we’ve written have only concerned 1 ball object. How can we write a method to allow comparison between 2 Ball objects? What would it mean for 2 unique Ball objects to be equal. If we try to use the same syntax that we’ve used to compare primitive variable values, we will have problems! With primitive variables, we can directly compare their values. We may need to use type-casting if we try to compare an integer with a float but the syntax would be as follows:

//Compare Primitive types
float float1 = 5.0;
float float2 = 4.999;
int int1 = 5;
boolean equalFloats = (float1 == float2 );  //false
boolean equalNumbers = ( int1 == float1 ); //error
boolean equalTypeCast1 = (int1 == int(float1) );  //true
boolean equalTypeCast2 = (int1 == int(float2) );  //false

// compare PVector objects
PVector vector1 = new PVector( 10, 4 );
PVector vector2 = new PVector( 5, 7 );
boolean equalVectors = ( vector1 == vector2 );  // false

vector1 = vector2;   // assignment
boolean equalVectors2 = (vector1 == vector2 );  //true, both variables point to the same memory location,

println( vector1.x )  // 5   since the variable vector1 now refers to the same objects as vector2

So, to continue the discussion in terms of our Ball objects, let’s write a method that will allow us to check whether 2 ball objects occupy the same space on the canvas. We can look at some of the PVector methods like add(PVector pvec) to have an idea of how one object can interact with another one using methods. We’ll need to use the keyword this in order to write our equals function. Let’s agree that 2 balls are equal if they have the same size and position. Finally, our method must take a Ball as an input parameter and return a boolean as the return value:

boolean isEqual(Ball otherBall){
        if(this.position.x == otherBall.position.x  && this.position.y == otherBall.position.y  && this.diameter = otherBall.diameter){
                return true;
        }
        else
        return false;
}

With bouncing balls, it’s unlikely that many ball objects will actually have the exact same values for position and size, so instead let’s look at what collision would look like. Here we want to see if the distance between the centers of the balls is less than the sum of the 2 ball radiuses. The image below shows how distance between circle centers can be compared with circle radius size to determine if 2 circles are intersecting

Comparing Objects isIntersecting¶

The code below shows how we can implement this in a simple function:

boolean isIntersecting(Ball otherBall){
        float distance=dist(this.position.x, this.position.y, otherBall.position.x, otherBall.position.y);
        if( (distance <= this.diameter / 2) + (otherBall.diameter / 2)){
                return true;   //intersecting
        }
        return false   //else, no intersection so return false
}

void highlight(){   //we can call the highlight function in the draw loop to show the intersection
        this.c = color(255,255,0,80);
}

Here is the processing sketch.

Ball Class¶

Here is the full code for the Ball class that includes a test for intersection between 2 balls:

class Ball{

  // Variables
  color currentColor;  //current color of the ball
  color ballColor;  //store color to reset after highlighting
  color highlightColor;  //highlight color of the ball
  PVector position;
  PVector speed;
  float diameter;

  //Constructor
  Ball(){  //default constructor
    this(color(255,0,0), width/2, height/2, 3, 5 );  //call the constructor with initialization values

  }

  // constructor with initialization arguments
  Ball(color _c, float _xpos,float _ypos, float _xspeed, float _yspeed){
    currentColor=_c;
    ballColor=currentColor;
        highlightColor=color(255,255,0,40);
    position=new PVector(_xpos,_ypos);
    speed=new PVector(_xspeed,_yspeed);
  }

  // class methods
  // this method is responsible for creating the displayed ball object
  void display(){
     fill(currentColor);  //this may be highlighted or ballColor
     ellipse(position.x,position.y,diameter,diameter);
         currentColor=ballColor; //reset ballColor back to original color
  }

  //this method is responsible for determining movement of the ball
  void move(){
    position.add(speed);
    if(position.x > (width-diameter/2) || position.x < (0+diameter/2)){
      speed.x *= -1;
    }
    if(position.y > (height-diameter/2) || position.y <(0+diameter/2)){
      speed.y *=-1;
    }
  }

  //comparison method:  do comparison and return true or false

   boolean isIntersecting(Ball otherBall){
      float distance= PVector.dist(this.position, otherBall.postion);  //PVector distance between 2 points

      if( distance <= (this.diameter / 2) + (otherBall.diameter / 2)){
        return true;
      }
      return false;
  }

  void highlight(){
    this.currentColor = this.highlightColor;  //change the currentColor to be highlighted
  }

} //end of Ball class

Main Program Highlight Intersection¶

Here is the main sketch code:

Ball ball1;
Ball ball2;

void setup(){
  size(300,300);
  ball1=new Ball(color(100,200,100);,25,20,3,6);
  ball1.diameter=50;
  ball2=new Ball(color(255,0,0),20,20,2,4);
  ball2.diameter=40;
}

void draw(){
   background(255);

        //test to see ball1 isIntersecting ball2, highlight both if this is true:
   boolean isIntersect=ball1.isIntersecting(ball2);

   if(isIntersect){
                ball1.highlight();
                ball2.highlight();
        }
   ball1.move();
   ball1.display();
   ball2.move();
   ball2.display();
}

Questions:¶

1. Can you create a class called Block which creates a square shape that moves around the canvas?

Rain Game Code¶

The object of this game is to catch raindrops before they hit the ground. Every so often (depending on the level of difficulty), a new drop falls from the top of the screen at a random horizontal location with a random vertical speed. The player must catch the raindrops with the mouse with the goal of not letting any raindrops reach the bottom of the screen

He breaks down the game program design into 4 steps:

1. Develop code for a circle object that is controlled by the mouse. This is the ‘rain catcher’
2. Write a program to see if the 2 circles intersect
3. Write a timer program that executes a function every N seconds
4. Write a program with circles falling from the top of the screen.

Psudocode¶

Psudocode is a way to write the main concepts for the program

Setup:

Initialize catcher object

Draw:

Erase Background Set catcher location to mouse location Display catcher

Catcher Class Code¶

Here is code for the Catcher class:

class Catcher{
float r;  //radius
PVector position;

Catcher(){
  this(15);
}
Catcher(float _r){
        r=_r;
        position =new PVector(width/2, height/2);
}
void setposition(float _x, float _y){
        position.x=_x;
        position.y=_y;
}
void display(){
        stroke(0);
        fill(175);
        ellipse(position.x,position.y,r*2, r*2);
}
}

It’s critical to note that in the constructor Catcher(float r), we are initializing the PVector object. This is an important function of a constructor: to create any objects that are instance variables of the class. We can’t use any of these objects until they’ve been initialized.

Ball Class Code¶

Here is the code for the Ball class Note that we’re using PVector for speed and location:

     class Ball{

 // instance variables
 color currentColor;  //current color of the ball
 color ballColor;  //store color to reset after highlighting
 color highlightColor;  //highlight color of the ball
 PVector position;
 PVector speed;
 float diameter;

 //Constructor
 Ball(){  //default constructor
     this(color(255,0,0), width/2, height/2, 5, 3, 5 );  //call the constructor with initialization values
 }

 // constructor with initialization arguments
Ball(color _c, float _x,float _y, float _d, float _xspeed, float _yspeed){
   currentColor=_c;
   ballColor=currentColor;
   highlightColor=color(255,255,0,40);
   position=new PVector(_x,_y);
   speed=new PVector(_xspeed,_yspeed);
   diameter=_d;
 }

 // class methods
 // this method is responsible for creating the displayed ball object
 void display(){
    fill(currentColor);  //this may be highlighted or ballColor
    ellipse(position.x,position.y,diameter,diameter);
    currentColor=ballColor; //reset ballColor back to original color
 }

 //this method is responsible for determining movement of the ball using the PVector function ``add()``
 void move(){
   position.add(speed);
   if(position.x > (width-diameter/2) || position.x < (0+diameter/2)){
     speed.x *= -1;
   }
   if(position.y > (height-diameter/2) || position.y <(0+diameter/2)){
     speed.y *=-1;
   }
 }

//comparison method:  do comparison and return true or false

  boolean isIntersecting(Ball otherBall){
     float distance= PVector.dist(this.position, otherBall.position);  //PVector distance between 2 points

     if( distance <= (this.diameter / 2) + (otherBall.diameter / 2)){
       return true;
     }
     return false;
 }

 void highlight(){
   this.currentColor = this.highlightColor;
 }

     } //end of Ball class

This is the end of the code for the Ball class. This class has 4 different methods. Each of these methods does a simple task. It is best to have your object methods designed to perform one well defined task. If we have a more complex task, we can break that down into simpler methods we can also call methods from within other methods if it makes our code easier to understand.

Timer Class Code¶

Here is the code for the timer class. It uses the processing function millis() which counts milliseconds since the sketch started. Shiffman uses the timer to generate an event to create a new Drop that can fall from the top of the canvas.

class Timer{
        int startedTime;
        int totalTime;

                        //constructors
         Timer(int _totalTime){  //constructor
                totalTime=_totalTime;
                }

                        //methods
        void start(){
        startedTime=millis();   //set the start time to the current millis value
        }

        boolean isFinished(){  //this timer determines if the timer has completed the timed interval
        int passedTime=millis()-startedTime;
        if(passedTime>totalTime){
                println("timer finished");
                return true;
        }
        else{
                return false;
        }
        }

}  //end of Timer class

Object Inheritance¶

Here, we are going to use Object Inheritance is the code for the Drop class, it is a child class of the Ball class and it inherits the instance variables and methods from the Ball class. we use the super keyword to refer to methods in the parent Ball class:

class Drop extends Ball{
 boolean isActive;  //this is instance variable for drop class
 color dropColor;

 Drop(){
   this(random(width), -10);
 }

 Drop(float _x, float _y){
   // call the Ball constructor
   super();
   this.position.x=_x;
   this.position.y=_y;
   this.diameter=5;
   this.speed.x=0;
   this.speed.y=3;
   dropColor=color(0,50,255,100);
   this.ballColor=dropColor;
   isActive=true;
 }

 void move(){
   if(isActive){
      position.add(speed);  //we've set x speed to 0;
      if(position.y>=height+10){
        isActive=false;
    }
   }
 }

 void display(){
   super.display();
 }
 }

In the above code, we have created a class that’s a child class of the Ball class. We have used the keyword super within the constructor so that we’re calling the constructor for the Ball class. We have used the extends keyword in the first line of the class declaration to show that this class is a child class of the Ball class. Any Drop object has access to the methods and instance parameters of the Ball class. Since the Drop class has it’s own move() method, then when a Drop object calls the move() method, it is this version that will be executed.

The Main Program¶

Here is a start of a main program where we are testing each of our classes. It’s important to keep straight the fact that we’re declaring our classes in separate tabs, but all of the code to execute the program is all contained in the first processing tab. In that tab, we have our processing setup function and the draw function. As we’ve done before, we declare any global variables above and outside of the setup() and draw() functions. These are object variables so we use the Class name, then the name of the object instance to declare the global object

class name: Catcher

object instance name: myCatcher

Here’s the code for executing the beginning of our game:

      //rain catcher game: main file
      Catcher myCatcher;   //declare a Catcher object named myCatcher
      Ball ball1;
      Timer timer1;
      Drop drop1;

      void setup(){
              size(300,300);
              myCatcher=new Catcher();  // initialize using the Catcher default constructor
              timer1=new Timer(2000);  // initialize a Timer object
              timer1.start();    //call the start( ) method
              ball1=new Ball(color(0,255,100),15,25,20,3,8);
              smooth();
              drop1=new Drop(14,5);   //initialize drop1 using the Drop constructor

      }

      void draw(){
              background(255);
              myCatcher.setposition(mouseX, mouseY);  //
              myCatcher.display();
              drop1.move();
              drop1.display();
              ball1.move();
              ball1.display();
              if(timer1.isFinished()){
              timer1.start();  //reset the timer when it is finished
              }
}

In the code above, the first thing we determine is the location of the catcher object based on the user’s mouse position. Then we display the myCatcher object. Similarly, with the drop1 and ball1 objects, first we move the objects, then we display the objects.

So far, we have several objects moving on the screen, but we need to re-factor this code in order to make some type of a game. We’ll want to have lots of drop objects moving on the canvas. Also, let’s make use a paddle object instead of Shiffman’s catcher object. The paddle object will be controlled by keyboard movement, then collisions will be determined based on whether a falling drop object intersects with the paddle. We’ll cover this in the next section.

Test Driven Development¶

Below is an example of the program, here we’re just testing the code for each object that we’ve created. It’s a good idea to create your code in an incremental manner, so that you can discover errors early on. For each section of code that you create, identify some way that you can test whether your code is functioning correctly before moving on to create new code. This is the idea behind test-driven development (TDD), where you would create some series of tests for each section of code, to insure it’s working correctly, and the code for the tests is actually written before the code that you will be testing.

Questions:¶

1. How can we test whether the method isIntersecting( ) works correctly?
2. How can we test whether the timer object is working correctly?

Game class¶

To begin design of our game, let’s look at the changes we’ll need to make, to modify Shiffman’s exercise 10.4 project code. In Shiffman’s project, he has all of the game type code simply implemented within the processing draw loop.

We’d like to re-factor his program and make a separate Game class in order to make it easier to organize and understand our program code. If we look at his Draw loop code, we can see that he’s incrementing a score-type variable, he’s keeping track of misses, etc. So, let’s create a Game Class with the following instance variables. Some of them are the game related variables from exercise 10-4 moved inside the Game class.

final int INACTIVE=0;
final int ACTIVE=1;

final int MAX_NUMBER_DROPS = 50;
final int MAX_NUMBER_LIVES = 10;

Button Objects¶

If we want to include some Button objects in our game, like a startButton and a stopButton, then we’ll need to look at what a Button object would look like. Shiffman provides an example of a Button object in {{Exercise 9.8}}_ Our buttons will be created from the “LabeledButton” class, a child class of the “Button” class. Unlike the “Button” class in Shiffman, our “Button” class does not have an “on” variable, but it has a “col” variable of type color. We will refer to our “labeled button” as “button”. To integrate a button in the Game class, it’s important to remember to create and initialize the buttons in the Game constructor by invoking the constructor of the buttons with the new clause

Game(){
        score = 0;
        level = 1;
        state = INACTIVE;
        Wbar = width/7;
        startBtn = new LabeledButton(width - Wbar + 5, 10, 40, 30, colYellow, "Start");
        stopBtn = new LabeledButton(width - Wbar + 5, 50, 40, 30, colYellow, "Stop");
        . . .
}

To take startBtn as an example,

• width-Wbar + 5 is the x coordinate of the button
• 10 is the y coordinate of the button
• 40 is the width of the button
• 30 is the height of the button
• colYellow is the normal color of the button
• “Start” is a String used to label the button when it is displayed

LabeledButton class¶

The LabeledButton class inherits all the variables of the Button class, namely:

• X: float // x coordinate of button
• Y: float // y coordinate of button
• W: float// width of button
• H: float // height of button
• col: color // color of button

The child has in addition the label variable

• label: String // Button label

The LabeledButton class inherits all the methods of the Button class, namely:

• rollOver(x, y): boolean // returns true if the point (x,y) is over the button
• drawButton(): void // displays the button with the appropriate color (highlighted color if the mouse is over the button, normal color otherwise)

The LabeledButton has an overriding drawButton() method which displays the button and the label on top.

Use of objects by the Game class¶

The Game class uses several objects, namely: startBtn, stopBtn, catcher, timer and drops. These objects are members of the Game class. Each of these member objects must be created and initialized in the Game constructor by invoking the constructor of the corresponding classes with the “new” clause. A more complete version of the Game constructor with these invoked constructors is shown below

Game() {
        score = 0;
        level = 1;
        state = INACTIVE;
        Wbar = width/7;
        startBtn = new LabeledButton(width - Wbar + 5, 10, 40, 30, colYellow, "Start");
        stopBtn = new LabeledButton(width - Wbar + 5, 50, 40, 30, colYellow, "Stop");
        catcher = new Catcher(32); // Create the catcher with a radius of 32
        numberDropsDone = 0;
        numberLivesLeft = MAX_NUMBER_LIVES;
        totalDrops = 0;
        drops = new Drop[MAX_NUMBER_DROPS];    // Create spots in the array
        timer = new Timer(300);   // Create a timer and set initial value to 300 milliseconds
        gameOver = false;
  }

Additionally, to refer to a member of an object which is member of the Game class, you may have to use multiple levels of dots. For example, in the main tab, only the myGame object is known. To refer to the rollOver() member method of the startBtn member of myGame, you have to refer first to the startBtn member, then to the rollOver() member of startBtn, and that is denoted myGame.startBtn.rollOver().

Game Button Integration¶

Now we need to figure out how to integrate the button event handler into the game. We will use the MouseClicked( ) event.:

//this code is in the main program tab

void mouseClicked() {
        switch(myGame.state) {
        case INACTIVE:
                if (myGame.startBtn.rollOver(mouseX, mouseY)) { // Start the game if the player clicks start button
                myGame.gameOver = false;
                myGame.start();
                }
                break;
        case ACTIVE:
                if (myGame.stopBtn.rollOver(mouseX, mouseY)) { // Stops the game if the player clicks stop button
                myGame.gameOver = true;
                myGame.state = INACTIVE;
                }
        }
}

Game Instance¶

All of the above code assumes that we will define, initialize and utilize an object of the Game class in the main program tab. Since we need access in the draw loop, as usual, we’ll declare the object above the setup function, initialize in the setup function, and then use in the draw loop:

//this code is in the main tab

//other global variables
Game myGame;

void setup(){
//other initializations

myGame= new Game();   //call the Game constructor, here we call the default constructor
}  //end setup

void draw() {
background(255);
switch(myGame.state) {
case INACTIVE: // Game inactive
        if (myGame.gameOver)
                myGame.displayGameOver(); // Display the "Game Over" message
        break;
case ACTIVE: // Playing
        myGame.play();
        break;
} // end switch
myGame.drawBar();
myGame.drawButtons();
myGame.displayScore();
myGame.displayLevel();
}

Inheritance¶

class RegularDrop extends Drop {
          int score;

          RegularDrop() {
                super();
                score = 1;
          }

          int getScore() {
                return score;
          }
        }

//this code is in the TinyDrop Class tab


class TinyDrop extends Drop {
        int score;

        TinyDrop() {
                super();
                r = 6;                 // TinyDrops have smaller size
                speed = random(5, 7);   // Pick a higher random speed
                c = color(150, 100, 150); // Color
                score = 2;
        }
        void move() {
                // Increment by speed
                y += speed;
                x += random(-3, 3); // unpredictable fluctuation in trajectory
        }

        int getScore() {
                return score; // Score 2 points instead of 1, if catch TinyDrop
        }
}

if (timer.isFinished()) {
  // Deal with raindrops
  // Initialize one drop
  if (totalDrops < drops.length) {
                drops[totalDrops] = new Drop();//(game.levels[game.currentLevel].dropSpeed);
                // Increment totalDrops
                totalDrops++;
  }
  timer.start();
}

Polymorphism¶

As discussed above, we used inheritance to extend the Drop class, we created two child classes: RegularDrop and TinyDrop. So, the beauty of this is that we can now put child objects in an array of that has been declared to contain Drop objects. This is a manifestation of polymorphism, it means that a parent class ‘reference’ can be used to refer to a sub-class object. So, we can do the following:

Drop someDrop = new TinyDrop();    //someDrop is a Drop reference, it points to a TinyDrop object.

This might not seem like a very important feature on initial inspection, however, it is one of the powerful features that result from the Object-Oriented concept of Class Inheritance. So, now we can change the game code so that when the timer goes off, we can create RegularDrop or TinyDrop objects instead of Drop objects:

drops[totalDrops] = new TinyDrop();
//or

drops[totalDrops] = new RegularDrop();

To make our game interesting, we want to choose randomly between TinyDrop and RegularDrop. In addition, we want to be able to adjust the statistical percentage of RegularDrop vs. TinyDrop. This can be achieved with the following code:

if (random(100) < PERCENT_REGULAR) {
  drops[totalDrops] = new RegularDrop();
} else {
  drops[totalDrops] = new TinyDrop();
}

random(100) will return a float value randomly chosen between 0 and 100. PERCENT_REGULAR is the knob variable to control the percentage of generated drops which are RegularDrop. For example, if PERCENT_REGULAR is 90, 90% of the drops will be RegularDrop, and 10% will be TinyDrop. PERCENT_REGULAR can be added as a variable of the Game class.

float PERCENT_REGULAR = 90;

Scoring¶

In the original code of 10.4 shown below, whenever the player catches a drop, the score is incremented by one.:

if (catcher.intersect(drops[i])) {
  drops[i].finished();
  levelCounter++;
  score++;
}

In our project, we want to increment the score by one if the player catches a RegularDrop and increment by 2 if the player catches a TinyDrop. To achieve that, we add a “score” variable, along with a getScore() method to the parent Drop. The “score” variable is initialized to 1 and 2 for the RegularDrop and TinyDrop respectively. When the player catches a Drop, instead of incrementing the score by 1, we increment it by getScore().:

if (catcher.intersect(drops[i])) {
  drops[i].finished();
  numberDropsDone++;
  myGame.score += drops[i].getScore();
}

Other classes¶

The Timer, Catcher, Drop classes are as defined in 10.4.

Planning¶

To begin design of our game, let’s look at the changes we’ll need to make, to modify Shiffman’s exercise 10.4 project code. In Shiffman’s project, he has all of the game type code simply implemented within the processing draw loop. We’d like to re-factor his program and make a separate Game class in order to make it easier to organize and understand our program code. If we look at his Draw loop code, we can see that he’s incrementing a score-type variable, he’s keeping track of misses, etc. So, let’s create a Game Class, initially we can begin with the following instance variables, we will probably expand on these at some point:

final int START=0;
final int ACTIVE=1;
final int END=2;

Game Button Objects¶

If we want to include some Button objects in our game, like a startButton and a resetButton, then we’ll need to look at what a Button object would look like. Shiffman provides an example of a Button object in Exercise 9.8 To integrate the a start button in the Game class, it’s important to remember to initialize the button in the Game constructor, aslo, for the simple button class and click methods that we’ve created, we want to make sure out buttons don’t have the same position values because we are using the position to determine if the button has been clicked:

Game(){
        int gameState=START;
        int score=0;
        startBtn=new Button(width/2, height/2+20,70,50);  //make sure buttons aren't in the same location
        resetBtn=new Button(width/2, height/2-50,70,50);
        }

Game Display - Buttons¶

Then, in the Display method for the game, we can display the buttons depending on what the gameState is:

//this code is in the Game class tab

void display(){
        switch(gameState){
          case 0:  //Game is in 'Start' mode - show start button
                fill(255);
                rect(0,0,width,height);
                startBtn.display();   //here's where we display the start button
                fill(0);
                text("Push to Start",width/2,height/2-10);
                break;
         case 1:  //game is in 'ACTIVE' mode
                fill(100,150,200);
                rect(0,0,width,height);
                fill(0);
                stroke(0);
                text("Score: " + score,20,20);
                break;
          case 2:   //game is in 'END' mode
                resetBtn.display();   //here's where we display the reset button
                fill(0);
                text("Push to Restart",width/2,height/2-10);
                break;
                }
        }

Button State¶

The button objects have a display method which we’ve called above in the game.display( ) method. So, the button knows what to look like based on it’s internal state. That is the button’s responsibility. However the main reason that we want to use a button is so we can change something in the program whenever someone clicks on the button and changes the button’s internal state. So, the Button objects have an internal state that is boolean: on, which is either true or false. This state is changed when the button.click() method is called:

      /// this code is in the Button Class:: notice that we'll have a problem if the buttons have the same position
      /// which might not be obvious if they're displayed at different times.

      void click(int mx, int my) {  //input is mouseX, mouseY
              // Check to see if a point is inside the rectangle
              if (mx > x && mx < x + w && my > y && my < y + h) {
              on = !on;
  }
}

Game Button Integration¶

Now we need to figure out how to integrate the button event handler into the game. So, if we look back at the main program code, we have a MouseClicked( ) event and this is where the game.startButton.click() code must be located so it’s executed when the user clicks the mouse. There are 2 different types of game methods called here, first is the Button click() method for each button. The second is game1.checkState( ). It might not be obvious that we would want to have this type of method, but it makes it easier within the Game objects to determine what the impact of the button clicks has on the game:

//this code is in the main program tab

void mouseClicked(){
          game1.resetBtn.click(mouseX,mouseY);
          game1.startBtn.click(mouseX,mouseY);
          game1.checkState();    /// this helps us determine what to do when there are multiple buttons in the Game
}

So, now we need to write the code for this checkState( ) method within the Game Class. So, first thing we do is see if the button states have been activated so that ‘on’ == true. If so, then we want to use this as a trigger to change the game state. However, it’s important to remember to set the button on state back to false. See the code below:

  //this code is in the Game class tab

      void checkState(){
              if(startBtn.on==true){
                      gameState=ACTIVE;   //change game to active state
                      startBtn.on=false;
              }
              if(resetBtn.on==true){
                      gameState=START;   //change game to start screen
                      resetBtn.on=false;
              }
}

Game Instance¶

All of the above code assumes that we will define, initialize and utilize a Game object in the main program tab. Since we need access in the draw loop, as usual, we’ll declare the object above the setup function, initialize in the setup function, and then use in the draw loop:

//this code is in the main tab

//other global variables
Game game1;

void setup(){
//other initializations

game1= new Game();   //call the Game constructor, here we call the default constructor
}  //end setup

void draw(){   //here is how we might use this code

        game1.display();

        if(game1.gameState==game1.ACTIVE){ // put most active game code in here
                if (timer.isFinished()) {
                if (totalDrops < drops.length) {
                drops[totalDrops] = new Drop();
                totalDrops++;
                }  // end if
                timer.start();
                }  //end timer
                for(int i=0;i<totalDrops;i++){
                if(drops[i].isActive==true){  //only look at active drops
                   boolean isHit=false;
                   drops[i].move();
                   isHit= drops[i].isIntersecting(paddle1);
                        if(isHit){
                                println("isHit");
                                drops[i].isActive=false;
                                drops[i].y= height + drops[i].getBottomY();  //move off screen
                                game1.score++;
                   }
                drops[i].display();
                }  //end isActive
        }//end drop[] loop
        paddle1.display();
        }  //end game1.Active

}  //end draw

Inheritance¶

//this code is in the Seahorse Class tab

class Seahorse extends Drop{
                PShape s;
                float sWidth;
                float sHeight;
                float bottomY;
                float bottomX;

                Seahorse(){
                        super();   //call the Drop constructor
                }

                void display(){
                    //some code to display the seahorse which is different than a drop
                }
}

        if (timer.isFinished()) {
  // Deal with raindrops
  // Initialize one drop
  if (totalDrops < drops.length) {
                drops[totalDrops] = new Drop();//(game.levels[game.currentLevel].dropSpeed);
                // Increment totalDrops
                totalDrops++;
  }
  timer.start();
}

Polymorphism¶

As discussed above, we used inheritance to extend the Drop class, we created a child class: Seahorse. So, the beauty of this is that we can now put Seahorse objects in an array of that has been declared to contain Drop objects. This is polymorphism, it means that a parent class ‘reference’ can be used to refer to a sub-class object. So, we can do the following:

Drop someDrop = new Seahorse();    //someDrop is a Drop reference, it points to a Seahorse object.

This might not seem like a very important feature on initial inspection, however, it is one of the powerful features that result from the Object-Oriented concept of Class Inheritance. So, now we can change the game code so that when the timer goes off, we can create Seahorse objects instead of Drop objects:

drops[totalDrops] = new Seahorse();

This is a start, but in addition, to make our game interesting, we want to have a variety of drop type objects falling in the game, yet we only want to create 1 drop each time the timer goes off. So we need some way to control this. We’re looking for random behavior, like flipping a coin. Also, using a switch statement will allow us to easily add more types of dropping objects without making big changes to the code. The switch statement can’t use a randomly generated float value, it needs an integer. So, first thing we need to generate a random integer and we can do this by type casting the random number to an integer. This will result in truncation of the integer value, so if we used Random(0,1), we’d only ever get the integer 0 as a generated value. So, the code below generates 2 different values, 0 and 1, then we can use that to randomly generate different types of drops.:

int choice = (int) random(0,2);  //  gives 0,1 vaules

switch(choice){

case 0:  drops[totalDrops]= new Seahorse();
                break;

case 1:  drops[totalDrops] = new Star();
                break;
}

The code as Shiffman has written it, means that there will never be more than 50 drops created, in other words, once totalDrops>=50, no new drops will be created. It would not be much more difficult to have additional logic to have an else{ } block where, once we know the entire array has been filled with drops, to continue the game, we could just loop through the array and find inActive drops and then create new drops in those spots. Below I have just pasted in the duplicated code from above, this would not be the most elegant or efficient way to do this but it should at least convey the idea of how this might be implemented:

   if(game1.state==game1.ACTIVE){
           if(totalDrops < drops.length){
     int choice = (int)random(0,2);  //  gives 0,1 vaules
        println("choice " + choice);
        switch(choice){
           case 0:  drops[totalDrops]= new Seahorse();
                     break;
           case 1:  drops[totalDrops] = new Drop();
                     break;
         }    //end switch
totalDrops++;
    }  //end if
     else{  //the array is already full of drops, some are not active, find one isFinished and create a new drop.
           for(int i=0; i< drops.length, i++){
                    if(drops[i].isFinished){   //or !drops[i].isActive
                                   int choice = (int) random(0,2);  //  gives 0,1 vaules
                                   switch(choice){
                                   case 0:
                                                   drops[i]= new Seahorse();
                                                   i=drops.length; //  since we've found one, drop out of the loop by resetting i to the max value
                                                   break;
                                   case 1:
                                                   drops[i] = new Star();
                                                   i=drops.length;
                                                   break;
                                                   }   //end switch
                    }  //end if
           }  //end for
     }  //end else

           ///the rest of the game1.ACTIVE code

           }

Questions:

Pong Game¶

Dr Doane, in his online article: Thinking Through a Basic Pong Game in Processing provides a nice tutorial on how to create a pong game using processing. While it’s not an object-oriented approach, it still provides a very good overview and details of ideas we’ll want to implement. To start with, he discusses how we can use the processing keyboard functions to control movement of the paddle. Just as with mouseEvents, when a user presses a key, we can use that input to allow interaction with our program.

The initial code in Dr Doane’s tutorial describes the motion of a ball as it bounces against the edges of the canvas. The main idea is that there are boundaries of the canvas where we need to test to see if the ball has reached those boundries and if it has, then we need to change the direction of the ball object’s speed. In an object oriented approach, this behavior would be implemented in the Ball class definition, in the move( ) method.

KeyPressed Event¶

Dr. Doane then refers to the processing reference code in order to determine how to move the paddle object in response to a user’s keyboard interaction. Below is the processing example code:

// based on code from http://processing.org/reference/keyCode.html

void keyPressed() {
        if (key == CODED) {
                if (keyCode == UP) {
                paddleY = paddleY – 30;
        } else if (keyCode == DOWN) {
                paddleY = paddleY + 30;
                }
        }
}

In the code above, the first thing is to note that we want to know if the user has interacted with our program using the keyboard. If that’s happened, then a keyPressed event is triggered. Similar to mousePressed events Processing provides a function keyPressed( ) that is triggered when the user interacts with the keyboard. Then, within the keyPressed( ) function, we need to determine how we want our program to respond to the keyPressed event. The keyPressed event stores the a key value, and it remembers the most recent key that has been pressed. For special keys like arrow keys, we need to also use the keyCode values, so we can tell if the key that was most recently pressed corresponds to a special key, the arrow keys. In the code above, keyCode == UP, is used to determine whether to move the paddle upwards.

For our project, we’ll be using a paddle that moves horizontally, so we’ll look at whether keyCode == LEFT, or KeyCode == RIGHT, and then we’ll need to create code that changes the behavior of our paddle’s movement based on these keyCode comparisons.

KeyPressed Event Handlers¶

First we need to create a Paddle class: This will be simliar to the Ball class, but we’ll have a rectangular object that moves based on the users keyboard interactions. So, instead of the move() method, we’ll have pressedLeft() and pressedRight() methods:

   //this code is part of the Paddle class definition

   void pressedLeft(){
  if(x>0){   //check to make sure that the paddle doesn't move off the left edge
     x=x-speed;  // decrease x position to move the paddle left
   }
 }
 void pressedRight(){
   if(x+pWidth<width){  //make sure paddle stays within the right canvas border
           x=x+speed;
   }
}

The other methods and constructors are basically just like the Ball object, where we have paddle position coordinates: x,y and paddle dimensions pWidth, pHeight. We also have a speed variable that controls how fast the paddle moves.

KeyPressed Paddle Method Calls¶

For our program, we’ll actually want to use these pressedLeft() and pressedRight() methods within the keyPressed event. The pressedLeft( ) method is an event handler. It’s code that we want to be executed when the keyPressed event occurs. So, in the main program, we would create a Paddle object, for example paddle1. Then in the keyPressed event, we’d use the paddle1 object to call it’s pressedLeft( ) method as in the code below:

// This code is in the main program, below the draw() function

void keyPressed() {
        if (key == CODED) {
                if (keyCode == LEFT) {
                        paddle1.pressedLeft( );
                }
        else if (keyCode == RIGHT {
                        paddle1.pressedRight( );
                }
        }
}

Arrows: State Indicators¶

The example below displays left and right arrows when the user presses the arrow keys. In order to display the correct arrow, I’ve created some additional variables as part of the paddle class, these are state variables that keep track of the last keyPress event. I’m using int variables, since I want to have 3 possible values: pLEFT, pRIGHT, pNONE (which is the starting position).

Click inside the sketch to activate, then use the right and left arrows to move the paddle.

Final Keyword - Constant Values¶

This introduces 4 new instance variables in order to keep track of and display the red arrows which indicate direction, Note the use of the final keyword:

 // new instance variables for the Paddle class

int direction;  //this variable stores the current direction
final int pNONE=0;   //initial direction state variable
final int pLEFT=1;   // left direction state variable
final int pRIGHT=2;  //right direction state variable

The final keyword is used to indicate that this value should not be ever be changed, these values are used as ‘constants’ within the program. The use of capital letters also indicates that these are special values which are constants and shouldn’t be modified in the program. The constants are used to set the value of direction, the use of int makes it easy to use a switch statement for our program logic. In the display() method of the Paddle class, we use the switch statement to determine which arrow method to call. Note that we’ve created separate display functions for each arrow within the Paddle class, this makes our code logic easier to understand. Below is part of the display() code for the Paddle class, showing how we’ve used switch to control which arrow is displayed:

// this code is in the Paddle class: display() method

switch(direction){   //test the current value of direction
               case(pNONE):       //if the initial value, do nothing
               break;
       case(pLEFT):       //if pLEFT, display left arrow
               this.displayLeftArrow();   // call this Paddle method
               break;
       case(pRIGHT):     //if pRIGHT, display right arrow
               this.displayRightArrow();   // call this Paddle method
               break;
}

Set the State Variable¶

So, next we need to figure out where to change the value of direction. We have already created the Paddle methods: pressedLeft() and pressedRight(), and we know these methods are executed when the user presses the left or right keyboard arrows, these Paddle methods are event handlers that we have created, and they are executed in the global keyPressed( ) event by a Paddle object. So, it makes sense that we would want to change the direction state variable when this event occurs, and we’ll want to do that within the Paddle class itself, because a paddle object should be responsible for knowing what behaviors need to occur when the Paddle method: pressedLeft() event handler is executed. Below is the new code:

     // this code is in the Paddle class: pressedLeft() method

     void pressedLeft(){
            if(x>0){
                    x=x-speed;
            direction=pLEFT;  //here we set the direction state value to pLEFT
      }
}

Intersection¶

In Shiffman’s game, both of his objects are circular so that has made testing for intersection much easier. In our game, we’re going to use a rectangular paddle and .svg PShape objects. Both of these elements have their x,y locations at the upper left corner of the object, whereas circles have x,y defined at the center. However, our paddle can’t move in the y direction, so that makes it a little easier to check for intersection.

After noticing some weird behavior when implementing the isIntersecting within the Paddle class, I have decided to move the code to the Drop classes. So, we’ll pass in a Paddle object, and call the method using the drop[i] object instance

      // assume that in the Drop class we have an instance variable sWidth, sHeight that define
      // the bounding box for our drop's shape
 //assuming the Paddle has x,y,pWidth, pHeight

 //this code is in the Drop Class definition
 //   this is called in the main tab as:   drops[i].isIntersecting(paddle1);

      boolean isIntersecting(Paddle p){
   if(this.y + this.sHeight >= p.y){     //check the bottom point of our drop shape to see if it's hitting the top of the paddle
           println("y > pY");
           if(((this.x + this.sWidth) >= p.x) && (this.x  <=  ( p.x + p.pWidth))) {
                   println("hit ");
                   this.y=height + 100; // move the drop below the bottom of the visible canvas
                   this.isActive=false;
                   return true;
           }   //end if
      }   //end if
  return false;
}  //end method

When we use this intersection method, we’ll use it in the main tab, and if the method returns true, then we’ll want to increment the game score, and set the drop to be inactive. In addition, it’s also a good idea to just change the y position of the drop if it’s been hit, so that it’s off the screen, that prevents display issues.

Summary¶

So, in the Paddle class, we have created event handler methods: pressedLeft() and pressedRight() When we create a Paddle object, paddle1, then we’ll have that object call these event handler methods within the global keyPressed( ) event. The event handler methods are used to trigger object behavior code that we’ll need to create within the Paddle class itself, one example of this behavior is the displayLeftArrow() method.

Using Object-oriented programming means that we provide more structure to our code. It can be a little confusing to figure out how to organize code when initially learning object-oriented programming. It can be helpful to think about objects as being responsible for knowing how to implement their own behavior. From this perspective, within the main program, either in the draw() or setup() functions, we want to tell objects when to implement behavior, either as part of a sequence of functions, or as the result of some event being triggered, but then we want to let the object itself be responsible for knowing how to implement it’s own behavior, so that code should be contained within the Class definition.

Questions:¶

1. Why have we decided to use int as the type for the state variable direction?

2. What is the benefit of creating simple methods like displayLeftArrow( ) which do one

   specific task instead of just writing that additional code within the pressedLeft( ) method?

Polymorphism¶

One huge benefit of having child class objects is that we can still refer to all of these objects as Drop objects, this is referred to as polymorphism. This will allow us to have an array of Drop objects where we can loop through an array of Drop objects, with the actual objects in the array being child objects such as Stars or SeaHorse objects. When we define the Star and SeaHorse classes of objects, we must extend the Drop class, the child classes will inherit all instance variables and methods from the Drop class. This will allow us to manage multiple types of dropping objects in the game code, while still referring to these objects as Drop objects.

Let’s create 2 child Classes: Star and Seahorse These objects will use the PShape object for their visual display. Let’s start with the Seahorse class. We need to use the `` extends`` keyword to indicate that the SeaHorse class is a child class of the Drop class. As noted above, they will implement PShape for their display, in-fact we’ll use an .svg file to create the shape for these objects, so the display() method will need to be implemented in these child classes, so it will over-ride the Drop class display method:

//class definition for the SeaHorse class

class SeaHorse extends Drop{
        PShape s;

        SeaHorse(){
                super();
                s=loadShape("seahorse.svg");
        }

display(){
                //code in here to display the .svg file
                println("seaHorse method");
        }

} //end of SeaHorse class

Method Over-ride¶

So, both the Drop class and the SeaHorse class have code that implements the display() method. So, the compiler must determine which display() method to use if a SeaHorse object calls the display() method. The compiler first checks the child, SeaHorse class, if it has code implemented for a method, when a method has been called by a child object, then the child method code is implemented. Let’s clarify this concept of method over-ride. In the main program tab, we’ll have a SeaHorse object, and then it will call the display() method. We’ll expect that it’ll print the text “seaHorse method” to the console since that’s the code we’ve written above in the Seahorse display() method.:

//this code is in the main program tab

Drop shorse=new Seahorse();

draw(){
        shorse.display();
}

Arrays of Multiple Types of Objects¶

An array must be declared to contain a specific type of element. Above we’ve looked at an array that’s been declared to hold Drop elements: Drop[] drops. However using the Object concept of Inheritance will allow us to use this drops array to hold several different types of Drop objects, as long as these other objects are from a class that is a child class of the Drop class. We

Object Cache¶

In Shiffman’s RainDrop Game, he uses the Array of Drops as a way to reuse objects. So, rather than creating a new object each time a RainDrop falls below the bottom edge of the canvas, he identifies it as finished so that he can re-use it at a future time. This is common in game programming. So, we need to add a boolean state variable to the Drop class that will let us indicate that a raindrop is not actively showing on the canvas. In addition, we also want to make a method called finished() that set the state of a drop to finished==true. This is another example of creating a simple method that does 1 simple task. We’ll have another method called reachedBottom( ) which we can also use to test for inactive drops:

//Drop Class Definition
// New variable to keep track of whether drop is still being used

boolean finished = false;

//Drop Methods
 // If the drop is caught

void finished() {
        finished = true;   //sets the finished state to true so the drop can be reused
}
// Check if it hits the bottom

boolean reachedBottom() {
        if (y > height + r*4) {  // If we go a little beyond the bottom
                return true;
                }
        else {
                return false;
                }
}

In the main program these methods, and the boolean finished variable are used to control the game. The finished variable is used to filter the Drop objects so that the methods are only called on active objects. This type of optimization is common in games. It’s much less expensive to check the value of a variable than to call a method or function, so the drop methods are only called on active drops. The code below shows that within the main game draw() loop, the entire game is based on calling methods of game objects like Drop, Timer, and Catcher. Below is a code snippet where a for loop is used to iterate over the Array of Drop objects and then to call the appropriate Drop methods and increment game variables as needed:

       // Move and display all drops
   for (int i = 0; i < totalDrops; i++ ) {
     if (!drops[i].finished) {   //this is a filter so we only process drops which are active
       drops[i].move();
       drops[i].display();
       if (drops[i].reachedBottom()) {
         levelCounter++;
         drops[i].finished();
         // If the drop reaches the bottom a live is lost
         lives--;
         // If lives reach 0 the game is over
         if (lives <= 0) {
           gameOver = true;
         }
       }

       // Everytime you catch a drop, the score goes up
       if (catcher.intersect(drops[i])) {
         drops[i].finished();
         levelCounter++;
         score++;
       }
     }
   }




Summary
========