Zoom to New Centre - GameCreators Forum

Author

Message

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 18th Aug 2013 19:24

Link

Hi guy, I'm trying to work out how you zoom to the mouse position rather than the centre of the screen which once zoomed becomes the new centre point for zooming.

This is a old video of what I've been working on for keyframe animation, way more advanced now but as you can see in the vid, it zooms to the centre which is why I have to keep panning to where I want it.

Here's a quick example I made of the core zooming element:

// math class
type vector2
    x                   as float
    y                   as float
endtype

type vector3
    x                   as float
    y                   as float
    z                   as float
endtype

global _vector2         as vector2
global _vector3         as vector3

// mouse class
type inputMouse
    click               as integer
    oldClick            as integer
    pos                 as vector3
    velocity            as vector3
endtype

global _inputMouse as inputMouse

// screen class
type displayClient
    perPixelUnit        as float
    pos                 as vector2
    dragPos             as vector2
    drag                as byte
    zoom                as float
    zoomVal             as float
    zoomFactor          as float
    width               as float
    height              as float
endtype

global _displayClient   as displayClient
global _scaleCalc       as float
global _fullScaleCalc   as vector2

// setup display
_displayClient.perPixelUnit = 1
_displayClient.zoomVal      = 0
_displayClient.zoomFactor   = 0.001
_displayClient.width        = screen width()
_displayClient.height       = screen height()

// random box class
type boxes
    x   as float
    y   as float
    size as float
    color as dword
endtype

global dim _boxes(200) as boxes

for n = 0 to 200
    _boxes(n).x = -400+rnd(800)
    _boxes(n).y = -400+rnd(800)
    _boxes(n).size = 10+rnd(60)
    _boxes(n).color = rgb(rnd(255),rnd(255),rnd(255)) 
next

sync on : sync rate 60

do : cls rgb(56,56,56)

updateInput()
    updateDisplayClient()

globalToLocalVector( 0, 0 )
    box _vector2.x-1, 0, _vector2.x+1, _displayClient.height, rgb(82,82,82)
    box 0, _vector2.y-1, _displayClient.width, _vector2.y+1, rgb(0,0,0)

for n = 0 to 200
        drawBox( _boxes(n).x, _boxes(n).y, _boxes(n).size, _boxes(n).color )
    next

sync
loop

// input functions
function updateInput()

// mouse input
    _inputMouse.oldClick            = _inputMouse.click
    _inputMouse.click               = mouseclick()
    
    setVector3( mousex(), mousey(), mousez() )
    _inputMouse.pos                 = _vector3

setVector3( mousemovex(), mousemovey(), mousemovez() )
    _inputMouse.velocity            = _vector3

endfunction

// display client function
function updateDisplayClient()

// update display client
    
    // update zooming
    _displayClient.zoom = 2 ^ _displayClient.zoomVal
    inc _displayClient.zoomVal, (_inputMouse.velocity.z * _displayClient.zoomFactor)
    
    // just to minimize calculations
    _scaleCalc = _displayClient.perPixelUnit*_displayClient.zoom
    
    // this is for draging the position of the 2d display, so panning
    if not _inputMouse.click
        _displayClient.drag = 0
        _displayClient.dragPos.x = 0
        _displayClient.dragPos.y = 0        
    endif
    
    if _displayClient.drag = 0
        if _inputMouse.click = 1
            _displayClient.drag = 1
            _displayClient.dragPos.x = (_inputMouse.pos.x/_scaleCalc) - _displayClient.pos.x
            _displayClient.dragPos.y = (_inputMouse.pos.y/_scaleCalc) - _displayClient.pos.y
        endif
    endif
    
    if _displayClient.drag
        _displayClient.pos.x = (_inputMouse.pos.x/_scaleCalc) - _displayClient.dragPos.x
        _displayClient.pos.y = (_inputMouse.pos.y/_scaleCalc) - _displayClient.dragPos.y
    endif
    
endfunction

function globalToLocalVector( x as float, y as float )
    _vector2.x = ((x + _displayClient.pos.x)*_scaleCalc)+0.5*_displayClient.width
    _vector2.y = ((y + _displayClient.pos.y)*_scaleCalc)+0.5*_displayClient.height
endfunction

// drawing functions
function drawBox( x as float, y as float, size as float, color as dword )
    
    local p0 as vector2
    local p1 as vector2
    
    size = .5 * size
    globalToLocalVector( x-size, y-size ) : p0 = _vector2
    globalToLocalVector( x+size, y+size ) : p1 = _vector2
    
    ink color,0
    box p0.x,p0.y,p1.x,p1.y

endfunction

// vector functions
function setVector3( x as float, y as float, z as float )
    _vector3.x = x : _vector3.y = y : _vector3.z = z
endfunction

+ Code Snippet

// math class
type vector2
    x                   as float
    y                   as float
endtype

type vector3
    x                   as float
    y                   as float
    z                   as float
endtype

global _vector2         as vector2
global _vector3         as vector3

// mouse class
type inputMouse
    click               as integer
    oldClick            as integer
    pos                 as vector3
    velocity            as vector3
endtype

global _inputMouse as inputMouse

// screen class
type displayClient
    perPixelUnit        as float
    pos                 as vector2
    dragPos             as vector2
    drag                as byte
    zoom                as float
    zoomVal             as float
    zoomFactor          as float
    width               as float
    height              as float
endtype

global _displayClient   as displayClient
global _scaleCalc       as float
global _fullScaleCalc   as vector2

// setup display
_displayClient.perPixelUnit = 1
_displayClient.zoomVal      = 0
_displayClient.zoomFactor   = 0.001
_displayClient.width        = screen width()
_displayClient.height       = screen height()

// random box class
type boxes
    x   as float
    y   as float
    size as float
    color as dword
endtype

global dim _boxes(200) as boxes

for n = 0 to 200
    _boxes(n).x = -400+rnd(800)
    _boxes(n).y = -400+rnd(800)
    _boxes(n).size = 10+rnd(60)
    _boxes(n).color = rgb(rnd(255),rnd(255),rnd(255)) 
next

sync on : sync rate 60

do : cls rgb(56,56,56)

    updateInput()
    updateDisplayClient()

    globalToLocalVector( 0, 0 )
    box _vector2.x-1, 0, _vector2.x+1, _displayClient.height, rgb(82,82,82)
    box 0, _vector2.y-1, _displayClient.width, _vector2.y+1, rgb(0,0,0)

    for n = 0 to 200
        drawBox( _boxes(n).x, _boxes(n).y, _boxes(n).size, _boxes(n).color )
    next

    sync
loop

// input functions
function updateInput()

    // mouse input
    _inputMouse.oldClick            = _inputMouse.click
    _inputMouse.click               = mouseclick()
    
    setVector3( mousex(), mousey(), mousez() )
    _inputMouse.pos                 = _vector3

    setVector3( mousemovex(), mousemovey(), mousemovez() )
    _inputMouse.velocity            = _vector3

endfunction

// display client function
function updateDisplayClient()

    // update display client
    
    // update zooming
    _displayClient.zoom = 2 ^ _displayClient.zoomVal
    inc _displayClient.zoomVal, (_inputMouse.velocity.z * _displayClient.zoomFactor)
    
    // just to minimize calculations
    _scaleCalc = _displayClient.perPixelUnit*_displayClient.zoom
    
    // this is for draging the position of the 2d display, so panning
    if not _inputMouse.click
        _displayClient.drag = 0
        _displayClient.dragPos.x = 0
        _displayClient.dragPos.y = 0        
    endif
    
    if _displayClient.drag = 0
        if _inputMouse.click = 1
            _displayClient.drag = 1
            _displayClient.dragPos.x = (_inputMouse.pos.x/_scaleCalc) - _displayClient.pos.x
            _displayClient.dragPos.y = (_inputMouse.pos.y/_scaleCalc) - _displayClient.pos.y
        endif
    endif
    
    if _displayClient.drag
        _displayClient.pos.x = (_inputMouse.pos.x/_scaleCalc) - _displayClient.dragPos.x
        _displayClient.pos.y = (_inputMouse.pos.y/_scaleCalc) - _displayClient.dragPos.y
    endif
    
endfunction

function globalToLocalVector( x as float, y as float )
    _vector2.x = ((x + _displayClient.pos.x)*_scaleCalc)+0.5*_displayClient.width
    _vector2.y = ((y + _displayClient.pos.y)*_scaleCalc)+0.5*_displayClient.height
endfunction

// drawing functions
function drawBox( x as float, y as float, size as float, color as dword )
    
    local p0 as vector2
    local p1 as vector2
    
    size = .5 * size
    globalToLocalVector( x-size, y-size ) : p0 = _vector2
    globalToLocalVector( x+size, y+size ) : p1 = _vector2
    
    ink color,0
    box p0.x,p0.y,p1.x,p1.y

endfunction

// vector functions
function setVector3( x as float, y as float, z as float )
    _vector3.x = x : _vector3.y = y : _vector3.z = z
endfunction

"Get in the Van!" - Van B

Back to top

Profile PM Email

Mobiius

Valued Member

23

Years of Service

User Offline

Joined: 27th Feb 2003

Location: The Cold North

Posted: 18th Aug 2013 19:25

Link

The video is private.

Now Visit My Website

Back to top

Profile PM Email Website

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 18th Aug 2013 19:32

Link

Vid Fixed

"Get in the Van!" - Van B

Back to top

Profile PM Email

BMacZero

20

Years of Service

User Offline

Joined: 30th Dec 2005

Location: E:/ NA / USA

Posted: 18th Aug 2013 23:18

Link

There are two ways of doing this I can think of, and I'm not sure which one you're going for.

The easier one would be to recenter the mouse and the camera whenever the user attempts to scroll. Find the position of the mouse and the camera center in your "world" (as opposed to on the screen), and move the camera by the difference between those two to recenter it. Then move the mouse to the screen center with position mouse.

The way you usually see in things like this is to just have the camera sort of "focus" on the mouse point when you zoom. I guess this would be considered "better", though I sometimes get confused by programs that work like this because I don't expect the location of the mouse cursor to affect the behavior of zooming (Photoshop, for example, doesn't do this and works just like the video you provided).

Anyway, to do that I though the most straightforward way would be to move the camera around based on the distance from the mouse to the camera center, and the relative zoom being made. Here's some code that does that, it ended up being rather more complicated than I expected, but hopefully it's applicable.

sync on
sync rate 0

global camZoom#
camZoom# = 1
#constant CAM_MAX_ZOOM 4.0
#constant CAM_MIN_ZOOM 0.5

#constant LINESPACEWORLD 20
#constant WORLDSIZE 980

global camWorldX#
camWorldX# = 0
global camWorldY#
camWorldY# = 0

do

cls rgb(255, 255, 255)

//Zoom logic
mmz = mousemovez()
if (mmz)
    oldZoom# = camZoom#
    
    //Update the zoom level
    camZoom# = clamp(camZoom# + mmz / 1000.0, CAM_MIN_ZOOM, CAM_MAX_ZOOM)
    
    //Figure out how much to move the camera to compensate for zooming
    relZoom# = camZoom# / oldZoom#
    camMoveRatio# = 0
    if (relZoom# < 1)
        camMoveRatio# = -(1 / relZoom#)+1
    else
        camMoveRatio# = relZoom#-1
    endif
    
    //Base the compensation off of whichever zoom is bigger, the old or the new
    //Those zeros represent wherever the camera "wants" to zoom from
    //My camera is centered in the top left
    distanceFromCenterX# = (mousex() - 0) / max(camZoom#, oldZoom#)
    distanceFromCenterY# = (mousey() - 0) / max(camZoom#, oldZoom#)
    
    //Finally, move the camera
    inc camWorldX#, distanceFromCenterX# * camMoveRatio#
    inc camWorldY#, distanceFromCenterY# * camMoveRatio#
endif

//Just draw some stuff so we can see what's going on
for x = 0 to WORLDSIZE / LINESPACEWORLD
for y = 0 to WORLDSIZE / LINESPACEWORLD
    ink rgb((x mod 10)*25, (y mod 10)*25, (x*y mod 50)*5)
    box WorldToScreenX(x*LINESPACEWORLD), WorldToScreenY(y*LINESPACEWORLD), WorldToScreenX((x+1)*LINESPACEWORLD), WorldToScreenY((y+1)*LINESPACEWORLD)
next y
next x

sync
loop

end

//Helpers to convert from screen coordinates to "world" coordinates

function WorldToScreenX(wpos as float)
spos = (wpos - camWorldX#) * camZoom#
endfunction spos

function WorldToScreenY(wpos as float)
spos = (wpos - camWorldY#) * camZoom#
endfunction spos

function ScreenToWorldX(spos as float)
wpos = spos / camZoom# + camWorldX#
endfunction wpos

function ScreenToWorldY(spos as float)
wpos = spos / camZoom# + camWorldY#
endfunction wpos

+ Code Snippet

sync on
sync rate 0

global camZoom#
camZoom# = 1
#constant CAM_MAX_ZOOM 4.0
#constant CAM_MIN_ZOOM 0.5

#constant LINESPACEWORLD 20
#constant WORLDSIZE 980

global camWorldX#
camWorldX# = 0
global camWorldY#
camWorldY# = 0

do

cls rgb(255, 255, 255)

//Zoom logic
mmz = mousemovez()
if (mmz)
    oldZoom# = camZoom#
    
    //Update the zoom level
    camZoom# = clamp(camZoom# + mmz / 1000.0, CAM_MIN_ZOOM, CAM_MAX_ZOOM)
    
    //Figure out how much to move the camera to compensate for zooming
    relZoom# = camZoom# / oldZoom#
    camMoveRatio# = 0
    if (relZoom# < 1)
        camMoveRatio# = -(1 / relZoom#)+1
    else
        camMoveRatio# = relZoom#-1
    endif
    
    //Base the compensation off of whichever zoom is bigger, the old or the new
    //Those zeros represent wherever the camera "wants" to zoom from
    //My camera is centered in the top left
    distanceFromCenterX# = (mousex() - 0) / max(camZoom#, oldZoom#)
    distanceFromCenterY# = (mousey() - 0) / max(camZoom#, oldZoom#)
    
    //Finally, move the camera
    inc camWorldX#, distanceFromCenterX# * camMoveRatio#
    inc camWorldY#, distanceFromCenterY# * camMoveRatio#
endif

//Just draw some stuff so we can see what's going on
for x = 0 to WORLDSIZE / LINESPACEWORLD
for y = 0 to WORLDSIZE / LINESPACEWORLD
    ink rgb((x mod 10)*25, (y mod 10)*25, (x*y mod 50)*5)
    box WorldToScreenX(x*LINESPACEWORLD), WorldToScreenY(y*LINESPACEWORLD), WorldToScreenX((x+1)*LINESPACEWORLD), WorldToScreenY((y+1)*LINESPACEWORLD)
next y
next x

sync
loop

end


//Helpers to convert from screen coordinates to "world" coordinates

function WorldToScreenX(wpos as float)
spos = (wpos - camWorldX#) * camZoom#
endfunction spos

function WorldToScreenY(wpos as float)
spos = (wpos - camWorldY#) * camZoom#
endfunction spos

function ScreenToWorldX(spos as float)
wpos = spos / camZoom# + camWorldX#
endfunction wpos

function ScreenToWorldY(spos as float)
wpos = spos / camZoom# + camWorldY#
endfunction wpos

Back to top

Profile PM Email Website

Sergey K

22

Years of Service

User Offline

Joined: 4th Jan 2004

Location:

Posted: 19th Aug 2013 00:17 Edited at: 19th Aug 2013 00:18

Link

wow looks amazing what you've done here..

im sure that DreamEditor's creator would be very intrested on this one

nice job man.

try taking it to a next level..
with curving the edges and magnetizing to a rounded numbers..

Stream SnifferTools/Plugins/Models/Games and more!

Back to top

Profile PM Website

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 19th Aug 2013 01:00

Link

BMacZero, cheers and I'll try it out. What I find difficult and can't get my head round is panning the camera and changing the centre point of where it zooms to. I just can't combine the to, but I'll have a try with some of the ideas you have presented.

Quote: "nice job man."

Cheers man! That version is the mini version that is a tiny on demand bit of code that can be inserted into any code. Was gonna release it but then thought I want my engine to stand out so I didn't

Quote: "try taking it to a next level..
with curving the edges and magnetizing to a rounded numbers.."

Got a vid come out soon for my editor for my engine Scope showcasing keyframing! It will blow you guys away (I hope)! That vid is nearly a year old and I've been working on it since

"Get in the Van!" - Van B

Back to top

Profile PM Email

Le Verdier

14

Years of Service

User Offline

Joined: 10th Jan 2012

Location: In the mosh-pit

Posted: 19th Aug 2013 01:52 Edited at: 20th Aug 2013 02:42

Link

I think it is just an offset to add, considering the graph is still handled at the center
Here are my thoughts: (bold variables are vectors)

DeltaMouse = MousePos - ScreenCenter

The graph coords are
GraphCoordUnderMouse = GraphCoordAtCenter + DeltaMouse / Scale#

while zooming, GraphCoordUnderMouse would be also equals to:
GraphCoordUnderMouse = NewGraphCoordAtCenter + DeltaMouse / NewScale#

The wanted result is NewGraphCoordAtCenter so:
NewGraphCoordAtCenter = GraphCoordUnderMouse - DeltaMouse / NewScale#

...
This curve editor looks really cool!

Back to top

Profile PM

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 19th Aug 2013 21:25

Link

This is far more difficult than I imagined. Why it's hard is because:

1. The graph values need to be flipped so everything is position UP+Right ways rather than Down+Right ways. This messes up the calc for zoom to a new centre.

2. The graph isn't the whole screen, it's with in a rect.

These are the main issues I just can't get round which the given examples cheers Le Verdier and BMacZero don't really address.

"Get in the Van!" - Van B

Back to top

Profile PM Email

Le Verdier

14

Years of Service

User Offline

Joined: 10th Jan 2012

Location: In the mosh-pit

Posted: 19th Aug 2013 21:56

Link

I'll try to post a little example tomorow, it's something I've already done in my trackeditor program.

Back to top

Profile PM

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 19th Aug 2013 22:51

Link

Cheers Le Verdier, I seeing your work, it's really great stuff

I'll keep going at it, this thing won't beat me!

"Get in the Van!" - Van B

Back to top

Profile PM Email

Latch

19

Years of Service

User Offline

Joined: 23rd Jul 2006

Location:

Posted: 19th Aug 2013 23:10 Edited at: 19th Aug 2013 23:11

Link

Hi Sasuke,

Let's assume there are maximums to how far out or in you can zoom. We'll say the farthest out is 1 and closest in is 100. At 1, this represents the entire graph or maximum screen pixels for the graph. At 100, it's the maximum pixels/100 .

At any level, the mouse has a relative position to level 1. The capture will always be from the relative position to the center of the display screen.

For example, if the the display is a level 20 zoom, then the capture is the pixel map from level1/20 starting from the pixel position the mouse is at a level 1. If the mouse is at 10,10 and level 1 pixel map is 1000,1000, the capture area is 10-(500/20) 10+(500/20) , 10-(500/20) 10+(500/20)

Capture these pixels and put them on the display starting at 0,0. You can handle the negative values by making them all black pixels or an empty grid.

Enjoy your day.

Back to top

Profile PM

Le Verdier

14

Years of Service

User Offline

Joined: 10th Jan 2012

Location: In the mosh-pit

Posted: 20th Aug 2013 02:30 Edited at: 20th Aug 2013 02:38

Link

Here is my little example:

Type TObject
    X#, Y#, Radius#
EndType

Dim Objects(49) As TObject

Global RectWidth#
Global RectHeight#
Global HalfRectWidth#
Global HalfRectHeight#
Global XAtCenter#
Global YAtCenter#
Global Scale#
Global ZoomLevel

For i = 0 To 49
        Objects(i).X# = -512.0 + Rnd(1024)
        Objects(i).Y# = -512.0 + Rnd(1024)
        Objects(i).Radius# = 10.0 + Rnd(20)
    Next

RectWidth# = Screen Width(): RectHeight# = Screen Height()
    HalfRectWidth# = RectWidth# * 0.5: HalfRectHeight# = RectHeight# * 0.5

Dim ZoomLevels#(18)
    Zoom# = 0.5
    For i = 0 To 18
        ZoomLevels#(i) = Zoom#: Zoom# = Zoom# * 1.1
    Next

ZoomLevel = 9
    Scale# = ZoomLevels#(ZoomLevel)
    Redraw()

Do
        mmz = MouseMoveZ()
        NewScale# = Scale#
        If mmz > 0
            Inc ZoomLevel: If ZoomLevel > 18 Then ZoomLevel = 18 Else NewScale# = ZoomLevels#(ZoomLevel)
        EndIf
        If mmz < 0
            Dec ZoomLevel: If ZoomLevel <  0 Then ZoomLevel =  0 Else NewScale# = ZoomLevels#(ZoomLevel)
        EndIf

If NewScale# <> Scale#
            DeltaMouseX# = MouseX() - HalfRectWidth#: DeltaMouseY# = MouseY() - HalfRectHeight#

CoordXUnderMouse# = XAtCenter# + DeltaMouseX# / Scale#
            CoordYUnderMouse# = YAtCenter# - DeltaMouseY# / Scale#

XAtCenter# = CoordXUnderMouse# - DeltaMouseX# / NewScale#
            YAtCenter# = CoordYUnderMouse# + DeltaMouseY# / NewScale#

Scale# = NewScale#
            Redraw()
        EndIf

If MouseClick() = 2 Then CaptureScroll()

Sync
    Loop

End

Function CaptureScroll()

OrgXAtCenter# = XAtCenter#: OrgYAtCenter# = YAtCenter#
    OrgMouseX = MouseX(): OrgMouseY = MouseY()

Do
        If MouseMoveX() Or MouseMoveY()
            XAtCenter# = OrgXAtCenter# - (MouseX() - OrgMouseX) / Scale#
            YAtCenter# = OrgYAtCenter# + (MouseY() - OrgMouseY) / Scale#

Redraw()
        EndIf

Sync
        If MouseClick() = 0 Then Exit
    Loop

EndFunction

Function Redraw()

a2FillBox 0.0, 0.0, RectWidth#, RectHeight#, RGB(32, 32, 32)

ScreenX# = HalfRectWidth#  - XAtCenter# * Scale#
    ScreenY# = HalfRectHeight# + YAtCenter# * Scale#
    a2Line 0.0, ScreenY#, RectWidth#, ScreenY#, RGB(255, 255, 255)
    a2Line ScreenX#, 0.0, ScreenX#, RectHeight#, RGB(255, 255, 255)

For i = 0 To 49
        ScreenX# = HalfRectWidth#  + (Objects(i).X# - XAtCenter#) * Scale#
        ScreenY# = HalfRectHeight# - (Objects(i).Y# - YAtCenter#) * Scale#
        a2Circle ScreenX#, ScreenY#, Objects(i).Radius# * Scale#, RGB(255, 0, 0)
    Next

Text 0, 0, "Zoom Level:"+Str$(ZoomLevel)

EndFunction

+ Code Snippet

Type TObject
    X#, Y#, Radius#
EndType

Dim Objects(49) As TObject

Global RectWidth#
Global RectHeight#
Global HalfRectWidth#
Global HalfRectHeight#
Global XAtCenter#
Global YAtCenter#
Global Scale#
Global ZoomLevel


    For i = 0 To 49
        Objects(i).X# = -512.0 + Rnd(1024)
        Objects(i).Y# = -512.0 + Rnd(1024)
        Objects(i).Radius# = 10.0 + Rnd(20)
    Next

    RectWidth# = Screen Width(): RectHeight# = Screen Height()
    HalfRectWidth# = RectWidth# * 0.5: HalfRectHeight# = RectHeight# * 0.5

    Dim ZoomLevels#(18)
    Zoom# = 0.5
    For i = 0 To 18
        ZoomLevels#(i) = Zoom#: Zoom# = Zoom# * 1.1
    Next

    ZoomLevel = 9
    Scale# = ZoomLevels#(ZoomLevel)
    Redraw()

    Do
        mmz = MouseMoveZ()
        NewScale# = Scale#
        If mmz > 0
            Inc ZoomLevel: If ZoomLevel > 18 Then ZoomLevel = 18 Else NewScale# = ZoomLevels#(ZoomLevel)
        EndIf
        If mmz < 0
            Dec ZoomLevel: If ZoomLevel <  0 Then ZoomLevel =  0 Else NewScale# = ZoomLevels#(ZoomLevel)
        EndIf

        If NewScale# <> Scale#
            DeltaMouseX# = MouseX() - HalfRectWidth#: DeltaMouseY# = MouseY() - HalfRectHeight#

            CoordXUnderMouse# = XAtCenter# + DeltaMouseX# / Scale#
            CoordYUnderMouse# = YAtCenter# - DeltaMouseY# / Scale#

            XAtCenter# = CoordXUnderMouse# - DeltaMouseX# / NewScale#
            YAtCenter# = CoordYUnderMouse# + DeltaMouseY# / NewScale#

            Scale# = NewScale#
            Redraw()
        EndIf

        If MouseClick() = 2 Then CaptureScroll()

        Sync
    Loop

    End


Function CaptureScroll()

    OrgXAtCenter# = XAtCenter#: OrgYAtCenter# = YAtCenter#
    OrgMouseX = MouseX(): OrgMouseY = MouseY()

    Do
        If MouseMoveX() Or MouseMoveY()
            XAtCenter# = OrgXAtCenter# - (MouseX() - OrgMouseX) / Scale#
            YAtCenter# = OrgYAtCenter# + (MouseY() - OrgMouseY) / Scale#

            Redraw()
        EndIf

        Sync
        If MouseClick() = 0 Then Exit
    Loop

EndFunction


Function Redraw()

    a2FillBox 0.0, 0.0, RectWidth#, RectHeight#, RGB(32, 32, 32)

    ScreenX# = HalfRectWidth#  - XAtCenter# * Scale#
    ScreenY# = HalfRectHeight# + YAtCenter# * Scale#
    a2Line 0.0, ScreenY#, RectWidth#, ScreenY#, RGB(255, 255, 255)
    a2Line ScreenX#, 0.0, ScreenX#, RectHeight#, RGB(255, 255, 255)

    For i = 0 To 49
        ScreenX# = HalfRectWidth#  + (Objects(i).X# - XAtCenter#) * Scale#
        ScreenY# = HalfRectHeight# - (Objects(i).Y# - YAtCenter#) * Scale#
        a2Circle ScreenX#, ScreenY#, Objects(i).Radius# * Scale#, RGB(255, 0, 0)
    Next

    Text 0, 0, "Zoom Level:"+Str$(ZoomLevel)

EndFunction

Requires Advanced2d and a mousewheel...
RMB: Scroll graph
Mouse wheel: Zoom In/Out at the mouse location

Notice the X and Y coords are inverted...
The rect area is easyly modifiable

Back to top

Profile PM

Sasuke

20

Years of Service

User Offline

Joined: 2nd Dec 2005

Location: Milton Keynes UK

Posted: 20th Aug 2013 14:47 Edited at: 20th Aug 2013 14:49

Link

Le Verdier, with that code I was able to fix the Zooming functionality, thank you so much

Now I can continue and get this thing working in my editor

I made something pretty fancy quick to show it working around a bunch of moving objects.

Requires Advanced2d and a mousewheel...
LMB: Scroll graph
Mouse wheel: Zoom In/Out at the mouse location

// math class
type vector2
    x                   as float
    y                   as float
endtype

type vector3
    x                   as float
    y                   as float
    z                   as float
endtype

type rect
    x                   as integer
    y                   as integer
    w                   as integer
    h                   as integer
endtype

global _vector2         as vector2
global _vector3         as vector3
global _rect            as rect

// mouse class
type inputMouse
    click               as integer
    oldClick            as integer
    drag                as byte
    pos                 as vector3
    dragPos             as vector3
    velocity            as vector3
endtype

global _inputMouse as inputMouse

// graph class
type curveGraph
    perPixelUnit        as float
    zoomFactor          as float
    oldZoom             as float
    zoomVal             as float
    zoom                as float
    wOldPos             as vector2      // world position    
    wPos                as vector2      // world position
    bounds              as rect
endtype

global _curveGraph      as curveGraph
global _curveGraphCentre as vector2

// setup display
_curveGraph.perPixelUnit = 1
_curveGraph.zoom         = 1
_curveGraph.zoomFactor   = 0.001
_curveGraph.wPos.x       = 0
_curveGraph.wPos.y       = 0
_curveGraph.bounds.x     = 128
_curveGraph.bounds.y     = 128
_curveGraph.bounds.w     = screen width() - 128
_curveGraph.bounds.h     = screen height() - 128
_curveGraphCentre.x = .5*(_curveGraph.bounds.w-_curveGraph.bounds.x) + _curveGraph.bounds.x
_curveGraphCentre.y = .5*(_curveGraph.bounds.h-_curveGraph.bounds.y) + _curveGraph.bounds.y

// *************************
// just for display
type shape
    n           as byte
    size        as float
    angle       as float
    origin      as vector2
    offset      as vector2
    rotFactor   as integer
    rotVelocity as float
    color       as dword
endtype

global maxShapes as integer = 400
global dim _shape(maxShapes) as shape
global offset as vector2
global origin as vector2

for n = 0 to maxShapes
    _shape(n).n             = rnd(1)
    _shape(n).size          = 4+rnd(32)
    _shape(n).angle         = rnd(359)
    _shape(n).rotFactor     = rnd(1) // not implimented 
    _shape(n).rotVelocity   = rndFloat(0.01,0.05,3)
    _shape(n).color         = rgb(64+rnd(191),0,0)
    // origin 
    setVector2( 0, 0 ) : _shape(n).origin = _vector2
    // offset
    setVector2( 600-rnd(1200), 600-rnd(1200) ) : _shape(n).offset = _vector2
next
// *************************

sync on : sync rate 0

do : cls rgb(56,56,56)

updateInput()
    updateCurveGraph()

// draw graph
    a2box _curveGraph.bounds.x,_curveGraph.bounds.y,_curveGraph.bounds.w,_curveGraph.bounds.h, rgb(255,0,0)     // bounds
    
    a2SetClip _curveGraph.bounds.x,_curveGraph.bounds.y,_curveGraph.bounds.w,_curveGraph.bounds.h
    
        globalToLocalVector( 0, 0 )
        a2fillbox _vector2.x-1, 0, _vector2.x+1, _curveGraph.bounds.h, rgb(162,162,162)
        a2fillbox 0, _vector2.y-1, _curveGraph.bounds.w, _vector2.y+1, rgb(0,0,0)
        
        for n = 0 to maxShapes
            _shape(n).angle = wrapvalue(_shape(n).angle+_shape(n).rotVelocity)
            offset = _shape(n).offset : origin = _shape(n).origin
            vector2_rotateAboutOrigin( offset, origin, _shape(n).angle )
            if _shape(n).n = 0 then drawGraphCircle( _vector2.x, _vector2.y, _shape(n).size, _shape(n).color )
            if _shape(n).n = 1 then drawGraphBox( _vector2.x, _vector2.y, _shape(n).size, _shape(n).color )
        next

a2ResetClip

sync
loop

// input functions
function updateInput()

// mouse input
    _inputMouse.oldClick            = _inputMouse.click
    _inputMouse.click               = mouseclick()
    
    setVector3( mousex(), mousey(), mousez() )
    _inputMouse.pos                 = _vector3

setVector3( mousemovex(), mousemovey(), mousemovez() )
    _inputMouse.velocity            = _vector3

endfunction

// display client function
function updateCurveGraph()

local delta as vector2
    local worldToScreen as vector2 // or screenToWorld (can't remember which it is, will sort out later)
    
    if (_inputMouse.velocity.z)

_curveGraph.oldZoom = _curveGraph.zoom
        _curveGraph.zoomVal = clamp(_curveGraph.zoomVal+(_inputMouse.velocity.z * _curveGraph.zoomFactor), -3.9,6.0)  
        _curveGraph.zoom = _curveGraph.perPixelUnit * (2 ^ _curveGraph.zoomVal)

delta.x = _inputMouse.pos.x - _curveGraphCentre.x
        delta.y = _inputMouse.pos.y - _curveGraphCentre.y
        
        worldToScreen.x = _curveGraph.wPos.x + delta.x / _curveGraph.oldZoom
        worldToScreen.y = _curveGraph.wPos.y - delta.y / _curveGraph.oldZoom
        
        _curveGraph.wPos.x = worldToScreen.x - delta.x / _curveGraph.zoom
        _curveGraph.wPos.y = worldToScreen.y + delta.y / _curveGraph.zoom

endif

// this is for draging the position of the 2d display, so panning
    if not _inputMouse.click
        _inputMouse.drag = 0
        _inputMouse.dragPos.x = 0
        _inputMouse.dragPos.y = 0        
    endif
    
    if _inputMouse.drag = 0
        if _inputMouse.click = 1
            _inputMouse.drag = 1
            _inputMouse.dragPos.x = _inputMouse.pos.x
            _inputMouse.dragPos.y = _inputMouse.pos.y
            _curveGraph.wOldPos = _curveGraph.wPos
        endif
    endif
    
    if _inputMouse.drag
        _curveGraph.wPos.x = _curveGraph.wOldPos.x - (_inputMouse.pos.x - _inputMouse.dragPos.x) / _curveGraph.zoom
        _curveGraph.wPos.y = _curveGraph.wOldPos.y + (_inputMouse.pos.y - _inputMouse.dragPos.y) / _curveGraph.zoom
    endif
        
endfunction

function globalToLocalVector( x as float, y as float )
    _vector2.x = _curveGraphCentre.x + (x - _curveGraph.wpos.x) * _curveGraph.zoom
    _vector2.y = _curveGraphCentre.y - (y - _curveGraph.wpos.y) * _curveGraph.zoom
endfunction

// drawing functions
function drawGraphCircle( x as float, y as float, size as float, color as dword )
    globalToLocalVector( x, y )
    a2circle _vector2.x,_vector2.y,size* _curveGraph.zoom,color
endfunction

function drawGraphBox( x as float, y as float, size as float, color as dword )
    local r as rect : size = .5*size
    globalToLocalVector( x-size, y-size )
        r.x = _vector2.x : r.y = _vector2.y
    globalToLocalVector( x+size, y+size )
        r.w = _vector2.x : r.h = _vector2.y
    a2box r.x,r.y,r.w,r.h,color
endfunction

// vector functions
function setVector2( x as float, y as float )
    _vector2.x = x : _vector2.y = y
endfunction

function vector2_Add( v1 as vector2, v2 as vector2 )
    setVector2( v1.x + v2.x, v1.y + v2.y )
endfunction

function vector2_Subtraction( v1 as vector2, v2 as vector2 )
    setVector2( v1.x - v2.x, v1.y - v2.y )
endfunction

function vector2_Mul( v as vector2, scaleFactor as float )
    setVector2( v.x * scaleFactor, v.y * scaleFactor )
endfunction

function vector2_Length( v as vector2 )
    local out as float
    out = sqrt((v.x * v.x) + (v.y * v.y))
endfunction out

function vector2_Distance( v1 as vector2, v2 as vector2 )
    local out as float
    vector2_Subtraction( v1, v2 ) : out = vector2_Length( _vector2 )
endfunction out

function vector2_rotateAboutOrigin( pt as vector2, origin as vector2, angleInDegrees as float )

local rotationVector as vector2
    local angle as float

vector2_Subtraction( pt, origin ) : rotationVector = _vector2

if (rotationVector.x = 0.0 && rotationVector.y = 0.0)
        _vector2 = pt : exitfunction
    endif
    
    angle = atanfull(rotationVector.y, rotationVector.x)
    inc angle, angleInDegrees

setVector2( cos(angle), sin(angle) )
    vector2_Mul( _vector2, vector2_Length( rotationVector ) ) : rotationVector = _vector2
    vector2_Add( rotationVector, origin )
    
endfunction

function setVector3( x as float, y as float, z as float )
    _vector3.x = x : _vector3.y = y : _vector3.z = z
endfunction

// mis
function rndFloat( lower as float, upper as float, precision as byte )
    local power as float : power = 10^precision
    local out as float : out = (rnd(int((upper*power)-(lower*power)))/power)+lower
endfunction out

+ Code Snippet

// math class
type vector2
    x                   as float
    y                   as float
endtype

type vector3
    x                   as float
    y                   as float
    z                   as float
endtype

type rect
    x                   as integer
    y                   as integer
    w                   as integer
    h                   as integer
endtype

global _vector2         as vector2
global _vector3         as vector3
global _rect            as rect

// mouse class
type inputMouse
    click               as integer
    oldClick            as integer
    drag                as byte
    pos                 as vector3
    dragPos             as vector3
    velocity            as vector3
endtype

global _inputMouse as inputMouse

// graph class
type curveGraph
    perPixelUnit        as float
    zoomFactor          as float
    oldZoom             as float
    zoomVal             as float
    zoom                as float
    wOldPos             as vector2      // world position    
    wPos                as vector2      // world position
    bounds              as rect
endtype

global _curveGraph      as curveGraph
global _curveGraphCentre as vector2

// setup display
_curveGraph.perPixelUnit = 1
_curveGraph.zoom         = 1
_curveGraph.zoomFactor   = 0.001
_curveGraph.wPos.x       = 0
_curveGraph.wPos.y       = 0
_curveGraph.bounds.x     = 128
_curveGraph.bounds.y     = 128
_curveGraph.bounds.w     = screen width() - 128
_curveGraph.bounds.h     = screen height() - 128
_curveGraphCentre.x = .5*(_curveGraph.bounds.w-_curveGraph.bounds.x) + _curveGraph.bounds.x
_curveGraphCentre.y = .5*(_curveGraph.bounds.h-_curveGraph.bounds.y) + _curveGraph.bounds.y

// *************************
// just for display
type shape
    n           as byte
    size        as float
    angle       as float
    origin      as vector2
    offset      as vector2
    rotFactor   as integer
    rotVelocity as float
    color       as dword
endtype

global maxShapes as integer = 400
global dim _shape(maxShapes) as shape
global offset as vector2
global origin as vector2

for n = 0 to maxShapes
    _shape(n).n             = rnd(1)
    _shape(n).size          = 4+rnd(32)
    _shape(n).angle         = rnd(359)
    _shape(n).rotFactor     = rnd(1) // not implimented 
    _shape(n).rotVelocity   = rndFloat(0.01,0.05,3)
    _shape(n).color         = rgb(64+rnd(191),0,0)
    // origin 
    setVector2( 0, 0 ) : _shape(n).origin = _vector2
    // offset
    setVector2( 600-rnd(1200), 600-rnd(1200) ) : _shape(n).offset = _vector2
next
// *************************

sync on : sync rate 0

do : cls rgb(56,56,56)

    updateInput()
    updateCurveGraph()

    // draw graph
    a2box _curveGraph.bounds.x,_curveGraph.bounds.y,_curveGraph.bounds.w,_curveGraph.bounds.h, rgb(255,0,0)     // bounds
    
    a2SetClip _curveGraph.bounds.x,_curveGraph.bounds.y,_curveGraph.bounds.w,_curveGraph.bounds.h
    
        globalToLocalVector( 0, 0 )
        a2fillbox _vector2.x-1, 0, _vector2.x+1, _curveGraph.bounds.h, rgb(162,162,162)
        a2fillbox 0, _vector2.y-1, _curveGraph.bounds.w, _vector2.y+1, rgb(0,0,0)
        
        for n = 0 to maxShapes
            _shape(n).angle = wrapvalue(_shape(n).angle+_shape(n).rotVelocity)
            offset = _shape(n).offset : origin = _shape(n).origin
            vector2_rotateAboutOrigin( offset, origin, _shape(n).angle )
            if _shape(n).n = 0 then drawGraphCircle( _vector2.x, _vector2.y, _shape(n).size, _shape(n).color )
            if _shape(n).n = 1 then drawGraphBox( _vector2.x, _vector2.y, _shape(n).size, _shape(n).color )
        next

    a2ResetClip

    sync
loop

// input functions
function updateInput()

    // mouse input
    _inputMouse.oldClick            = _inputMouse.click
    _inputMouse.click               = mouseclick()
    
    setVector3( mousex(), mousey(), mousez() )
    _inputMouse.pos                 = _vector3

    setVector3( mousemovex(), mousemovey(), mousemovez() )
    _inputMouse.velocity            = _vector3

endfunction

// display client function
function updateCurveGraph()

    local delta as vector2
    local worldToScreen as vector2 // or screenToWorld (can't remember which it is, will sort out later)
    
    if (_inputMouse.velocity.z)

        _curveGraph.oldZoom = _curveGraph.zoom
        _curveGraph.zoomVal = clamp(_curveGraph.zoomVal+(_inputMouse.velocity.z * _curveGraph.zoomFactor), -3.9,6.0)  
        _curveGraph.zoom = _curveGraph.perPixelUnit * (2 ^ _curveGraph.zoomVal)

        delta.x = _inputMouse.pos.x - _curveGraphCentre.x
        delta.y = _inputMouse.pos.y - _curveGraphCentre.y
        
        worldToScreen.x = _curveGraph.wPos.x + delta.x / _curveGraph.oldZoom
        worldToScreen.y = _curveGraph.wPos.y - delta.y / _curveGraph.oldZoom
        
        _curveGraph.wPos.x = worldToScreen.x - delta.x / _curveGraph.zoom
        _curveGraph.wPos.y = worldToScreen.y + delta.y / _curveGraph.zoom

    endif    

    // this is for draging the position of the 2d display, so panning
    if not _inputMouse.click
        _inputMouse.drag = 0
        _inputMouse.dragPos.x = 0
        _inputMouse.dragPos.y = 0        
    endif
    
    if _inputMouse.drag = 0
        if _inputMouse.click = 1
            _inputMouse.drag = 1
            _inputMouse.dragPos.x = _inputMouse.pos.x
            _inputMouse.dragPos.y = _inputMouse.pos.y
            _curveGraph.wOldPos = _curveGraph.wPos
        endif
    endif
    
    if _inputMouse.drag
        _curveGraph.wPos.x = _curveGraph.wOldPos.x - (_inputMouse.pos.x - _inputMouse.dragPos.x) / _curveGraph.zoom
        _curveGraph.wPos.y = _curveGraph.wOldPos.y + (_inputMouse.pos.y - _inputMouse.dragPos.y) / _curveGraph.zoom
    endif
        
endfunction

function globalToLocalVector( x as float, y as float )
    _vector2.x = _curveGraphCentre.x + (x - _curveGraph.wpos.x) * _curveGraph.zoom
    _vector2.y = _curveGraphCentre.y - (y - _curveGraph.wpos.y) * _curveGraph.zoom
endfunction

// drawing functions
function drawGraphCircle( x as float, y as float, size as float, color as dword )
    globalToLocalVector( x, y )
    a2circle _vector2.x,_vector2.y,size* _curveGraph.zoom,color
endfunction

function drawGraphBox( x as float, y as float, size as float, color as dword )
    local r as rect : size = .5*size
    globalToLocalVector( x-size, y-size )
        r.x = _vector2.x : r.y = _vector2.y
    globalToLocalVector( x+size, y+size )
        r.w = _vector2.x : r.h = _vector2.y
    a2box r.x,r.y,r.w,r.h,color
endfunction

// vector functions
function setVector2( x as float, y as float )
    _vector2.x = x : _vector2.y = y
endfunction

function vector2_Add( v1 as vector2, v2 as vector2 )
    setVector2( v1.x + v2.x, v1.y + v2.y )
endfunction

function vector2_Subtraction( v1 as vector2, v2 as vector2 )
    setVector2( v1.x - v2.x, v1.y - v2.y )
endfunction

function vector2_Mul( v as vector2, scaleFactor as float )
    setVector2( v.x * scaleFactor, v.y * scaleFactor )
endfunction

function vector2_Length( v as vector2 )
    local out as float
    out = sqrt((v.x * v.x) + (v.y * v.y))
endfunction out

function vector2_Distance( v1 as vector2, v2 as vector2 )
    local out as float
    vector2_Subtraction( v1, v2 ) : out = vector2_Length( _vector2 )
endfunction out

function vector2_rotateAboutOrigin( pt as vector2, origin as vector2, angleInDegrees as float )  

    local rotationVector as vector2
    local angle as float

    vector2_Subtraction( pt, origin ) : rotationVector = _vector2 

    if (rotationVector.x = 0.0 && rotationVector.y = 0.0)
        _vector2 = pt : exitfunction
    endif
    
    angle = atanfull(rotationVector.y, rotationVector.x)
    inc angle, angleInDegrees

    setVector2( cos(angle), sin(angle) )
    vector2_Mul( _vector2, vector2_Length( rotationVector ) ) : rotationVector = _vector2
    vector2_Add( rotationVector, origin )
    
endfunction

function setVector3( x as float, y as float, z as float )
    _vector3.x = x : _vector3.y = y : _vector3.z = z
endfunction

// mis
function rndFloat( lower as float, upper as float, precision as byte )
    local power as float : power = 10^precision
    local out as float : out = (rnd(int((upper*power)-(lower*power)))/power)+lower
endfunction out

"Get in the Van!" - Van B

Back to top

Profile PM Email

Le Verdier

14

Years of Service

User Offline

Joined: 10th Jan 2012

Location: In the mosh-pit

Posted: 20th Aug 2013 21:51

Link

Nicely done..
Glad to see the the problem fixed

Back to top

Profile PM

Mage

Valued Member

19

Years of Service

User Offline

Joined: 3rd Feb 2007

Location:

Posted: 23rd Aug 2013 10:17

Link

Quote: "I think it is just an offset to add, considering the graph is still handled at the center
Here are my thoughts: (bold variables are vectors)..."

Having just read this thread I immediately thought this was the best type of approach. You find out how much x and y is needed to recenter, and you apply a fraction of this each time you scroll so the screen gradually re-centers.

This is similar to code I made to make characters look at the player when close. Find the correct final rotation and merely move at a fraction of that amount each time. Same principle.

Back to top

Profile PM

Sorry your browser is not supported!

DarkBASIC Professional Discussion / Zoom to New Centre