Zooming in to a function

Discussion in 'Programming' started by Aajowa, Feb 3, 2019.

  1. Aajowa

    Aajowa Member

    Joined:
    Sep 9, 2018
    Posts:
    6
    Accidentally began thread instead of uploading a picture, but I can't seem to upload jpg's or png's as a newbie anyway, my bad!

    I'm having a lot of issues at the moment with zooming in to a function. It zooms in, but for the life of me I can't seem to force this to zoom in on the 'right' place given the mouses coordinates. I'm currently using the following code
    Code:
    var zz = scr_zz(i / zoom + (mouse_x / dot * zoom),j / zoom + (mouse_y / dot * zoom), 176)
    zoom = 1 as default, and increases or decreases as per the mouse wheel.
    dot = the size of the tileset used, currently 16 but generally 4.

    i / zoom works fine, and i'd prove it if I could upload pictures! At mouse_x/mouse_y = 0, it's perfect.
    The wonky part is (mouse_x\y / dot * zoom) being where you want to zoom in on. Does anyone have a clue how to make this work? As it stands, it registers mouse_x\y as their 'global' position, and zooms to the other part of the map rather than zooming further in on the current location
     
    Last edited: Feb 3, 2019
  2. JasonTomLee

    JasonTomLee Member

    Joined:
    Jul 20, 2016
    Posts:
    99
    Uploading an image ain't too bad!
    1) Just upload your image to imgur
    2) Copy the BBcode and paste it here
    3) The image should pop out when you post it (you can preview to check)

    [​IMG]

    I'll try helping you after you post the image but for the most part, zooming in relative to the mouse requires you to add an offset to the x/y view points. And the zooming in/out should be straight forward. You could also round the zoom to prevent any screen tearing & sub-pixels on the screen
     
    Aajowa likes this.
  3. jo-thijs

    jo-thijs Member

    Joined:
    Jun 20, 2016
    Posts:
    2,790
    To know exactly what is going on in the piece of code you posted, we would need the contents of scr_zz.

    The view is rectangle and thus has 4 properties that need to be specified:
    - the coordinates of the top left coordinate: (view_xview, view_yview)
    - the dimensions: (view_wview, view_hview)

    Let's specify what exactly we want from zooming in and out:
    - We want to have a variable "zoom" such that the following equations hold (for some values of "initial_wview" and "initial_hview"):
    Code:
    view_wview = zoom * initial_wview;
    view_hview = zoom * initial_hview;
    - Zooming out gives as new value for "zoom" a constant value "factor" times the previous value of "zoom"
    - Zooming in gives as new value for "zoom" the constant value "1/factor" times the previous value of "zoom"
    - Zooming in and out ensures the smaller of the two successive views are antirely contained in the larger of the two (so zooming in wouldn't show parts that were out of view before zooming in)
    - The location of the mouse in the view before zooming in or out is as close to the center of the view afterwards as possible without violating the above conditions
    - Zooming in is only allowed while "zoom > min_zoom" for some value of "min_zoom"
    - Zooming out is only allowed while "zoom < max_zoom" for some value of "max_zoom"

    To achieve the above when trying to zoom in, we'd have some code like this:
    Code:
    if zoom > min_zoom {
        var leftbound = view_xview;
        var rightbound = leftbound + view_wview;
        var topbound = view_yview;
        var bottombound = topbound + view_hview;
        var focus_x = mouse_x;
        var focus_y = mouse_y;
        
        zoom /= factor;
        view_wview = zoom * initial_wview;
        view_hview = zoom * initial_hview;
        view_xview = clamp(focus_x - view_wview * 0.5, leftbound, rightbound - view_wview);
        view_yview = clamp(focus_y - view_hview * 0.5, topbound, bottombound - view_hview);
    }
    To achieve the above when trying to zoom out, we'd have some code like this:
    Code:
    if zoom < max_zoom {
        var leftbound = view_xview;
        var rightbound = leftbound + view_wview;
        var topbound = view_yview;
        var bottombound = topbound + view_hview;
        var focus_x = mouse_x;
        var focus_y = mouse_y;
        
        zoom *= factor;
        view_wview = zoom * initial_wview;
        view_hview = zoom * initial_hview;
        view_xview = clamp(focus_x - view_wview * 0.5, rightbound - view_wview, leftbound);
        view_yview = clamp(focus_y - view_hview * 0.5, bottombound - view_hview, topbound);
    }
     
    Aajowa likes this.
  4. Aajowa

    Aajowa Member

    Joined:
    Sep 9, 2018
    Posts:
    6
    Thanks Jason! I found out I had a google pictures account already from who-knows-when, and can upload from there!


    Sure! scr_zz is just a perlin noise script to run alongside a different script that curves it to the shape of a continent. It's here, but for the test zooming i'm foregoing the extra script for just a blank screen of tiles

    Code:
    var xx = argument0;
    var yy = argument1;
    var range = argument2;
    
    var chunkSize = 10;
    
    var noise = 8;
    
    range = range div 2;
    
    while(chunkSize > 0){
        var index_x = xx div chunkSize;
        var index_y = yy div chunkSize;
      
        var t_x = (xx % chunkSize) / chunkSize;
        var t_y = (yy % chunkSize) / chunkSize;
      
        var r_00 = scr_randomSeed(range,index_x,   index_y);
        var r_01 = scr_randomSeed(range,index_x,   index_y + 1);
        var r_10 = scr_randomSeed(range,index_x + 1, index_y);
        var r_11 = scr_randomSeed(range,index_x + 1, index_y + 1);
      
        var r_0 = lerp(r_00,r_01,t_y);
        var r_1 = lerp(r_10,r_11,t_y);
      
        noise += lerp(r_0,r_1,t_x);
      
        chunkSize = chunkSize div 2;
        range = range div 2;
        range = max(1,range);
    }
    
    return round(noise);

    I'm very late for bed at the moment, and i'll be sure to try and implement your suggestions tomorrow after work! Thank you both so very much for your time, and also

    Edit: Why do I keep sending messages before i've finished them? T_T

    ..And also TsukaYuriko for her messages and help!

    Let's see if I can upload the pictures now...
    [​IMG]
    [​IMG] [​IMG] [​IMG]

    Brilliant. I'll be sure to try first thing tomorrow, but I suspect the view_hview will have something or other to do with room_width / dot? That'll be my first guess! Goodnight!
     
    Last edited: Feb 10, 2019
    JasonTomLee likes this.
  5. JasonTomLee

    JasonTomLee Member

    Joined:
    Jul 20, 2016
    Posts:
    99

    Sweet you got it! :D
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice