Create the cube

Now that we're set up, it's time to write some code. We're going to change the code in the template to display a cube instead of a square. Creating and coloring a cube consists of two tasks: defining the cube and then defining the colors for its sides.

We'll start with the code that defines the geometry of the cube, so grab a piece of 3-D graph paper and sketch a cube. Notice that it has six sides and eight vertices:

Diagram showing a 3-D cube.

In main.c, we declare an array to store the cube's vertices so that the cube will look like the drawing above. If a corresponding array already exists in the template, you can replace that array with the code below, remembering to remove any array initialization code as well (hint: check the initialize() function for the array initialization code that's predefined in the template).

static const GLfloat vertices[] =
{
    // front
    -0.5f, 0.5f, 0.5f, 
    -0.5f, -0.5f, 0.5f, 
    0.5f, 0.5f, 0.5f,
    0.5f, 0.5f, 0.5f, 
    -0.5f, -0.5f, 0.5f, 
    0.5f, -0.5f, 0.5f,

    // right
    0.5f, 0.5f, 0.5f, 
    0.5f, -0.5f, 0.5f, 
    0.5f, 0.5f, -0.5f,
    0.5f, 0.5f, -0.5f, 
    0.5f, -0.5f, 0.5f, 
    0.5f, -0.5f, -0.5f,

    // back
    0.5f, 0.5f, -0.5f, 
    0.5f, -0.5f, -0.5f, 
    -0.5f, 0.5f, -0.5f,
    -0.5f, 0.5f, -0.5f, 
    0.5f, -0.5f, -0.5f, 
    -0.5f, -0.5f, -0.5f,

    // left
    -0.5f, 0.5f, -0.5f, 
    -0.5f, -0.5f, -0.5f, 
    -0.5f, 0.5f, 0.5f,
    -0.5f, 0.5f, 0.5f, 
    -0.5f, -0.5f, -0.5f, 
    -0.5f, -0.5f, 0.5f,

    // top
    -0.5f, 0.5f, -0.5f, 
    -0.5f, 0.5f, 0.5f, 
    0.5f, 0.5f, -0.5f,
    0.5f, 0.5f, -0.5f, 
    -0.5f, 0.5f, 0.5f, 
    0.5f, 0.5f, 0.5f,

    // bottom
    -0.5f, -0.5f, 0.5f, 
    -0.5f, -0.5f, -0.5f, 
    0.5f, -0.5f, 0.5f,
    0.5f, -0.5f, 0.5f, 
    -0.5f, -0.5f, -0.5f, 
    0.5f, -0.5f, -0.5f
};

Notice that we defined more than eight vertices here. Because OpenGL ES is designed to work with triangles, we specified each side of our cube as a pair of triangles, like this:

Diagram showing the coordinates of one side of a 3-D cube.

Each triangle is defined by three vertices, so we need three vertices per triangle, two triangles per side, and we have six sides, which gives us 36 vertices (3 x 2 x 6 = 36).

Next, we specify a color for each side of the cube. These colors are defined per vertex (that is, each vertex has its own color) and are in RGBA format. RGBA values can be represented as a value from 0 to 1, where 0 is the minimum value and 1 is the maximum value. For example, an RGB value of 16, 147, 237, based on a range of 0 to 255, is represented as 0.0625, 0.57421875, 0.92578125. The A in RGBA refers to the alpha channel, which represents the transparency of the color. All of our colors are opaque, so each value ends with 1.0. For our cube, we use different shades of blue.

We specify the colors for the cube in a colors array. If a corresponding array already exists in the template, you can replace that array with the code below, remembering to remove any array initialization code as well.

static const GLfloat colors[] =
{
    // front
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,

    // right
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,

    // back
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,

    // left
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,
    0.0625f,0.57421875f,0.92578125f,1.0f,

    // top
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,
    0.29296875f,0.66796875f,0.92578125f,1.0f,

    // bottom
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f,
    0.52734375f,0.76171875f,0.92578125f,1.0f
};

Last modified: 2014-01-23



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus