# 2D screen and 'world' position coordinates

**URL:** <https://discourse.processing.org/t/2d-screen-and-world-position-coordinates/44569>\
**Category:** Coding Questions\
**Created:** [June 10, 2024, 3:22am UTC](https://discourse.processing.org/t/2d-screen-and-world-position-coordinates/44569 "2024-06-10T03:22:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [June 10, 2024, 3:22am UTC](https://discourse.processing.org/t/2d-screen-and-world-position-coordinates/44569/1 "2024-06-10T03:22:58Z")

</div>

I’m making a UI based on zooming and dragging (2d) . Basically I’m trying:

```auto
function draw() {
    background(185, 175, 185);

    translate(width/2, height/2);
    
    scale(zoom);
    translate(dragPos.x , dragPos.y);
    for (const b of bodies) {
        b.display();
        b.update();
    }

```

and I’ve tried a silly

```auto
function screenToWorld(x, y) {
    let worldX = (x - dragPos.x - width/2) / zoom;
    let worldY = (y - dragPos.y - height/2) / zoom;
    return createVector(worldX, worldY);
}

function worldToScreen(x, y) {
    let screenX = (x * zoom) + dragPos.x + width/2;
    let screenY = (y * zoom) + dragPos.y + height/2;
    return createVector(screenX, screenY);
}

```

Well, did not work… almost though 😃  
How can i keep track of the translation from transformed coordinates to mouse (screen)?  
So mouse can interact with stuff based on being over or not …

The code is in progress and have a lot more going on, so I tried to isolate here the stuff about this point.  
There is a running playground with the malfunctioning code [here](https://editor.p5js.org/v-k-/sketches/2fY5gMCEA)

How can I do it?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [June 10, 2024, 2:08pm UTC](https://discourse.processing.org/t/2d-screen-and-world-position-coordinates/44569/2 "2024-06-10T14:08:11Z")

</div>

Take a look at the math here: [Using the mouse position to zoom in on a map - #10 by scudly](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/10)

and here’s one that supports rotation as well as pan and zoom: [https://www.reddit.com/r/processing/comments/aecgdp/using\_a\_mousebased\_ui\_to\_explore\_truchet\_tiles/](https://www.reddit.com/r/processing/comments/aecgdp/using_a_mousebased_ui_to_explore_truchet_tiles/)

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [June 10, 2024, 3:51pm UTC](https://discourse.processing.org/t/2d-screen-and-world-position-coordinates/44569/3 "2024-06-10T15:51:12Z")

</div>

> [@scudly](#):
>
> Using the mouse position to zoom in on a map - #10 by scudly

Thanks @scudly, gonna dive into this, but at first look **\*** the first code has a very buggy zoom implemented. The second one works great. But, as I said I will need to dive in it to understand it.  
thanks for the links.

I’ll post my finds later  
: )

**\*** in processing IDE was really weird, but translated to p5 the zooming is working fine. I still on that 🙂 [here the translation](https://editor.p5js.org/v-k-/sketches/dRGeZEjHD)

---

<div class="post-metadata">

**Author:** ![vkbr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/vkbr/32/16844_2.png) [@vkbr](https://discourse.processing.org/u/vkbr)\
**Post date:** [June 10, 2024, 10:37pm UTC](https://discourse.processing.org/t/2d-screen-and-world-position-coordinates/44569/4 "2024-06-10T22:37:36Z")

</div>

I find it!  
Well @scudly both yours codes are amazing and I learned a lot from them. Thanks.  
I end up finding where was my problem while trying to adapt your approach to my scenario.  
My `screenToWorld()` function was applying things in wrong order…  
instead of

```auto
let worldX = (x - dragPos.x - width/2) / zoom;

```

I need

```auto
let worldX = (x - width/2)/zoom - dragPos.x

```

so it goes accordingly to my transformation order

```auto
    translate(width/2, height/2);
    scale(zoom);
    translate(dragPos.x , dragPos.y);

```

So that is working now!  
Anyway, Thanks a lot friend!! You are being of great help for me.  
cheers!!