Help with noise map (terrain map)

Ahh OK so what’s going on in both these references is that the noise is used as a kind of ‘map’ to sample from, and display different assets or graphics depending on the brightness of the pixel/cell. It’s similar to how ASCII art is done (there is an example in the Topics > Library > Video I believe).

So first, load a bunch of different images into an array in setup(). Say about 5 of them. (or alternatively, colours for rects)

Then, use your noise to draw into a separate PGraphics object (think of an PGraphics object as another sketch window, but then stored in a variable), also called an offscreen buffer. Do it exactly the same as you normally do, but this time into the PGraphics object. See here: PGraphics \ Language (API).

When that is done, call loadPixels() on that object, and cycle through all pixels and get their brightness. Depending on that brightness, you display a different image asset (or render a different colour rect), like so:

// this snippet assumes you've created a PGraphics object named pg
// and that you've defined a grid by means of numCols and numRows vars

pg.loadPixels();
for (int i = 0; i < numCols; i++)
{
  for (int j = 0; j < numRows; j++)
  {
    // this is to find the right pixel in the sampling pgraphics
    int sampleX = i * pg.width / numCols;
    int sampleY = j * pg.height / numRows;
    int pixelIndex = j * pg.width + i;
    float br = brightness(pg.pixels[pixelIndex]);

    // and here you draw the cell with the right asset
    int cellX = i * width / numCols;
    int cellY = j * height / numRows;
    int cellW = width / numCols;
    int cellH = height / numRows;

    if (br < 50)
      image(images[0], cellX, cellY, cellW, cellH);
    else if (br < 100)
      image(images[1], cellX, cellY, cellW, cellH);
    else if (br < 150)
      image(images[2], cellX, cellY, cellW, cellH);
    // etc.
  }
}

I’ve not tested the above, but it should point you in the right direction.