CS 315 Homework 3 - Basic OpenGL

Due Sun Sep 29 at 11:59pm

Overview

This assignment will give you a chance to set up and get started working with OpenGL ES (hereafter GLES) on Android. This is your chance to read through some GLES tutorials, practice working with the API by extending existing code, and begin applying simple transformations.

Your task is will be to create a simple 2D render using GLES: that of a multi-color hexagon. Note that your hexagon doesn't need to look exactly like this (you can use different colors if you want), but it should have the same general design.

In addition, your hexagon will need to be moveable; that is, the user should be able to move the hexagon around the screen by clicking and dragging.

This assignment should be completed individually.

Objectives

Necessary Files

You will need to download and extract a copy of the starter code. This project includes a simple GLES program to get you started (there is a lot of setup for GLES 2.0, which we're using). Note that the zip file also contains a README.txt file that you will need to fill out.

Be sure and read through the starter code; there are lots of comments to explain what is going on. If you have any questions, let me know!

You may also want to download the sample code from the Google Tutorial to use as a reference.

Details

While the task for this assignment is fairly basic and straightforward, the devil is in the details of getting everything working. Below are some steps to help you out.

Setting up OpenGL ES 2.0

GLES Tutorials

Completing the Assignment

Now that everything is running and you're hopefully getting a feel for GLES, now you need to modify the starter code to complete the assignment. There are three changes you need to make; you can complete these in any order.

  1. Drawing a Hexagon

    You have code that lets you draw a single equilateral triangle; in order to draw a hexagon, you simply need to draw 6 copies of those triangles!

    However, you'll also need to reposition those triangles so that they form the correct shape. You can do this by applying transformations (translations and rotations) to the model matrix before drawing the triangle. Remember that the model matrix represents where the basic model (the three-vertex triangle) is in space. We apply and compose transformations by multiplying matrixes together; Android provides static helper functions in the android.opengl.Matrix class to help you easily multiply matrixes. In particular, look at the translateM() and rotateM() methods.

    • The provided triangle is equilateral with a side length of 1, centered at (0,0). You can use this information and some simple trigonometry to figure out how far to move copies.
    • Note that if you want to rotate the triangle on the 2D xy plane, you'll want to rotate around the vector [0,0,1] (the vector coming straight out of the screen).
    • Remember to reset your model matrix to Identity before drawing each new triangle!
  2. Changing Colors

    You have code that draws a red triangle--that is, each vertex is the same red, so the entire triangle is red. In order to make the triangle multi-colored, you'll need to assign a different color to each vertex; the provided shaders will automatically interpolate the colors to produce the blending effect shown above.

    In order to give different colors to each vertex, you'll need to create an array of colors, and then pass a pointer to that array to the shader. This is the exact same process as you use to pass the array of vertices to the shader! Thus you should can use the code for passing in the position data as a template.

    • Remember to both create a FloatBuffer to hold the colors (each of which has 4 components: r, g,b,a), as well as to change the drawing code.
    • Basically, in the draw method, you need to put a pointer to an array of colors inside the mColorHandle, rather than a single vec4.
    • Note that because triangles are always drawn and colored in counter-clockwise order, you may find that some triangles aren't colored in the right order for your hexagon. You'll need to think up a solution for this. If you get stuck, let me know!
  3. Adding Movement

    This may be the easiest step---just follow the example in the tutorial!

    • Note that you have two options for producing something that looks like movement: you can move the eye, or you can move the model. The first involves applying a transformation to the view matrix, the second involves applying a transformation to the model matrix. The effect is the same; the only difference is how you think about them!
    • Don't worry about the user clicking on the Hexagon itself; you just need to move following the finger drag where-ever it may be on the screen.

Extensions

If you have time you can play around with GLES and add further extensions to this program. Please keep your program 2D, not 3D; we'll use 3D models in the next assignment. For example, you might create further shapes from your triangles, or even add in a new 2D model (make sure your Hexagon is still there). What other shapes can you draw from equilateral triangles?

Submitting

BEFORE YOU SUBMIT: make sure your code is fully documented and functional! Again, grading will be based primarily on functionality. I cannot promise that I can find any errors in your code that keep it from running, so make sure it works.

Upload your entire project (including all the src, resources, layouts, libraries, etc) to the Hwk3 submission folder on hedwig. Also include a filled-in copy of the README.txt file in your project directory!

The homework is due at midnight on Sun Sep 29.

Grading

This assignment will be graded based on approximately the following criteria: