# Centre sketch on specific X and Y co-ordinates

**URL:** <https://discourse.processing.org/t/centre-sketch-on-specific-x-and-y-co-ordinates/9977>\
**Category:** Coding Questions\
**Created:** [April 4, 2019, 8:50pm UTC](https://discourse.processing.org/t/centre-sketch-on-specific-x-and-y-co-ordinates/9977 "2019-04-04T20:50:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![echo\_bravo](https://avatars.discourse-cdn.com/v4/letter/e/e56c9b/32.png) [@echo\_bravo](https://discourse.processing.org/u/echo_bravo)\
**Post date:** [April 4, 2019, 8:50pm UTC](https://discourse.processing.org/t/centre-sketch-on-specific-x-and-y-co-ordinates/9977/1 "2019-04-04T20:50:05Z")

</div>

Hi,

This is my first forum post/request so please forgive me if I miss any of the etiquette. I have used various various previous version of Java processing but am new to p5.js.

What I am struggling with is how to centre a sketch on a specific X and Y coordinate.  
For example I have a sketch that is drawing on a 200,200 canvas, however the overall size of the sketch is 1000,1000. I have a circle that is moving around the canvas and who’s x/y co-ords are stored in a json object. What I am looking for is a way to have the centre of the sketch stay focused on the x/y co-ordinates of the of the circle.

I also have background objects and other objects that are moving around the co-ordinate system so need the co-ordinate system to remain intact and unaffected by the effects of keeping the view of the sketch being centered.

Thank you all very much for any help you can give me in my problem 🙂

---

<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:** [April 4, 2019, 11:57pm UTC](https://discourse.processing.org/t/centre-sketch-on-specific-x-and-y-co-ordinates/9977/2 "2019-04-04T23:57:55Z")

</div>

i think idea is to  
translate to that circle center  
or use [this](https://editor.p5js.org/kll/sketches/NTUz55Nwg) way.

---

<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:** [April 6, 2019, 7:26pm UTC](https://discourse.processing.org/t/centre-sketch-on-specific-x-and-y-co-ordinates/9977/3 "2019-04-06T19:26:02Z")

</div>

At the top of draw, add:

```auto
translate(width/2.0, height/2.0); // center screen coordinates on 0,0
translate(-circleX, -circleY); // put circle at 0,0

```

Or combine those into one command:

```auto
translate(width/2.0-circleX, height/2.0-circleY);

```

Why?

Given a canvas 1000,1000 and a circle at 123,456 – you want the circle to render at 500, 500.

So the offset is:

> 500-123 = 377  
> 500-456 = 44

At the beginning of draw, you have translated by by 377,44. Now your coordinate system is intact, but your circle is drawing at the center (500,500). By intact, I mean that drawing at 123,456 is the center, while drawing 0, 456 is 123 pixels left of the center, et cetera – no need to push, pop, or translate back if you want your background objects in the same coordinate space.

Next frame the circle has moved – and the initial translate command re-centers the circle (and everything around it).

If you want some of background objects unaffected by the circle – say, a menu – you would isolate everything drawn the circle coordinate system with push/pop:

> push / translate / draw circle and neighbors / pop / draw-menu

> **[reference | p5.js](https://p5js.org/reference/#/p5/push)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.