Reading/Changing 处理中的 3D 形状像素

Question

亲爱的智慧，

我正在尝试通过处理以下图像重新创建：

差不多我需要创建两个半立方体，它们的轮廓应该更粗，只要它们是"visually located within"背景中灰色方块设置的边界。

到目前为止，我已经设法实现了大部分目标图片，但是我找不到一种方法来读取需要变暗的各个像素。这是我现在在视觉上的位置（目前立方体旋转的差异并不重要）：

这是我的代码：

PGraphics pg1;
PGraphics pg2;

void setup() {
  size(400,400,P3D);
  background(255);

  pg1 = createGraphics(200,400,P3D);
  pg2 = createGraphics(200,400,P3D);

  loadPixels();
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      color grey = color(230);
      if (x > 99 && x < 300 && y > 99 && y < 300) { 
        pixels[y*width+x] = grey;
      }
    }
  }
  updatePixels();
}

void draw() {
  pg1.beginDraw(); 
    //left cube
    pg1.pushMatrix();
    pg1.ortho();
    pg1.translate(200,200,0);
    pg1.rotateX(-2.5289822);
    pg1.rotateY(-2.8117256);
    pg1.rotateZ(2.9670599);
    pg1.stroke(0,10);
    pg1.strokeWeight(0.5);
    pg1.noFill();
    pg1.box(200);
    pg1.popMatrix();

    //vertical line
    pg1.translate(200,200,0);
    pg1.stroke(230);
    pg1.strokeWeight(0.5);
    pg1.line(0,-200,0,0,200,0); 
  pg1.endDraw();

  pg2.beginDraw(); 
    //right cube
    pg2.pushMatrix();
    pg2.ortho();
    pg2.translate(0,200,0);
    pg2.rotateX(-1.24);
    pg2.rotateY(-2.0);
    pg2.rotateZ(-2.9670599);
    pg2.stroke(0,10);
    pg2.strokeWeight(0.5);
    pg2.noFill();
    pg2.box(200);
    pg2.popMatrix();

    //vertical line
    pg2.translate(0,200,0);
    pg2.stroke(230);
    pg2.strokeWeight(0.5);
    pg2.line(0,-200,0,0,200,0);
  pg2.endDraw();

  //display pgs
  image(pg1, 0, 0); 
  image(pg2, 200, 0);

  //how can I change specific pixels of the box outlines??
  loadPixels();
    for (int y = 0; y < height; y++) {
     for (int x = 0; x < width; x++) {
       if (x > 99 && x < 300 && y > 99 && y < 300) { 
         float r = red(pixels[y*width+x]);
         float g = green(pixels[y*width+x]);
         float b = blue(pixels[y*width+x]);
         pixels[y*width+x] =  color(r,g,b,255);
       }
     }
    }
    updatePixels();  
}

我一直在尝试根据像素位置或通过更改笔划颜色的 alpha 值（在绘制立方体之前或之后）更改笔划粗细的各种版本，但显然我做错了什么。我也不确定，如果这是可能的，因为我显然（？）试图从 3D 形状读取 2D 图像..

如有任何帮助，我们将不胜感激！非常感谢 - 伊利亚斯

Answer 1

这听起来像是 腐蚀过滤器 的工作。

您可以使用 filter() 函数对图像的该部分应用滤镜。 Processing 附带了一些预定义的过滤器，而 erode 函数完全符合您的描述。

考虑这段代码：

void setup(){
  size(200, 200);
}

void draw(){
  background(255);
  line(0, 0, width, height);
}

生成这个：

您可以应用侵蚀过滤器：

void setup(){
  size(200, 200);
}

void draw(){
  background(255);
  line(0, 0, width, height);
  filter(ERODE);
}

其中黑线：

您可以应用不同的滤镜，或多次应用相同的滤镜，以达到您想要的效果：

void setup(){
  size(200, 200);
}

void draw(){
  background(255);
  line(0, 0, width, height);
  for(int i = 0; i < 10; i++){
    filter(ERODE);
  }
}

请注意，您还可以将 filter() 函数应用于 PGraphics 的实例，这就是您想要做的。

Answer 2

使用像素完成这项任务可能会很乏味，尤其是因为您需要在某些区域绘制更粗的线条。

我建议再使用两个 PGraphics，它们呈现的内容与您现有的两个几乎相同，但笔触更粗。

然后您可以在代码顶部使用较粗的轮廓从 PGraphics copy() or blend() 像素。

将重复使用的指令分组到函数中通常是个好主意。这是使用额外函数和两个 PGraphics 层的代码调整版本：

PGraphics pg1;
PGraphics pg2;
PGraphics pg3;
PGraphics pg4;

void setup() {
  size(400,400,P3D);
  background(255);
  noStroke();
  fill(0,32);

  pg1 = createGraphics(200,400,P3D);
  pg2 = createGraphics(200,400,P3D);
  pg3 = createGraphics(200,400,P3D);
  pg4 = createGraphics(200,400,P3D);

  box(pg1,200,200,0,//pg,x,y,z
          -2.5289822,-2.8117256,2.9670599,//rx,ry,rz
          0,1.5,200);//stroke,thickness,boxSize
  box(pg2,0  ,200,0,
         -1.24,-2.0,-2.9670599,
         127,1.5,200);
  //same as above, just using thicker strokes
  box(pg3,200,200,0,
         -2.5289822,-2.8117256,2.9670599,
          0,3.5,200);
  box(pg4,0  ,200,0,
         -1.24,-2.0,-2.9670599,
         64,3.5,200);

  //display pgs
  image(pg1, 0, 0); 
  image(pg2, 200, 0);
  //copy pixels from pgs drawn with thicker lines
  copy(pg3, 100, 100, 100, 200, 
            100, 100, 100, 200);
  copy(pg4, 0  , 100, 100, 200, 
            200, 100, 100, 200);
  //overlay transparent rectangle on top
  rect(100,100,200,200);
}

void draw() {

}
//render a box in a given PGraphics with options for position, rotation, stroke and size
void box(PGraphics pg,
         float x,float y,float z,
         float rx,float ry,float rz,
         int cubeStroke,float cubeStrokeWeight,float cubeSize){
  pg.beginDraw(); 
    //left cube
    pg.pushMatrix();
    pg.ortho();
    pg.translate(x,y,z);
    pg.rotateX(rx);
    pg.rotateY(ry);
    pg.rotateZ(rz);
    pg.stroke(cubeStroke);
    pg.strokeWeight(cubeStrokeWeight);
    pg.noFill();
    pg.box(cubeSize);
    pg.popMatrix();

    //vertical line
    pg.translate(200,200,0);
    pg.stroke(230);
    pg.strokeWeight(0.5);
    pg.line(0,-200,0,0,200,0); 
  pg.endDraw();
}

希望间距能让大家更容易理解许多论点。这是一个观点：

所以...

您应该在 Golan Levin's courses, for example related to Manfred Mohr. Additionally check out the ReCode Project

上查看丰富的资源

Reading/Changing 处理中的 3D 形状像素

Reading/Changing pixels of 3D shapes in Processing

3d

processing

pixels