0
285
VisualizaçõesCómo sacar la textura de cada una de las caras de un cubo en P5.js
He estado trabajando en P5.js usando ruido perlin. Ya he hecho un cubo con textura de ruido perlin por todas partes. Pero mi pregunta es: ¿Puedo separar la textura de cada cara?
Quizás se pregunte por qué necesitaría esto. Necesito hacer un mapa de cubos con él, así que necesito tomar la textura de cada cara y construir la imagen.
Creo que dejaré esto muy claro con imágenes.
Este es mi cubo.
necesito hacer algo como esto 
Ahora te mostraré mi código.
function setup() { createCanvas(500,500, WEBGL); angleMode(DEGREES) noiseDetail(1) //noLoop(); } function draw() { background(30); noStroke(); translate(0,0, -width) rotateX(frameCount * 3) rotateY(frameCount * 3) translate(-width/2, -height/2, -width/2); let space = width / 20; let indexX = 0; for (let x = 0; x < width; x += space) { let indexY = 0; for(let y = 0; y < height; y += space) { let indexZ = 0 for (let z = 0; z < width; z += space) { push(); let h = noise(indexX, indexY, indexZ) * 255; fill(h); translate(x,y,z) box(space); pop(); indexZ += 0.1; } indexY += 0.1; } indexX += 0.1; } }1 Respostas
Responde à pergunta0
Cada vez que calcule h , debe guardarlo junto con su indexX , indexY , indexZ (o x , y , z ? No estoy completamente seguro de qué variable indica la posición de cada píxel en su código) en una matriz. Podrías terminar con algo como:
const myArray = [ { h: 123123, indexX: 234, indexY: 345, indexZ: 456, }, ... ] Ahora tiene información sobre qué h desea colocar en cada ubicación y solo necesita descubrir cómo asignar cada punto en la superficie del cubo a un mapa bidimensional como el que vinculó.