xReference, yReference whackiness

Ok, this seems to be non-deterministic, and my attempts to “work around” the behavior I’m experiencing have failed. Miserably.

I’m trying to scale an object from a specific point. Setting xReference and yReference to the correct spot on the image works, the scaling definitely happens around that point. However, as soon as I adjust the xScale and yScale values, the image pops to some new location. Sometimes it travels a short distance, sometimes an enormous distance.

I don’t understand the Corona scene graph architecture…it seems woefully complex, and unnecessarily so. This is odd given that the founders came from Adobe, and Flash has a wonderfully simple and elegant scene graph architecture.

The docs say changing xReference and yReference don’t change the position of the object, and that’s true, it doesn’t…until you apply a scale to the object. And I would expect that…but not a “pop”…it should simply update to reflect the new location based on the scaling that occurred around the reference point.

What is the magic sequence of events that I need to create to keep this pop from happening?

Thanks in advance for any help!

-John Nagle
[import]uid: 193702 topic_id: 34591 reply_id: 334591[/import]

Generally you:

  1. create the object.
  2. set the reference point if you don’t want center
  3. set the X and Y

In your case, I would think it would be:

  1. set reference point
  2. set the X and Y
  3. scale the object.

do you have some code you can post? [import]uid: 199310 topic_id: 34591 reply_id: 137563[/import]

Hi Rob,

When you say, “set the X and Y” (step 3)…what do I set the X and Y to be? The image is already located exactly where I want it…I just want to resize it about an arbitrary point within the image.
The code is very straightforward. First, I set the reference:

T.xReference = T.cx;
T.yReference = T.cy;

Then I scale the object:

local NewScaleFac = ZoomNewDist / T.ZoomStartDist;

T.yScale = T.CurScale * NewScaleFac;
T.xScale = T.CurScale * NewScaleFac;
This is a pinch/zoom/scale multi-touch implementation I’m working on, so the xReference and yReference happens in the “begin” phase. Then as the multitouch is moved, the new scale is applied.

I really need to solve this ASAP. Thanks for your help!

-John [import]uid: 193702 topic_id: 34591 reply_id: 137591[/import]

Hi John,
Can you give me some basic dimensions (pixels) of your object, and where you’re calculating (or what you’re setting) for things like T.cx and T.cy? I might have some ideas about what’s going on, and those values would help.

Thanks,
Brent [import]uid: 200026 topic_id: 34591 reply_id: 137789[/import]

Hi Brent,

I calculate cx and cy as the midpoint between 2 touches, then use the contentToLocal to get them in object space:

T:contentToLocal( (x1+x2)/2, (y1+y2)/2 );

The images I’m scaling vary in size somewhat arbitrarily, but happens on everything from small-ish graphics to photos taken with the phone camera.

FYI…I should mention that I am working with groups here. I have a camera photo as the background image in the group and then I add smaller images on top. The idea is that the user should be able to move/size the smaller images, and zoom/pan the background.

Thanks so much, Brent, please let me know what ideas you have about my problem.

-John [import]uid: 193702 topic_id: 34591 reply_id: 137821[/import]

Hi John,
I’m looking into your issue now (diagnosing what’s going on). In the meantime, have you checked out this pinch-zoom module in the Corona Code Exchange? This might actually accomplish exactly what you need; “horacebury” (Matt) is a long-timer Corona user and knows his code quite well. :slight_smile:

http://developer.coronalabs.com/code/pinchzoom-made-real-easy

If this isn’t helpful, let me know and I’ll keep digging into this issue.

Thanks,
Brent [import]uid: 200026 topic_id: 34591 reply_id: 138017[/import]

Generally you:

  1. create the object.
  2. set the reference point if you don’t want center
  3. set the X and Y

In your case, I would think it would be:

  1. set reference point
  2. set the X and Y
  3. scale the object.

do you have some code you can post? [import]uid: 199310 topic_id: 34591 reply_id: 137563[/import]

Hi Rob,

When you say, “set the X and Y” (step 3)…what do I set the X and Y to be? The image is already located exactly where I want it…I just want to resize it about an arbitrary point within the image.
The code is very straightforward. First, I set the reference:

T.xReference = T.cx;
T.yReference = T.cy;

Then I scale the object:

local NewScaleFac = ZoomNewDist / T.ZoomStartDist;

T.yScale = T.CurScale * NewScaleFac;
T.xScale = T.CurScale * NewScaleFac;
This is a pinch/zoom/scale multi-touch implementation I’m working on, so the xReference and yReference happens in the “begin” phase. Then as the multitouch is moved, the new scale is applied.

I really need to solve this ASAP. Thanks for your help!

-John [import]uid: 193702 topic_id: 34591 reply_id: 137591[/import]

Hi John,
Can you give me some basic dimensions (pixels) of your object, and where you’re calculating (or what you’re setting) for things like T.cx and T.cy? I might have some ideas about what’s going on, and those values would help.

Thanks,
Brent [import]uid: 200026 topic_id: 34591 reply_id: 137789[/import]

Hi Brent,

I calculate cx and cy as the midpoint between 2 touches, then use the contentToLocal to get them in object space:

T:contentToLocal( (x1+x2)/2, (y1+y2)/2 );

The images I’m scaling vary in size somewhat arbitrarily, but happens on everything from small-ish graphics to photos taken with the phone camera.

FYI…I should mention that I am working with groups here. I have a camera photo as the background image in the group and then I add smaller images on top. The idea is that the user should be able to move/size the smaller images, and zoom/pan the background.

Thanks so much, Brent, please let me know what ideas you have about my problem.

-John [import]uid: 193702 topic_id: 34591 reply_id: 137821[/import]

Hi Brent,

I have seen the pinchzoom code and it is not really helpful because I’m doing something more custom for my app. I did review it, though, and noted with interest that he does not use the xReference/yReference properties.

So if you don’t mind, I’d really appreciate your continued attempts to zero in on the issue.

Thanks so much again,
-John [import]uid: 193702 topic_id: 34591 reply_id: 138428[/import]

Hi John,
I’m looking into your issue now (diagnosing what’s going on). In the meantime, have you checked out this pinch-zoom module in the Corona Code Exchange? This might actually accomplish exactly what you need; “horacebury” (Matt) is a long-timer Corona user and knows his code quite well. :slight_smile:

http://developer.coronalabs.com/code/pinchzoom-made-real-easy

If this isn’t helpful, let me know and I’ll keep digging into this issue.

Thanks,
Brent [import]uid: 200026 topic_id: 34591 reply_id: 138017[/import]

Hi Brent, any updates on this? You were investigating what the issue could be, just wanted to see if you came up with anything…

Thanks,
John [import]uid: 193702 topic_id: 34591 reply_id: 138934[/import]

Hi Brent,

I have seen the pinchzoom code and it is not really helpful because I’m doing something more custom for my app. I did review it, though, and noted with interest that he does not use the xReference/yReference properties.

So if you don’t mind, I’d really appreciate your continued attempts to zero in on the issue.

Thanks so much again,
-John [import]uid: 193702 topic_id: 34591 reply_id: 138428[/import]

Hi John,
I spent a couple hours this weekend tinkering with this, and it’s definitely odd. I suspect there’s some quirky behavior in the xReference and yReference properties only when the object is scaled, but my research hasn’t yet pinpointed this as the issue. I don’t recall mention of this anytime in the past 1-1.5 years, so I’m trying to figure out what’s going on.

If you don’t mind me asking, could you explain exactly what your scenario/goal is and how it should function? From your previous description, it sounds that you’re aiming to have individual “objects” that the user can scale/rotate via pinch-zoom and move about the scene. Will these objects be in separate display layers? You mentioned the usage of groups, so I imagine that is true.

Will you be implementing the physics engine for any reason? I might have a potential solution for you that doesn’t involve xReference and yReference, but it depends on the goal here.

Thanks for being patient here, hopefully I can help you resolve this.
Brent [import]uid: 200026 topic_id: 34591 reply_id: 138944[/import]

Thanks so much for the quick response, Brent.

Your description is exactly correct…the user must be able to click and drag objects as well as size them. The bottom-most object is no different, however because it encompasses all the other objects, the effect is a zoom.

There will not be any physics applied, so definitely let me know your thoughts.

Thanks so much again, I appreciate it.

-John [import]uid: 193702 topic_id: 34591 reply_id: 138954[/import]

Hi Brent, sorry to be a pest, do you have any new information on this issue? I’m jammed up at the moment on this, hoping to hear more about your work-around.

Thanks!
-John [import]uid: 193702 topic_id: 34591 reply_id: 139333[/import]

Hi John,
Don’t worry, you’re not being a “pest”. :slight_smile: I just have a pile of other projects that I’m digging through this week and probably next…

One thing I determined is that xReference and yReference don’t -appear- to be working properly when scaling is performed. My testing has narrowed it down to that. I still don’t know if I’m doing something wrong or not… could be my approach, but could also be a bug. I intend to submit this project as an actual bug report into the system, but that could take some time to resolve.

My current idea, since you’re using display groups (and no physics) is to scale your objects at the -group- level, with center reference, while shifting the object in the opposite direction of the touch offset. So, for example, if you have a square at 0,0 and you want to scale around the point at -100,-100 (in its relative local coordinates), you might move the entire group by -100,-100, while offsetting the square itself by 100,100 (thus, it’s as if you’re sliding the group “underneath” the square, then you scale the group by its center reference point).

I need to do some testing on this, as it’s only a theory at this point. As for your master background scaling every piece that sits atop it, that should be fine if you scale the entire stage (or parent group) of all the sub-groups that contain pieces.

I apologize for this apparent bug, and I intend to submit it a.s.a.p.

Brent [import]uid: 200026 topic_id: 34591 reply_id: 139351[/import]

Hi Brent,

Thanks for getting back to me so quickly. I had tried the technique you describe, but I didn’t spend a lot of time on that approach…I must have bungled the implementation, I’ll give it another shot.

In my experience with this issue, the xReference and yReference DO appear to be working correctly, even with scaling, but only after the object jumps to some new location. After it jumps, I can zoom it up and down ad infinitum, and it stays locked on the xRef/yRef point.

-John [import]uid: 193702 topic_id: 34591 reply_id: 139354[/import]

Hi Brent, any updates on this? You were investigating what the issue could be, just wanted to see if you came up with anything…

Thanks,
John [import]uid: 193702 topic_id: 34591 reply_id: 138934[/import]