如何从水平线网格中形成形状?与处理? [英] How to form a shape out of horizontal line grid? With Processing?

问题描述

我想知道如何实现类似的效果，例如从水平线网格中出来的字母A"的形状(见附图).有人知道如何找到教程吗?这种技术怎么称呼?你能用Processing做到吗?或者您需要一个 3D 程序?

非常欢迎任何提示！

解决方案

想象在黑色背景上挤出一个模糊的白色 A 形状，一个

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

这证明除非您真的想要，否则您实际上不需要使用 3D 程序.

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

I was wondering how to achieve a similar effect like the shape of the letter "A" coming out of a horizontal line grid (see picture attached). Does somebody know how to find a tutorial? How is this technique called? Can you do it with Processing? Or do you need a 3D program?

Any hint is very welcome!

解决方案

Imagine extruding a blurred white A shape on a black background, a height map if you will.

In Processing you'd loop through each pixel in the image and map the brightness of each pixel to the z axis (as you already have the x,y coordinate).

In short:

1. load or create an image of the A shape with a black background and smooth/blur the image to get smooth curves when mapping brightness to elevation
2. loop through pixels and map each pixel's brightness to a z position

Here's a commented sketch to illustrate the idea:

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);
}

There are multiple ways to implement this. This is just one option. Bare in mind the code isn't optimised for speed, instead left more verbose so it's easier to understand and tweak.

Feel free to play with the available variables and values (e.g. text size, blur amount, max. height, horizontal and vertical spacing, etc.), practice playing with createShape()(e.g. expand the horizontal lines, etc.)...overall, have fun!

This proves you don't really need to use a 3D program unless you really want to.

If you wanted to use one, Photoshop Extended has a 3D depth map option and most 3D editor allow you to create a mesh from a height map, to which you could apply a stripped texture.

这篇关于如何从水平线网格中形成形状?与处理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！