如何用水平线网格形成形状？有处理吗？ [英] 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屋！