Estoy tratando de usar el ruido perlin para crear un mapa de ruido usando un lienzo html.

Aquí está mi código:

 const width = noiseMap.length const height = noiseMap[0].length const colorMap = new Array(width * height).fill(0) const canvas = canvasRef.current const ctx = canvas.getContext('2d') const imageData = ctx.createImageData(width, height) for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const index = y * width + x const pixelIndex = index * 4 const rgbaColor: rgbaColorType = hexRgb(lerp('#FFFFFF', '#000000', noiseMap[x][y])) colorMap[index] = rgbaColor imageData.data[pixelIndex] = rgbaColor.red imageData.data[pixelIndex + 1] = rgbaColor.green imageData.data[pixelIndex + 2] = rgbaColor.blue imageData.data[pixelIndex + 3] = rgbaColor.alpha } } console.log(imageData) ctx.putImageData(imageData, 0, 0)

Información contextual:

noiseMap es una matriz bidimensional que contiene números del 0 al 1 (floatish). Los tamaños de matriz del mapa de ruido son iguales al ancho/alto del lienzo.

Una vez que ejecuto este código, el lienzo no se pinta en absoluto. Curiosamente, si elimino la multiplicación de índices de:

 const pixelIndex = index * 4

a

 const pixelIndex = index

Representa esto:

Tenga en cuenta que el mapa de ruido se sujeta, porque no estoy asignando datos correctamente a imageData.data. De hecho, aproximadamente 3/4 de la matriz imageData.data recibe 0.

Así que definitivamente necesito multiplicar el índice de píxeles por 4. Lo cual, según el registro de la consola, completa correctamente mi matriz imageData.data.

Así que me pregunto qué puede estar pasando... ¿alguna pista?