ios opengl es 2.0, my rectangle is not square when I applied ortho

Question

I am learning opengl es 2.0. I am trying to apply ortho projection in opengl es 2.0 I draw a sqaure but I actually don't get square shape on the screen. And I am not sure which part I am missing. Thank you for your help! There are some methods in setupRenderingEnv that I did not post. but those methods are for setting up the frames and it works fine. and m_program is created fine. Again, thank you for your help.

// my vertex shader
attribute vec4 Position;
attribute vec4 SourceColor;

uniform mat4 Projection;

varying vec4 DestinationColor;

void main(void)
{
    DestinationColor = SourceColor;
    gl_Position = Projection * Position;
}  

// my drawing file
typedef struct 
{
    float Position[3];
    float Color[4];
}Vertex;

const Vertex Vertices[] =
{
    {{100, -100, 0}, {1, 0, 0, 1}},
    {{100, 100, 0}, {0, 1, 0, 1}},
    {{-100, 100, 0}, {0, 0, 1, 1}},
    {{-100, -100, 0}, {0, 0, 0, 1}}
};

const GLubyte Indices[] =
{
    0, 1, 2,
    2, 3, 0
};

- (void)setupRenderingEnv
{
    [super setupRenderingEnv];
    [self setupVertexBufferObjects];
    [self setupRunLoop];

    [self applyOrthoWithX:self.frame.size.width andY:self.frame.size.height];

    glViewport(0, 0, self.frame.size.width, self.frame.size.height);

}


//-- used for applying ortho in opengl es 2.0
- (void)applyOrthoWithX:(float)maxX andY:(float)maxY
{
    float a = 1.0f / maxX;
    float b = 1.0f / maxY;
    float ortho[16] =
    {
        a, 0, 0, 0,
        0, b, 0, 0,
        0, 0, -1, 0,
        0, 0, 0, 1
    };

    GLint projectionUniform = glGetUniformLocation(super.m_programHandle, "Projection");
    glUniformMatrix4fv(projectionUniform, 1, 0, &ortho[0]);
}


//-- overriding drawCandle. it render image, draw candle
- (void)drawCandle
{
    glClearColor(0, 104.0/255, 55.0/255, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);

    GLuint positionSlot = glGetAttribLocation(super.m_programHandle, "Position");
    GLuint colorSlot = glGetAttribLocation(super.m_programHandle, "SourceColor");

    glEnableVertexAttribArray(positionSlot);
    glEnableVertexAttribArray(colorSlot);

    glVertexAttribPointer(positionSlot, 3, GL_FLOAT, GL_FALSE, 
                          sizeof(Vertex), 0);
    glVertexAttribPointer(colorSlot, 4, GL_FLOAT, GL_FALSE, 
                          sizeof(Vertex), (GLvoid *)(sizeof(float) *     3));


    glDrawElements(GL_TRIANGLES, sizeof(Indices)/sizeof(Indices[0]), GL_UNSIGNED_BYTE, 0);

    glDisableVertexAttribArray(positionSlot);
    glDisableVertexAttribArray(colorSlot);

    [super drawCandle];
}

Answer 1

What shape is your viewport? If it's not square then that's the problem. The matrix you're creating - scaling by inverse width and inverse height - is going to make the width always be 1 unit wide and the height 1 unit tall. If the width and height aren't the same number of pixels, then squares won't draw square. You need to account for the aspect ratio of your viewport. Off the top of my head, I think it would be something more like this:

float ortho [ 16 ] = {
    a / b, 0, 0, 0,
    0, b, 0, 0,
    0, 0, -1, 0,
    0, 0, 0, 1
};

(I might have a/b inverted - can't remember)