Piano
Games and Simulations
O-O Programming in Java
The Walker School
The Walker School – Games and Simulations - 2010
Piano World
Piano
Class
Piano
Constructor
What are the Java keywords in
this class?
Method that
specifies the
size and
resolution of
the world
Java Key Words
Keywords are words which have a
predefined meaning in the language;
because of this, programmers cannot use
keywords as names for variables,
methods, classes, or as any
other identifier.
The Walker School – Games and Simulations - 2010
Animating Keys
Key
Constructor
Key
Method
The Walker School – Games and Simulations - 2010
Animated White Key
Switches between two
images: white-key and
white-key down.
The Walker School – Games and Simulations - 2010
Checking if a
Key is Down
Variable that stores “true” while the piano key
is down, and “false” while it isn’t.
The Walker School – Games and Simulations - 2010
Producing
the Sound
Calls the play method.
Creates a play method.
The Walker School – Games and Simulations - 2010
Abstraction
• A concept or idea not associated with any
specific instance. In the case of the piano, we
are creating a general Key class that will act
the same with each key, i.e. play a sound
when a key is pressed.
• Thus, we avoid repeating many lines of code.
The Walker School – Games and Simulations - 2010
Step #1 - Create Instance Variables
Create a variable to hold the name of
the key.
Create a variable to hold the sound
file.
The Walker School – Games and Simulations - 2010
Step #2 - Assignment
Add parameters to the constructor, so that bits
of information can be passed in when the
object is constructed.
The Walker School – Games and Simulations - 2010
Arguments and Parameters
Arguments are values that control how the function does its job.
Some functions can take more than one
argument.
How many parameters can a constructor take?
Values that are passed from one function to
another get assigned to variables called
parameters.
The Walker School – Games and Simulations - 2010
Programming Challenge
What needs to be added in our play()
method to pass a sound from the constructor
to the play method which activates a key?
The Walker School – Games and Simulations - 2010
One Possible Solution
The Walker School – Games and Simulations - 2010
Step #3 – Construct Piano
Places a key at the top
of the keyboard.
The Walker School – Games and Simulations - 2010
Programming Challenge
• Write code to create a second piano key that
plays a middle-g (sound file 3g.wav), when the
“f” key is pressed. Place the key exactly to the
left of the first key.
The Walker School – Games and Simulations - 2010
One Possible Solution
The Walker School – Games and Simulations - 2010
Loops
• For example:
while (condition)
{
statement;
statement;
…
Loops allow you to express commands repeatedly.
}
The Walker School – Games and Simulations - 2010
Creating Piano Keys w/ Loop
What is the local variable here?
What is the problem here
when you run it?
The Walker School – Games and Simulations - 2010
Local Variables
When you create a local variable inside a function, it only exists inside the
function, and you cannot use it outside.
• Example:
int i = 0;
while (i < 100)
{
statement;
statement;
…
i = i + 1;
}
Also, Local variables are declared inside the
function and have no visibility modifier
(private or public).
Most common error is to forget to
increment the loop counter. If you don’t do
it the variable will not change. This would
produce an infinite loop.
The Walker School – Games and Simulations - 2010
Programming Challenge
• What do you need to do to make sure that the
keys are not on top of each other? You will
need to figure out how to move each key to a
different location on the x access. Each key is
63 pixels wide.
The Walker School – Games and Simulations - 2010
One Possible Solution
You only have to change the x variable in the
coordinates, as all of the keys need to be the
same distance from the top.
But this causes us another problem.
What is it and what’s the solution?
The Walker School – Games and Simulations - 2010
One Possible Solution
Greenfoot refers to the center point of an
object, so the first key is placed at xcoordinates 0 and half the key is off the board.
The Walker School – Games and Simulations - 2010
One Big Problem
The problem here is that all of
our keys now play middle “g”
sound. This is because the are
created with a loop and then
placed in different positions.
The Walker School – Games and Simulations - 2010
Arrays
• Data structures that hold information. It can
hold many variables and thus can store many
values. Sometimes lists are used, rather than
arrays.
• Elements in the array can be accessed using
an index (the number inside the [ ] brackets).
The Walker School – Games and Simulations - 2010
White-Key
Arrays
2D array (list) used for white keys
2D array (list) used for white key notes
The Walker School – Games and Simulations - 2010
Lists
A list is an ordered set of values, where each value is identified
by an index. The values that make up a list are called its
elements.
[10, 20, 30, 40] (a list of ints)
["spam", "bungee", "swallow"] (a list of strings)
Lists and strings—and other things that behave like
ordered sets—are called sequences.
A list within another list is said to be nested.
The Walker School – Games and Simulations - 2010
White-Key Method w/ While Loop
Execution always begins at the first statement of the program.
Statements are executed one at a time, in order from top to
bottom.
Creates a local variable “I” and sets it’s initial value to “0”
As long as “i” < the length of our white-key array, do the following…
String concatenation
Create a new white key and associate it with the sound file in the
whiteNotes list then append “.wav”
Add the key to a location on the keyboard.
Count up by 1 each time through the loop…required.
The Walker School – Games and Simulations - 2010
Key Method w/ For Loop
What is the structural difference between these 2 loops?
Is one loop structure better than the other for what we
need we need to create the keys for our piano?
The Walker School – Games and Simulations - 2010
Programming Challenge
• The sounds folder of the program contains the
key sounds from other octaves on the piano.
How would you change the octave played by
the piano?
The Walker School – Games and Simulations - 2010
One Possible Solution
Changes the key sounds down one octave.
The Walker School – Games and Simulations - 2010
Activity
• Find different sound files online or use audio
recorder software (e.g. Audacity) to record
sounds from every day life. Move these into
the sound folder of your program. Substitute
these sounds for the piano sounds in your
array. Create a piece of music with these
sounds.
The Walker School – Games and Simulations - 2010
Creating the Black Keys
The Walker School – Games and Simulations - 2010
The Issue
• We could go back and create everything over
for the black keys that we did for the white
keys, but that would not be very efficient.
What we want is a Key class that will play
either a white key or a black key. This is also
abstraction, as we can use this method for
either type of key. If we have a general Key
class, the we can extend it to playing the keys
for other types of instruments, say a set of
trombone notes.
Step #1 – Instance Variable
Here we have a variable that will hold the key name of
type String for either a white or black key. We also
have a variable that will hold a sound. So we don’t
need to make any changes from before.
The Walker School – Games and Simulations - 2010
Step #2 – Assignment
You will need to add 2 parameters to pass the variables
each time you create an instance of a key, whether it is
black or white.
The Walker School – Games and Simulations - 2010
Programming Challenge
What is the
problem here?
The Walker School – Games and Simulations - 2010
One Possible Solution
(Step #1 – Instance Variable)
Create 2 more
variables to show
an “upImage” or a
“downImage”
whether it is a
white or black key.
The Walker School – Games and Simulations - 2010
One Possible Solution
(Step #2 – Assignment)
Assign these variables to the
constructor so they are created
each time a white or black key is
created.
Why do we need setImage(upImage)?
The Walker School – Games and Simulations - 2010
Possible Compile Error
Cannot find symbol – constructor Key(java.lang.String, java.lang.String, int, int)
The Walker School – Games and Simulations - 2010
For Loop to Create Black Keys
How can we use the white key array list to create our
black keys?
The Walker School – Games and Simulations - 2010
One Possible Solution
(Step #3 –Methods)
Check to see that your methods
reflect these changes.
The Walker School – Games and Simulations - 2010
Programming Challenge
• What would you need to do to be able to handle
different key images? The current key is 63 pixels
in width. Since this number is hard coded into
our program, if we used a key image of a different
size, they would not be in the same place on the
board. Therefore we need to abstract this
method to handle different key sizes. What
would we need to do?
The Walker School – Games and Simulations - 2010
Making the White Key Width “Unfixed” (Part I)
Create methods to return the actual width and height of a key
in the Key class.
The Walker School – Games and Simulations - 2010
Making the White Key Width “Unfixed” (Part II)
Call your “width” method in the White Key loop and change
the fixed number “63” to the variable “actualWidth”.
What would you do for the black keys?
The Walker School – Games and Simulations - 2010
Show A Message on the Board
Step #1 – At the top of the Piano class
Step #2 – At the bottom of the Piano class, under the last method.
The Walker School – Games and Simulations - 2010
Show a Message Board (cont.)
Step #3 – Call method, in constructor.
The Walker School – Games and Simulations - 2010
Activity
• Go back to the Crab World project. Add a
message that appears when the game is won.
How would you make the font size bigger, or a
different font? Research the java.awt.Font
library.
Steps for this are in the Crab World Project.
The Walker School – Games and Simulations - 2010
Advanced Challenge
• Using fixed numbers in your code, such as 140 and
63 in the above statement is usually not the best
solution. It makes your code vulnerable to breading
when things change. For example is we replaced our
keys with nicer keys made in PhotoShop that were of
a different size, our code would not place them
correctly. How would you abstract the makeKeys()
method to allow for different key images.
The Walker School – Games and Simulations - 2010
Solution – Step 1
(get height and width of keys)
In the Key class write a method to return the width and
height of your key image.
The Walker School – Games and Simulations - 2010
Solution - Step 2
b
(develop a formula)
How can handled the missing blackh
key in the 4th and 8th positions on the
keyboard?
Greenfoot determines
position from the
middle of the key.
h2
h1
w
What mathematical formula could be used to model key
placement?
The Walker School – Games and Simulations - 2010
Key Positions
White Keys
1st Key
Position
2nd Key
Position
3rd Key
Position
4th Key
Position
(x, y)
(x, y)
(x, y)
(x, y)
w / 2, h1/2
w / 2 + w, h1/2
w / 2 + 2w, h1/2
w / 2 + 3w, h1/2
1st Key
Position
2nd Key
Position
3rd Key
Position
4th Key
Position
(x, y)
(x, y)
(x, y)
(x, y)
w, h2/2
2w, h2/2
3w, h2/2
4w, h2/2
Black Keys
The Walker School – Games and Simulations - 2010
Solution - Step 2 (cont.)
b
(develop a formula)
How can we handled the missing
black key in the 3rd, 7th, and 10th
positions on the keyboard?
h2
h1
Greenfoot determines
position from the
middle of the key.
w
The Walker School – Games and Simulations - 2010
h
One Possible Solution – Step 3
Create a variable to hold the width of the key.
Set the width to 0.
Call the width from the Key class.
Multiplies the actual with of the
key with location of the key and
adds 54 which is needed to place
the first key a proper distance
from the edge.
The Walker School – Games and Simulations - 2010
One Possible Solution – Step 4
Gets the width of the key.
Needed because the black keys are not
the same size as the white keys.
The Walker School – Games and Simulations - 2010
Extended Programming Challenge
• Create a piano keyboard that plays different
instrument sounds like a synthesizer. Collect
icons of various instruments, add them to the
bottom of the Piano image. When you click
on one of these icons, it should change the
array lists and play the set of sounds
associated with that instrument, rather than
the piano.
The Walker School – Games and Simulations - 2010