Need Help: Zoomable interface for a procedural drawing program

Heya, Ive been trying to figure out how to add a zoom function to this code, its a drawing program in the likes of Mr Doobs harmony - http://mrdoob.com/projects/harmony/

The thing Ive been trying to work out is how to zoom in and out of the canvas, while maintaining the drawing capacity to connect nodes together.

Ive tried to use multiple canvases, maxtrix transforms and a lot of other ways to try and figure this out, but Im possibly simply approaching this wrong…

Any suggestions?

float distThresh;


void setup() {

  hist = new ArrayList();
  distThresh = 100;

  size(500, 500);
}

void draw() {
}


ArrayList hist = new ArrayList();


void mouseDragged() {
 stroke(0, 10);
 PVector d = new PVector(mouseX, mouseY, 0);
 hist.add(0, d);
 for (int p = 0; p < hist.size(); p++) {
 PVector v = (PVector) hist.get(p);
 float joinChance = p/hist.size() + 
 d.dist(v)/distThresh;
 if (joinChance < random(0.4)) {
 float dx = d.x - v.x;
 float dy = d.y - v.y;
 float angle = atan2(dy, dx);
 float pad = d.dist(v)/3;
 line(d.x - (pad * cos(angle)), d.y - (pad * sin(angle)), v.x + (pad * cos(angle)), v.y + (pad * sin(angle)) );
 }
 }
 }
 

Hope someone can give me a hand, its been a project of mine trying to get this to work for a long time now as I really enjoy drawing with this style.

prince_polka put a couple of posts together trying to demonstrate zooming and panning effects:

Feel free to tag me in the future to fix these posts when the old forum (Forum-two) gets archive so to update the links above.

Kf