I'm attempting to generate a 256x256 heightmap using simplex noise. The simplex noise function produces values ranging from -1 to 1, and I'm struggling to convert these values into grayscale for my canvas.
import { SimplexNoise } from "three/examples/jsm/math/SimplexNoise";
const ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 256;
ctx.canvas.height = 256;
const simplex = new SimplexNoise();
for(let y = 0; y < ctx.canvas.width; y++) {
for(let x = 0; x < ctx.canvas.width; x++) {
let noise = simplex.noise(x, y);
noise = (noise + 1) / 2;
ctx.fillStyle = `rgba(0, 0, 0, ${noise})`;
ctx.fillRect(x, y, 1, 1)
}
}
The current approach is not working as expected, and I'm unsure how to properly translate the noise value into a suitable color representation for rendering on the canvas. Any assistance or guidance on this matter would be greatly appreciated!