# How to project/map from cartesian space to circular space

**URL:** <https://discourse.processing.org/t/how-to-project-map-from-cartesian-space-to-circular-space/10640>\
**Category:** Coding Questions\
**Created:** [April 25, 2019, 8:40pm UTC](https://discourse.processing.org/t/how-to-project-map-from-cartesian-space-to-circular-space/10640 "2019-04-25T20:40:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![blkpanther](https://avatars.discourse-cdn.com/v4/letter/b/d9b06d/32.png) [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Post date:** [April 25, 2019, 8:40pm UTC](https://discourse.processing.org/t/how-to-project-map-from-cartesian-space-to-circular-space/10640/1 "2019-04-25T20:40:34Z")

</div>

Hi, I want to project or map points of specific locations to be within the confine of a circular space (not removing points). Considering map() function does mapping on 1 dimension, how can I do so to take into accounts the 2 dimensions?

Sample starter code below. For example if the mapping is horizontal, then the dots in the top part will be more crowded to fit in the circle. An alternative would be to project all the points onto polar coordinates which I can do. It would be technically easier but less generalizable: if need to map to an arbitrary shape instead such as polygon instead, then it won’t work.

```auto
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(0);
  for (let i=0; i<50;i++){
    ellipse(random(400), random(400),20,20);
    noLoop();

    }
  stroke(255);
  noFill();
  ellipse(200,200,400,400)
  }

```

Thanks in advance for inputs.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 26, 2019, 5:58am UTC](https://discourse.processing.org/t/how-to-project-map-from-cartesian-space-to-circular-space/10640/2 "2019-04-26T05:58:30Z")

</div>

You could load one image and map all its points - see loadPixels etc.in the reference

`map()` is only in one dimension but you could use one `map` for x and another for y

Not sure what you want to do with map then though

Maybe polar is better

But you will lose pixels and compromise the image so it gets distorted

Got several ideas

---

<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 29, 2019, 9:02pm UTC](https://discourse.processing.org/t/how-to-project-map-from-cartesian-space-to-circular-space/10640/3 "2019-04-29T21:02:47Z")

</div>

> [@blkpanther](#):
>
> Considering map() function does mapping on 1 dimension, how can I do so to take into accounts the 2 dimensions?

Suppose your rectangle is 0,0,100,100.

Your least distorted points will be 0,50 and 50,0 etc. – they will be identical on the rectangular projection and circular.

Your most distorted points will be 0,0 and 100,0 etc. – rather than being 50 rad 2 from the center (triangular hypotenuse), they will be 50 away (radius of the circle), which means your point at 0,0 will be moved to (14.64, 14.64).

So, you need something that introduces a non-linear displacement related to a circle – like a sin function…