# Normalize and center coordinate system
**URL:** https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553
**Category:** Coding Questions
**Created:** [June 7, 2021, 1:08pm UTC](https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553 "2021-06-07T13:08:57Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@blakec](https://discourse.processing.org/u/blakec)
#### Post date: [June 7, 2021, 1:08pm UTC](https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553/1 "2021-06-07T13:08:57Z")
In my drawings, I’d like to set the xy axis centred in the middle of the screen and rescaled between -0.5 and 0.5 instead of using screen coordinates. That makes the drawing independent of screen resolution.
I tried:
```auto
function draw() {
background(255);
let _ratio = windowWidth / windowHeight;
let _scale;
// keep aspect ratio and use centre square of the screen.
if (_ratio >= 1.0) {
_scale = windowHeight;
} else {
_scale = windowWidth;
}
// translate to the centre of the screen
translate(windowWidth / 2, windowHeight / 2);
// scale coordinate system between
scale(_scale);
line(-0.5, 0, 0.5, 0); // x-axis
line(0, -0.5, 0, 0.5); // y-axis
}
```
Now all strokes are scaled as well. How can I normalise the coordinate system only without rescaling the strokes?
I know I can use `map` function to recalculate every coordinate, but that makes the code rather long if I have to remap every coordinate before calling a draw function.
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 7, 2021, 1:16pm UTC](https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553/2 "2021-06-07T13:16:37Z")
Hello,
Consider using vectors for your (x,y) co-ordinates.
You can then scale these as you wish.
References:
[https://p5js.org/reference/#/p5.Vector](https://p5js.org/reference/#/p5.Vector)
There is a learning curve to this but worth it in the end.
If you use WEBGL it will automatically put the origin at the center of the screen:
[https://p5js.org/reference/#/p5/createCanvas](https://p5js.org/reference/#/p5/createCanvas)
And you can go 3D with those vectors!
`:)`
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [June 7, 2021, 9:06pm UTC](https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553/3 "2021-06-07T21:06:45Z")
> [@blakec](#):
>
> Now all strokes are scaled as well
Probably the easiest way is to set the stroke weight based on \_scale i.e. something like
```auto
strokeWeight(1.0 / _scale);
```
should work. You might need to change the `1.0` to represent the stroke weight required when
`_scale = 1`
---
### Author:  [@blakec](https://discourse.processing.org/u/blakec)
#### Post date: [June 8, 2021, 8:11am UTC](https://discourse.processing.org/t/normalize-and-center-coordinate-system/30553/4 "2021-06-08T08:11:39Z")
That works! Thank you.