How to take out the texture from each of the faces of a cube in P5.js

user_15587949 0
Viewed 88

I have been doing some work on P5.js using perlin noise. I have already done a cube with perlin noise texture all over it. But my question is: Can I separate each face's texture?

You may be wondering why would I need this. I need to make a cubemap with it, so I need to take each face's texture and build the image.

I think I will make this crystal clear with images.

This is my cube.

enter image description here

I need to make something like this enter image description here

Now I will show you my code

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; 
    }

    
}
p5.js perlin-noise javascript
1 Answers

Whenever you calculate h, you should save that along with its indexX, indexY, indexZ (or x,y,z? I'm not entirely sure which variable denotes the position of each pixel in your code) in an array. You could end up with something like:

const myArray =
[
  {
    h: 123123,
    indexX: 234,
    indexY: 345,
    indexZ: 456,
  },
  ...
]

Now you have information on what h you want to place on each location and you only need to find out how to map each point on the cube surface to a 2 dimensional map like the one you linked.

user_149360010
Related