images AFEC course 4

images AFEC course 4

1. when using the processing library to interact with images, some functions need to be defined but not called

   • the main two are setup() and draw()
     • the setup() function contains the code that is run once, at the start of the program, to organise aspects of the program, load images and generally set it up. The draw() only needs to be typed once, and then all code like rect() and fill() come underneath.
       • the system calls the draw() function every time, so it does not need to be manually typed

2. all videos contain a game loop; this is what assembles the user input, updates the state of the game, checks for game over and displays the current game state

3. to load an image onto the programming, use 'from processing import*' at the start of the program. Underneath the setup() function, type global bg (indented), define the width and height of the background (in brackets, after the word 'size'), then type bg = loadImage("name of file here"). Then, underneath the draw() function, type image (bg, x coordinate, y coordinate).

   • the variable 'bg' must be identified as global, so it can be accessed throughout the program (including outside the function). When changing a variable that has been referenced before the function, you MUST say that it is global before changing it. Eg. if a score is set to 0 at the start of the program, and is added to when the mouse is clicked, underneath def mouseClicked(): you must put global score, and then change the score using score = score + 1
     • a clicker game can be made like that. In setup, the size is set and the text size is set. Even before any functions, score (a variable) is set to 0. Under draw(), the background colour is set and the text is set; text(score, x coordinate, y coordinate). Then under def mouseClicked, put global score, and put score = score + 1. So if the mouse is clicked, the program will follow through and everything underneath the mouseClicked() function will be carried out
   • the size info sets the display window size
   • the image is assigned to the variable bg, which is later output using the code under the draw() function
   • the bg in the brackets, after the draw() function, draws the image stored in bg to the screen. This continuously happens (15 or more times each second, often) for as long as the program is running, so the image can continue to be present on the screen

4. sprites can also be added

   • under the setup(), (eg. if the sprite is a ball) put global ball (under global bg). Set the display window size, then use loadImage("name of file here, such as ball.png") to load the sprite. Store this under the variable 'ball', just like with bg (background). Then, under the draw() function, type image(ball, x coordinate, y coordinate). The x and y coordinates set the position of the sprite
     • if there is a background and a sprite, their code will be similar. However, ensure that background code always comes first, so that the sprite will appear on top of the background and not underneath (in this case, it cannot be seen)
   • a sprite can be made to move
     • in this example (imagine there is a background and a ball- the sprite)
       • at the start of the program (but after 'from processing import*') declare two variables, ball_x and ball_y. Assign an x coordinate to ball_x and a y coordinate to ball_y. These two coordinates assign the sprite's position at the start of the program. To change the value assigned within a function, use the global keyword inside the function, so, immediately underneath draw(), put global ball_x and global ball_y. Then, under that, put ball_x = ball_x+3, and ball_y= ball_y+2. This means that the y coordinate will change by two and the x coordinate by three every time the program is run, which is how it moves. If the value is subtracted instead of added, the ball will go down/left instead. Then, the code for the background image is typed (bg, x coordinate, y coordinate). After, this code is used: image(ball, ball_x, ball_y). In the brackets, the part that says 'ball' draws the ball to the screen. The x and y coordinates give the position of the ball, which changes every time because the x
         • and y coordinates are being added to

5. sprites can be made to bounce

   • to do so: at the start of the code, but after processing import*, six variables should be declared. Two of them are ball_x and ball_y, which set the position of the ball at the beginning. Two should be width and height, which store the values for the width and height of the display window. The last two variables should be move_x and move_y. These store the values of how much the variables change by; for example, the move_y would contain 3 if the y coordinate increases by 3 every time.
     • then, under def draw(), for the six variables (excluding width and height), label them as global, one global variable for each line. Put that ball_x = ball_x + move_x, and ball_y = ball_y + move_y. This is the same code as the code used to get the sprite to move, only this time, the amount that the x and y coordinates are increasing by is assigned to a variable (move_x and move_y)
       • you can make the sprite bounce by checking if it has reached the boundaries of the screen, using height and width variables. Program the sprite using this code: if ball_x < 0 or ball_x > width: (next line) move_x = -move_x. This code should be repeated for ball_y and move_y, so substitute the values in and use 'height' for y, instead of 'width'. This is why there needed to be variables declared for width and height; it means that even if the width and height are changed, the code still applies
         • if there is an issue because the sprite bounces too late, then when the code says ball_x < 0 or ball_x > width, add onto the end of this part -75 (or whichever number is suitable). the code now becomes ball_x < 0 or ball_x > width - 75. The ball now bounces sooner. This can also be applied to code using y coordinates.

6. from processing import* is used here. This is a third party library, so it will not work using Python locally. Some things are built in (eg. import random from randint, which is a function for choosing something randomnly)

7. a second sprite can be added; they need a sprite2_x and sprite2_y coordinate variable before the setup() and draw() functions. In the setup, there must be code present making the sprite 2, so sprite2 global. There must be another load image command in the setup: loadImage("file,name"), and it must be assigned to Sprite2 (the variable). Under draw() function, put: image (sprite2, sprite2_x, sprite2_y). Because the x and y coordinates are not changing, unlike a moving object, the sprite will remain still.

   • the sprite2_x and sprite2_y coordinates do not need to be defined as global, because they are not being altered

8. there is a function called keyPressed(), which can make the player able to control a sprite. To activate this, after the def draw() and anything underneath that, type the next function, keyPressed(). Now that x and y coordinates need to be changed, they should be labelled as global (global x/ global y). After; if keyboard.keyCode == RIGHT: player_x (or whatever the variable is called containing the x coordinate= player_x + 5. So, if the right arrow is pressed (once the screen has been clicked), the x coordinate changes by 5.

9. def mouseClicked and keyPressed can be used to change background colour. To choose a random background colour every time the mouse is clicked, first type from processing import*, then import random (try from randint if this does not work). Then declare three variables, red green and blue. Blue should be set to 255, the others to 0.

   • in the setup, only the size needs to be stated. Under the draw(), use this code; background (red, green, blue). Then, under def mouseClicked, since the variables red, green and blue need to be changed, put global red, global green, global blue (new line for each). On the next line (and do so seperately for the other two variables, green and blue) put; red = random.randint (0, 255). There are three variables because three numbers make up an RGB code. RGB stands for red green blue, hence the variable names. Because red, green and blue's numbers are being chosen randomnly, they come together to make a random three-number RGB code (which is a random colour)
     • this can be extended by displaying the coordinates where the mouse is clicked, as well as changing the background colour. There will be text onscreen, in the right hand corner, which starts at 0,0 and a dark blue background. As the background is changing, the code is similar, but this time, after red, green and blue are assigned variables, a variable called coordinates_text is declared and assigned to 0,0, setting the coordinates to 0 when the program is first run. In the setup, ensure that the text size is set. Under draw(), after the background code, use this; text(coordinates_text [or whatever the variable is called], x coordinate, y coordinate). These coordinates set the position of the text. Then, under mouseClicked(), after any background code, use this code for the coordinates; coordinates_text = "({}, {})". format(mouse.x, mouse.y)

10. you may want to detect whether the mouse clicks the sprite, and if so, you may want something to happen (in this example, if the sprite is clicked, the words 'splat' are displayed, else the coordinates of the mouse click are displayed). To do this, you must know the height and width of the sprite. After any import code at the start of the program, declare 4 variables; player_height, player_width, player_x, and player_y. Assign the width and height of the sprite to player_height and player_width. Assign the x coordinate (to player_x) and y coordinate (to player_y). This coordinate must be the coordinate of the top-left corner of the sprite.

    • also declare a variable called coordinates_text, and assign "" to the variable. This variable is for displaying the coordinates/the word splat. The setup contains no new code, just text size, size (of display window), 'global player' and player = loadImage("filename of sprite here"). Background, text and image code is contained under the draw function.
      • Under def mouseClicked(), any text that changes the background is used first. Then, the code below is used (mouse.x and mouse.y are the actual coordinates of the mouse):
        • if player_x <= mouse.x <= player_x + player_width and player_y <= mouse.y <= player_y + player_height: (next line) coordinates_text = "Splat!" (next line) else (next line) coordinates_text = "({}, {})". format (mouse.x, mouse.y)
          • this means that if the x coordinate of the mouse is between the left hand edge of the sprite plus its width, and if the y coordinate of the mouse is between the top left edge of the sprite plus its height (so whether the mouse click was on the sprite). This is an if statement, so if the click was inside the sprite, the condition will return True and the next indented line of the program will be executed ("Splat!" will be assigned to the variable coordinates_text)
          • this code can be made easier to read (which makes it easier to debug). Instead of using this exact code, the tests (to test the coordinates of the mouse click) are performed and the results are stored in two seperate variables; in_sprite_x and in_sprite_y
            • so, instead of an if statement at first, there are two inital lines of code (all this code is located under the def mouseClicked(), after any background code). The first line assigns in_sprite_x its values, the second assigns in_sprite_y its values.
              • The first line is; in_sprite_x = player_x <= mouse.x <= player_x and player_width
                • the second line is: in_sprite_y = player_y <= mouse.y <= player_y and player_height
                  • and then the if statement; if in_sprite_x and in_sprite_y: (next line) coordinates_text = "Splat!" (next line) else: (next line) coordinates_text = ("{}, {}")".format(mouse.x, mouse.y)
                    • with the if statement (if in_sprite_x and in_sprite_y:) you could also add '== True:' to the end, but it's unnecessary, since the same thing will happen. If in_sprite_x and in_sprite_y automatically means that if both are true, then the below should happen (in this example, that the coordinates_text variable should be assigned to the string Splat!)
            • there is another alternative way to doing this. A function can be created, with the name def sprite_clicked_on. Under the def mouseClicked, use this code; if sprite_clicked_on(mouse.x, mouse.y): and then, underneath the if statement, type what you want the program to execute (so, assigning 'Splat!' to coordinates_text, else displaying the coordinates of the mouse click)
              • after that code, the function must actually be defined. So, under def sprite_clicked_on (x, y):
                • the next code is the same as before (indented, this time).
                  • The first line is ; in_sprite_x = player_x <= mouse.x <= player_x and player_width
                    • The second line is in_sprite_y = player_y <= mouse.y <= player_y and player_height
                      • then; return in_sprite_x and in_sprite_y
                • this function takes in two parameters (x and y) which correspond to the position of the mouse. It tests the x and y values passed in. Because at the end of the function, it says return in_sprite_x and in_sprite_y, these tests will only return if both are true (if the x and y coordinates of the mouse click are both inside the sprite)

11. when making a game, such as one with lives, and if you lose all the lives, it's game over, at the start of the program, declare a variable at the start of the program (after any imports, eg. from processing import) called game_over, and assign it to False. Then, if lives <= (less than or equal to) 0, set game_over to true. And then, if game_over = true, code the program so that large text can come up, stating 'Game over!"