处理：如何使Box（）在3D模式下显示固体（非透明）

Question

我正在尝试在处理中创建3D框的层。我希望它们看起来坚固，以便您看不到其他盒子后面的框，但是它们显示的方式使它们看起来透明。您可以看到其他盒子后面的盒子。我如何使它们显得坚固？

// number of boxes
int numBox = 300;

// width of each box
int boxWidth = 30;

// number of boxes per row
float numPerRow;

void setup() {
  size(800, 800, P3D);
  pixelDensity(1);
  colorMode(HSB, 360, 100, 100, 100);
  background(40, 6, 85);
  stroke(216, 0, 55);
  smooth(4);
  fill(0, 0, 90, 100);
  
  numPerRow = width / boxWidth;
  
}

void draw() {
  background(40, 6, 85);
  
  translate((boxWidth / 2), 100);
  rotateX(-PI/6);
  rotateY(PI/8);
  
  for (int i = 0; i < numBox; i++) {
    drawBox(i);
    
    if (i == numBox - 1) {
      noLoop();
    }
  }
}

void drawBox(int i) {
  if ((i % 2) == 0) {
    pushMatrix();
    translate(((boxWidth / 2) * i) % width, 20 * floor(i / (2 * numPerRow)));
    translate(0, -((i % 30) / 2));
    box(boxWidth, i % 30, boxWidth);
    popMatrix();
  };
}

盒子的显示方式的特写：

Answer 1

问题在于，这些盒子是相交的，这些相交框的笔触使外观“ see taby”。

我注意到您正在使用X和Y翻译，但不使用Z。
如果您不打算增加x，y间距避免交叉点，则可以轻松地在z轴上偏移行，以便彼此前面出现一排盒子。

这是您的代码的一个稍微修改的版本，说明了此想法：（

// number of boxes
int numBox = 300;

// width of each box
int boxWidth = 30;

// number of boxes per row
float numPerRow;

void setup() {
  size(800, 800, P3D);
  pixelDensity(1);
  colorMode(HSB, 360, 100, 100, 100);
  background(40, 6, 85);
  stroke(216, 0, 55);
  smooth(4);
  fill(0, 0, 90, 100);

  numPerRow = width / boxWidth;
}

void draw() {
  background(40, 6, 85);

  translate((boxWidth / 2), 100);
  if(mousePressed){
    rotateX(map(mouseY, 0, height, -PI, PI));
    rotateY(map(mouseX, 0, width, PI, -PI));
  }else{
    rotateX(-PI/6);
    rotateY(PI/8);
  }

  for (int i = 0; i < numBox; i++) {
    drawBox(i);

    //if (i == numBox - 1) {
    //  noLoop();
    //}
  }
}

void drawBox(int i) {
  if ((i % 2) == 0) {
    pushMatrix();
    float x = ((boxWidth / 2) * i) % width;
    float y = 20 * floor(i / (2 * numPerRow));
    float z = y * 1.5;
    translate(x, y, z);
    translate(0, -((i % 30) / 2));
    box(boxWidth, i % 30, boxWidth);
    popMatrix();
  };
}

单击并拖动以旋转并观察Z偏移量。

随意使Z作为您的兴趣，您需要它。

构图和颜色不错！
（框架（窗口大小）可以使用一些迭代/调整，但我猜这是WIP））

< img src =“ https://i.sstatic.net/tlexx.jpg” alt =“踏板立方的行深度偏移以避免交叉点”>