Lecture 24 — Charting & Cover Flow

Charting and Cover Flow

Charting and Cover Flow

Advertisements

Sudoku Image Processing

The iPhone application I mentioned during the camera lecture is called Sudoku Grab. Specifically, the post I was talking about that discusses how they go from an image off the camera to a representation they can build a native UI from is detailed at:

http://sudokugrab.blogspot.com/2009/07/how-does-it-all-work.html

It discusses in quite some detail their image processing techniques. I think it’s a pretty interesting read.

Assignment 8 — Redrawing the View

I’ve had several people email me with issues redrawing the board on touch events. Since this seems to be a semi-common problem, I thought I’d take a moment to address it here.

The problem is likely caused by not all of the draw code being executed. If you take a look at the GLView class’s drawView method, you’ll see that there’s some code before and after the call to the delegate’s (the view controller) drawView: method. It is this code that actually does the screen refresh.

- (void)drawView {
  glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
  [delegate drawView:self];
  glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
  [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}

So, by simply calling the view controller’s drawView: method the screen refresh doesn’t happen. To ensure this code gets called, instead of invoking the view controller’s drawRect: method simply invoke the GLView’s (the view controllers view property) drawRect method like so…

[(GLView *)self.view drawView];

Lecture 23 — Address Book, Photos & iPod Library Access

Address Book, Photos & iPod Library Access

Address Book, Photos & iPod Library Access

Lecture 22 — Game Kit

Game Kit

Game Kit

Assignment 8

Due Date

Monday, November 23rd — 11:59pm

Background

This project is designed to give you some hands on experience with…

  • Using Xcode & Interface Builder
  • Declaring and wiring outlets and actions
  • Testing applications in the iPhone Simulator
  • Utilizing OpenGL ES to draw geometry into an OpenGL UIView
  • Handling touch-based events and updating graphics accordingly
  • Playing sounds based on user interactions
  • Firing events using timers

Task

For this assignment you will be implementing the class game Simon.

Your application needn’t look identical to the one shown in the description, but must it contain the following elements…

  • A toolbar with a button that allows the user to start a new game
  • A large game board that must be rendered using OpenGL ES 1.1 and contain the following elements:
    • The main, rounded game board
    • 4 slices for each of the red, green, blue and yellow buttons
    • A “status” label that informs users of the number of correct guesses in a row or tells them that the game is over

Note that all of the geometry of the board must be generated by geometry (vertex arrays) and not images.

Main App Behavior

When your app initially loads it should look similar to the screen shown below. Unlike the last game, when the app is launched a game should not be automatically started.

Initial Screen

Initial Screen

The user starts the game by pressing the “New Game” button. Immediately after the use presses the button, the app should automatically start the game by selecting a button at random and both light the button up and play its sound. Below is an example where the app has selected the red button, it is lit below.

App Playing Red Button

App Playing Red Button

After the app is done playing selecting and playing/lighting the button, the board should return to the initial state and wait for the user to enter the same sequence as shown below.

User's Turn

User's Turn

The user should then have some fixed amount of time to press the button played/lit by the app. Below we see the user pressing the red button. When the user presses a button it should light up and play that button’s associated sound.

User Pressing Red

User Pressing Red

If the user successfully replays the button that was lit, then the label for the number of items correct, should increment for that series.

Score Updated to 1

Score Updated to 1

Immediately after the user re-enters the sequence, the app will replay the first button, then select a new button to press at random and replay button’s sound and relight the button. So, if the app selected blue as the second item, it would play red (from the first round) then blue (selected at random this round). Below we see the blue button lit up as the app plays the sequence for the user.

App Playing Blue Button

App Playing Blue Button

After playing the sequence of 2, the app then gives the user some fixed time to enter re-enter the entire sequence in order. Each button press that the user makes should light up the button and play the corresponding sound. If the user enters the sequence correctly (red then blue), then the score is updated to 2 (for successfully replaying a sequence of length 2). Below we see the updated screen after the user successfully entered the sequence of 2, before the app picks a third button and starts playing the new sequence.

Updated Score to 2

Updated Score to 2

Once the user successfully enters a sequence of the app should pick a new button, let’s say it was blue a second time. Thus the sequence to play would be red, blue, blue. Each time the user correctly enters the sequence in the time allotted, the score should be updated and the app should pick a new random color and replay the new sequence. This process continues indefinitely — until the user fails to replay the sequence.

If the user doesn’t replay the sequence successfully, then instead of playing the sound for the button, the app should play a special game over sound and update the status area with a game over message. Below is an screen shot of a game that is over.

Game Over

Game Over

The app should also end the game if the user takes too long to replay a given sequence back.

Gameplay Video

If pictures are worth a thousand words, then videos are worth much more.

Gameplay Video

Gameplay Video

This is a video capture of 2 plays through the game. In the first game the user manages to get up to playing back a sequence of length 7 before getting confused and pressing a wrong button. In the second game the user makes it through a couple of rounds before losing by not pressing the buttons in the time allotted.

Persisting Data

There are no persistence requirements for this assignment.

Provided Files

For this project I’ve provided 2 different zip files — Simon.zip & Sounds.zip.

The Simon.zip file is an OpenGL ES 1.1 Xcode project to get you started. This project is based off of Jeff LaMarche’s OpenGL ES template, but I’ve stripped out some things (namely animation and several of the extra files that we don’t need for this project). Additionally, I’ve adjusted the view and have drawn a sample blue quad onto the screen for you. Simply building the project should give you the following screen in the simulator.

Provided Project Screenshot

Provided Project Screenshot

The Sounds.zip file contains 5 .caf sound files — one for each color (red, green, blue, yellow) and one to be played when the game is over.

Hints

Start by downloading, building and running the starter project.

One of the first things to tackle is how to draw the board using vertex arrays. I’d recommend thinking about the board as a unit circle. Using trig functions you should be able to programmatically generate vertex array data to draw the circle. Then, think about how to draw the buttons using triangle vertex arrays. Again, trig is your friend.

Next, you’ll probably want to tie in user touches. There are several ways to tell what the user is pressing, but the following is a pretty straight foward method in OpenGL that happens to be available on the iPhone.

GLubyte col[4];	
glReadPixels(pos.x, -pos.y + 480, 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, &col[0]);
NSLog(@"r: %d, g: %d, b: %d", col[0], col[1], col[2]);

Next you’ll want to probably get the buttons to light up and the sounds to play on presses. From there you’ll probably want to implement using NSTimers to play app generated sequences of buttons. Some timing data that I found to work well in my app was to light up a button for .4 seconds, rest for .1 seconds, then move into the next button. I also found that allocating a second based on the number of buttons for that round was a reasonable time for the user to respond (i.e. 5 buttons, give the user 5 seconds to enter them once the app has finished playing them). Lastly, implement the actual game logic and tie in the toolbar and status labels.

Additional Ideas

The following items are provided as thoughts as to how you might extend or improve the project beyond the basic requirements. You are not required to implement any of these.

  • Customize the game pieces
  • Add in some animation (i.e. show the button fading out)
  • Try out alternate color combinations — just don’t make my eyes bleed
  • Feel free to play with the layout and style of elements — just be sure that things are neatly aligned and that there is at least some justifiable method to your madness
  • Add your own images

Grading

Your projects will be graded on the following criteria:

  • Correctness of application
  • Appearance of application
  • Adherence to Objective-C and iPhone coding conventions
  • Neatly formatted and indented code
  • Well documented header files
  • Absence of significant performance issues
  • Absence of memory leaks

Submission

Like the previous assignment, you are required to submit a zip file of your project directory. Be sure to manually remove the build directory before zipping things up.

To submit the assignment, open up a terminal, navigate to your zip file then issue the command:

submit cs491i assignment8 Assignment8.zip

If developing on your own Mac, you’ll need to transfer the file into your GL account (via SCP), then SSH into GL and issue the submit command.

Lecture 21 — Connecting to the Net

Connecting to the Net

Connecting to the Net