# Beginner help -- zoom and pan -- drawing tool

**URL:** <https://discourse.processing.org/t/beginner-help-zoom-and-pan-drawing-tool/46302>\
**Category:** Coding Questions\
**Created:** [April 30, 2025, 2:29pm UTC](https://discourse.processing.org/t/beginner-help-zoom-and-pan-drawing-tool/46302 "2025-04-30T14:29:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![marlss7](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@marlss7](https://discourse.processing.org/u/marlss7)\
**Post date:** [April 30, 2025, 2:29pm UTC](https://discourse.processing.org/t/beginner-help-zoom-and-pan-drawing-tool/46302/1 "2025-04-30T14:29:02Z")

</div>

hello, i am new to processing and have a somewhat basic question. i want this incredibly simple drawing tool where you can toggle a pixel on or off by pressing. HOWEVER, since the pixels are then so small, i want to have a zoom function so users can intuitively zoom in and continue to draw (at say 200%) and then zoom back out, with the pixels “appearing” to be in the same place, like you might zoom in or out of a map. does anyone have a solution for this or a tutorial that could help me? thank you so much.

```Processing
color black = color(0, 0, 0);
float zoom = 1.0;
float minZoom = 1.0;
float maxZoom = 2.0;

void setup() {

  size(1080/2, 1920/2);
  background(255);
  smooth();
  noStroke();
}

void draw() {
  scale (zoom);
  if (mousePressed) {
    stroke(black);
    point(mouseX, mouseY);
  }
}

```

---

<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:** [April 30, 2025, 6:30pm UTC](https://discourse.processing.org/t/beginner-help-zoom-and-pan-drawing-tool/46302/2 "2025-04-30T18:30:13Z")

</div>

In order to keep track of the drawn pixels and be able to move them around, we need to store them in an image separate from the normal drawing canvas. We can do that using either a `PImage` or a `PGraphics`. I’ll use a `PGraphics` since that then lets us use various drawing commands. We can then display our new canvas using `image()`.

To be able to zoom, we’ll also want to track where we zoom, so I create variables `viewX`, `viewY`, and `viewZoom`. To separate drawing and moving, I use the left mouse button for drawing and right to move. The mouse wheel lets us zoom.

```auto
float minZoom = 1;
float maxZoom = 4;

float viewX=0, viewY=0, viewZoom=1;
PGraphics img;

void setup() {
  size( 1200, 900 );
  noSmooth();
  img = createGraphics( width, height );
  img.noSmooth();
  img.beginDraw();
  img.background( 0 );
  img.endDraw();
}

void draw() {
  color drawColor = color( 255 );
  if( mousePressed && mouseButton == LEFT ) {
    float mx = viewX + mouseX / viewZoom;
    float my = viewY + mouseY / viewZoom;
    img.beginDraw();
    img.stroke( drawColor );
    img.point( int(mx), int(my) );
    img.endDraw();
  }
  background( 128 );
  scale( viewZoom );
  image( img, -viewX, -viewY );
}

void mouseDragged() {
  if( mouseButton == RIGHT ) {
    viewX -= (mouseX-pmouseX) / viewZoom;
    viewY -= (mouseY-pmouseY) / viewZoom;
  }
}

void mouseWheel( MouseEvent e ) {
  float mx = viewX + mouseX / viewZoom;
  float my = viewY + mouseY / viewZoom;
  viewZoom *= pow( 2, -e.getCount() / 8.0 );
  viewZoom = constrain( viewZoom, minZoom, maxZoom );
  viewX = mx - mouseX / viewZoom;
  viewY = my - mouseY / viewZoom;
}

```

---

<div class="post-metadata">

**Author:** ![marlss7](https://avatars.discourse-cdn.com/v4/letter/m/9de053/32.png) [@marlss7](https://discourse.processing.org/u/marlss7)\
**Post date:** [April 30, 2025, 7:39pm UTC](https://discourse.processing.org/t/beginner-help-zoom-and-pan-drawing-tool/46302/3 "2025-04-30T19:39:48Z")

</div>

Thank you so so much!!! This is a HUGE help. I really appreciate you taking the time. Any suggestions for how to constrain it so it doesn’t reveal background?

---

<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:** [April 30, 2025, 8:00pm UTC](https://discourse.processing.org/t/beginner-help-zoom-and-pan-drawing-tool/46302/4 "2025-04-30T20:00:17Z")

</div>

Sure, we just constrain `viewX` and `viewY` the two places we change them:

```auto
void mouseDragged() {
  if( mouseButton == RIGHT ) {
    viewX -= (mouseX-pmouseX) / viewZoom;
    viewY -= (mouseY-pmouseY) / viewZoom;
    viewX = constrain( viewX, 0, width - width/viewZoom );
    viewY = constrain( viewY, 0, height - height/viewZoom );
  }
}

void mouseWheel( MouseEvent e ) {
  float mx = viewX + mouseX / viewZoom;
  float my = viewY + mouseY / viewZoom;
  viewZoom *= pow( 2, -e.getCount() / 8.0 );
  viewZoom = constrain( viewZoom, minZoom, maxZoom );
  viewX = mx - mouseX / viewZoom;
  viewY = my - mouseY / viewZoom;
  viewX = constrain( viewX, 0, width - width/viewZoom );
  viewY = constrain( viewY, 0, height - height/viewZoom );
}

```