处理：如何使 box() 在 3d 模式下显示为实体（非透明）

Question

我正在尝试在 Processing 中创建 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

问题在于这些框是相交的，而这些相交框的笔画给出了“透视”的外观。

我注意到您使用的是 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 变得有趣，因为您需要它。

漂亮的构图和色彩！（框架（window 大小）可以使用一些 iteration/tweaking，但我猜这是 WIP））

处理：如何使 box() 在 3d 模式下显示为实体（非透明）

Processing: how to make box() appear solid (non-transparent) in 3d mode

processing

graphics