CSCI 261 Programming Concepts (C++)

Homework 32: OpenFrameworks Events

Concepts

For this assignment, focus on learning how to use keypresses and mouseclicks within an OpenFrameworks app.

Events

When a program user "does something" such as clicking on the mouse or pressing a key on the keyboard, programmers call these "events." In order for your program to do something when an event occurs, a framework provides functions we call "event handlers."

In OpenFrameworks, some default event handlers are provided for you. For example keyPressed or mousePressed. This makes it easy for you to determine exactly what happens when a particular event occurs. However, with OpenFramworks you should think about how "events should change the world's state." What does that mean?

State, Events, update() and draw()

When we talk about the "state" of a program we generally mean the current values of things in your program's world. For example, a widget's state is represented by its coordinates and color. Furthermore, the program's state itself might be represented as a "mode" like "starting mode" or "playing mode," which can be represented with simple variables and well-named constants.

What you need to recognize is that draw() should just do one thing: it always draws the current "state" of your program's world. It doesn't modify the state of the world itself -- it just draws it.

It is your event handlers (like keyPressed or mousePressed) that should change the state of the world. For example, your mousePressed event might change the state of the program so that it moves from the "starting mode" into a "playing mode." Or your keyPressed event might check to see what key is pressed, and modify a widget's x and y position accordingly.

Lastly, update is also used to change the state of the world. Remember, OpenFrameworks calls update and then draw over and over again. So if you want to change the state of the program's world before drawing it, you can do so within the update function. For example, you might want to check if two widgets are touching, and if they are, change the color of one widget or display a "you win" screen. Typically, such a feature is handled within your update function.

The best way to learn how to use and apply event handling is to dive in with an example.

Instructions

For this assignment, we provide a simple boilerplate program that first displays a welcome screen. When you click your mouse, you'll notice that the game's state changes to a "play state" in which two widgets are drawn on the screen like this:

First, take a look at the source code: read the header and implementation files of the Widget class, and take a look at testApp.cpp. Do you see how there are some global variables declared to manage the game's "state" and what happens when a mouse button is pressed? (See mousePressed).

Your goal for this assignment is to enhance this program such that:

• Pressing W, A, S or D moves the red "player" widget in an up/left/down/right direction
• When the player's widget touches the green target widget, the player's widget should turn green

First, focus on implementing the body of keyPressed such that you can control the movement of the player widget.

Next, focus on implementing the body of update (and Widget::isTouching) to fulfill the second requirement.

Hints

Remember, it is important to think about states. Draw is always just going to draw the widgets; your event handlers should modify the state of those widgets. The "state" of a widget is represented by its x/y position and its color values.

Bonus

There is an audio file included in this project in bin/data. Can you make your program play the sound when the player widget touches the target widget? (See apps/examples/soundPlayerExample/src/testApp.cpp for a hint.)

Requirements and Rubric

This work is worth 200 points.

Requirement	Points	Notes
Place your name in the comment header in main.cpp	5
Correct submission as .zip file	5
Can move player widget with WASD	95
Player widget changes color when touching target	95

Concepts Exercised: events, classes, OOP, graphics, animation, fun, collisions, making decisions

© 2012 Yong Joseph Bakos.