# Image Heightmap out of recursive circles

**URL:** <https://discourse.processing.org/t/image-heightmap-out-of-recursive-circles/39394>\
**Category:** Coding Questions\
**Created:** [October 22, 2022, 11:47pm UTC](https://discourse.processing.org/t/image-heightmap-out-of-recursive-circles/39394 "2022-10-22T23:47:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [October 22, 2022, 11:47pm UTC](https://discourse.processing.org/t/image-heightmap-out-of-recursive-circles/39394/1 "2022-10-22T23:47:26Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hi, I’m wondering how to make a P3D heightmap out of the following grid of recursive circles? Is it possible since the circles aren’t a uniform cell or row size? I would like to create a height map from a loading image but have the recursive circles pattern as the net that wraps around the heightmap… like the following loading image (scroll down) except I am wrapping the image with a grid here.

```auto
void setup(){
  size (800,800);

}

void draw(){
  background(255);
  smooth(8);
  stroke(4);
  noFill();
  drawCircle(width/2, height/2, 400);
}

void drawCircle(float x, float y, float radius){
  ellipse(x,y,radius,radius);
  if(radius > 20){
    drawCircle(x + radius/2, y, radius/2);
    drawCircle(x - radius/2, y, radius/2);
    drawCircle(x, y - radius/2, radius/2);
    drawCircle(x, y - radius/2, radius/2);
    drawCircle(x, y + radius/2, radius/2);
    drawCircle(x + radius/2, y + radius/2, radius/2);
    drawCircle(x + radius/2, y - radius/2, radius/2);
    drawCircle(x - radius/2, y + radius/2, radius/2);
    drawCircle(x - radius/2, y - radius/2, radius/2); 
  }
}

```

 ![Screen Shot 2022-10-22 at 4.43.57 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/a/8a9d6308e88bc26eaf7d9e7049d0620d99bfda57.jpeg)  
A heightmap like the following…  
 ![Screen Shot 2022-08-17 at 10.30.55 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/b/0b1ca0e88ece4fd1c6981df6877b8429e8277cec.jpeg)

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 23, 2022, 2:50pm UTC](https://discourse.processing.org/t/image-heightmap-out-of-recursive-circles/39394/2 "2022-10-23T14:50:25Z")

</div>

Hello @asymmetric

The heightmap is not the 3D terrain but the 2D image.  
The idea is to transform the pixel values of an image to a height coordinate. So reading through all the pixels of your image you can build a 3D terrain.

You image is only black and white so you have pixels that are either 0 or 1 and it will result in a really harsh 3D terrain since you don’t have in between.  
What you can do is blur your image to get those in between values.  
I took your image to show you what it could give:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/7/e7c59623dfe3195ed98af7a106d2f6abab8989b0.jpeg)

---

<div class="post-metadata">

**Author:** ![asymmetric](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/asymmetric/32/16577_2.png) [@asymmetric](https://discourse.processing.org/u/asymmetric)\
**Post date:** [October 23, 2022, 5:31pm UTC](https://discourse.processing.org/t/image-heightmap-out-of-recursive-circles/39394/3 "2022-10-23T17:31:52Z")

</div>

Hi @jb4x ! I would like to create a height map from another image but have the recursive circles pattern as the net that wraps around the heightmap… like the following loading image except I am wrapping the image with a grid.

 ![IMG_5967](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/9/79a842e51eb3d487c3f958687b705ab5ab1d829b.jpeg)  
 ![Screen Shot 2022-07-02 at 4.06.51 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/2/721bd0bde697276a781bcfc9ee85a611971bd1c7.jpeg)