Question

我想知道如何实现类似的效果，如水平线网格中出现的字母“A”的形状（见附图）。有人知道如何找到教程吗？这项技术怎么称呼？你能用Processing做吗？或者您需要3D程序吗？

非常欢迎任何提示！

Answer 1

想象一下，如果你愿意的话，在黑色背景上挤出一个模糊的白色A形状，height map。

在处理中，您循环遍历图像中的每个像素，并将每个像素的brightness映射到z轴（因为您已经有x，y坐标）。

简而言之：

在将亮度映射到高程时加载或创建具有黑色背景的A形状的图像并使图像平滑/模糊以获得平滑的曲线
循环显示像素并将每个像素的亮度映射到z位置

这是一个评论的草图来说明这个想法：

PGraphics buffer;
PShape lines;

void setup(){
  size(400,400,P3D);
  smooth(8);

  //create a PGraphics buffer to draw an "A" into and then blur it -> could use a loaded PImage
  buffer = createGraphics(400,400);
  buffer.beginDraw();
  buffer.background(0);
  buffer.textSize(270);
  buffer.text("A",110,270);
  buffer.endDraw();
  //add blur (smooth edges = smooth elevation when moving to 3D)
  buffer.filter(BLUR,8);

  //setup PShape
  int hSpacing = 1;                //horizontal spacing
  int vSpacing = 9;                //vertical spacing
  float maxHeight = 30;            //maximum height (when brightness is mapped to elevation)             
  int lineStroke = color(255);

  float hw = buffer.width * 0.5;   //half width
  float hh = buffer.height * 0.5;  //half height


  lines = createShape(GROUP);
  //scan image on Y axis (skipping based on vertical spacing)
  for(int y = 0 ; y < buffer.height; y += vSpacing){
    //create a a shape made of lines
    PShape line = createShape();
    line.beginShape(LINES);
    line.stroke(lineStroke);
    line.strokeWeight(3);
    //scan image on X axis
    for(int x = 0; x < buffer.width; x += hSpacing){
      //if we're not at the last pixel
      if(x < buffer.width - 1){
        //calculate the next x position
        int nextX = x+1;
        //calculate the brightness for the current and next pixel
        float currentPixelBrightness = brightness(buffer.get(x,y));
        float nextPixelBrightness    = brightness(buffer.get(nextX,y));
        //map brightness levels to elevation
        float currentZ = map(currentPixelBrightness,0.0,255.0,0,maxHeight);
        float nextZ    = map(nextPixelBrightness,0.0,255.0,0,maxHeight);
        //add a line between the current and next pixel using the calculated elevations, but offseting by half the image's with so the PShape pivot is at the centre
        line.vertex(x - hw,y - hh,currentZ);
        line.vertex(nextX - hw,y - hh,nextZ);

      }
    }
    //finish the lines shape and add it to the main PShape
    line.endShape();
    lines.addChild(line);
  } 

}
void draw(){
  background(0);
  //debug mode - if mouse is pressed just render the 2D image
  if(mousePressed){
    image(buffer,0,0);
    return;
  }
  //otherwise render the 3D image, rotating on X axis based on mouse X position
  translate(width * 0.5,height * 0.5,0);
  rotateX(map(mouseX,0,width,-PI,PI));
  shape(lines,0,0);
}

有多种方法可以实现这一点。这只是一个选择。请记住，代码没有针对速度进行优化，而是更加冗长，因此更容易理解和调整。

随意使用可用的变量和值（例如文本大小，模糊量，最大高度，水平和垂直间距等），练习createShape()（例如展开水平线等）。）...总的来说，玩得开心！

这证明除非你真的想要，否则你真的不需要使用3D程序。

如果你想使用一个，Photoshop Extended有一个3D深度图选项，大多数3D编辑器允许你从高度图创建一个网格，你可以应用一个剥离的纹理。

如何用水平线网格形成一个形状？有处理？

1 个答案: