Rotating an object with specific reference point consecutively

guilovsh · November 12, 2012, 9:25pm

I’m trying to make a square move by rotating it sideways with its reference point set to the bottom side of the direction it is moving to.

For example: if I would move the square to the right, I would set its reference point to the bottom right of it and animate a rotation of 90 degrees, after the movement is done, I increase the square X by the width of it and centrally set its rotation to 90 degrees (so that I can keep track of its position)

The thing is, how should I proceed to keep repeating it? 'cause if I try to rotate by another 90 degrees using bottom right reference point, it won’t be using the right position. What should I do to get the new bottom right relative position?

Thanks! [import]uid: 151732 topic_id: 32908 reply_id: 332908[/import]

guilovsh · November 20, 2012, 6:12pm

Anyone knows how I should proceed to achieve this?

This is what I want to do:
http://mapadomundo.org/example.png [import]uid: 151732 topic_id: 32908 reply_id: 131865[/import]

ignis075 · November 20, 2012, 10:31pm

Does setting the reference to bottomRight work properly? If so, I imagine you could alternate through the “corners” after each step. For example, after rotation 1, bottomRight is actually now oriented bottom left. So, you need to swap the ref point to “topRight”. So, like this…

ref=bottomRight > move > ref=topRight > move > ref=topLeft > move > ref=bottomLeft > move …

And the swap back to bottomRight after the fourth rotation. I think this should work, but you’ll need to test it.

Regards,
Brent Sorrentino [import]uid: 9747 topic_id: 32908 reply_id: 131893[/import]

horacebury · November 20, 2012, 10:49pm

I tried this approach while writing the first couple of iterations of my multi-touch-pinch-zoom libraries. The short of it is that if you try to build up transformations using shifting of the reference point you’ll find that they all effectively start from 0. What I mean is, moving the reference point is not based on the previous transformation you used, like a rotation or transition, but based on the inner content of the image, which never changes. So, the bottom edge of the image, when you’ve rotated it by 180 degrees, is (as seen on the screen) the top edge. If you want to do this sort of thing I highly recommend that you simply apply the transformations yourself either with a matrix or simply sequencing them. It might seem harder (its not) but at least you won’t go crazy (I did.)

What I’ve described might seem like an extension to what you’re doing, but I can almost guarantee it’ll affect what you’re doing soon. [import]uid: 8271 topic_id: 32908 reply_id: 131895[/import]

guilovsh · November 20, 2012, 11:20pm

@Brent Sorrentino
Hey Brent, thanks for trying to help, but I had already tested the method you described with no luck because as Horace said after your post, “if you try to build up transformations using shifting of the reference point you’ll find that they all effectively start from 0”.

@horacebury
Hi Horace, If I were to apply these transformations myself or sequence them, what should I do? I don´t think I quite got what you meant.

Thanks guys, hope I manage to solve this issue soon. [import]uid: 151732 topic_id: 32908 reply_id: 131899[/import]

horacebury · November 21, 2012, 1:26am

I’m afraid the easiest way is to do it the (apparently) hardest way.

Lets say you want to move the object along, rotate it, move it more, then rotate it around a different part. You need to work out what the cumulative changes are as you go. It sounds harder than using a shift in the reference point, but it’s not, because when you move the reference point of a display object the rotation and scaling you’ve applied will suddenly apply around the new reference, not the old one - and they won’t build up.

Try setting the ref point to the left of the image, scaling it and then moving the ref point to the right of the image; You’ll see what I mean.

That’s why it isn’t practical for these types of operations and why I advocate calculating the transformations yourself.

As a separate example, when rotating an image around an arbitrary point in my pinch-zoom code I had to work out what the location and rotation values of the image would be separately, as if the image had been rotated around that arbitrary point. I could not use the image’s reference point because the moment the user tried to perform another pinch-zoom the reference point moved and thus the effect of the original rotation was moved.

On the flip side, matrix transformations are not that difficult, though I didn’t use those either.

Hope that makes things clearer. [import]uid: 8271 topic_id: 32908 reply_id: 131906[/import]

guilovsh · November 21, 2012, 9:33am

@horace
I think I understood what you are trying to explain, but I have to wonder if using transformation matrices I’ll be able to show the animation of this rotation or if using them I’ll only be able to show the start point(x=0 and rotation=0) and the end point(x=40 and rotation = 90).

I’ll give it a shot anyway, thanks [import]uid: 151732 topic_id: 32908 reply_id: 131966[/import]

guilovsh · November 20, 2012, 6:12pm

Anyone knows how I should proceed to achieve this?

This is what I want to do:
http://mapadomundo.org/example.png [import]uid: 151732 topic_id: 32908 reply_id: 131865[/import]

horacebury · November 21, 2012, 10:41am

We love code samples here. Just saying… [import]uid: 8271 topic_id: 32908 reply_id: 131972[/import]

ignis075 · November 20, 2012, 10:31pm

Does setting the reference to bottomRight work properly? If so, I imagine you could alternate through the “corners” after each step. For example, after rotation 1, bottomRight is actually now oriented bottom left. So, you need to swap the ref point to “topRight”. So, like this…

ref=bottomRight > move > ref=topRight > move > ref=topLeft > move > ref=bottomLeft > move …

And the swap back to bottomRight after the fourth rotation. I think this should work, but you’ll need to test it.

Regards,
Brent Sorrentino [import]uid: 9747 topic_id: 32908 reply_id: 131893[/import]

guilovsh · November 21, 2012, 12:24pm

Hooray, solved my problem.

My code ended being something like this (if anyone ends up needing it):
[lua]prevX = 0
prevY = 0
function block:setRot(amount)
if prevX == 0 and prevY == 0 then
if self.ani == ‘movRight’ then prevX = blockSize/2
else prevX = -blockSize/2 end
prevY = blockSize/2
end

local tempX = prevX*math.cos(math.rad(amount)) - prevY*math.sin(math.rad(amount))
local tempY = prevX*math.sin(math.rad(amount)) + prevY*math.cos(math.rad(amount))

local finalX = prevX - tempX
local finalY = prevY - tempY

prevX = tempX
prevY = tempY

self.img.x = self.img.x + finalX
self.img.y = self.img.y + finalY
self.img:rotate(amount)
end[/lua]

And then I tell it to repeat doing that until the rotation%90 == 0

Thanks guys! [import]uid: 151732 topic_id: 32908 reply_id: 131994[/import]

horacebury · November 20, 2012, 10:49pm

I tried this approach while writing the first couple of iterations of my multi-touch-pinch-zoom libraries. The short of it is that if you try to build up transformations using shifting of the reference point you’ll find that they all effectively start from 0. What I mean is, moving the reference point is not based on the previous transformation you used, like a rotation or transition, but based on the inner content of the image, which never changes. So, the bottom edge of the image, when you’ve rotated it by 180 degrees, is (as seen on the screen) the top edge. If you want to do this sort of thing I highly recommend that you simply apply the transformations yourself either with a matrix or simply sequencing them. It might seem harder (its not) but at least you won’t go crazy (I did.)

What I’ve described might seem like an extension to what you’re doing, but I can almost guarantee it’ll affect what you’re doing soon. [import]uid: 8271 topic_id: 32908 reply_id: 131895[/import]

guilovsh · November 20, 2012, 11:20pm

@Brent Sorrentino
Hey Brent, thanks for trying to help, but I had already tested the method you described with no luck because as Horace said after your post, “if you try to build up transformations using shifting of the reference point you’ll find that they all effectively start from 0”.

@horacebury
Hi Horace, If I were to apply these transformations myself or sequence them, what should I do? I don´t think I quite got what you meant.

Thanks guys, hope I manage to solve this issue soon. [import]uid: 151732 topic_id: 32908 reply_id: 131899[/import]

horacebury · November 21, 2012, 1:26am

I’m afraid the easiest way is to do it the (apparently) hardest way.

Lets say you want to move the object along, rotate it, move it more, then rotate it around a different part. You need to work out what the cumulative changes are as you go. It sounds harder than using a shift in the reference point, but it’s not, because when you move the reference point of a display object the rotation and scaling you’ve applied will suddenly apply around the new reference, not the old one - and they won’t build up.

Try setting the ref point to the left of the image, scaling it and then moving the ref point to the right of the image; You’ll see what I mean.

That’s why it isn’t practical for these types of operations and why I advocate calculating the transformations yourself.

As a separate example, when rotating an image around an arbitrary point in my pinch-zoom code I had to work out what the location and rotation values of the image would be separately, as if the image had been rotated around that arbitrary point. I could not use the image’s reference point because the moment the user tried to perform another pinch-zoom the reference point moved and thus the effect of the original rotation was moved.

On the flip side, matrix transformations are not that difficult, though I didn’t use those either.

Hope that makes things clearer. [import]uid: 8271 topic_id: 32908 reply_id: 131906[/import]

guilovsh · November 21, 2012, 9:33am

@horace
I think I understood what you are trying to explain, but I have to wonder if using transformation matrices I’ll be able to show the animation of this rotation or if using them I’ll only be able to show the start point(x=0 and rotation=0) and the end point(x=40 and rotation = 90).

I’ll give it a shot anyway, thanks [import]uid: 151732 topic_id: 32908 reply_id: 131966[/import]

horacebury · November 21, 2012, 10:41am

We love code samples here. Just saying… [import]uid: 8271 topic_id: 32908 reply_id: 131972[/import]

guilovsh · November 21, 2012, 12:24pm

Hooray, solved my problem.

My code ended being something like this (if anyone ends up needing it):
[lua]prevX = 0
prevY = 0
function block:setRot(amount)
if prevX == 0 and prevY == 0 then
if self.ani == ‘movRight’ then prevX = blockSize/2
else prevX = -blockSize/2 end
prevY = blockSize/2
end

local tempX = prevX*math.cos(math.rad(amount)) - prevY*math.sin(math.rad(amount))
local tempY = prevX*math.sin(math.rad(amount)) + prevY*math.cos(math.rad(amount))

local finalX = prevX - tempX
local finalY = prevY - tempY

prevX = tempX
prevY = tempY

self.img.x = self.img.x + finalX
self.img.y = self.img.y + finalY
self.img:rotate(amount)
end[/lua]

And then I tell it to repeat doing that until the rotation%90 == 0

Thanks guys! [import]uid: 151732 topic_id: 32908 reply_id: 131994[/import]