Truchet pattern 3D height map from blurred image

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

I would like to create a 3D heightmap of a blurred image out of the following truchet pattern grid (via “Processing: Creative Coding and Generative Art in Processing 2”), but I am running into a wall…

int tileSize = 24;
int rows = 35;
int cols = 35;
Tile[][] tiles = new Tile[rows][cols];

void setup(){
  size(800,800); // (tileSize*rows, tileSize*cols);
  smooth();
  background(255);
  
  for (int i = 0; i < rows; i++){
    for (int j = 0; j < cols; j++){
      tiles[i][j] = new Tile(j*tileSize, i*tileSize, tileSize);
      tiles[i][j].display();
    }
  }
}

class Tile{
  int sz;
  int x,y;
  int orient;
  
Tile(int x, int y, int w){
  this.x = x;
  this.y = y;
  sz = w;
  orient = int (random(0,3));
}

void display(){
  pushMatrix(); 
  translate(x,y);
  translate(sz/2, sz/2);
  rotate(orient*PI/2);
  translate(-sz/2,-sz/2);
  fill(0);
  triangle(sz,0,sz,sz,0,sz);
  popMatrix();
  }
}

please help @mnse :pray:

Hi @asymmetric,

still the same used in earlier post.

Look at it again and try to figure out what’s to do…
As a Hint: read the blurred image into a buffer (maybe convert to grayscale beforehand), and map ie brightness from black to white (-1 to 1) and apply it to the corresponding z-coords (maybe multiplied with a factor, ie. 50.).

Cheers
— mnse