[ the academy_of_code] Senior Beginners

Transcription

1 [ the academy_of_code] Senior Beginners

2 1 Drawing Circles First step open Processing Open Processing by clicking on the Processing icon (that s the white P on the blue background your teacher will tell you where to look for it) You should now see the Processing app, shown below: The most important icons we need to know are: this runs the code you ve written this stops the code you have running [ the academy_of_code] 1

3 Drawing a Circle Type the text below into the processing app: NOTE: we show code examples in boxes like the one below size (200,200) ; ellipse (100,100,15 0,150) ; And press the run button ( ). You should see a circle like this pop up in the Display Window: Congratulations! You have written your first program. Save this program, (file save as ) start the file name Lesson1 Some Common Mistakes Every line must end with a semicolon (for now, at least there are exceptions we ll see later in the course) You need to be very careful with spellings. Look out especially for capital letters. Remember, the computer will only do exactly what you tell it to. ellipse and Ellipse are not the same thing! Each function (another word for command or instruction) takes a specific number of parameters (the name for the numbers between the brackets). size always takes two numbers, separated by a comma. ellipse always takes four numbers, separated by commas. If you get an error this is one of the first things to check for Next we will learn a little more about what we ve written. [ the academy_of_code] 2

4 Understanding Our Circle There are six parameters in the program we just wrote. Each one makes a big difference to what we see on the screen. size ( 200, 200 ) ; ellipse ( 100, 100, 150, 150 ) ; Q: How do we find out what the numbers do? A: Change only one number and re run the program, then see what happens! For example : to see what the first number does we will change it from 200 to 400. See our new program below: size ( 400,200) ; ellipse (100,100,15 0,150) ; Make this change and, stop the program ( ) then then re run it ( ). What changed? Now change the number from 400 to 100. What changed? What does that number do? Some Common Mistakes If the change you make to the code is too small it might be difficult to see what has changed in the output. On the other hand...if the change you make is too big, it might be impossible to see what has changed! You will quickly learn what kind of numbers make sense. Don t forget semicolons ( ; ) if you delete one by mistake it will probably prevent the program from running Be careful of the number of parameters for each function. If you have too many or too few the program might not work or it might work, but strange things may happen! [ the academy_of_code] 3

5 Drawing More Circles We can add an extra circle by adding another line with the ellipse command: size ( 200, 200 ) ; ellipse ( 100, 100, 150, 150 ) ; ellipse ( 100, 100, 125, 125 ) ; This gives us a shape that looks like this: Can you make it look like this? Try changing the order of the ellipse commands. Does it make a difference to what is drawn on screen? Why? Can you add a second target to the screen? REMEMBER In the ellipse function The first number is Distance Across (to the right) The second number is Distance Down (from the top) The third number is Width The fourth number is Height [ the academy_of_code] 4

6 One more thing If you have completed all of the above, add a second target to your screen like this: Managed that? Then try this next one you use rect instead of ellipse to draw the rectangles. Be careful! Rectangles are positioned from the corner, not the centre, so this one s a lot trickier! [ the academy_of_code] 5

7 2 User Input Mouse User Input lets us take instructions from the user if you use the keyboard or mouse to do anything on a computer, that s user input. We re going to start with the mouse here. Remember that the first two numbers in the ellipse function are the position of the centre of the ellipse ( distance from the left and distance from the top of the screen). The numbers we put here tell the computer where to draw the ellipse. We can also use variables to tell the computer where to draw the circle. These are like boxes with numbers in them we tell the computer the name of the box and the computer uses whatever number is in the box to draw our circle. Two examples of variables are mousex and mousey. These are the horizontal ( mousex ) and vertical ( mousey ) co ordinates of the mouse. Look at the code below and guess where the ellipse is going to appear when we run the code. Type code on this side for Task 2 below void setup (){ size (600,600); void draw (){ ellipse ( mousex, mousey, 100, 100); Code on this side is from Lesson 1 (for comparison) size (200,200) ; ellipse (100,100,150,150) ; Tasks (for each one, ask: what happens when I move the mouse right? What about when I move it down?) 1. Make a new program and save it: the file name must start with Lesson2. 2. Copy the above code on the left exactly as it appears above. 3. Run the new program. What happens when you move the mouse around the window? 4. Replace mousex with a number (say, 200). What happens now? Why is that? 5. Put mousex back where it was, and now replace mousey with a number. What happens? Is it different to what happened in (4)? Why? 6. For fun, switch mousex and mousey (so it s now ellipse ( mousey, mousex, 100, 100); ). What happens now? Why? 7. Now try having mousex twice: eg ellipse ( mousex, mousex, 100, 100);. How does the circle move? Why? Try with two mousey s. [ the academy_of_code] 6

8 3 Colour Using colour To colour shapes or text we use the fill () function. Using this function is like picking up a pencil every shape drawn after fill() will be that colour until you use fill() again to pick a different colour. In Processing, colours go from 0 to 255. For example, when dealing with greyscale (fancy name for black and white), 0 is black (no white) and 255 is white (100% white). This is shown in the following diagram: Examples to try out! size (200,200); fill (100); //set the colour of shapes below to 100 (dark grey) ellipse (150,50,100,100); ellipse (50,150,75, 75); Type this in and run it. You get two circles, both dark grey (why is 100 dark grey?) Now try putting the fill between the two circles, like this: size (200,200); ellipse (150,50,100,100); fill (0); // set the colour of shapes below to 0 (black) ellipse (50,150,75, 75); Run this the first circle will be white (default) and the second black. We can also use the fill more than once. Let s go back to the target and make every second circle black: fill (0); // set colour below to 0 (black) ellipse (200,200,32 5,325); // draw outer circle fill (255); // set colour below to 255 (white) ellipse (200,200,25 0,250); // draw inner circle fill (0); // set colour below to 0(black) ellipse (200,200,17 5,175); // draw further inner circle [ the academy_of_code] 7

9 Tasks: 1. Create two new programs, starting the file name with Lesson3Target 2. Using the code above as a starting point, produce the image below on the left 3. Use fill to make a series of circle that fade from white at the outside to black at the middle (below right) 4. Once you have made both targets we will try something a little trickier draw a bunny rabbit (like the one below) and colour it in in greyscale using fill(). Save it as Lesson3Bunny Fill using Colour Red, Green and Blue (RGB) We can also use fill () with three numbers. Each number tells processing how much red (the first number), green (the second number) and blue (the third number) to add. Using a combination of red, green and blue we can get every colour. See right for an example. Note: as you can see from the picture, if you give the maximum for each number (255) you get white. If you give the minimum on each (0) you get black. The amounts for red, green and blue go from nothing (0) to as much as possible (255), the same way that white did when we were doing greyscale colour. [ the academy_of_code] 8

10 Example size (400,300); fill (0,255,0); // no red, full green, no blue rect (50,50,300,200); Tasks: 1. Save the example in a new program with a name starting with Lesson3. 2. Change the example code to make the rectangle: a. red b. blue c. black d. white e. yellow (a combination of red and green) f. pink (a combination of red and blue) g. cyan (about 50% green and 50% blue) 3. Finally, open up Lesson3Bunny again and add proper colour this time! The Colour Selector: Processing helps us out here, by giving us a way to get the Red, Green and Blue values for all colours. It s called the Colour Selector. Here s how to get to it: Go to the toolbar (at the top of the processing app) Select Tools (see right) Then select Color Selector This is the colour selector, click on the colour you want and copy the R,G and B values (shown in a box below) and copy them into the fill () function. [ the academy_of_code] 9

11 4 Code Blocks Setup and Draw Setup and Draw keys to dynamic programs void setup () and void draw () are special functions. We call them {code blocks this means that they each have a block of code associated with them. The blocks start with a {, and end with a. IMPORTANT: When you enter a { you should always immediately enter the matching. Mismatched brackets are by far the single most common mistake made by students at the Academy of Code! For now, any program that uses setup () and draw () should have all code inside those code blocks (there are special cases we ll see later on where this isn t true). void setup () { //everything in here //is associated with //the void setup() void draw () { //everything in here //is associated with //the void draw() NOTE: a double slash ( // ) denotes a comment. (This is a note for us, the programmer, to read. Comments like in the above code allow us to leave human readable notes in the middle of our code. The computer ignores comments when running code. You don t need to add all the comments when you re copying code from your lesson sheets). Example! Here is something that we did before, try it out again. void setup (){ size (600,600); // in setup code block void draw (){ ellipse ( mousex, mousey, 100, 100); // in draw code block [ the academy_of_code] 10

12 Quick tasks: 1. Type the example on the last page into Processing and save it (the filename should start with Lesson4 ). 2. Change this program to make a rectangle follow the mouse. 3. We can use a function called background () to add a colour to the background. Simple add the numbers for a colour between the brackets, as you did with fill. Eg background (255, 0, 0); will make the background red. Add in a background () function to: a. the start of the setup () {code block b. the start of the draw () {code block Why are the results different? 4. Make the rectangle coloured. a. Where do you have to put the fill () function? 5. Make a circle and a rectangle follow the mouse around. (both at the same time!) a. Once you have completed this add a target (like we did in lesson 1 and 3) which follows the mouse. Setup vs. Draw What is the difference between the code in the void setup () code block and the void draw () {code block? differences\code blocks void setup() void draw() How many times is the code run? When is the code in this block run? How often is this code block run in the program Once Right at the start, when the program is launched Once, at the start Infinity times depends on how long the app is running for After the void setup() block Normally 60 times a second (60 fps) this can be changed though [ the academy_of_code] 11

13 5 If Statements & More User Input In this lesson we will learn about conditions. If this happens do that. This is an essential part of just about every computer program you ve ever used. Why: Conditions are one of the most important parts of coding. Try and imagine all the if conditions for any website or app. For example, if you press enter in google then make the search. {code blocks: are sections of code that go between a { and a. Lets introduce if statements, along with their {code blocks, mousepressed and what they all do. Remember that a double slash ( // ) indicates a comment the computer ignores this text Example void setup (){ size (600,600); // in setup code block void draw (){ background (255,0,0); if ( mousepressed == true ) { background (0,255,0); // this is all in the if code block Note: in programming == means i s equal to. So: if ( mousepressed == true ) means: if mousepressed is equal to true then do the following {code block, otherwise don t. Anatomy of an if How To Use if Statements This is how processing reads if {code blocks: if ( what is in here is true){ do what is in the {code block after the if; otherwise just continue after the end of the code block. That s it! If what is between the ( and the ) is true, then DO run the code in the {code block. If what is between the ( and the ) is false, then DO NOT run the code in the {code block. [ the academy_of_code] 12

14 mousepressed is one keyword, lets introduce another : keypressed. Much as mousepressed will be true if the user has pressed a button on the mouse, keypressed will be true if they press a key on the keyboard. Tasks: 1. Create a new program, start its name with Lesson5. 2. Make that program draw a rectangle only if you press the mouse. 3. Add a circle that always appears (does not depend on whether you ve pressed the mouse button). 4. Extend that program so that if you press a key, you change the colour of the background. 5. Make a program that draws a very basic face (use 3 6 more shapes), but make the eyes change colour if you press the mouse, and the rest of the face change colour if you press a key. HINT: you ll have to group the eyes together, and the rest of the face together, and put the fill commands in appropriate spots. Buttons and keys Now we know how to check if any button on the mouse is pressed and if any button on the keyboard is pressed. What if we want to check if the letter a is pressed or the left mouse button is clicked? We do this using the key and mousebutton checks. Have a look at the below example, and note how the brackets match up (we ve added comments to help make it clearer). void setup () { size (600, 600); void draw () { background (255); fill (0); if ( keypressed ) { // start of keypressed blo ck if ( key == ' a ') { // start of key == a block fill (0, 255, 0); // end of key == a block // end of keypressed block if ( mousepressed ) { // start of mousepressed block if ( mousebutton == LEFT ) { // start of mousebutton LEFT block ellipse (300, 300, 500, 500); // end of mousebutton LEFT block if ( mousebutton == RIGHT ) { //start of mousebutton RIGHT block rect (50, 50, 500, 500); // end of mousebutton RIGHT block // end of mousepressed block Note : we check which key is pressed inside the keypressed block, and which mouse button is pressed inside the mousepressed block. We should only ever have a single if(mousepressed) and a single if(keypressed) in each program. You can have as many conditions inside each one as you like (we ll see more of this later in the course). [ the academy_of_code] 13

15 How mousebutton, mousepressed, key and keypressed work: key words Options (case sensitive) mousepressed true false mousebutton LEFT CENTER RIGHT keypressed true false key a to z A to Z 0 9 Tasks: Save the example from above as Lesson5Part2 ; we will be making changes to it. At the moment the colour changes when you press ' a '. Add another key that changes colour to red. (Now we can change the shape to 3 different colours) Add yet another key for the colour yellow (now we have 4 colour choices) Change the background, have two different keys: one to make the background white another to make it blue. [ the academy_of_code] 14

16 6 Variables, and Animation What is a Variable? A variable is a place that we store a piece of data. Data can be words, numbers, or lots of other things. In our case we will start with numbers, specifically int s (that is short for integer in other words, whole numbers, with no decimal places). You can think of a variable as a box in which we store a particular type of thing. In order to use a variable we first have to declare it. That means we tell the computer we re going to have an int called ballhozposition (or whatever you choose to call it). We can then assign a value (put a number in the box), or we can use it (use whatever number is in the box), for example as a parameter in ellipse. Animation Example: int ballhozposition; // declare a variable called ballhozposition void setup (){ size (600,600); ballhozposition = 50; // give the variable an initial value (50) void draw (){ ellipse (ballhozposition,300,100,100); ballhozposition = ballhozposition + 1; // update the value in // ballhozposition. Refresh tasks in the above program: 1. Change the colour of the ball. 2. Change it so that there is a rectangle moving, rather than a ball. 3. Speed up the ball. (Try changing the 1 in ballhozposition + 1; ) 4. Make the ball go left rather than right by: a. Changing its start position to start on the right side of the window b. Make the ball move left instead of right, ( hint: how do you move a shape s position from left to right? What happens to the horizontal position number?) 5. Change the program so that we can only see one ball at a time. How the examples works with variables A variable is a bit of stored data, with a name that you have given it. Eg: ballhozposition So instead of being the same number all of the time you can change the data in a variable. In the above example (the first one, written on the page): We make a new variable with a name of ballhozposition int ballhozposition; Give ballhozposition a starting value of 50. ballhozposition = 50; Then each time the draw code block is run (60 times a second) it's given a new value that is its old value plus 1. So the number in ballhozposition keeps getting bigger and therefore the ball will keep moving right. ballhozposition = ballhozposition + 1; [ the academy_of_code] 15

17 Anatomy of a variable what makes a variable? int anumber = 10; a name: eg anumber you can call it almost anything you like but no spaces! Your name should describe what the variable is used for. That s why ballhozposition is a good variable name, but blahblahblah isn t. a type: eg int. Tell the computer what data it is: int means it is a whole number a value : eg 10. Depends on the type. For an int : a number, could be 1, 6, Tasks: 1. Save the old program start the program name with Lesson6. 2. Make a new program with a new variable in it. Give the variable an appropriate name. The variable name should tell you what the variable is for ( ballhozposition stores the horizontal position of the ball, for example). 3. Use that variable to make a ball move down the screen. So the vertical position will be getting bigger as time goes on. 4. Change the above program so that the ball starts at the bottom of the screen and then moves up the screen. Having multiple variables: You can have as many variables as you want, but they have to have different names. Example: int ballhozposition; // make new variable called ballhozposition int ballvertposition; // make new variable called ballvertposition void setup (){ size (600,600); ballhozposition = 50; // give the variable an initial value (50) ballvertposition = 550; // give variable an initial value (550) void draw (){ ellipse (ballhozposition,ballvertposition,100,100); ballhozposition = ballhozposition + 1; // update the value ballvertposition = ballvertposition 1; // update the value Tasks: 1. Change the above program so the ball goes faster in both directions (both right and up). Try and keep the speed in each direction the same. 2. Change the above program so that the ball goes from top left to bottom right. 3. Make another change so a rectangle goes from bottom right to top left. 4. Make the ball change vertical direction twice as fast as the horizontal direction. 5. Speed up both the horizontal and vertical speeds. [ the academy_of_code] 16

18 Early Finisher Tasks: 1. Create four balls that start in the centre of the screen and move directly away from each other 2. Once you have done that successfully, modify it so that the balls appear where you click the mouse, and restart at the mouse s position each time you click the mouse [ the academy_of_code] 17

19 7 End Conditions Lesson aim: To build on our knowledge of variables and if condition to make cool animations! Why: Every game needs end conditions as well as advanced animations that we will use in our project. Looping shapes (so they never stop and loop from one side of the screen to the other) will be used in our project. Recap: if statements If what is between ( and ) is true, execute the code in the following {code block (that is the code between { and ). If not, don t execute that code just move to the next instruction after the {code block. We also looked at the following keywords, to help us work with user input: if ( mousepressed == true ){ /*execute these instructions*/ if ( mousebutton == LEFT ){ /*execute these instructions*/ if ( keypressed == true ){ /*execute these instructions*/ if ( key == s ){ /*execute these instructions*/ if the mouse is pressed, execute instructions in the {code block If left mouse button pressed, execute instructions in the {code block If any key pressed, execute instructions in the {code block If s key pressed, execute instructions in the {code block Test your knowledge! Write a program that changes the colour of a circle depending on whether the q key is pressed. We can also do other comparisons, have a look at the following example (let it run for a while): int ballhozposition; // make new variable and name it void setup (){ size (600,600); ballhozposition = 50; // give variable starting value void draw (){ ellipse (ballhozposition,300,100,100); if (ballhozposition < 200){ //if ballhozposit ion less than 200 ballhozposition = ballhozposition + 5; //update position [ the academy_of_code] 18

20 Create a new program and try out the code above. What does it do? Conditions! With more conditions comes more power! Fill in the following table with the meanings of the condition symbols of the left: Condition Meaning == Is equals to > < >= is greater than or equal to <= Tasks: 1. Fix the example! Stop the ball when it gets to: a. The middle of the program screen. What number do we need to change? To what? b. The right edge of the screen. i. Modify this so the ball stops when the right side of the ball hits the right edge of the screen not when the middle of the ball hits the edge. I think this looks best! 2. Slow the movement of the ball in the example look at code from lesson 6 if you're not sure how. a. Now speed it up! How fast can you make the ball go and still see it? 3. Looping we have stopped our ball, so what next? Make a new program that moves a ball from left to right. When the ball reaches the right hand side of the screen it should jump to the left of the screen. Instead of moving the ball if its position is less than some value (as we have been doing), we want to always move it, and then put it back on the left if it its position is greater than some value. It should continually move from left to right now. a. The ball and background should be coloured and you should only see one ball at a time. b. Make the animation smooooooth. Only change the position when the left side of the ball leaves the right edge of the screen, and then only the rightmost side of ball should appear. [ the academy_of_code] 19

21 8 Keyboard Movement What user input have we used already? ellipse ( mousex, mousey, 100,100); and if ( mousepressed == true ){ Have we used any other user input? If you can t remember what the snippets above do or any more user inputs, now is the time to go and find out! Check the reference guide (You can access the reference guide by clicking Help Reference. Alternatively, if you highlight a function you can click Help Find in Reference to go straight to the help page about that function.), ask another student, check your notes or if all else fails, ask a teacher! Now we want to show a common use of these keyboard inputs. Test your knowledge!: Make a program with a shape, (any shape you want) that only moves (remember how to make a shape move?) when you press any keyboard key. Show a teacher when you ve completed this. Individual keys: Remember we can check for individual key presses (in this example key for d ) using: if ( key == 'd' ){ // check if the letter d is pressed Note : the key letter must be in single quotes (these: ) Example code we will be working with: int squarehorizontalpoz = 250; //number variable, with value 250 void setup () { size (600, 300); void draw () { background (0); rect (squarehorizontalpoz, 100, 100, 50); if ( keypressed == true ){ // check if any ke y is pressed if ( key == 'd' ){ // check if the letter d is pressed squarehorizontalpoz = squarehorizontalpoz+2; [ the academy_of_code] 20

22 Tasks 1. Copy the above code and see what it does. 2. Extend the program so the following happens: a. the a button moves the shape left b. the w button moves the shape up c. the s button moved the shape down Extra tasks 1. Add extra functionality so that there are other (new) letters that change: a. the colour of the shape to: i. red ii. green iii. yellow b. Change the background colour of the screen to: i. black ii. white iii. blue c. Move the shape: i. automatically back to the centre of the screen (press the key once and the shapes moves instantly to the middle of the screen) Extra extra tasks (Only if you re looking for a challenge!) Make a new program and draw a triangle. Add code so that you can control the position of each corner individually (different keys move the top, left and right corners of the triangle, so you can move each corner on its own.) [ the academy_of_code] 21

23 9 Booleans A Boolean is a type of variable. We have also worked with the int variable type. While int variables contain any whole number, a Boolean can be only true or false. We will often use them as a type of switch they will be true if they are on, or false if they are off. We make Boolean variables in much the same way we make int variables: Boolean moveballleft = true ; This makes a variable, called moveballleft, its value set to true. Boolean variables are often used in if statements, see the below example Boolean moveballleft = false ; int circlehozpos =0; void setup (){ size (500,500); void draw (){ fill (255,255,0); //colour yellow ellipse (circlehozpos,200, 200,200); //make ball if (circlehozpos >= 500){ //if ball hits rig ht side moveballleft = true ; if (moveballleft == true ){ circlehozpos = circlehozpos 3; //move left if (moveballleft == false ){ circlehozpos = circlehozpos +3; //move right Code the above example and see what it does. Tasks: 1. Make additions to the above program such that: a. you only see one ball at a time (don t leave a trail). b. the ball bounces off the left hand wall as well as the right hand one. To do this you will need: i. To know at what point the ball hits the left side. (Look at the condition for the right wall for a hint) ii. A new if statement with this as the condition iii. What to change when the ball hits the left wall (hint it s a Boolean.) c. So the ball changes direction when the edge of the ball hits the side not the middle. (For both left and right.) NOTE: You do NOT need a moveballright variable! [ the academy_of_code] 22

24 Extra tasks (if you re finished early): 1. Make a new program with a rectangle that bounces off the top and bottom of the screen. a. It should only bounce on the edges of the rectangle b. Each time it hits the bottom its speed goes down by one, so it slows down and finally stops. (Needs a speed variable) c. Make a new Boolean so that when the speed goes to 0, a game over screen appears (different background etc) and you cannot see the rectangle any more. [ the academy_of_code] 23

25 10 Loading and Using Images Lesson aim: To learn how to load external files images in this case into our program. Why: Having the background that is a certain colour, or changing the colour of a shape, is great. But in modern games and animation, images are often used instead of blocks of colour. In games these are often called textures and there are hundreds in each scene. We will only be dealing with a small number of big images. But it is useful to use a custom image rather than a colour. How to use images There are four steps to using an image in processing: 1. Finding an image file we want to use in a program 2. Make an image object. An object can be used like a variable in this lesson. 3. Load the image file into the program and store it in the image object. 4. Display the image object on the screen. Step 0: Getting an image to use. 1. Make a new processing program, name starting with Lesson10 2. Save the program with a name, in this example I ve used imageexample. 3. Find an image you want to show on the screen (online or in the pictures folder hint when using google images: click on the image view image right click on image save image as save it in your program folder.) 4. Your image can be named whatever you want name it after what it shows. 5. Move your image to the folder of the program you just created. See below: Step 1: Make an image object We need to store your image. Like we do with whole numbers ( int ) and true or false statements ( boolean ), images have a different type: PImage Like with variables, we declare (make) them right at the top of the program. My example is an image of a medal: PImage mymedalimage ; [ the academy_of_code] 24

26 Step 2: Load the image file into the image variable. This needs to happen in the setup () {code block. As the image isn t going to change; we load it once, right at the start of the program. void setup () { mymedalimage = loadimage ( "image.jpg" ); The object name is the same as we made it in step 1 (I chose mymedalimage ), and the name of the file is the same as the one we made in step 0 ( image.jpg in this example). If that is spelt wrong, or in the wrong place, the program won t run. Step 3: Display the image on the screen. In the same way we can show text to the screen using the text () function, there is a function to show images to the screen. Helpfully it's called image (). This function shows an image object at a specific location. I want my image to start it in the top left hand corner so I m going to put it at 0,0. image (mymedalimage, 0, 0); Congrats! You should be able to see your custom image on the screen! Tasks to get familiar to using images: Move your image around the screen using: The mouse The keyboard (using variables) Add a second image into the same program. You will need to repeat steps 0 3 using a different image (different file, different object, load it in separately and show it on the screen separately.) [ the academy_of_code] 25

27 11 Random, Showing Text on the Screen Lesson aim: To learn two new functions to make random numbers and show text on the screen. Why: We often need to show text to the user in programs. Can you think of where that would be? See if they are the same or different to our examples below: show score in games show instructions game over messages name a program show data (websites etc) show entered text (like in the processing app) We also often need random numbers. Again try to think of when this might be, and compare below: random position of enemies etc in games. random speeds of enemies/objects in games and animation random card number etc. random colours in animated scenes random sizes of objects. We will be using two new functions random () and text (). What do you think each of them do? Task : Use the reference guide to get a more accurate description of what random () and text () do. (Find this under Reference in the Help menu, at the top of the screen). text() See some example code snippets (you need to add the rest of the code around this snippet): text ( "Hello! this is some text", 50,100); Finding that a bit small? textsize () ; changes the size of the following text. try textsize (40) ; text ( "The Academy of Code", 50,100); As with shape functions, fill () changes the colour of text. Tasks ; playing with the text () function: 1. We need to put the text exactly where we want the two numbers are the horizontal and vertical position of the text. Change the position of the text to test this! 2. We also need to show more than one line of information! Make two lines of text on the screen. One above the other (use the position parameters to do this.) 3. In the above make each line: a. Different size to each other b. Different colours. [ the academy_of_code] 26

28 random() The random ( ) function gives a random number between the given minimum and maximum parameters. See the below code snippet, run it a couple of times : size (300, 300); text ( "between 0 and 20: "+ random (0, 20), 50, 100); random ( ) is a number, and can be used anywhere you would type a number. so try using it for: 1. the width position of a ellipse. 2. the height position of a ellipse. 3. the width of a rectangle. As you can see from the above random ( ) makes a new number each time it is called, so if you used random ( ) in the draw ( ) {code block it will be calculated 30 times a second. We can have fun with that. Let's make a shape that changes colour randomly! 1. Make a shape (ellipse or rectangle) in the draw () {code block. a. add a fill command above it. b. use random r, g and b values in the fill () function(see below): fill ( random (0, 255), random (0, 255), random (0, 255)); We need three different random ( ) functions to get three different random numbers. Note: be careful with the brackets, make sure each bracket has a match. We can also store a random number in a variable. To do this it is important to know that the random function returns a float (a number with decimal places). Because random () returns a float we can t store it in an int variable without doing something to it first. int anumber = ( int ) random (0,255); What we do is put ( int ) before random () as in the example above. What this does is rounds the number down to the closest integer. Example: Use a variable like the one above in your fill function. [ the academy_of_code] 27

29 12 Collision Detection Lesson aim: To learn how to tell when two objects have hit each other. This is called Collision Detection. Why: Collision detection is used all the time in games. We need to know when two objects collide: the player hitting power ups, bullets hitting players, racers colliding with the edge of the track, and many other examples. How to do collision detection We need to check when two circles overlap. That s when the collision has happened. We need to know two pieces of information: 1. The distance between the centres of the two circles. 2. The distance between the centre of each circle and the edge, added together. The two radiuses added together. If the length of the two radiuses added together is bigger than the distance between the two centres, the circles have collided. See the distance between the circles (left) is greater than the two radius added together (show on right). NO COLLISION: (playerradius + enemyradius) < distancebetweencentres [ the academy_of_code] 28

30 Scenario where the two circles are colliding: In the scenario above: compare the length of the d istance between the centres ( LEFT ) and the length of the two radiuses added together ( RIGHT ). COLLISION: (playerradius + enemyradius) > distancebetweencentres How do we get these three values? We already know the radius of the enemy circle and the radius of the player circle. It is half the width and height of a circle ellipse. (This is much more complicated for an oval forget about that and let s stick with circles!) For the below circle the radius is 120 / 2 = 60 : ellipse ( mousex, mousey,120,120); To get the distance between two circle centres we use the dist function. This takes 4 points (horizontal point 1, vertical point 1, horizontal point 2, vertical point 2) and gives us the distance between the two points. Put this code in void draw() to see it running. background (0); ellipse ( mousex, mousey,120,120); //player circle ellipse (400,400,50 0,500); //enemy circle text ( distance between circle centers is:,50,25); text ( dist ( mousex, mousey,400,400),240,25); text ( radius player circle is: + 60, 50,50); // 120 /2 =60 text ( radius enemy circle is: + 250,50,75); // 500 /2 =250 Task: 1. Test the code above does it do what you expect it to? You should be able to explain to the instructors when there is or isn t a collision, and why so/why not. 2. Use your knowledge to extend the above program so that if the circles collide the screen changes colour. MAKE SURE YOU COMPLETE THE ABOVE TASKS BEFORE MOVING ON! [ the academy_of_code] 29

31 Functions A function is a piece of code which is separate from your main code. It s not in void setup() or void draw(), but it can be used from inside void setup() and void draw(). We ve used some functions already. Ellipse is a function, which takes four parameters (this means that we have to give the function four numbers for it to work). We can also write our own functions. It can be very useful to split a complicated piece of code off into a separate function, which can give us back an answer without us cluttering our main piece of code with complex logic. It should make our code much more readable as well, which is very important as our programs get longer and more complicated. Collision detection is a great example of where we might use this. Instead of writing a long if statement, wouldn t it be nice if we could write something like this: Of course, it isn t quite that simple. We do need to tell the function where the circles are, and what size they are. What we end up with (assuming the numbers from the example above) is something like this: We also need to define the function (tell the computer what the function does). We ll do this at the bottom of our code, after the end of void draw(). The boolean at the start tells us that this function will return a true or false value to us (that s why we can put it in an if statement like that). The six int values are the numbers that we have to include when we use this function. When you use the function the order of parameters has to match, but the names outside (in void draw()) and inside (in the function) don t have to. In this example, the first number is mousex when we pass it to the function, but within the function it s called circleonehoz. [ the academy_of_code] 30

32 For this lesson we don t need to worry too much about how you actually write a function you just need to copy out what s given here, and concentrate on using it correctly. Task: 1. Take the code above and use it to make the background change colour when the circles touch. [ the academy_of_code] 31

33 13 Project Ball dodging Game This project will pull together a lot of the things you have learned this term. This is your game after you have finished the basic version feel free to make any changes you want! What we are aiming for: We want to make a game where balls drop down the screen and the user controls a character that has to avoid the dropping balls. We hope to make something like the game you see on the right. Steps to make the basic game To make a simple version of the game we need to have: 1. A ball dropping from the top of the screen to the bottom. The ball should appear at the top of the screen when it reaches the bottom of the screen. 2. A player circle. That is a different colour to the enemy circle. 3. The player is controlled by the user, using the keyboard (we suggest the a and d keys). 4. The player can only go left or right (can t go up or down.) 5. We need to do collision detection between the player circle and the enemy circle (as we did in the collision detection lesson). If the two circles collide we should see a game over screen. (We need a gameover boolean to do this. If the game is not won use the game code, otherwise show an end game screen.) Once you have that congratulations on your first game! There s plenty more you can add now... [ the academy_of_code] 32

34 Extras This is your project. You should do what you want with it! Make the changes that you want to have. We have some suggestions below, feel free to add something else if you want. Enemy appears at a random horizontal position at the top of the screen. We need to use the random() function here, to change the distance from the left only when the circle reappears at the top of the screen. Add a score. A whole number ( int ) that tells the player how many enemy balls they have avoided. Use the text() function to show this to the player. Maybe the players gets 1 point per block missed? Perhaps there s a bonus every 5 or 10 blocks? (Your decision!) Add images in as: the background the player the enemy Change the speed of the enemy circle each time it appears at the top of the screen. Where will you make this change? You could make it faster and faster, or make it a random speed. Change the size of the enemy circle make it bigger every time it reappears? Make it a random size? Improve the design of the game over screen. New colours? New text? Use an image instead of a background? Add levels: Move the character closer to the top of the screen after the player avoids a certain number of blocks. Are there other things that should happen when you complete a level? Maybe the balls that are falling speed up (like when you make it harder). Maybe they get bigger. Use your imagination, and your game design skills! [ the academy_of_code] 33

35 [ the academy_of_code] 34