PeasyDragHandler is an interface, you can define your own class that you can then register as a handler in the usual way (the front page even encourages you to)

http://mrfeinberg.com/peasycam/reference/peasy/PeasyDragHandler.html

there's only one method and that's undocumented but maybe try restricting dx and dy?

Thanks for the hint kooogy, do you know how this could be accomplished? Could I use something like:

' if (dx >= dxmax) {
      dx = dxmax;
    }'

Thanks very much

there's only one way to find out... won't take 5 minutes to try it.

peasycam source (part of the download) gives the following as an example

1. // Copyright 2008 Jonathan Feinberg
   
2. ...
   
3.     private final PeasyDragHandler panHandler /* ha ha ha */= new PeasyDragHandler() {
4.         public void handleDrag(final double dx, final double dy) {
5.             dampedPanX.impulse(dx / 8.);
6.             dampedPanY.impulse(dy / 8.);
7.         }
8.     };
9. ...

so, yes, try restricting dx / dy before the calls to dampedPanX/Y.

In kooogy's example, you would need to keep track of the movement and compare it to your center.  dx & dy are positive and negative mouse movements relative to the click point, not positions.

I've uploaded a new version of PeasyCamPlus and added a feature for Pan distance.  The one issue I see though is that I make no distinction between horizontal or vertical.  Since I don't know what will be up, down, left, right in 3D space, the pan distance is a radius from the original or specified center point.

1. camera.setMaximumPanDistance(double maximumDistance);  // clamp panning, defaults to start look-at point
2. camera.setMaximumPanDistance(double x, double y, double z, double maximumDistance);  // specify pan center
3. camera.getMaximumPanDistance();

Also added...  (I had a need to be able to disable just panning, so I added one for each).

1. camera.setPanActive(boolean active);  //false to make the pan stop responding to mouse
2. camera.setZoomActive(boolean active);  //false to make the zoom stop responding to mouse
3. camera.setRotateActive(boolean active);  //false to make the rotate stop responding to mouse
4. 
   
5. // returns if camera will respond to mouse
6. camera.isActive();
7. camera.isPanActive();
8. camera.isZoomActive();
9. camera.isRotateActive();

Here is the location:
https://github.com/jeffg2k/peasycam/downloads

Hi Jeff,

Wow, thank you so much for including these features - Peasycam plus is now even more awesome!

One problem however, at the moment when I include the new library and call 'camera.setMaximumPanDistance(double maximumDistance);' it tells me that the function does not exist? I suspect I am doing something wrong though so I will
go through it step by step today.

Again, thank you so much for your quick response and great work :)

Looks like you used the name cam for your PeasyCam, so make sure you're using that.

1. cam.setMaximumPanDistance(500);

Also note that this replaces the PeasyCam library, so putting it in a folder along side it called PeasyCamPlus won't work.  It needs to replace the other library, directory structure and all.  It's not a new library, it's just a modded PeasyCam.

Just so you're aware, I updated the library again.  I removed:

1. camera.setMaximumPanDistance(double x, double y, double z, double maximumDistance);

It's now just based on the lookAt, so if you change your lookAt location, it will respect the distance based on the new location, not the old one.  So now I just have the one command.

1. camera.setMaximumPanDistance(double maximumDistance);  // clamp panning

Fantastic, thanks Jeff that's a great addition to the library. At the moment I'm working on a simple way to change the max pan distance as you zoom so that you can always zoom to the exact edge of an image in the scene.

At the moment if you zoom in of course the maxpan won't allow you to go right to the edge if you are closer as you need to pan further so I'm creating a conditional that checks (cam.getPosition()[2]) which seems to return the position of the camera in Z. After that I'll need to modify one of the picking examples to pick buttons in a rather large button array - do you know of any particularly good examples for that?

Thanks Jeff,

- Tom

Hi Jeff,

I've made a lot of progress and I've hooked up my sketch with a picker example that I found which is good as the UI is starting to behave as I would like it to. I was just wondering, is it possible to set cam.setMaximumPanDistance();
for x and y individually? The image I'm attempting to keep in frame is rectangular so I can restrict to x but not to y and vice versa meaning that I can scroll past one of the edges of the image. I'm working on a few different methods as I know the cameras distance from the image, the cameras x and y and the size of the image, so I'm experimenting with different ways of changing the cam.setMaximumPanDistance(); value.

That's a lot more difficult to do.  I'll have to think about it.  It might be a lot easier if you moved the image with mouse movements, instead of moving a camera.  Then you could easily restrict the max and min.

Thank you Jeff,

This is the best I have so far:

if(cam.getPosition()[2] == 665) {cam.lookAt(img.width/2,img.height/2,0);}

Where getPosition()[2] is the position of the camera in Z and 665 is the maximum amount you can zoom out, so when you zoom out fully the image is re-centered.

I'll have a think about re-working with mouse movements as well although I think this is the last piece in the puzzle of getting the navigation really smooth with this method.

I was thinking something like this.

1. import peasy.*;
2. PeasyCam cam;
3. float xoff = 0;
4. float yoff = 0;
5. float transx;
6. float transy;
7. void setup() {
8.   size(1000, 800, P3D);
9.   cam = new PeasyCam(this, 100);
10.   cam.setMinimumDistance(60);
11.   cam.setMaximumDistance(1000);
12.   cam.setLeftDragHandler(null);
13.   cam.setCenterDragHandler(null);
14.   smooth();
15.   transx = 0;
16.   transy =0 ;
17. }
18. void draw() {
19.   background(0);
20.   translate(transx, transy);
21.   fill(255, 0, 0);
22.   rect(-500, -300, 1000, 600);  //My Image
23.   fill(255);
24.   textSize(20);
25.   text("This is my image, this is my image, this is my image, this is my image", -400, -200);
26.   text("This is my image, this is my image, this is my image, this is my image", -200, -100);
27.   text("This is my image, this is my image, this is my image, this is my image", -400, 0);
28.   text("This is my image, this is my image, this is my image, this is my image", -200, 100);
29.   text("This is my image, this is my image, this is my image, this is my image", -400, 200);
30.   println(transx + ", " + transy);
31. }
32. void mousePressed() {
33.   cursor(HAND);
34.   xoff = transx - mouseX;
35.   yoff = transy - mouseY;
36. }
37. void mouseDragged() {
38.   transx = mouseX + xoff;
39.   transy = mouseY + yoff;
40.   if (transx < -220) {
41.     transx = -220;
42.   }
43.   if (transy < -275) {
44.     transy = -275;
45.   }
46.   if (transy > 275) {
47.     transy = 275;
48.   }
49.   if (transx > 220) {
50.     transx = 220;
51.   }
52. }
53. void mouseReleased() {
54.   cursor(ARROW);
55. }

Ah fantastic, thank you Jeff, this looks really promising :)

Hi Jeff,

Sorry for the many comments, I just have one final question - I've been working from your solution for 3D picking here: http://processing.org/discourse/yabb2/YaBB.pl?num=1236203309 and I was wondering if you had a way of making the array into a 2D array so I can create a grid of buttons that are clickable in 3D? I've modified the code a little to create a line of clickable buttons here but the goal is to create a grid that occupies the screen (1280 x 768) as the basis of a simple image reveal puzzle game:


class Node {

  // variables
  int id;          // id
  int x, y, z, w, h;  // position (x, y, z) and width (w)
  float d;
  color c;         // color (in scene, not buffer)

  // constructor
  public Node(int id, int x, int y, int z, int w, int h, float d) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.z = z;
    this.w = w;
    this.h = h;
    this.d = d;
    c = color(15, 15, 15);
  }

  // make the color change
  public void changeColor() {
    int r = (int)red(c);
    int g = (int)green(c);
    int b = (int)blue(c);
    // c = color(r, 255 - g, b);
    c = color(255, 255, 255);
  }

  // display the Node on screen
  public void display(PGraphics ecran) {
    ecran.fill(c);
    drawNode(ecran);
  }

  // draw the Node in the buffer
  public void drawBuffer(PGraphics buffer) {
    color idColor = getColor(id);
    buffer.fill(idColor);
    drawNode(buffer);
  }

  private void drawNode(PGraphics g) {
    g.pushMatrix();
    g.translate(x, y, z);
    g.box(w, h, d);
    g.popMatrix();
  }
}

PGraphics buffer;   // buffer

Node[] Nodes;       // Nodes
public void setup() {
  size(1280, 768, P3D);
 
  buffer = createGraphics(width, height, P3D);
 Nodes = new Node[1280];
 
    for (int i = 0; i < Nodes.length; i++) {
    Nodes[i] = new Node(
    i, i*1, height/2, 0, 1, 1, 1  
      );
  }

}
 
  public void draw() {

   
  noStroke();
  for (int i = 0; i < Nodes.length; i++) {
    Nodes[i].display(this.g);
  }
 
  }
 
  void mouseClicked() {
 // cam.lookAt(mouseX, mouseY, 0);

  // draw the scene in the buffer

  buffer.beginDraw();
  buffer.background(getColor(-1)); // since background is not an object, its id is -1
  buffer.noStroke();
  buffer.sphereDetail(10);
  buffer.setMatrix(((PGraphics3D)g).camera);
  //buffer.camera(-20, -20, 50, 0, 0, 0, 0, 1, 0);
  //buffer.rotateY(a);
  for (int i = 0; i < Nodes.length; i++) {
    Nodes[i].drawBuffer(buffer);
  }
  buffer.endDraw();

  // get the pixel color under the mouse
  color pick = buffer.get(mouseX, mouseY);
  // get object id
  int id = getId(pick);
  // if id > 0 (background id = -1)
   if (id >= 0) {
   // change the Node color
   Nodes[id].changeColor();

}
}

// id 0 gives color -2, etc.
color getColor(int id) {
  return -(id + 2);
}

// color -2 gives 0, etc.
int getId(color c) {
  return -(c + 2);
}

 
Thank you very much for your time Jeff - Tom

Actually, I got the 2D array to work but it's a bit tricky selecting the right pixel in the 2D array - at the moment   Nodes[id][id].changeColor();  selects pixels across a diagonal line:

class Node {

  // variables
  int id;          // id
  int x, y, z, w, h;  // position (x, y, z) and width (w)
  float d;
  color c;         // color (in scene, not buffer)

  // constructor
  public Node(int id, int x, int y, int z, int w, int h, float d) {
    this.id = id;
    this.x = x;
    this.y = y;
    this.z = z;
    this.w = w;
    this.h = h;
    this.d = d;
    c = color(0);
  }

  // make the color change
  public void changeColor() {
    int r = (int)red(c);
    int g = (int)green(c);
    int b = (int)blue(c);
     c = color(255);
   // c = color(255, 255, 255);
  }

  // display the Node on screen
  public void display(PGraphics ecran) {
    ecran.fill(c);
    drawNode(ecran);
  }

  // draw the Node in the buffer
  public void drawBuffer(PGraphics buffer) {
    color idColor = getColor(id);
    buffer.fill(idColor);
    drawNode(buffer);
  }

  private void drawNode(PGraphics g) {
    g.pushMatrix();
    g.translate(x, y, z);
    g.box(w, h, d);
    g.popMatrix();
  }
}

PGraphics buffer;   // buffer

Node[][] Nodes;       // Nodes
int cols = 1280;
int rows = 768;
public void setup() {

  size(1280, 768, P3D);
 
 
  buffer = createGraphics(width, height, P3D);
 Nodes = new Node[cols][rows];
 
    for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
    Nodes[i][j] = new Node(
     i, i*1, j*1, 0, 1, 1, 1  
      );
  }

}
}
 
  public void draw() {

 
  noStroke();

        for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
   Nodes[i][j].display(this.g);
  }
 
 
  }

  }
 
  void mouseClicked() {
 // cam.lookAt(mouseX, mouseY, 0);

  // draw the scene in the buffer

  buffer.beginDraw();
  buffer.background(getColor(-1)); // since background is not an object, its id is -1
  buffer.noStroke();
  buffer.sphereDetail(10);
  buffer.setMatrix(((PGraphics3D)g).camera);
  //buffer.camera(-20, -20, 50, 0, 0, 0, 0, 1, 0);
  //buffer.rotateY(a);

 
        for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
   Nodes[i][j].drawBuffer(buffer);
  }
        }
 
 
  buffer.endDraw();

  // get the pixel color under the mouse
  color pick = buffer.get(mouseX, mouseY);
  // get object id
  int id = getId(pick);
  // if id > 0 (background id = -1)
   if (id >= 0) {
   // change the Node color
   Nodes[id][id].changeColor();

}
}

// id 0 gives color -2, etc.
color getColor(int id) {
  return -(id + 2);
}

// color -2 gives 0, etc.
int getId(color c) {
  return -(c + 2);
}

Ok, you're doing that the really hard way.. haha
Try this...

1. color c = color(255);
2. void setup() {
3.   size(1280, 768);
4.   background(0);
5. }
6. void draw() {
7. }
8. void mousePressed() {
9.   set(mouseX,mouseY, c);
10. }

Also see pixels[].