# Zooming in on specific point. (Translate and scale)

**URL:** <https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310>\
**Category:** Coding Questions\
**Created:** [June 26, 2019, 3:42pm UTC](https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310 "2019-06-26T15:42:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kiwipai](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@Kiwipai](https://discourse.processing.org/u/Kiwipai)\
**Post date:** [June 26, 2019, 3:42pm UTC](https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310/1 "2019-06-26T15:42:43Z")

</div>

So I’m fairly new to graphical programming and I’m stuck at something that I’m guessing has a simple solution.

I want to make some lines out of points and then translate and scale so that my lines will be visible no matter where I decided to put the points. If there is any kind “showDrawn” function that does this for then that’d be great.  
I didn’t find that however so I had to resort to trying it myself. First I found the average x and y coordinates and transformed so they were my center point:

```auto
translate((width/2)-avgx, (height/2)-avgy);

```

Everything good so far.  
Then I wanted to scale it to fit my screen, the problem is that scaling offsets the translation, my center points seem to veer off towards the bottom right corner when I try to zoom in.  
Is there a way to scale while keeping the center I translated to in the center?

Here’s my code:  
[https://editor.p5js.org/EirikKonow/sketches/EJNC\_BGsb](https://editor.p5js.org/EirikKonow/sketches/EJNC_BGsb)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [June 27, 2019, 1:29am UTC](https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310/2 "2019-06-27T01:29:26Z")

</div>

looks like you first scale and then translate,  
better turn that around

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [June 27, 2019, 8:55am UTC](https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310/3 "2019-06-27T08:55:36Z")

</div>

s̶h̶o̶u̶l̶d̶n̶’̶t̶ ̶y̶o̶u̶ ̶b̶e̶ ̶u̶s̶i̶n̶g̶ ̶p̶u̶s̶h̶(̶)̶ ̶a̶n̶d̶ ̶p̶o̶p̶(̶)̶ ̶s̶o̶ ̶y̶o̶u̶r̶ ̶t̶r̶a̶n̶s̶l̶a̶t̶i̶o̶n̶s̶ ̶d̶o̶n̶’̶t̶ ̶a̶c̶c̶u̶m̶u̶l̶a̶t̶e̶?̶ ̶a̶l̶s̶o̶ ̶w̶h̶a̶t̶ ̶k̶l̶l̶ ̶s̶a̶i̶d̶ ̶t̶o̶o̶.̶

edit scratch that, what was i thinking. i believe you actually want something like [this](https://editor.p5js.org/hotfooted/sketches/ySowsFtK3)

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [June 27, 2019, 11:06am UTC](https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310/4 "2019-06-27T11:06:18Z")

</div>

Hey There !

Do you mean you want the lines always I’m the middle of the screen ?

How about :

```auto

int cameraX , cameraY
cameraX = posX - width/2
cameraY = posY - width/2
translate(-cameraX,-cameraY)

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 28, 2019, 2:35pm UTC](https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310/5 "2019-06-28T14:35:21Z")

</div>

This inspired me.  
I have come across this before and like to “scale” the plot that I draw and not use scale();  
Not p5.js but an example.

Example with embellishments (translating, scaling and some)

```auto
long time, timeLast;
float scale = 1;
float theta;
float x, y;

void setup()
  {
  size(1000, 1000);  
  time = 1000;
  timeLast = millis();
  }
  
void draw()
  {  
  background(0);
   
  translate(width/2, height/2);

// Rotates in a circle  
  theta += TAU/500;
  x = 150*sin(3*theta);
  y = 150*cos(3*theta);
  translate(x, y);
  
// if (timeLast + time < millis()) //Remove comment to see this effect
    { 
    timeLast = millis();  
    //scale = 50;
    // modulating scale
    scale = 10*(sin(theta)+1);
    }
    
    for(float x = 0; x < TAU; x+= TAU/(scale*10) )
      {
      float y = 5*sin(x);
      stroke(255, 255, 0);
      strokeWeight(3);
      point(scale*x,scale*y);
      stroke(255);
      line (0, -10*scale, 0, +10*scale);
      line (0, 0, 10*scale, 0);
      }
  println(frameRate);    
  }

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 3, 2019, 4:36am UTC](https://discourse.processing.org/t/zooming-in-on-specific-point-translate-and-scale/12310/6 "2019-07-03T04:36:12Z")

</div>

> [@Kiwipai](#):
>
> my center points seem to veer off towards the bottom right corner when I try to zoom in.  
> Is there a way to scale while keeping the center I translated to in the center?

yes. you need to break up your translate into two stages, and do the scaling between them, while the center of your coordinate system is still at 0,0.

1. translate(width/2, height/2);
2. scale(amt)
3. translate(-avgx, -avgy);

For a recent related discussion, see:

> [@How can I center an object on my screen that moves?](https://discourse.processing.org/t/how-can-i-center-an-object-on-my-screen-that-moves/12196/4):
>
> Understanding the relationship between translate, scale, and the idea of a 2D “camera” can sometimes be a bit tricky. It is worth reviewing the coordinate system and 2D transformations tutorials: [https://processing.org/tutorials/drawing/](https://processing.org/tutorials/drawing/)[https://processing.org/tutorials/transform2d/](https://processing.org/tutorials/transform2d/) However, in the end, there are three key transformations: translate to the center of the screen optionally scale the view, e.g. based on player speed or inter-player distance translate again to recenter the came…