Isometric tilemap circle around object

Question

I am developing an isometric game like Anno 1602. I have an isometric tilemap. The default tilesize is 64x31.

My goal is to show the area a building has influence to. For that I want to show a circle in isometric style around that building. Look at the picture below:

I need to find an algorithm which turns information about a building (width, height, radius in tiles) into a polygon containing screen coordinates of the outer parts of the dark area (see picture, I want the red points). For example, the data for the picture above would be:

w = 2; h = 2; r = 3

I tried creating circles with midpoint algorithm for each tile of the building. Merging all points together and running concave hull algorithm to get the outer most points. But this did not yield nice results.

What could be an approach to get points to create a polygon which resembles an isometric area around an object.

Answer 1

The best way to approach this is to get the values of the coordinates to the x axis around the object, then generate the y coordinate using some simple math.

function genCircle(x,y,radius,precision){ // x and y are coordinates of object
  let arr=[];
  for(let i=-radius;i<=radius;i+=precision){
    let ty=(radius**2-(i)**2)/(y);
    arr.push([i+x,ty-y]); // One half of the circle
    arr.push([i+x,-ty-y]); // Get the negative coordinates for the other
  }
  return arr; // Return an array of x and y values
}

The function above takes in x and y offset values, the radius of the circle, and the precision of the measurements. Simply apply this to your program and adjust the output accordingly, depending on how you process coordinates you may want to scale them to fit with the isometric perspective.