ISY00245 Principles of Programming. Module 7

ISY00245 Principles of Programming Module 7

Module 7 Loops and Arrays Introduction This week we have gone through some of the concepts in your lecture, and will be putting them in to practice (as well as elaborating on them) in this study guide. If you have not watched the lecture yet, you should watch it now before starting on this work. Note that it is assumed that you have completed the work up until this point, and are familiar with creating objects, adding code, using setimage and other Greenfoot class and object methods. If you have not completed the work up until now, please go back and make sure you are familiar with it all, before going further. We will put the new concepts from the lecture into practice by building a piano application that you can play with your computer keyboard. Note that your portfolio activity this week will not be the piano scenario but will be another related scenario. You will need to apply the techniques you learn in the piano scenario, so work through those activities, and then build your portfolio scenario. Study materials Materials required: The free Greenfoot programming environment; Files in "Module07" folder on MySCU site; "Introduction to Programming with Greenfoot" textbook and support files; Internet access to access your lecture, and any other material. ISY00245 Module 7 - Page 1

Objectives On completion of this topic, you should be able to: implement the concept of states implement, initialise and use state variables use and construct more complex conditional statements use constructor parameters to set initial values use constructor overloading create and use while loops create, initialise and use arrays trace loops using counters and arrays Concepts state variables &&! constructor parameters while arrays array elements indices escape character tracing code abstraction ISY00245 Module 7 - Page 2

The piano scenario We will start with opening the existing piano-1 scenario. It has the sound files we will need, and the images, and not much else. Activity 7-1 The scenario (from Chapter 6 in your text) Open the scenario piano-1 from the book projects, and open the Key and Piano classes in the editor. Write down a short description of the methods in the Key class: Create an object of class Key and place in the world. We will later create several of them and place next to one another, as a piano keyboard. Activity 7-2 Animating the key (from Chapter 6 in your text) Add an if else construct that sets the image to "white-key-down.png" if the "g" key on the computer keyboard is pressed, and otherwise sets the image to "white-key.png". (The code, if you are stuck, is inserted after activity 7.3). Test your code by running, and pressing "g". Add a couple more piano keys and check that it works for all keys. What does this code do if the g key is not pressed, each time the act method is called? States If you answered the question above "it changes it to the same image ("white-key.png") each time" then you were correct. This means that Greenfoot is changing the image even when it doesn't need to do so. Writing what we want to actually happen in pseudocode: IF the piano key isn t down AND the g key is pressed THEN END IF change the image to white key down IF the piano key is down AND the g key isn t pressed THEN END IF change the image to white key up (normal) It becomes obvious that we need to store some information about whether the piano key is down or not. We can do this using a state variable. ISY00245 Module 7 - Page 3

A state variable is just a normal variable, but it stores some information about the state of something in the application. This state is then used to make some decisions about actions in the code. In this case, we want to store whether the piano key is already up or down, so we can make a decision about whether to swap the image. A sensibly named variable would be isdown. We can declare it initially (in the constructor) as false and then change the state if we need to change the image. Our pseudocode becomes IF not isdown AND the g key is pressed THEN END IF change the image to white key down set isdown to true IF the piano key is down AND the g key isn t pressed THEN END IF change the image to white key up (normal) set isdown to false Activity 7-3 Using states (from Chapter 6 in your text) 1. Add a new private boolean variable to your class called isdown. 2. Initialise this variable to false in the constructor 3. To alter our IF ELSE code to match the pseudocode above, we need to know how to implement "NOT" and "AND" in our conditions. The next section will cover this briefly. The code for Activity 7-2 is: if ( Greenfoot.isKeyDown("g") ) setimage("white-key-down.png"); else setimage("white-key.png"); More complex conditions -! and && Up until now we have been using expressions in our conditions that included < <= => > == We will now add a couple of symbols to our repertoire. Firstly,! means NOT and reverses the value of the condition. For example:!(6 > 3) would equate to false, as 6>3 is true, and the NOT operator reverses the result. && chains two conditions together, and is only TRUE if both of them are true. ISY00245 Module 7 - Page 4

For example: (6 > 3) && (17 < 18) would equate to true as both 6>3 and 17<18 are true. (6 < 3) && (17 < 18) would equate to false, because one of the conditions is false. (6 < 3) && (17 > 18) would also be false, because both of the conditions are false. The whole condition will only be true IF both conditions are true. Activity 7-4 Implementing our code: You have a boolean variable called isdown, which is initially false. You have pseudocode that shows the logic of how this code will be implemented. Change your act method to code that implements the following pseudocode: IF not isdown AND the g key is pressed THEN END IF change the image to white key down set isdown to true IF the piano key is down AND the g key isn t pressed THEN END IF change the image to white key up (normal) set isdown to false Test your code. It will not seem to do anything different at this stage, but we are now using less processing power, and setting this up for further steps in our application development. [If you are stuck, the code is given after Activity 7.5] The play method The next step is to produce the sound to play the note. We are going to create a new play() method in the Key class, that will play a sound. In this scenario, there are a number of sound files included in the sounds subfolder. The names of these sound files are 2a.wav, 2b.wav, 2c.wav, 2c#.wav etc. We will pick a note 3a.wav to play for the test key. From previous modules you know that you can play a sound by using the playsound method from the Greenfoot class. Activity 7-5 The play method With the scenario open, add a new public method play() to the Key class, that does not return a value. Make sure you comment it before the first line of the method. Add code to this method to play the 3a.wav sound. ISY00245 Module 7 - Page 5

Add code to your act method (in the right place) to call your new method. To call your new play method, use the code play(); Test your work. What happens when you create two keys, and run the scenario, and press the g key? Watch the screencast 0701 Setting up one key, in the Module 07 folder. In your textbook, read pages 103 to 108 (down to "Abstraction: creating multiple keys"). Creating Multiple Keys Previously in Module 6 we came across a situation where we wanted to use one method, with various values when we wanted to add points to the Score. We achieved this using parameters. We can do the same with constructor methods, to create objects of the same type/class with different initial values for variables. For the piano key, we would like each key to have a different name (associated with the computer keyboard), and a different soundfile associated with it. We can do this by declaring two new instance variables, key and sound, and then setting them with the constructor in the following way: public class Key extends Actor private boolean isdown; // state of this key private String key; private String sound; // key name // sound file name /** * Create a new key linked to a given keyboard key, and with * a given sound */ public Key(String keyname, String soundfile) key = keyname; sound = soundfile; isdown = false; // more methods go here We could now change the rest of our code so it uses key instead of g and sound instead of 3a.wav. ISY00245 Module 7 - Page 6

Activity 7-6 Abstracting the key With the scenario open, implement the changes so far - that is, add fields for the key and sound file, and change the constructor to have two parameters that initialise those fields. Modify the rest of your code so your key object reacts to the key and plays the sound file. Test it out. You will notice when you construct new keys, you need to specify the keyname and soundfile. Construct multiple keys with different sounds. Our next step is to write some code to construct the keys for us. Building the piano If you recall in Module 6, we created viruses, red cells and borders using the new keyword and addobject to add them to the world. To create a new key, we can use the expression new Key( g, 3a.wav ) and then we would have to add it to the world using the addobject code: addobject(some-object, x, y); If you remember, we can shortcut this by typing: addobject(new Key( g, 3a.wav ), 300, 180); which will create a new Key object and place in the world at coordinators (300, 180). The constructor of our piano class can be used to initially create the Keys of our piano. Activity 7-7 Beginning to build the piano 1. Add code to your piano class so it automatically creates a piano key and places it in the world. The key should trigger on "g" and play 3a.wav. 2. Change the y-coordinate so that the piano key appears exactly at the top of the piano. ISY00245 Module 7 - Page 7

(Hint: the key image is 280 pixels high and 63 pixels wide). 3. Write code to create a second key that plays a middle-g (2g.wav) when the f key is pressed on the computer keyboard. Place this key exactly to the left of the first key without any gap or overlap. 4. In the Piano class, refactor your constructor by creating a new method called makekeys(). Move the code that creates your keys into this method. Call the method from the Piano's constructor. Make sure you write a comment for your new method. The While Loop The while loop was covered in the lecture for this module. It is the first loop we will look at for the Java programming language. A while loop has the following form: while (condition) statement; statement;... If we would like to execute a loop a number of times, then we declare a counting variable outside (before) the loop, and then change the value stored in the variable in some way inside the loop. When the condition becomes false, the loop will stop. For example: int counter = 0; while (counter < 100) // do something here counter = counter + 1; The counter is very important in this sort of loop. If we don't change the value of the counter within the loop, then the loop condition will never be false - and we will have an infinite loop. We can use this construct to create our 12 piano keys. A good start may be: int i = 0; while (i < 12) addobject(new Key( g, 3a.wav ), 300, 140); i = i + 1; We can now replace the code in the makekeys method with this loop. Activity 7-8 Using a loop Replace the code in the makekeys method. Test - what did you observe? ISY00245 Module 7 - Page 8

We can ensure that the keys do not all appear at the same place by using the loop counter i as a variable in our addobject code. A good start would be addobject(new Key( g, 3a.wav ), i*63, 140); as the piano key images are 63 pixels wide. If you implement this, you will see that the first time through the loop, the key will be placed at (0, 140). The second time through the loop, the next key will be placed at (63,140), and so on. Unfortunately, our image coordinates are at the centre of the keys, so our left-most key is half off the keyboard. We can fix this by adding an offset amount. addobject(new Key( g, 3a.wav ), i*63 + 54, 140); Activity 7-9 Adding all the white keys Replace the code in the makekeys method with our loop code. Test - what did you observe? ISY00245 Module 7 - Page 9

Optional: Using the fixed numbers for images in our code this way is not optimal. If something changes, such as the size of the images we are using, then our code will break. To solve this, we can use the getwidth() and getheight() methods of the key s image. To do this, assign the key object to a local variable of type Key when you create it, then use key.getimage().getwidth() to find the width and similar for the height. You can replace the 54 by getting the width of the piano s image and doing some calculations to work out the offset. Replacing these values means that the code will always work even if the size of images change. At the moment, our keys all react to the g key on the computer keyboard, and all play the same note. We would like to assign different keys and soundfiles to these piano keys as they are created. To be able to do this, we will store them in an Array. Arrays An array is an object that can hold many variables, and can be treated as one variable. You can think of it as a collection of things that have some similarity. Some of you may have come across paper expanding files that look like this: You may like to keep a mental model of an Array that looks something like this. Other people are happier to think of an Array as a set of variable spaces next to one another: Instead of each of these variable spaces having a name, the whole array has a name, and then each variable space has an index number. These indices start at 0. The figure will help you to visualise this concept. ISY00245 Module 7 - Page 10

(from http://www.javatutorialprograms.com/2015/11/learning-concept-of-arrays-in-java.html) If the array was called numbers then the highlighted element would be numbers[8]. Creating arrays To create a new array, we first tell the computer what sort of values we want to store in the array. int[] numbers; numbers = 47, 36, 20, 15 ; We can also combine the declaration and initialisation (as we have previously with other variables: double[] fractions = 0.1, 0.2, 0.25, 0.5, 0.75; String[] pets = dog, cat, rabbit, mouse, wombat ; Accessing elements We can access the element of an array by using its index. We can use this index to either get the value that is already set in the array: mydouble = fractions[2]; or to store a new value in the array element: pets[3]= horse ; As with the variables we have already encountered, setting a new value for an array element means the old value that was stored is lost. We are now in a position to set up two arrays one with the names of the computer keyboard keys we want to use (in order) for our piano keys, and one with the names of the sound files for those piano keys. Setting up and using the piano arrays Greenfoot uses a coordinate system that measures units (pixels or other measures) from the top left-hand corner. It is similar to many other IDEs in this way. The distance across the screen from the lefthand side is the x coordinate, and the distance down from the top is the y coordinate. In the Piano class, we need two array instance variables: private String[] whitekeys = a, s, d, f, g, h, j, k, l, ;,, \\ ; private String[] whitenotes = 3c, 3d, 3e, 3f, 3g, 3a, 3b, 4c, 4d, 4e, 4f, 4g ; ISY00245 Module 7 - Page 11

There is one thing that needs explaining in this code: the \\ in the whitekeys array. In Java the \ (backslash) character has a special meaning for Strings. It is the escape character for Java Strings. We actually want to use the \ on the keyboard, so to let Java know its actually the character, we have to place the escape character \ and then the actual character we want \. This means we end up with \\ whenever we want to use \ in a Java String variable. Now we have two arrays ready to use, we can now use the counter to loop through the loop, pointing at a different element each time. private void makekeys() int i = 0; while (i < whitekeys.length) Key key = new Key(whiteKeys[i], whitenotes[i]+.wav ); addobject(key, i*63 + 54, 140); i = i + 1; This may seem a little confusing. If you ever get confused with loops and arrays, use a table to trace out the values to help you understand the code. If you have an error in your code, a trace can help you identify what has gone wrong. whitekeys.length = 12 (see the lecture for explanation of this) i i < 12 whitekeys[i] whitenotes[i]+.wav i * 63 + 54 i = i + 1 0 true a 3c.wav 54 1 1 true s 3d.wav 117 2 2 true d 3e.wav 180 3 3 true 11 true \\ 4g.wav 747 12 12 false Activity 7-10 Using arrays to build the white keys Make the changes discussed above in your own scenario. Make sure that all keys work. If your keyboard layout is different, adapt the whitekeys array to match your keyboard. Now change the piano so that the keys are one octave lower than they are now. That is, use the sound "2c" instead of "3c" for the first key, and move up from there. ISY00245 Module 7 - Page 12

Activity 7-11 Black keys - abstraction [Exercise 6.22 & 6.23 in your text] Currently the Key class can only produce white keys. This is because we have hard-coded the filenames of the key images ("white-key.png" and "white-key-down.png"). Use abstraction to modify the Key class so that it can show either white or black keys. This is similar to what we did with the key name and sound file name: introduce two fields and two parameters for the two image file names, and then use the variables instead of the hard-coded filenames. Test by creating some black and white keys. Modify your Piano class so that it adds two black keys at an arbitrary location. Activity 7-12 Black keys - placement [Exercise 6.24 and 6.25 in your text] Add two more arrays to the Piano class for the keyboard keys and notes of the black keys. Remove the code to add two black keys and instead add another loop in the makekeys method in the Piano class that creates and places the black keys. This is made quite tricky by the fact that black keys are not as evenly spaced as white keys - they have gaps. Can you come up with a solution to this? Hint: create a special entry in your array where the gaps are, and use that to recognise the gaps. Hint: there is a String method available called "equals" that allows you to compare the string with another string. It will return true if the two strings are the same. Summary During this topic we have built another application completely, using the techniques you have learned previously and a few new techniques. You have used FOUR new constructs/concepts that you will use over and over while programming: State variables to make decisions based on the state of an application or object at a particular time; Using parameters in constructor methods to set up initial values of the object including the image used, and any other information needed that differs between objects; While loops that repeat a section of code over and over, until a given condition is false; and the concept of array variables that store a number of related values in one array variable. The workshop activities are to be included in your portfolio under a separate folder Module 7. ISY00245 Module 7 - Page 13

Workshop activities Activity R7-1 *** Portfolio Activity *** 1. Declare and initialise a String array called names with the names of three of your classmates, or if you are an Online student, three of the names from one of the lectures. 2. Write the code that will play a sound "ouch.wav" 20 times, using a while loop. 3. Consider the following code: int x = 3; int i = 0; while (i < 3) x = x + 1; i = i + 1; What is the value of x after this code has executed? Place your answers to this exercise in your portfolio document under the heading "Activity R7-1". **** Activity R7-2 Portfolio Activity *** Note: all text answers for the remaining exercises in this module should go into your porfolio document under the heading of the particular Activity. Each individual program, when it is completed, should be saved as a gfar with the name of the activity (eg: activityr7-2.gfar) in a Module 7 folder in your portfolio folder. 1. Open the scenario called bubbles. You will see that the world is empty. Place some Bubble objects into the world, using the default constructor. Remember you can also do this by shift-clicking into the world. What do you observe? 2. What is the initial size of a new bubble? What is its initial colour? What its initial direction of movement? 3. In the world subclass, Space, create a new private method called setup(). Call this method from the constructor. In this method, create a new bubble, using the default constructure, and place it in the centre of the world. Compile, then click Reset a few times to test. 4. Change your setup() method so that it creates 21 bubbles. Use a while loop. All bubbles will be placed in the centre of the world. Run your scenario to test. 5. Place the 21 bubbles at random locations in the world. 6. Save your program in the Portfolio/Module7/ folder as ActivityR7-2.gfar. ISY00245 Module 7 - Page 14

**** Activity R7-3 Portfolio Activity *** Note: all text answers for the remaining exercises in this module should go into your porfolio document under the heading of the particular Activity. Each individual program, when it is completed, should be saved as a gfar with the name of the activity (eg: activityr7-3.gfar) in a Module 7 folder in your portfolio folder. Using your program from Activity R7-2, alter your code to place the bubbles on a diagonal, with x and y distances of 30. The first bubble will be at (0,0), the next at (30,30) and so on. The last one will be at (600,600) for 21 bubbles. Use your loop counter variable to achieve this. Save your program in the Portfolio/Module7 folder as ActivityR7-3.gfar. **** Activity R7-4 Portfolio Activity *** Note: all text answers for the remaining exercises in this module should go into your porfolio document under the heading of the particular Activity. Each individual program, when it is completed, should be saved as a gfar with the name of the activity (eg: activityr7-4.gfar) in a Module 7 folder in your portfolio folder. Using your program from Activity R7-3, alter your code to place the bubbles on a diagonal, so that they go from the top left corner of the world to the bottom right corner. The last bubble should be at 900,600. Save your program in the Portfolio/Module7 folder as ActivityR7-4.gfar. **** Activity R7-5 Portfolio Activity *** Note: all text answers for the remaining exercises in this module should go into your porfolio document under the heading of the particular Activity. Each individual program, when it is completed, should be saved as a gfar with the name of the activity (eg: activityr7-5.gfar) in a Module 7 folder in your portfolio folder. Using your program from Activity R7-4, alter your code to add a second while loop to your setup() method that places some more bubbles. This loop should place 10 bubbles in a horizontal line, starting at x = 100, y = 11, with x increading by 40 every time and y being constant. The size of the bubble should also increase, starting with 10 for the first bubble, then 20, then 30 etc. Use the second Bubble constructor for this (the one with one parameter).. Save your program in the Portfolio/Module7 folder as ActivityR7-5.gfar. ISY00245 Module 7 - Page 15

**** Activity R7-6 Portfolio Activity *** Note: all text answers for the remaining exercises in this module should go into your porfolio document under the heading of the particular Activity. Each individual program, when it is completed, should be saved as a gfar with the name of the activity (eg: activityr7-6.gfar) in a Module 7 folder in your portfolio folder. Remove the existing loops from your setup() method. Write a new while loop that does the following: 1. creates 18 bubbles 2. places the bubbles in the centre of the world, with sizes starting from 190, and decreasing by 10. 3. the last bubble should have size 10. Make sure to create the largest first and the smallest last, so that you have bubbles of sizes 190, 180, 170 etc all lying on top of each other. Use the third constructor of Bubble - the one with two parameters. It also lets you specify the initial direction. Set the direction as follows: the first bubble has direction 0, the next 20, the next 40 etc. Test Save your program in the Portfolio/Module7 folder as ActivityR7-6.gfar. ISY00245 Module 7 - Page 16