# Using the mouse position to zoom in on a map

**URL:** <https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137>\
**Category:** Coding Questions\
**Created:** [March 21, 2024, 9:47pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137 "2024-03-21T21:47:13Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![CharmanderProgrammer](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@CharmanderProgrammer](https://discourse.processing.org/u/CharmanderProgrammer)\
**Post date:** [March 21, 2024, 9:47pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/1 "2024-03-21T21:47:13Z")

</div>

```auto
void draw() {
  if(w) {camY -= 5;}
  if(s) {camY += 5;}
  if(a) {camX -= 5;}
  if(d) {camX += 5;}
    
  background(220);
  push();
  translate(mouseX, mouseY);
  scale(camScale);
  translate(-mouseX, -mouseY);
  translate(-camX, -camY);
  drawGrid();
  pop();
}

```

Hello everyone! I am attempting to make a 2D top down “map” sort of thing in Processing for a simulation I’m working on. I’m trying to make it so you can pan the camera with WASD and zoom into the point where your mouse is with the scroll wheel. However, I can’t figure out how to make it zoom in on the point where the mouse is without also causing the mouse to move the whole map around. The above code is what I currently have

Note: the w, a, s, and d variables are booleans that are just true if you hold down that key, those arent the source of the issue.

I know the issue is something with the scale function, since the second I comment it out it no longer interferes with the position of the grid I’m drawing

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 21, 2024, 11:00pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/2 "2024-03-21T23:00:43Z")

</div>

This sketch was made by @Chrisir scale with mouse

```auto

int logoSize = 25;
float scalePercentage, radius2;

void setup() {
  size(800, 800);

  ellipseMode(CENTER);
}

void draw() {
  background(255);
  strokeWeight(20);
  fill(0);
  text(mouseX, 19, 19);

  noFill();
  // increase
  scalePercentage = map (mouseX,
    0, width,
    0, 4);

  translate (width/2, height/2);
  scale(scalePercentage);

  ellipse(0, 0, logoSize+50+378, logoSize-50+378);
  ellipse(0, -60, logoSize-50+378, logoSize-175+378);
  //
  ellipse(0, 0, logoSize-175+378, logoSize-50+378);
}

```

> **[Scale / Examples](https://processing.org/examples/scale.html)**
>
> Paramenters for the scale() function are values specified as decimal percentages. For example, the method call scale(2.0) will increase the dimension of the shape by 200 percent. Objects always scale …

---

<div class="post-metadata">

**Author:** ![CharmanderProgrammer](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@CharmanderProgrammer](https://discourse.processing.org/u/CharmanderProgrammer)\
**Post date:** [March 21, 2024, 11:03pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/3 "2024-03-21T23:03:46Z")

</div>

@jafal That’s not quite what I’m looking for, thank you for the reply though! I have a top down map(imagine like a minimap from a video game) and I can pan around it with WASD and I want the camera to zoom in on the point of the position of the mouse on said map. So the center of the zoom should be the mouseX and mouseY

---

<div class="post-metadata">

**Author:** ![CharmanderProgrammer](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@CharmanderProgrammer](https://discourse.processing.org/u/CharmanderProgrammer)\
**Post date:** [March 21, 2024, 11:08pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/4 "2024-03-21T23:08:03Z")

</div>

@jafal [https://youtube.com/shorts/MHEGoKpM5mE](https://youtube.com/shorts/MHEGoKpM5mE)

As you can see, it’s able to zoom in on the point where the mouse is, but the entire grid also follows the mouse(but only when the zoom scale isnt equal to 1) when the position of the map should only be able to be changed by WASD

Also note: I use the scroll wheel to change the camScale variable

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 21, 2024, 11:16pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/5 "2024-03-21T23:16:51Z")

</div>

can you make an mcve please

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [March 21, 2024, 11:17pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/6 "2024-03-21T23:17:17Z")

</div>

Look at this topic may you find some hints

> [@How to make a 2d Zoom and Pan](https://discourse.processing.org/t/how-to-make-a-2d-zoom-and-pan/1179/9):
>
> Hi everyone, I wrote this example to explain how to Zoom and Pan with the mouse in Processing. It uses texture coordinates (texcoords). Enjoy! [zoom-pan-with-mouse-processing-small] float tx, ty; float scale; PImage img; float xratio, yratio; float minScale, maxScale; void setup() { //use P2D or P3D to be able to use texture() size(450, 360, P2D); //load image and calculate window/image ratio img = loadImage("1337.jpg"); xratio = float(width) / img.width; yratio = float(heigh…

---

<div class="post-metadata">

**Author:** ![CharmanderProgrammer](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@CharmanderProgrammer](https://discourse.processing.org/u/CharmanderProgrammer)\
**Post date:** [March 21, 2024, 11:24pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/7 "2024-03-21T23:24:27Z")

</div>

@Chrisir

```auto
int gridSize = 20;
int camX = 0;
int camY = 0;
float camScale = 1;
boolean w = false, a = false, s = false, d = false;

void setup() {
  size(800, 800);
}

void draw() {
  if(w) {camY -= 5;}
  if(s) {camY += 5;}
  if(a) {camX -= 5;}
  if(d) {camX += 5;}
    
  background(220);
  
  push();
  translate(mouseX, mouseY);
  scale(camScale);
  translate(-mouseX, -mouseY);
  translate(-camX, -camY);
  drawGrid();
  pop();
}

void drawGrid() {
  for(int i = 0; i < 50; i++) {
    for(int j = 0; j < 50; j++) {
      fill(255);
      square(i*gridSize, j*gridSize, gridSize);
    }
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if(e == 1) {e = 1/1.1;}
  if(e == -1) {e = 1.1;}
  if(camScale * e >= 0.2) {
    camScale *= e;
  } else {
    camScale = 0.2;
  }
}

void keyPressed() {
  if (key == 'w') {w = true;}
  if (key == 's') {s = true;}
  if (key == 'a') {a = true;}
  if (key == 'd') {d = true;}
}

void keyReleased() {
  if (key == 'w') {w = false;}
  if (key == 's') {s = false;}
  if (key == 'a') {a = false;}
  if (key == 'd') {d = false;}
}

```

Basically I just cant figure out how to stop the grid from moving alongside the mouse while also still allowing it to zoom in on where the mouse is located

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2024, 8:52am UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/8 "2024-03-22T08:52:25Z")

</div>

I cannot say something wise here

In theory when mouse is pressed store its position in 2 separate variables and then use those in draw instead of mouseX and mouseY

The whole idea is called Viewport you might want to use the search function of the forum for this

---

<div class="post-metadata">

**Author:** ![CharmanderProgrammer](https://avatars.discourse-cdn.com/v4/letter/c/dec6dc/32.png) [@CharmanderProgrammer](https://discourse.processing.org/u/CharmanderProgrammer)\
**Post date:** [March 22, 2024, 6:02pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/9 "2024-03-22T18:02:37Z")

</div>

Just as a quick update, I ended up figuring it out! So it turns out I was performing the zooming correctly, but the issue was in the fact that the camera’s origin is in the top left corner. So when I zoomed out, the entire camera appeared to move down and to the right. I fixed it by just adding code to shift the camera up and to the left by half of the amount that it zooms if that makes sense

---

<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:** [March 22, 2024, 6:12pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/10 "2024-03-22T18:12:28Z")

</div>

`camX` and `camY` should be `float`s, not `int`s.

`draw()` should not translate by the mouse position. Instead, when you change the scale, you need to change `camX` and `camY` so that they move relative to the world-space position of the mouse.

I simplified `draw()` and updated `mouseWheel()` to make the changes:

```auto
int gridSize = 20;
float camX = 0;
float camY = 0;
float camScale = 1;
boolean w = false, a = false, s = false, d = false;

void setup() {
  size(800, 800);
}

void draw() {
  if(w) {camY -= 5;}
  if(s) {camY += 5;}
  if(a) {camX -= 5;}
  if(d) {camX += 5;}
    
  background(220);
  
  push();
  scale(camScale);
  translate(-camX, -camY);
  drawGrid();
  pop();
}

void drawGrid() {
  for(int i = 0; i < 50; i++) {
    for(int j = 0; j < 50; j++) {
      fill(255);
      square(i*gridSize, j*gridSize, gridSize);
    }
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if(e == 1) {e = 1/1.1;}
  if(e == -1) {e = 1.1;}
  float oldScale = camScale;
  if(camScale * e >= 0.2) {
    camScale *= e;
  } else {
    camScale = 0.2;
  }
  float worldX = camX + mouseX/oldScale;
  camX = worldX - mouseX/camScale;
  float worldY = camY + mouseY/oldScale;
  camY = worldY - mouseY/camScale;
}

void keyPressed() {
  if (key == 'w') {w = true;}
  if (key == 's') {s = true;}
  if (key == 'a') {a = true;}
  if (key == 'd') {d = true;}
}

void keyReleased() {
  if (key == 'w') {w = false;}
  if (key == 's') {s = false;}
  if (key == 'a') {a = false;}
  if (key == 'd') {d = false;}
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 22, 2024, 6:19pm UTC](https://discourse.processing.org/t/using-the-mouse-position-to-zoom-in-on-a-map/44137/11 "2024-03-22T18:19:08Z")

</div>

Thanks for posting

Interesting to know for me and I am sure also for others