Processing Tutorial 8

Objects and classes.

objects_0

We need new systems to organize things properly and get more out of our programs!

We will now begin  “Object Oriented Programming” or OOP using objects and classes.

block3

Section 1. Introducing classes and objects.

A class is the creator of an object.

Classes work like factories. They hold specific instructions on exactly how to generate an object. If you design a class for Mrs. Pacman, your class will describe her color and size (variables) as well as her movements (functionality). At first, the class will be dormant and not produce any Mrs. Pacmans. But, when the class is called into action by a program, the Mrs. Pacman factory will begin production.  

red-dot

Objects are made up of variables, functions and a constructor.

Variables refer to the attributes of an object (its data). In the case of Mrs. Pacman, her data includes colors and shapes. Functions refer to what actions the object can do with the data. Mrs. Pacman’s functions tell her to move around and eat dots. When you create a class and then have your main program call the class into action to make an object (in this case Mrs. Pacman), your class uses a constructor to generate as many Mrs. Pacmans as you request.

 

mrsp

block3

Section 2. Overview on making a class.

All classes must include four elements:

Element 1 = Name

The name is specified by “class Whatevernameyouchoose”. We then enclose all of the code for the class inside of curly brackets {} after the name declaration. Class names are usually capitalized to distinguish them from variable names (which are usually lower case). 

Element 2 = Variables (aka “Data” and “Fields”)

Many names for the same thing. The data for a class is a collection of variables. (Note that programmers often refer to variables as “data” or “fields”).

Element 3 = The Constructor

The constructor is a special function inside of a class that actually manufactures the object. It is the set of instructions that tells the computer how to set the object up. It is important to note that the constructor always has the same name as the class.

Element 4 = Functions (aka Methods) 

This is where we add the functions() to make our objects do stuff. (Note that programmers often refer to functionality/actions as methods” in OOP).

pacman4

block3

 Section 3. Implementing a program using OOP.

There are many things to consider when jumping into OOP and the best way to learn is to just do it.

The mountain will be worth the climb. 

mountain

Our plan for creating a OOP BouncingBall program:

a) Create a main program window that will run the BouncingBall objects.

blue-dot

b) Create a new tab for the Class and call it “BouncingBall” (this is the factory for making bouncing balls).

green-dot

c) Program the BouncingBall’s constructor inside of the Class tab so that it can manufacture the BouncingBall objects when we ask it to.

yellow-dot

 d) Specify the BouncingBall’s object fields. The object fields are the variables/data which describe the object. These are things like color, size, shape, etc. 

orange-dot

e) Specify the methods of what the BouncingBall() object. The methods are the actions or functions used to get the visual design to do something. 

block3

Exercise 1a:

Write and run a simple program which uses at least 1 variable and a custom function() to draw and move a simple object (character, tool, etc) that could be used in a video game.

Exercise 1b:

Create a forward slash// comment paragraph at the top of your program from 1a and write comments to answer the following:  

– The name of your game object (note: this is what your object is called if you made this program using OOP).

– Describe what parts of your code could be used as the object’s fields (if you were to convert using OOP).

– Describe what parts of your could be used as the object’s methods (if you were to convert using OOP).

Save this project – it will we be used again in exercise 6. 

block3

Exercise 2: In the following steps (exercises 2-5), you will use OOP to create a final program

Open Processing and save your program as “Main_BouncingBall”

NOTE: Don’t use spaces or dashes in file names, always use _underscore lines to space words.

(Processing likes it this way).

main

Now create a new tab for your class and name it, “BouncingBall_Class”.

See below for where to find the “New Tab” option. 

new-tab

nameit

(Note: The above tab is just another page of the main program to help you organize things.)

Next, add some basic code into the main program window:

Screen-shot-2013-10-21-at-12.37

Now, click over to your class tab (the official storage unit for your BouncingBall class) and type the following script to set up your class.

OBJECT-TEMPLATERecap on “the constructor”:

The constructor is a special function that tells the main program how to make the object. The constructor also initializes the variables. 

KEEP GOING – NEXT STEPS HERE:

Now follow along and fill in the blanks to develop the class called, BouncingBall.

lanks

You have now written a class that can manufacture one BouncingBall (an ellipse).  

Our next move is to get the main program to call this class into action. Save what you have so far.

block3

Exercise 3 (Continuation of previous exercises):

To call on the class and produce a bouncing ball object we need to do a few things in the main program window.

Add the code below while following along with the explanations.

snap4

Now, run your code to check and see if your OOP worked. Is there a single ellipse?

red-dot

At this moment you may be thinking that this is unnecessary extra work for very simple needs. But, we will expand on OOP’s potentials with a few important adjustments and eventually it will all make sense – hang in there.

NOW …

Study closely the //comments and code in the window below.

Then adjust your own class tab with updated code and comments.

doit1

Following the model below, switch over to the main program tab and code the values connected with the constructor.

doit4

Run your code to make sure the ellipse shifted to position 400,400.

block3

Exercise 4 (Continuation of previous exercises):

Add functionality to the OOP BouncingBall.

Toggle back to your class tab and add in the following new variables and functions.

functions-added

Now, add the functions you just created to your main program window.

functionsinmain

Test your code and make sure your OOP program works.

Is the ball now bouncing against the walls?

block3

CONTINUE…

Adding modularity to your functions to simplify things.

Follow the example code below to stash all of your functions into one.

replace2

Now, adjust your functions in the main program window to use only the run() function.

run-mod

Test your code and make sure it works with the new run() function.

block3

Exercise 5 (Continuation of previous exercises, this is your final product due):

Here’s the payback.

Notice the adjustments below in the main program tab, update your code and run it.

multiples

This is the payoff of object oriented programming. 

Once your set-up your template, you can create multiples and vary your object’s properties with minimal amounts of code.

dots

new

block3

Exercise 6

6a.

Convert the program you wrote in Exercise 1a/1b (above) to be a functioning Object Oriented Program.  You may want to adjust or simplify your design from 1a/1b a bit at first so that you can successfully program it using the OOP method. However,  your final product should be a replica of your original from 1a/1b.

6b.

If you haven’t already, add a “constructor” to your OOP that manipulates new aspects of your design using the underscored__  place holder variables (_x and _y)  to vary your design so that it appears more than one time when you run your program.

block3

More Resources to Learn OOP

The above lesson comes from Jose Sanchez’s video on the Plethora Project.

It is worth watching his tutorial to recap the concepts!

red-dot

 

Here is another helpful lesson on Object Oriented Programming from Fun Programming:

red-dotProcessing also hosts a text based Object Oriented tutorial page here:

http://processing.org/tutorials/objects/

red-dot

Another way to review of these ideas is to watch the informal video tutorials by Processing champion, Daniel Shiffman. He works his way around the concepts a bit differently. So, it may be better to get the gist of things from the above lessons before diving into Shiffman’s lessons.

Screen shot 2013-08-15 at 11.31.22 AM

The videos which reference this webpage:

What is Object Oriented Programming

Defining a Class Part 1

Defining a Class Part 2

Constructor Arguments

block3