# Need Help: Zoomable interface for a procedural drawing program

**URL:** <https://discourse.processing.org/t/need-help-zoomable-interface-for-a-procedural-drawing-program/243>\
**Category:** Coding Questions\
**Created:** [May 22, 2018, 7:16am UTC](https://discourse.processing.org/t/need-help-zoomable-interface-for-a-procedural-drawing-program/243 "2018-05-22T07:16:47Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![FyodorKrasniy](https://avatars.discourse-cdn.com/v4/letter/f/87869e/32.png) [@FyodorKrasniy](https://discourse.processing.org/u/FyodorKrasniy)\
**Post date:** [May 22, 2018, 7:16am UTC](https://discourse.processing.org/t/need-help-zoomable-interface-for-a-procedural-drawing-program/243/1 "2018-05-22T07:16:47Z")

</div>

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/](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?

```auto
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.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [May 22, 2018, 7:32am UTC](https://discourse.processing.org/t/need-help-zoomable-interface-for-a-procedural-drawing-program/243/2 "2018-05-22T07:32:41Z")

</div>

prince\_polka put a couple of posts together trying to demonstrate zooming and panning effects:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/20813/zooming-and-panning-headache#latest)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/20853/scale-translate-ab-comparission#latest)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

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