Image Heightmap out of recursive circles

please format code with </> button * homework policy * asking questions

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.

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); 
  }
}


A heightmap like the following…

1 Like

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:

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.


1 Like