Warping an image on the iphone with OpenGL

Question

I am fairly new to programming and I'm doing it, at this point, just to educate myself and have fun.

I'm having a lot of trouble understanding some OpenGL stuff despite having read this great article here. I've also downloaded and played around with an example from the apple developer site that uses a .png image for a sprite. I do eventually want to use an image.

All I want to do is take an image and warp it such that it's four corners end up at four different x,y coordinates that I supply. This would be on a timer of sorts (CADisplayLink?) with one or more of these points changing at each moment. I just want to stretch it between these dynamic points.

I'm just having trouble understanding exactly how this works. As I've understood some example code over at the developer center, I can use:

glVertexPointer(2, GL_FLOAT, 0, spriteVertices);

where spriteVertices is something like:

const GLfloat spriteVertices[] = {
-0.90f, -.85f,  
0.95f, -0.83f,  
-0.85f,  0.85f, 
0.80f,  0.80f,    
};

The problem is that I don't understand what the numbers actually mean, why some have negatives infront of them, and where they are counting from to get the four corners. How would I need to change normal x,y coordinates that I get in order to plug them into this? (the numbers I would have for x,y wouldn't look like numbers between 1 and 0 would they? I would like something akin to per pixel accuracy.

Any help is greatly appreciated even if it's just a link to more reading. I'm having trouble finding resources for a newb.

Answer 1

It isn't as complicated as it seems at first. Each pair of numbers relates to an x,y position on the screen. So, 0.80f, 0.80f, would say go to 80% of the drawable area for both x and y(left to right, down to up). While -0.80,-0.80 would say go to 80% of the drawable area from right to left, up to down. The negatives just switch the sides. A point of note, openGL draws down to up(as if you were looking up a building from the ground), while the iPhone draws up to down (as though you were reading a book).

To get pixels, you multiply the float value by drawable area 1024 X 0.8 = 819.2.

This tutorial is for textures, but it is amazing and really helps you learn the coordinate systems: http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-part-6_25.html