How to project/map from cartesian space to circular space

p5.js Coding Questions
1

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.

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.

2

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

3

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…

1 Like