2-D OpenGL ES Animation

I added the GLfloat instance variable and property named theta (θ) to class EAGLView. Its value goes from 0 to π radians inclusive as you swipe from right to left. I passed theta as an argument to the display function in Pythagoras.cpp.

The function SetupRC in Pythagoras.cpp now takes two arguments giving the width and height in pixels of the view.

Source code in GL.zip

  1. Pythagoras.cpp
  2. main.m
  3. Class GLAppDelegate
  4. Class GLViewController
  5. Class EAGLView

Create the project

Just like the previous project, but the file Pythagoras.cpp replaces Triangle.cpp.

The animation

OpenGL ES doesn’t know about touches. The view class contains a touchesMoved:withEvent: method called when the finger moves. It updates the theta instance variable of the view and passes it to the display function in Pythagoras.cpp.

The modelView matrix

Should we move the camera towards the drawing, or, equivalently, the drawing towards the camera? We choose to do neither, so the modelView matrix in Pythagoras.cpp contains the identity matrix. You can see the function m3dLoadIdentity44 in the file math3d.cpp.

The frustum

By default, the coördinates go from –1 to 1 in all three directions: x, y, z. But I’d like y to run from –1.5 to 1.5 because the iPhone screen is taller than it is wide.

In the SetupRC function in Pythagoras.cpp, the variable aspectRatio is set to 1.5 (carefully avoiding integer division and truncation) and we plug this value into the frustum. In the display function, the matrix that represents the frustum is combined with the plain vanilla modelView matrix to form the final modelViewProjection matrix.

Things to try

  1. What goes wrong if we change the
    	shaderManager.UseStockShader(GLT_SHADER_FLAT, modelViewProjection, vWhite);
    
    to a simple
    	shaderManager.UseStockShader(GLT_SHADER_IDENTITY, vWhite);
    
    in the display function in Pythagoras.cpp? After you find out, please change it back.

  2. In the SetupRC function in Pythagoras.cpp, change
    	m3dLoadIdentity44(modelView);
    
    to
    	//Move the picture .5 to the right.
    	m3dTranslationMatrix44(modelView, .5, 0, 0);
    
    Can you move the drawing up or down? Moving it towards or away from you will have no effect, since our projection is orthographic, not perspective. But you can make the drawing smaller:
    	m3dScaleMatrix44(modelView, .5, .5, 1);	//half size
    

  3. Also try
    	//45 degrees counterclockwise around the axis (0, 0, 1).
    	//This axis points straight towards us.
    	m3dRotationMatrix44(modelView, 45 * M_PI / 180, 0, 0, 1);
    
    What happens if you rotate around the horizontal axis (1, 0, 0)?

  4. What’s the difference between
    	//Rotation first, then translation to the upper right
    
    	M3DMatrix44f rotation;
    	m3dRotationMatrix44(rotation, 45 * M_PI / 180, 0, 0, 1);
    
    	M3DMatrix44f translation;
    	m3dTranslationMatrix44(translation, .5, 0, 0);
    
    	m3dMatrixMultiply44(modelView, rotation, translation);
    
    and
    	//Translation to the right first, then rotation.
    
    	M3DMatrix44f rotation;
    	m3dRotationMatrix44(rotation, 45 * M_PI / 180, 0, 0, 1);
    
    	M3DMatrix44f translation;
    	m3dTranslationMatrix44(translation, .5, 0, 0);
    
    	m3dMatrixMultiply44(modelView, translation, rotation);