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.