# Error when zoom in and out

**URL:** <https://discourse.processing.org/t/error-when-zoom-in-and-out/15856>\
**Category:** Coding Questions\
**Created:** [November 27, 2019, 5:54am UTC](https://discourse.processing.org/t/error-when-zoom-in-and-out/15856 "2019-11-27T05:54:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thefso](https://avatars.discourse-cdn.com/v4/letter/t/d9b06d/32.png) [@thefso](https://discourse.processing.org/u/thefso)\
**Post date:** [November 27, 2019, 5:54am UTC](https://discourse.processing.org/t/error-when-zoom-in-and-out/15856/1 "2019-11-27T05:54:49Z")

</div>

I want to only use the wheel to zoom in and out and the center of our view is where the new dot is draw, but I fail to do so, anybody an idea how to solve that?

```auto
float sFactor = 1.0;
float transX = 0.0;
float transY = 0.0;//variable for zoom in and out.
float datas[][] = null;//vertor space for the offsets
float rp[][] = null;//distance and angle from 0,0
float Rspeed = 0.011;//rotation speed
PGraphics posi = null;
PGraphics cord = null;//rendering API
PVector size = new PVector(1, 1); // pixel/unit
PVector lastPos = new PVector();
float t = -0f;//init t.If you want program to start drawing at beginning,set this to 0.
float at = 0f;
float atv = 0.1f;
float atf = 100f;
float atT = 0.5f;
int reversey = 1;

void setup() {
    size(980, 980);
    String[] lines = loadStrings("datas.txt");
    datas = new float[lines.length][2];
    rp = new float[lines.length][2];//load math datas into vectors
    for (int i = 0; i < lines.length; i++) {
        String cache[] = split(lines[i], ",");
        if (cache.length<2) {break;}//convert vector into two part by ",",when no more datas stop loop.
        
    datas[i][0] = Float.parseFloat(cache[0].replace("[",""));
    datas[i][1] = Float.parseFloat(cache[1].replace("]",""));//delect [&] in data to get pure numbers.
    rp[i][0] = sqrt(datas[i][0]*datas[i][0]+datas[i][1]*datas[i][1]);//pythagorean theorem get distance
    rp[i][1] = atan2(datas[i][1],datas[i][0]);//tan to get angle
    }
  posi = createGraphics(width, height);
  cord = createGraphics(width, height);
  cord.beginDraw();
  cord.stroke(0,15,25,100);
  cord.line(0, cord.height/2f, cord.width, cord.height/2f);
  cord.line(cord.width/2f, 0, cord.width/2f, cord.height);
  cord.endDraw();
}

void draw() {
  background(255);
  pushMatrix();
  if(sFactor !=1){translate(transX,transY);}
  scale(sFactor);
  t+=Rspeed;
  at+=atv;
  image(cord, 0, 0);
  PVector center = new PVector();
  PVector pointer = new PVector();
  noFill();
  stroke(255);
  for (int i = 0; i<datas.length; i++) {
    int m = 0;
    float aph = map(sin(((1-(float)i/datas.length)*atf+at)/atT),-1,1,50,255);    
    if (i>0) m = ((i+1)/2)*((i%2 == 0)?-1:1);
    float r = rp[i][0];
    stroke(175);//draw stroke for the circle
    ellipse(center.x*size.x+width/2f, reversey*center.y*size.y+height/2f, r*size.x*2f, r*size.y*2f);//draw the circle
    float theta = reversey*t*m+rp[i][1];
    pointer.add(new PVector(r*cos(theta), r*sin(theta)));
    if (m == 0) pointer.set(datas[0][0], datas[0][1]);
    stroke(100,(aph<240?255:0));
    line(center.x*size.x+width/2f, reversey*center.y*size.y+height/2f, pointer.x*size.x+width/2f, reversey*pointer.y*size.y+height/2f);
    center.set(pointer);
  }
  stroke(10, 255, 10);
  fill(100, 124, 255, 150);
  ellipse(pointer.x*size.x+width/2f, reversey*pointer.y*size.y+height/2f, 8, 8);
  if(t>=0){
    posi.beginDraw();
    posi.noStroke();//no stroke for the dot
    posi.fill(random(255),random(255),random(255));//fill random color to the dots
    posi.translate(posi.width/2f, posi.height/2f);
    //posi.line(lastPos.x*size.x,lastPos.y*size.y,pointer.x*size.x,pointer.y*size.y);
    posi.ellipse(pointer.x*size.x, reversey*pointer.y*size.y, 5, 5);
    posi.endDraw();
    image(posi, 0, 0);
    transX=-pointer.x*size.x*sFactor;
    transY=-pointer.y*size.y*sFactor;

  }
  lastPos.set(pointer);
  //noLoop();
  popMatrix();
}
void mouseWheel(MouseEvent X) {
    float wheel = X.getCount() > 0 ? 1.05 : X.getCount() < 0 ? 1.0/1.05 : 1.0;//? is same to if else
    sFactor *= wheel;
}

void keyPressed() {
    if (key == 'r') {
        sFactor = 1;
        transX = 0.0;
        transY = 0.0;
    }
}

```

and put this in the same folder under name datas.txt

```auto
[-35.80050232466736, -53.50018619527786]
[-120.3234326095086, 38.333403210741636]
[-29.587082883301573, -33.49354222172572]
[-28.740534719381618, -7.122051704274412]
[0.1836017962610832, 6.943291446742017]
[10.55205601090014, 22.970269958046057]

```

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 27, 2019, 10:15am UTC](https://discourse.processing.org/t/error-when-zoom-in-and-out/15856/2 "2019-11-27T10:15:46Z")

</div>

You need to translate the scale to the target position. Like this :

```auto
translate(-posX, -posY);
scale(zoom);
translate(posX, posY);

```

---

<div class="post-metadata">

**Author:** ![thefso](https://avatars.discourse-cdn.com/v4/letter/t/d9b06d/32.png) [@thefso](https://discourse.processing.org/u/thefso)\
**Post date:** [November 27, 2019, 8:32pm UTC](https://discourse.processing.org/t/error-when-zoom-in-and-out/15856/3 "2019-11-27T20:32:47Z")

</div>

Still dont work for me, can you help me edit my code?

---

<div class="post-metadata">

**Author:** ![Lexyth](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lexyth/32/7403_2.png) [@Lexyth](https://discourse.processing.org/u/Lexyth)\
**Post date:** [November 28, 2019, 11:05am UTC](https://discourse.processing.org/t/error-when-zoom-in-and-out/15856/4 "2019-11-28T11:05:29Z")

</div>

You need to to that for each PGraphics individually like cord.translate() and so on.