View more

View more

View more

### Image of the Day Submit

IOTD | Top Screenshots

### The latest, straight to your Inbox.

Subscribe to GameDev.net Direct to receive the latest updates and exclusive content.

# Please lay me a hand.

Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

15 replies to this topic

### #1/ owl   Banned

Posted 06 June 2011 - 05:05 PM

Hi. I've been trying to figure this out and I kind of can't.

I have an image that represents a character. By default, the character depicted in the image is standing and heading right. ( -> )

Then, inside the "game" the character has a velocity vector (x,y).

So, given this velocity vector I'm calculating an angle in the following way:

float radians =  atan2(x_vel, y_vel);

So far, so good. A first problem was that when the velocity represents an angle of (180 CCW) the image gets upside-down. So what I did was to check if the x velocity was smaller than zero, and if it was, then I'd flip the image horizontally.

But now I can't figure out how to apply the rotation. I need a way to adjust the rotation that comes from atan2 depending on whether the image is heading left or right.

                          coord (0,1)
π/2

│
│
│
│
│
│
coord (-1,0) π  ────────────────┼─────────────── 0 or 2π  coord (1,0)
│
│
│
│
│
│

3/4π
coord (0,-1)

I like the Walrus best.

### #2SimonForsman  Members

Posted 06 June 2011 - 05:16 PM

Hi. I've been trying to figure this out and I kind of can't.

I have an image that represents a character. By default, the character depicted in the image is standing and heading right. ( -> )

Then, inside the "game" the character has a velocity vector (x,y).

So, given this velocity vector I'm calculating an angle in the following way:

float radians =  atan2(x_vel, y_vel);

So far, so good. A first problem was that when the velocity represents an angle of (180 CCW) the image gets upside-down. So what I did was to check if the x velocity was smaller than zero, and if it was, then I'd flip the image horizontally.

But now I can't figure out how to apply the rotation. I need a way to adjust the rotation that comes from atan2 depending on whether the image is heading left or right.

                          coord (0,1)
π/2

│
│
│
│
│
│
coord (-1,0) π  ────────────────┼─────────────── 0 or 2π  coord (1,0)
│
│
│
│
│
│

3/4π
coord (0,-1)

hmm wouldn't it work to rotate 0-(π-atan2(xvel,yvel) if xvel<0 ?(after flipping the image)

(Also , it should be 3/2π at 0,-1

I don't suffer from insanity, I'm enjoying every minute of it.
The voices in my head may not be real, but they have some good ideas!

### #3/ owl   Banned

Posted 06 June 2011 - 05:34 PM

hmm wouldn't it work to rotate 0-(π-atan2(xvel,yvel) if xvel<0 ?(after flipping the image)

(Also , it should be 3/2π at 0,-1

Almost! With your tip the image gets well rotated when heading left, but when heading right (edit: or left) and going towards (x=1,y=1) or( x=-1,y=-1) (that is diagonally) the angle is flipped vertically (heading down when going up and the opposite).

here is the code I'm using to rotate the bitmap with your suggestion included:

[source lang="cpp"]void rotate(){ float radians = atan2(x_vel, y_vel); //0; //1.5708; // if (x_vel<0) { radians = 0-(3.1416-atan2(x_vel,y_vel)); } float cosine=(float)cos(radians); float sine=(float)sin(radians); int bmp_width = image.get_width(); int bmp_height = image.get_height(); float point1_x=(-bmp_height*sine); float point1_y=(bmp_height*cosine); float point2_x=(bmp_width*cosine-bmp_height*sine); float point2_y=(bmp_height*cosine+bmp_width*sine); float point3_x=(bmp_width*cosine); float point3_y=(bmp_width*sine); float minx=min(0,min(point1_x,min(point2_x,point3_x))); float miny=min(0,min(point1_y,min(point2_y,point3_y))); float maxx=max(point1_x,max(point2_x,point3_x)); float maxy=max(point1_y,max(point2_y,point3_y)); int dest_width=(int)ceil(fabs(maxx)-minx); int dest_height=(int)ceil(fabs(maxy)-miny); if (image_rotated.buffer.size()!= (uint32_t)dest_width*dest_height) { image_rotated.new_transparent(dest_width, dest_height); } for(int x=0;x<dest_width;x++) { for(int y=0;y<dest_height;y++) { int src_bitmap_x=(int)((x+minx)*cosine+(y+miny)*sine); int src_bitmap_y=(int)((y+miny)*cosine-(x+minx)*sine); if( src_bitmap_x>=0 && src_bitmap_x<image.get_width() && src_bitmap_y>=0 && src_bitmap_y<image.get_height() ) { image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y]; } } }}[/source]
I like the Walrus best.

### #4SimonForsman  Members

Posted 06 June 2011 - 06:13 PM

hmm wouldn't it work to rotate 0-(π-atan2(xvel,yvel) if xvel<0 ?(after flipping the image)

(Also , it should be 3/2π at 0,-1

Almost! With your tip the image gets well rotated when heading left, but when heading right (edit: or left) and going towards (x=1,y=1) or( x=-1,y=-1) (that is diagonally) the angle is flipped vertically (heading down when going up and the opposite).

here is the code I'm using to rotate the bitmap with your suggestion included:

[source lang="cpp"]void rotate(){ float radians = atan2(x_vel, y_vel); //0; //1.5708; // if (x_vel<0) { radians = 0-(3.1416-atan2(x_vel,y_vel)); } float cosine=(float)cos(radians); float sine=(float)sin(radians); int bmp_width = image.get_width(); int bmp_height = image.get_height(); float point1_x=(-bmp_height*sine); float point1_y=(bmp_height*cosine); float point2_x=(bmp_width*cosine-bmp_height*sine); float point2_y=(bmp_height*cosine+bmp_width*sine); float point3_x=(bmp_width*cosine); float point3_y=(bmp_width*sine); float minx=min(0,min(point1_x,min(point2_x,point3_x))); float miny=min(0,min(point1_y,min(point2_y,point3_y))); float maxx=max(point1_x,max(point2_x,point3_x)); float maxy=max(point1_y,max(point2_y,point3_y)); int dest_width=(int)ceil(fabs(maxx)-minx); int dest_height=(int)ceil(fabs(maxy)-miny); if (image_rotated.buffer.size()!= (uint32_t)dest_width*dest_height) { image_rotated.new_transparent(dest_width, dest_height); } for(int x=0;x<dest_width;x++) { for(int y=0;y<dest_height;y++) { int src_bitmap_x=(int)((x+minx)*cosine+(y+miny)*sine); int src_bitmap_y=(int)((y+miny)*cosine-(x+minx)*sine); if( src_bitmap_x>=0 && src_bitmap_x<image.get_width() && src_bitmap_y>=0 && src_bitmap_y<image.get_height() ) { image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y]; } } }}[/source]

Hmm, if you get things wrong when heading right aswell then the problem shouldn't be with the code i added (as it only applies when facing left) but rather with the rest of the rotation code.

I'm having a hard time wrapping my head around that at the moment though. (lots of math, might need a pen and paper for this)
I don't suffer from insanity, I'm enjoying every minute of it.
The voices in my head may not be real, but they have some good ideas!

### #5/ owl   Banned

Posted 06 June 2011 - 06:31 PM

Hmm, if you get things wrong when heading right aswell then the problem shouldn't be with the code i added (as it only applies when facing left) but rather with the rest of the rotation code.

I'm having a hard time wrapping my head around that at the moment though. (lots of math, might need a pen and paper for this)

Without flipping the image horizontally nor negating the angle in relation the the velocity:

- Originally the image is heading right:

- When the angle is 0 it gets rotated so it looks straight down
- When the angle is π/2 (1.5708) it ends up looking straight to the right (like if it was horizontally flipped)
- When the angle is (3/2)*3.1416 it looks straight up
- When the angle is 3.1416 it looks straight up too! wtf?

Shouldn't I rotate it only a max of 180º when if flip it first? I mean, to avoid having it rotated 360º.

I like the Walrus best.

### #6scgames  Members

Posted 06 June 2011 - 07:30 PM

float radians =  atan2(x_vel, y_vel);

Assuming you're using standard conventions (which it sounds like you are), the above should probably be:

float radians =  atan2(y_vel, x_vel);

### #7/ owl   Banned

Posted 06 June 2011 - 08:26 PM

float radians =  atan2(x_vel, y_vel);

Assuming you're using standard conventions (which it sounds like you are), the above should probably be:

float radians =  atan2(y_vel, x_vel);

You're right about that. Yet, ironically, doing it the right way brings worst results! Now the image never faces the direction it's going! What's going on? O_o
I like the Walrus best.

### #8scgames  Members

Posted 06 June 2011 - 08:33 PM

You're right about that. Yet, ironically, doing it the right way brings worst results! Now the image never faces the direction it's going! What's going on? O_o

Do you still have any of the 'corrective' code in place? That is, are you modifying the angle returned by atan2() in any way?

Also, although this is probably too obvious, are you missing any degrees<->radians conversions anywhere?

### #9/ owl   Banned

Posted 06 June 2011 - 08:41 PM

You're right about that. Yet, ironically, doing it the right way brings worst results! Now the image never faces the direction it's going! What's going on? O_o

Do you still have any of the 'corrective' code in place? That is, are you modifying the angle returned by atan2() in any way?

Also, although this is probably too obvious, are you missing any degrees<->radians conversions anywhere?

Yes, correcting the order of the parameters in the atan2 function, the code that rotates the image is *exactly* this one:

[source lang="cpp"]void rotate(){ float radians = atan2(y_vel, x_vel); //0; //1.5708; // if (x_vel<0) { radians = 0-(3.1416-atan2(y_vel,x_vel)); } float cosine=(float)cos(radians); float sine=(float)sin(radians); int bmp_width = image.get_width(); int bmp_height = image.get_height(); float point1_x=(-bmp_height*sine); float point1_y=(bmp_height*cosine); float point2_x=(bmp_width*cosine-bmp_height*sine); float point2_y=(bmp_height*cosine+bmp_width*sine); float point3_x=(bmp_width*cosine); float point3_y=(bmp_width*sine); float minx=min(0,min(point1_x,min(point2_x,point3_x))); float miny=min(0,min(point1_y,min(point2_y,point3_y))); float maxx=max(point1_x,max(point2_x,point3_x)); float maxy=max(point1_y,max(point2_y,point3_y)); int dest_width=(int)ceil(fabs(maxx)-minx); int dest_height=(int)ceil(fabs(maxy)-miny); if (image_rotated.buffer.size()!= (uint32_t)dest_width*dest_height) { image_rotated.new_transparent(dest_width, dest_height); } for(int x=0;x<dest_width;x++) { for(int y=0;y<dest_height;y++) { int src_bitmap_x=(int)((x+minx)*cosine+(y+miny)*sine); int src_bitmap_y=(int)((y+miny)*cosine-(x+minx)*sine); if( src_bitmap_x>=0 && src_bitmap_x<image.get_width() && src_bitmap_y>=0 && src_bitmap_y<image.get_height() ) { image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y]; } } }}[/source]

Given that code, now the image never faces towards the direction it's going... I still think I should cap the rotation to 180º if I flip the image before rotating it. Yet I'm not sure how to limit it... As far as I can tell everything seems to work in radians here... *blocked*

EDIT: If I change the order of the parameters in the atan2 function to be as they should (y, x) and I swap the sin and cos then it works exactly as having the atan2 function with the parameters as (x,y).

    float cosine=(float)sin(radians);
float sine=(float)cos(radians);

I like the Walrus best.

### #10SimonForsman  Members

Posted 07 June 2011 - 07:16 AM

You're right about that. Yet, ironically, doing it the right way brings worst results! Now the image never faces the direction it's going! What's going on? O_o

Do you still have any of the 'corrective' code in place? That is, are you modifying the angle returned by atan2() in any way?

Also, although this is probably too obvious, are you missing any degrees<->radians conversions anywhere?

Yes, correcting the order of the parameters in the atan2 function, the code that rotates the image is *exactly* this one:

[source lang="cpp"]void rotate(){ float radians = atan2(y_vel, x_vel); //0; //1.5708; // if (x_vel<0) { radians = 0-(3.1416-atan2(y_vel,x_vel)); } float cosine=(float)cos(radians); float sine=(float)sin(radians); int bmp_width = image.get_width(); int bmp_height = image.get_height(); float point1_x=(-bmp_height*sine); float point1_y=(bmp_height*cosine); float point2_x=(bmp_width*cosine-bmp_height*sine); float point2_y=(bmp_height*cosine+bmp_width*sine); float point3_x=(bmp_width*cosine); float point3_y=(bmp_width*sine); float minx=min(0,min(point1_x,min(point2_x,point3_x))); float miny=min(0,min(point1_y,min(point2_y,point3_y))); float maxx=max(point1_x,max(point2_x,point3_x)); float maxy=max(point1_y,max(point2_y,point3_y)); int dest_width=(int)ceil(fabs(maxx)-minx); int dest_height=(int)ceil(fabs(maxy)-miny); if (image_rotated.buffer.size()!= (uint32_t)dest_width*dest_height) { image_rotated.new_transparent(dest_width, dest_height); } for(int x=0;x<dest_width;x++) { for(int y=0;y<dest_height;y++) { int src_bitmap_x=(int)((x+minx)*cosine+(y+miny)*sine); int src_bitmap_y=(int)((y+miny)*cosine-(x+minx)*sine); if( src_bitmap_x>=0 && src_bitmap_x<image.get_width() && src_bitmap_y>=0 && src_bitmap_y<image.get_height() ) { image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y]; } } }}[/source]

Given that code, now the image never faces towards the direction it's going... I still think I should cap the rotation to 180º if I flip the image before rotating it. Yet I'm not sure how to limit it... As far as I can tell everything seems to work in radians here... *blocked*

EDIT: If I change the order of the parameters in the atan2 function to be as they should (y, x) and I swap the sin and cos then it works exactly as having the atan2 function with the parameters as (x,y).

    float cosine=(float)sin(radians);
float sine=(float)cos(radians);

You shouldn't need to cap the rotation, xvel<0 should always result in a rotation between pi/2 and 3pi/2 (90-270 degrees) while xvel > 0 results in one that is either between 0 and pi/2(0-90 degrees) or between 3pi/2 and 2pi (270-360 degrees)

The fact that your image gets rotated at all when the angle is 0 means that you've messed up your rotation formula. (when radians is 0 there should be no rotation)

//some mindless typing to help me keep my mind on track, possible conclusion further down.

sin(0) = 0
cos(0) = 1

Thus your 3 points when you're not supposed to rotate anything becomes:

float point1_x=0;float point1_y=bmp_height;

float point2_x=bmp_width;float point2_y=bmp_height;
float point3_x=bmp_width;float point3_y=0;

then:

float minx=min(0,min(point1_x,min(point2_x,point3_x)));float miny=min(0,min(point1_y,min(point2_y,point3_y)));float maxx=max(point1_x,max(point2_x,point3_x));float maxy=max(point1_y,max(point2_y,point3_y));

minx = 0
miny = 0
maxx = bmp_width
maxy = bmp_height

//Image size doesn't change atleast.

Then for each pixel in the rotated image you do
int src_bitmap_x=(int)((x+0));
int src_bitmap_y=(int)((y+0));
if(  src_bitmap_x>=0 && src_bitmap_x<image.get_width()  && src_bitmap_y>=0 &&  src_bitmap_y<image.get_height() )  {
image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y];
}

shouldn't:
image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y];

be

image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_y * image.get_width() + src_bitmap_x];
I don't suffer from insanity, I'm enjoying every minute of it.
The voices in my head may not be real, but they have some good ideas!

### #11/ owl   Banned

Posted 07 June 2011 - 07:55 AM

Then for each pixel in the rotated image you do

int src_bitmap_x=(int)((x+0));
int src_bitmap_y=(int)((y+0));
if(  src_bitmap_x>=0 && src_bitmap_x<image.get_width()  && src_bitmap_y>=0 &&  src_bitmap_y<image.get_height() )  {
image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y];
}

shouldn't:
image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_x * image.get_width() + src_bitmap_y];

be

image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_y * image.get_width() + src_bitmap_x];

OUTSTANDING CATCH MAN! It works now.

There are some special cases where the image will still face the opposite direction it is moving, but that smells like something being wrong with the algorithm that decides to flip the image horizontally.

You're awesome guys!
I like the Walrus best.

### #12Borg_Ri  Members

Posted 07 June 2011 - 08:24 AM

i think that you problem is in this

if (x_vel<0)
{
}


you can't flip image by rotateing. you need to do this

if (x_vel<0)
{
for(int x=0; x<width; x++) for(int y=0; y<height; y++)
image_fliped.buffer[(y+1) * width - x] = image.buffer[y * width + x];
}


### #13Borg_Ri  Members

Posted 07 June 2011 - 09:18 AM

or you can remove the if statement and change this


image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_y * image.get_width() + src_bitmap_x];



to this


int rot_index = (x_vel<0) ?  (y+1) * image_rotated.get_width() - x :  y * image_rotated.get_width() + x;

image_rotated.buffer[rot_index] = image.buffer[src_bitmap_y * image.get_width() + src_bitmap_x];



### #14SimonForsman  Members

Posted 07 June 2011 - 09:52 AM

i think that you problem is in this

if (x_vel<0)
{
}


you can't flip image by rotateing. you need to do this

if (x_vel<0)
{
for(int x=0; x<width; x++) for(int y=0; y<height; y++)
image_fliped.buffer[(y+1) * width - x] = image.buffer[y * width + x];
}


if (x_vel<0)
{
}


doesn't flip the image, it adjusts the rotation so that the flipped image faces in the correct direction (as flipping the image effectivly changes the direction its facing by pi radians the performed rotation has to be adjusted by the same amount to compensate to avoid having the flipped image face the wrong way)

it should probably be changed to:

if (x_vel<0) {
} //This should be equivalent but avoids one atan2 call and thus should be faster (unless the compiler is capable of optimizing out calls to pure functions when the variables passed doesn't change)

I'm assuming owl has a flip function aswell that he calls when xvel<0 since he said he was flipping the image in his original post (yet the code he posted doesn't flip it).

The remaining "special cases" could probably be solved if we knew in what ranges they occured (If it happens when moving close to straight up or straight down for example)
I don't suffer from insanity, I'm enjoying every minute of it.
The voices in my head may not be real, but they have some good ideas!

### #15/ owl   Banned

Posted 08 June 2011 - 04:42 PM

The remaining "special cases" could probably be solved if we knew in what ranges they occured (If it happens when moving close to straight up or straight down for example)

It was a problem related to sometimes not flipping the image. This code is for the fish tank entry and I'm writing it as it comes, that is: messy
I like the Walrus best.

### #16Borg_Ri  Members

Posted 09 June 2011 - 12:41 AM

i am sorry, in my code i gave you i was fliping image the wrong way, that is probably why it didn't work. try this.

comment out the


if (x_vel<0)
{
}



and replace


image_rotated.buffer[y * image_rotated.get_width() + x] = image.buffer[src_bitmap_y * image.get_width() + src_bitmap_x];



with


int rot_index = (x_vel<0) ?  (dest_height-y-1) * image_rotated.get_width() + x :  y * image_rotated.get_width() + x;

image_rotated.buffer[rot_index] = image.buffer[src_bitmap_y * image.get_width() + src_bitmap_x];



Old topic!

Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.