Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Go Back  Xtreme Visual Basic Talk > > > Using Slope/Distance/Coordinates to Move an Image.


Reply
 
Thread Tools Display Modes
  #1  
Old 01-25-2013, 02:41 AM
Under Study Under Study is offline
Regular
 
Join Date: Jul 2008
Posts: 83
Default Using Slope/Distance/Coordinates to Move an Image.


Ok, so sometimes math hurts my head. Im sure Ive just been looking at this problem for to long and its reality its really easy.

So what I want to be able to do is wherever I click on the form, it will cause the image Ive painted to the background of the form to move from the place Ive clicked to the center of the form. Now that would be simple but I don't what it to be a "click and done" sort of move, but rather for it to move over X amount of time.

To help maybe get my idea across, it would be the style of game where the player stays in the center of the screen and the grounds moves around them.

My original idea was to find the center coordinates of the form that is set up to be full screen.

In form load
Code:
        
        Me.Size = New Size(My.Computer.Screen.WorkingArea.Width, My.Computer.Screen.WorkingArea.Height)
        Form_Width = My.Computer.Screen.WorkingArea.Width
        Form_Hight = My.Computer.Screen.WorkingArea.Height
And then to use the Mouse click even to find the coordinates of the mouse click

Code:
    Private Sub Control1_MouseClick(ByVal sender As Object, ByVal e As MouseEventArgs) _
        Handles Me.MouseClick
        x2 = e.X
        y2 = e.Y
        
        Find_Slope()
    End Sub
Then find the slope and distance between the center of the form and the click coordinates

Code:
    Public Sub Find_Slope()
        x1 = (Form_Width / 2) 'This gives the center coordinates'
        y1 = (Form_Hight / 2)

        Slope = (y2 - y1) / (x2 - x1)
        Distance = (((x2 - x1) ^ 2) + ((y2 - y1) ^ 2))
    End Sub
So that is basically all Ive got so far. I know im going to need a Timer if I want the image to move between the two points. I thought I would be able to plot points alone the slope but im not sure how. Also sense the center of the form isn't at point (0,0) im kind of worried of getting coordinates mixed up or just off a bit causing things to get screwy but thats for another day.

Anyway, im working on vb08 but also have vb12. Thanks for any help.
Reply With Quote
  #2  
Old 01-25-2013, 04:44 PM
passel's Avatar
passelUsing Slope/Distance/Coordinates to Move an Image. passel is offline
Sinecure Expert

Super Moderator
* Guru *
 
Join Date: Jun 2003
Location: Upstate New York, usa
Posts: 8,026
Default

A little surprised no one has responded yet. Had a leaky tank in a water heater so I've been distracted this morning.

You probably don't need slope directly, and how you move depends on your objective.
For instance one form of movement might want to have a consistent time for the move, i.e. each you click on the form and the background moves over a period of two seconds to reposition. The reposition time would always be two seconds, so if the distance you have to move is short, the motion is slow, but if they click in a far corner, then the motion is "fast", so that you always reach your destination in two seconds, and you can cover ground quicker if you click farther away from center.
This is one of the easier motions, since you just divide the distance you need to move in X and Y by a constant value.
You don't need to calculate total distance or slope in that case.
Example, say I update the screen at 30 hz, so that means there will be 60 frames over a two second period.
I therefore only need to find out how far I want to move each frame to reach my destination, i.e.
dx = (X2 -X1) / 60
dy = (Y2 - Y1) / 60

Then, over the next 59 frames just add dx to the X position and dy to Y position to move that distance over a two second period.
Time is constant (two seconds), distance moved per second varies.

If on the other you want to move at a constant speed so it takes longer to travel to a point further from your current condition, , that is distance per second is constant, the time varies, then you would use your distance calculation to determine how long you need to travel to get to your destination (not the only way to do it, but similar to the constant Time method).
So, say your desired speed is 100 pixels per second.
Divide your distance by your speed to get time.
DeltaTime = Distance/100 'time in seconds to travel the distance.
NumberOfFramesToGoTheDistance = DeltaTime * 30 'still assuming 30 frames per second.
dx = (X2 - X1) / NumberOfFramesToGoTheDistance
dy = (Y2 - Y1) / NumberOfFramesToGoTheDistance

Then each cycle move your position by dx and dy, decrementing NumberOfFramesToGoTheDistance, and when it reaches 0, you should be there.
Due to posible rounding issues, when taking the last step I usually just move to x2,y2 so I end up exactly on the pixel clicked.
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
Reply With Quote
  #3  
Old 01-26-2013, 01:17 AM
Under Study Under Study is offline
Regular
 
Join Date: Jul 2008
Posts: 83
Default

Thank you! I went with the second method and it works! You explained everything so well I feel foolish for not having thought of that myself. Now my only follow up question is this. Is there anyway by using directx that i could make the graphics load more seamlessly? Maybe get more frames per second?
Reply With Quote
  #4  
Old 01-26-2013, 05:30 AM
Under Study Under Study is offline
Regular
 
Join Date: Jul 2008
Posts: 83
Default

Not to keep asking questions, but google doesn't seem to know what im asking. Currently my form is full screened with coordinate (0,0) at the top left of the form. Is there any way to change that so it defaults to the center of the form being (0,0)?

Thanks!!
Reply With Quote
  #5  
Old 01-26-2013, 03:23 PM
bokeh bokeh is offline
Regular
 
Join Date: Aug 2012
Posts: 60
Default Coordinate transforms and translations

Quote:
Originally Posted by Under Study
Currently my form is full screened with coordinate (0,0) at the top left of the form. Is there any way to change that so it defaults to the center of the form being (0,0)?
I believe what you probably need is some transform translation code.

passel is the expert on these matrix transforms as you will see if you read through this thread.

In one of the posts from that thread he says:
Quote:
What the matrix transforms have done is move the coordinate system (0,0 is moved from the upper left corner,
to somewhere else by the translate transform..
I don't know much about matrix transforms except what I've learned from reading through passel's posts,
but I know the main MSDN page for Coordinates Systems is this page,
and you should probably also check out the Matrix class page as well as the Matrix.Translate method.

Last edited by bokeh; 01-26-2013 at 03:29 PM.
Reply With Quote
  #6  
Old 01-26-2013, 04:01 PM
Under Study Under Study is offline
Regular
 
Join Date: Jul 2008
Posts: 83
Default

Wow Bokeh... Mind Exploded ...

It seems like Matrix.translate method can do a lot of things and they are different in different frameworks (i think)... so im completely lost but I feel like im on the right track now. Ill keep reading! Thanks for the help!


*Edit
I think I sort of figured it out but if I am correct it only effects the paint function. Im really looking for a way to have the (0,0) coordinate centered on my screen so i can get those coordinates on a mouse click even. Does that makes sense?

Last edited by Under Study; 01-26-2013 at 04:46 PM.
Reply With Quote
  #7  
Old 01-27-2013, 09:00 PM
passel's Avatar
passelUsing Slope/Distance/Coordinates to Move an Image. passel is offline
Sinecure Expert

Super Moderator
* Guru *
 
Join Date: Jun 2003
Location: Upstate New York, usa
Posts: 8,026
Default

In .Net (GDI+), the mouse coordinates will always be reported in Device coordinates so you have to convert the device coordinates into the coordinate system you want.
Assuming you're not changing your page units, just using the default units and translating your world coordinates to someplace in your window (i.e. you translate the coordinates you use for drawing (world coordinates) into device coordinates using the matrix), then you can use a reversed version of the matrix to take mouse position (device coordinates) into world coordinates (the coordinate system of your drawing).

Something along these lines (writing off the cuff, didn't test so could be an error, but should point you in the right direction)
Code:
'at the class scope, declare a matrix
Dim MouseToWorld as New Matrix()

'In the drawing routine, save the matrix used to draw with (after you've set it up) and invert it.
MouseToWorld = e.Grapihcs.Transform
MouseToWorld.Invert()

'In the mouse events, 
'if the Matrix has been set, you can use it to convert mouse coordinates
'to drawing coordinates (method expects an array of points)

Dim pts() As PointF = {e.Location}   'set the array to the mouse location
MouseToWorld.TransformPoints(pts)   'transform them to the drawing coordinates
Debug.Write("Loc: " + e.Location.ToString())    'just for verification, print the two sets
Debug.WriteLine(" World:" & pts(0).ToString())  'and the X value of the converted value
p.s. Changed the declaration of the MouseToWorld Matrix as a "new" Matrix initially so you won't get a null exception in the mouse events, in case you happen to get one before you've done your first drawing.
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.

Last edited by passel; 01-27-2013 at 09:07 PM.
Reply With Quote
  #8  
Old 02-03-2013, 09:24 AM
Under Study Under Study is offline
Regular
 
Join Date: Jul 2008
Posts: 83
Default

Hey Passel, Thanks for all your help! One thing is still messing with me on this matrix thing and im sure I just have a line of code in the wrong place or something but ive tried everything this past week and still can't find out where im going wrong.

So basically I want the dead center of my form to be at coordinate (0,0) and by clicking my mouse in the four quadrants return the coordinates that i clicked. This is the code I have currently based on your last post.

Code:
Imports System.Drawing.Drawing2D
_______________________________
Public Class Form1

    Dim MouseToWorld As New Matrix()

________________________________

    Private Sub Control1_MouseClick(ByVal sender As Object, ByVal e As MouseEventArgs) _
        Handles Me.MouseClick
        
        Dim pts() As PointF = {e.Location}   'set the array to the mouse location
        MouseToWorld.TransformPoints(pts)   'transform them to the drawing coordinates
        Debug.Write("Loc: " + e.Location.ToString())    'just for verification, print the two sets
        Debug.WriteLine(" World:" & pts(0).ToString())  'and the X value of the converted value

        x2 = e.X
        y2 = e.Y

        Label1.Text = "X2 = " & e.X & "   Y2 = " & e.Y   'To display clicked coordinates in text box

    End Sub

________________________________
    Private Sub PaintForm(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint


        MouseToWorld = e.Graphics.Transform
        MouseToWorld.Translate(500, 500)   'My form is 1000 by 1000 so offsetting X & Y should put center of form to (0,0) 

    End Sub

It doesn't change the coordinate that are received and then displayed on the mouse click event but it does seem to change the starting location of an image if im using the paint event to draw and image to the form.

Man, i really thought i knew what i was doing with this at first. thanks again for all the help.
Reply With Quote
  #9  
Old 02-04-2013, 02:48 PM
passel's Avatar
passelUsing Slope/Distance/Coordinates to Move an Image. passel is offline
Sinecure Expert

Super Moderator
* Guru *
 
Join Date: Jun 2003
Location: Upstate New York, usa
Posts: 8,026
Default

Generally, you would do the drawing as you normally would, which would be to use the Graphics object passed to you (e.Graphics).
You would save the state of that transform as used to do the drawing, inverted, to use in translating device coordinates (mouse coordinates) to World coordinates (drawing coordinates).

Here's a modified version of your code, with some drawing included. If you click inside the circles you should see values close in magnitude to 50,50, except for the center circle which should be near 0,0 in magnitude.
Code:
Imports System.Drawing.Drawing2D

Public Class Form1

  Dim MouseToWorld As New Matrix()

  Private Sub Control1_MouseClick(ByVal sender As Object, ByVal e As MouseEventArgs) _
      Handles Me.MouseClick

    Dim pts() As PointF = {e.Location}   'set the array to the mouse location
    MouseToWorld.TransformPoints(pts)   'transform them to the drawing coordinates

    If Label1.Font.Size <> 20 Then
      Label1.Font = New Font("courier", 20)
    End If
    Label1.Text = pts(0).ToString

  End Sub

  Private Sub PaintForm(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint

    e.Graphics.TranslateTransform(500, 500)  'move 0,0 (world)  to 500,500 (device)
    'Create four circles, one in each quadrant, centered on relative 50,50  from center in each quandrant
    e.Graphics.DrawEllipse(Pens.Black, -50 - 6, -50 - 6, 12, 12)  'upper Left
    e.Graphics.DrawEllipse(Pens.Black, 50 - 6, -50 - 6, 12, 12) 'upper right
    e.Graphics.DrawEllipse(Pens.Black, 50 - 6, 50 - 6, 12, 12)  'lower right
    e.Graphics.DrawEllipse(Pens.Black, -50 - 6, 50 - 6, 12, 12) 'lower left
    'Plus one, dead center
    e.Graphics.DrawEllipse(Pens.Red, 0 - 6, 0 - 6, 12, 12) 'Centered at 0,0

    MouseToWorld = e.Graphics.Transform  'Save the transform used
    MouseToWorld.Invert()   'and invert it to translate mouse coordinates to drawing coordinates

  End Sub

End Class
__________________
There Is An Island Of Opportunity In The Middle of Every Difficulty.
Miss That, Though, And You're Pretty Much Doomed.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image. Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
 
Using Slope/Distance/Coordinates to Move an Image.
Using Slope/Distance/Coordinates to Move an Image.
 
-->