Java-Gaming.org    
Featured games (79)
games approved by the League of Dukes
Games in Showcase (475)
Games in Android Showcase (106)
games submitted by our members
Games in WIP (530)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Basic 2D math problem  (Read 2576 times)
0 Members and 1 Guest are viewing this topic.
Offline darrinps

Senior Newbie




Java games rock!


« Posted 2012-02-17 00:12:08 »

I am a 2D novice so please forgive this question for being so simple, but at the same time no one seems to be able to give me an answer that works either so maybe it isn't so simple?

All I want to know is given a point on an image that you pan and zoom, what would that point be on the image had it not been panned and zoomed?

I have code that zooms and pans that looks like this. All I want to know is what needs to be done to get the new point (mState.touchX) projected back to what it would be in the original image.

Someone mentioned a formula that I tried to use (see the Log statements for details on it) but that didn't do it so I am asking here in the hope that someone knows how to do this.

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
43  
44  
45  
46  
47  
48  
49  
50  
51  
52  
53  
54  
55  
56  
57  
58  
59  
60  
61  
62  
63  
64  
65  
66  
67  
68  
69  
70  
71  
72  
73  
74  
75  
76  
77  
78  
79  
80  
81  
82  
83  
84  
85  
86  
87  
88  
89  
90  
91  
92  
93  
94  
95  
96  
97  
98  
99  
private void calculateAspectQuotient() 
    {
        if (mBitmap != null)
        {
            mAspectQuotient = (((float)mBitmap.getWidth()) / mBitmap.getHeight()) / (((float)getWidth()) / getHeight());
        }
    }

    // Superclass overrides

    @Override
    protected void onDraw(Canvas canvas)
    {
        if (mBitmap != null && mState != null)
        {
            final int   viewWidth    = getWidth();
            final int   viewHeight   = getHeight();
            final int   bitmapWidth  = mBitmap.getWidth();
            final int   bitmapHeight = mBitmap.getHeight();
            final float panX         = mState.getPanX();
            final float panY        = mState.getPanY();
           
            final float zoomX       = mState.getZoomX(mAspectQuotient) * viewWidth / bitmapWidth;
            final float zoomY       = mState.getZoomY(mAspectQuotient) * viewHeight / bitmapHeight;

            // Setup source and destination rectangles
           mRectSrc.left   = (int)(panX * bitmapWidth  - viewWidth  / (zoomX * 2));
            mRectSrc.top    = (int)(panY * bitmapHeight - viewHeight / (zoomY * 2));
            mRectSrc.right  = (int)(mRectSrc.left + viewWidth / zoomX);
            mRectSrc.bottom = (int)(mRectSrc.top + viewHeight / zoomY);
           
            mRectDst.left   = getLeft();
            mRectDst.top    = getTop();
            mRectDst.right  = getRight();
            mRectDst.bottom = getBottom();

            // Adjust source rectangle so that it fits within the source image.
           if (mRectSrc.left < 0)
            {
                mRectDst.left += -mRectSrc.left * zoomX;
                mRectSrc.left = 0;
            }
           
            if (mRectSrc.right > bitmapWidth)
            {
                mRectDst.right -= (mRectSrc.right - bitmapWidth) * zoomX;
                mRectSrc.right = bitmapWidth;
            }
           
            if (mRectSrc.top < 0)
            {
                mRectDst.top += -mRectSrc.top * zoomY;
                mRectSrc.top = 0;
            }
           
            if (mRectSrc.bottom > bitmapHeight)
            {
                mRectDst.bottom -= (mRectSrc.bottom - bitmapHeight) * zoomY;
                mRectSrc.bottom = bitmapHeight;
            }

            if(DebugOptions.DEBUG_ENABLED)
            {
               Log.d(TAG, "View width: " + viewWidth   + " View height: " + viewHeight);
               Log.d(TAG, "Bmap width: " + bitmapWidth + " Bmap height: " + bitmapHeight);
               Log.d(TAG, "panX:       " + panX        + " panY:      " + panY);

               Log.d(TAG, "mRectSrc.left:   " + mRectSrc.left);
               Log.d(TAG, "mRectSrc.top:    " + mRectSrc.top);
              Log.d(TAG, "mRectSrc.right:  " + mRectSrc.right);
               Log.d(TAG, "mRectSrc.bottom: " + mRectSrc.bottom);

                Log.d(TAG, "zoomX:  " + zoomX);
               Log.d(TAG, "zoomY: "  + zoomY);
               
               
               double dx = 0.5 * viewWidth - panX * bitmapWidth * zoomX;

                //This is the formula someone sugested...
              Log.d(TAG, "dx = 0.5 * viewWidth - panX * bitmapWidth * zoomX");

               Log.d(TAG, "dx = 0.5 * " + viewWidth + " - " +  panX + " * " + bitmapWidth + " * " + zoomX + " = " + dx);

               Log.d(TAG, "xo = (xt - dx) / zoomX");

               double xo = (mState.getTouchX() - dx) / zoomX;

                //Note mState.getTouchX() returns the X coordinate where the user touched the screen
              Log.d(TAG, "xo = (" + mState.getTouchX() + " - " + dx + ")" + "/" + zoomX + " = " + xo);

                //So in short, what SHOULD have been done to translate back to get the correct xo here?
              Log.d(TAG, "TouchX: " + mState.getTouchX() + "  Translated: " + xo);

               
            }
           
            canvas.drawBitmap(mBitmap, mRectSrc, mRectDst, mPaint);
        }
    }
Offline dezzroy

Senior Newbie


Exp: 10 years



« Reply #1 - Posted 2012-02-17 12:14:14 »

For panning, it's easy. Take the pixel's position in the rectangle which draws the image, then subtract the x and y offsets for panning.

For example, if panning x is 25 (moved to the right) and panning y is -10 (moved up), and you click in the rectangle which draws the image on point [2, 85], then you clicked on [ 2 - 25, 85 - (-10) ] or [-23, 95] in the original image.

For zoom, it gets more complicated. I am at work now, but when I get a chance will post my method.
Offline Roquen
« Reply #2 - Posted 2012-02-17 12:21:10 »

I stopped reading after your problem statement.  Let's work the math:

Calling the original point p and after scaling and translation p', then:

p' = s p + t

Where 's' is the scale and 't' is translation. So we want to know where: p = p'

p = s p + t
p - sp = t
p(1-s) = t
p = t/(1-s)

That equation will explode if s=1, which is to be expected, since if there is no translation all point satisfy and if there is then none will.

Or am I misreading your problem?
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline darrinps

Senior Newbie




Java games rock!


« Reply #3 - Posted 2012-02-17 22:06:01 »

I will try that and let you know.

Thanks!

Offline darrinps

Senior Newbie




Java games rock!


« Reply #4 - Posted 2012-02-20 17:56:33 »

OK, I tried that but it doesn't seem like it works.

In short, I did this:


1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
   float t = panX * viewWidth;
               
          float p;
               
        //Do this in case the zoom is very close to 1
         if(zoomX > 0.95 && zoomX < 1.05)
          {
             p = t;
          }
          else
          {
             p = t / (1 - zoomX);
          }



I think you are saying that t needs to be in pixels and not in a percentage right? That's why I calculated it like I did.  

Hmm...looks like the thing is flipping the panX and viewWidth values to be what they should be in portrait rather than landscape mode (this is on a phone). That might have been part of the problem. I'll play around with it some more and post back what I come up with.

Thanks.
Offline Roquen
« Reply #5 - Posted 2012-02-21 11:50:09 »

Here's the deal.  I'm not sure I'm understanding your problem statement.  What I've given you is for:  After the transform, what ideal point  (not pixel) is the in same position as the untransformed.  You might really be wanting: What's this point in the transformed image in terms of the untransformed.
Offline darrinps

Senior Newbie




Java games rock!


« Reply #6 - Posted 2012-02-21 22:20:47 »

Actually I think I might have it using my own calculation. At least I think it seems to be working. Haven't tested it thoroughly yet. Code looks something like this:

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
   private void corelatePoints(Rect phoneRect, Rect imageRect, int xTouch, int yTouch)
   {
      //Shift out the pan
     int xIntermediate = xTouch - phoneRect.left;
      int yIntermediate = yTouch - phoneRect.top;

      //Now correct for the zoom
     float xRatio = (phoneRect.right  - phoneRect.left) / (float)(imageRect.right  - imageRect.left);
      float yRatio = (phoneRect.bottom - phoneRect.top)  / (float)(imageRect.bottom - imageRect.top);

      int xOriginal = (int)(xIntermediate / xRatio);
      int yOriginal = (int)(yIntermediate / yRatio);
     
      Point pImage = new Point();
      pImage.x = xOriginal;
      pImage.y = yOriginal;
     
      Point pPhone = new Point();
      pPhone.x = (int)mState.getTouchX();
      pPhone.y = (int)mState.getTouchY();
     
     
      callback.coordinateTouched(pPhone, pImage);
   }

[code]
[/code]
Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

ctomni231 (34 views)
2014-07-18 06:55:21

Zero Volt (30 views)
2014-07-17 23:47:54

danieldean (25 views)
2014-07-17 23:41:23

MustardPeter (27 views)
2014-07-16 23:30:00

Cero (42 views)
2014-07-16 00:42:17

Riven (44 views)
2014-07-14 18:02:53

OpenGLShaders (33 views)
2014-07-14 16:23:47

Riven (34 views)
2014-07-14 11:51:35

quew8 (30 views)
2014-07-13 13:57:52

SHC (66 views)
2014-07-12 17:50:04
HotSpot Options
by dleskov
2014-07-08 03:59:08

Java and Game Development Tutorials
by SwordsMiner
2014-06-14 00:58:24

Java and Game Development Tutorials
by SwordsMiner
2014-06-14 00:47:22

How do I start Java Game Development?
by ra4king
2014-05-17 11:13:37

HotSpot Options
by Roquen
2014-05-15 09:59:54

HotSpot Options
by Roquen
2014-05-06 15:03:10

Escape Analysis
by Roquen
2014-04-29 22:16:43

Experimental Toys
by Roquen
2014-04-28 13:24:22
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!