Comment former une forme à partir d'une grille horizontale? Avec le traitement?

Question

Je me demandais comment obtenir un effet similaire à la forme de la lettre "A" sortant d'une grille horizontale (voir l'image ci-jointe). Est-ce que quelqu'un sait comment trouver un tutoriel? Comment s'appelle cette technique? Pouvez-vous le faire avec Processing? Ou avez-vous besoin d'un programme 3D?

Toute indication est la bienvenue!

Answer 1

Imaginer l'extrusion d'un blanc floue Une forme sur un fond noir, un height map si vous voulez. En cours de traitement, vous parcourez chaque pixel de l'image et vous mappez le brightness de chaque pixel sur l'axe z (comme vous avez déjà les coordonnées x, y).

En bref:

1. charge ou de créer une image de l'une forme avec un fond noir et lisse/brouiller l'image pour obtenir des courbes lisses lorsque la luminosité de la cartographie à l'élévation
boucle
2. par pixels et la carte chaque la luminosité de pixel à la position az

Voici un croquis commenté pour illustrer l'idée:

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

Il y a plusieurs façons de l'implémenter. Ceci est juste une option. En gardant à l'esprit que le code n'est pas optimisé pour la vitesse, il est plutôt laissé plus bavard pour qu'il soit plus facile à comprendre et à modifier.

Ne hésitez pas à jouer avec les variables et les valeurs disponibles (par exemple, la taille du texte, la quantité de flou, la hauteur maximale., Espacement horizontal et vertical, etc.), la pratique de jouer avec createShape() (ex. élargir les lignes horizontales, etc.) ... dans l'ensemble, amusez-vous! Cela prouve que vous n'avez vraiment besoin d'utiliser un programme 3D que si vous le souhaitez vraiment. Si vous souhaitez en utiliser un, Photoshop Extended dispose d'une option de carte de profondeur 3D et la plupart des éditeurs 3D vous permettent de créer un maillage à partir d'une carte de hauteur à laquelle vous pouvez appliquer une texture dépouillée.