What I’m trying to achieve is cross-sections of a 3D noise cube. The look I’m going for is like this:
But what I’m getting is more like this given the default perspective of the environment giving the conical perspective:
This is the result I’m getting:
The first thing I tried was using ortho(), but that doesn’t quite achieve the same look of having some kind of depth of field. Just flattens it like this:
I’ve also tried changing them from layered across the X to the Z axis and rotating them but they then have different sizes because it is making the ones lower on the Z axis smaller.
I’ve also tried to find a hack where I change the rotation for each depending on their screen location, but I can’t get a consistent formula that works to make the layers appear at a consistent angle across all the board.
Would changing the position of the camera to the left side of the screen achieve the effect? I’ve never played with that function. Beyond that, I’m not sure how else to tackle this problem. Would appreciate any suggestions. Bonus points if anyone has a way of making each layer have a higher strokeWeight() border so when the layers overlap, they don’t just blend into each other.
Full code:
color bg = color(18,18,18);
color clrA = color(57,190,227);
color clrB = color(142,57,227);
ArrayList<Layer> noiseLayers;
int numIters = 6;
float layerDiff = 0.2;
float layerSpace = 80;
int numCols, numRows;
float boxSize = 15;
int marginW = 80;
int marginH = 50;
int canvasW, canvasH;
float halfCanvasW, halfCanvasH;
float seedVal = random(0,1000000);
float yRot = 2.25;
void setup() {
size(1600, 850, P3D);
background(bg);
canvasW = width - (marginW*2);
canvasH = height - (marginH*2);
halfCanvasW = canvasW / 2;
halfCanvasH = canvasH / 2;
numCols = int(canvasW / boxSize);
numRows = int(canvasH / boxSize);
numCols = numRows;
noiseLayers = new ArrayList<Layer>();
makeLayers();
smooth(8);
ortho();
}
void draw() {
background(bg);
for(Layer l : noiseLayers){
l.render();
}
}
void makeLayers() {
for(int i=0; i<numIters; i++){
float xPos = width/2 + marginW - (floor(numIters/2) * (canvasW / numIters)) + (i * (canvasW / numIters));
float zOff = i * layerDiff;
color clr = lerpColor(clrA, clrB, map(i, 0, numIters, 0, 1));
float terrain[][] = new float[numCols][numRows];
float yOff = 0.0;
for (int y=0; y<numRows; y++) {
float xOff = 0.0;
for (int x=0; x<numCols; x++) {
terrain[x][y] = map(noise(xOff, yOff, zOff), 0, 1, -30, 30);
xOff += 0.3;
}
yOff += 0.3;
}
noiseLayers.add(new Layer(xPos, zOff, clr, terrain));
}
}
class Layer {
float layerPos;
float zOff;
color colorSel;
float[][] terrain;
Layer(float thePos, float theZ, color theColor, float[][]thePlane) {
layerPos = thePos;
zOff = theZ;
colorSel = theColor;
terrain = thePlane;
}
void update() {
//make changes as needed
}
void render() {
strokeWeight(1);
stroke(colorSel);
fill(bg);
//noFill();
pushMatrix();
translate(layerPos, height/1.35);
rotateY(-PI/yRot);
rotateZ(PI/5);
translate(-(canvasW/2), -(canvasH/2));
for(int y=0; y<numRows-1; y++){
beginShape(QUAD_STRIP);
for(int x=0; x<numCols; x++){
vertex(x*boxSize, y*boxSize, terrain[x][y]);
vertex(x*boxSize, (y+1)*boxSize, terrain[x][y+1]);
}
endShape();
}
popMatrix();
}
}
