Extra: Make It a Game

Gamify It!


Hi! You've learned to add an image to the background of your sketch and also to use an image as your cursor. You're able to move this creature on the canvas like it would be a main character of your game. But it's not much of a game yet because the character is the only object on the canvas. Usually the point of the game is to gather points or avoid enemies and right now there isn't anything to gather or avoid. So let's add some moving shapes to this program. ...and then in draw... Like this. Okay so the familiar ball moves across the canvas and let's add an if-structure here so if the ball gets out of the canvas it should appear again from above. Okay so this number 652 it's the height of my canvas now as you can see in the size command. But I'll show you a new trick. Instead of writing and having to remember this number you can just write "height". Uh-huh, like that. And this is a system variable that keeps track of the height of the canvas automatically. I can also pick a random x-coordinate for the ball every time before it emerges from above. And I can write here "width" which is a system variable that keeps track of the width of the canvas. Aha, the familiar error: "cannot convert from float to int". so the random-command gives us a decimal number between zero and the width of the canvas but ballX is of the integer type. So we could fix this again by using the familiar int-command or we could just do it the easy way. Let's change ballX and ballY to be float instead of int. It's totally ok to use decimal numbers inside the ellipse command so now it's not going to be a problem. So let's see. Let's run the code. Okay, so now the ball gets a new horizontal position every time before appearing from the top! So even if I move my creature there now it doesn't yet have any effect so what if the idea of this game would be for example to try and collect these balls and gather points every time I do that? We'll make this happen on the next video!

Do this

Continue with your previous program and add a shape that moves across the canvas.

The shape can move horizontally instead of moving vertically.

When the shape has crossed the canvas it should reappear with a new random x-coordinate (if moving vertically) or y-coordinate (if moving horizontally.)

What value does the system variable height include?

Adding Interaction


Let’s continue with the game-example! Okay, so the balls are moving there but what is the point of them? We could think they are some kind of food that the creature tries to eat! Let’s make that happen. Remember that the location of the ball is always stored in the variables ballX and ballY, and the location of the creature is the location of the mouse, so it’s stored in the variables mouseX and mouseY. So if the ballX is the same as mouseX and the ballY is the same as mouseY, the creature and the ball are in the same location! And in that case the creature “eats” the ball so the ball should disappear and appear from the top again. Okay, let's try it. Oh, I forgot brackets there. Okay. So why doesn’t the ball disappear even when the creature hits it? The reason is that the mouse location and the center of the ball have to be precisely the same for this to happen. And that’s practically impossible because one pixel it's such a tiny unit on the canvas. Luckily there’s a command called “dist” to calculate a distance between two points! So let's make it a float distance. And I'm going to write here first the coordinates of the ball and then the mouse. And then I want to print this distance. Okay, so now we can see that he distance decreases as the ball approaches the creature. And when the ball and the creature overlap, the distance is something below forty. It’s never zero, which would mean that they are exactly in the same place, but let's try something below forty here. So what we want to do is change this if-statement here. So instead of checking that they are exactly the same let's just check if this new variable "distance" if it's smaller than 40. Okay. Okay so now you can see it works. Still, it's not working perfectly. Sometimes I miss the ball. And this is because actually the cursor which is what we are checking with mouseX and mouseY is in the upper left corner of the creature-image. So if we comment this noCursor out for a while, so now we can see our cursor, you can see it's in the upper left corner there and now it's actually really easy to get the balls. So when this real cursor and the ellipse touch each other, that's when the balls disappear. There are endless possibilites in programming games with Processing. Next, you could start counting score - one point for every ball the creature eats. And maybe the speed of the balls should increase as the game proceeds, making it more difficult for you to catch them. And if you miss couple of balls, the game could end with a classic “GAME OVER” -text on the screen. We have just scratched the surface of game programming, You can develop your ideas further later!

Do this

When your creature and the shape collide, make the shape disappear and appear from the top again.


  • What if the idea would be to avoid the shapes? When the shape and the creature collide, the shape would destroy the creature and the creature would disappear.
  • Use text-command to write "GAME OVER" on the screen if the shape and the creature collide.
  • How do I add sound effects or music to my game? Check the documentation of SoundFile-objects in Processing Reference. 

Educator notes

If students are keen to know more about games, search "game" in Open Processing and browse through some examples in the class.

The dist-command opens up many possibilities. Once you're able to measure the distance between two points, you can basically make two objects interact with each other. For example, when a given  distance goes below a given point (...as written in the code), one of the objects can disappear or both the objects can bounce back.

Activity: If you have time, make simple games in groups of three. In each group, one student can be in charge of programming, one student in charge of visual design and one student can produce the music and sound effects for the game! Giving the students different roles can be motivating - allowing each student to work with their strengths!