Beginner help -- zoom and pan -- drawing tool

Processing Coding Questions
1

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.

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);
  }
}
2

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.

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;
}
2 Likes
3

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?

4

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

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 );
}