need help with 3d text transformation

edited March 2016 in How To...

Hi all! I want to do something like this in processing: https://mir-s3-cdn-cf.behance.net/project_modules/disp/7d7bf511219015.560f42336f0bd.gif I have one image which I use as a texture and I'm constructing complicated plane with beginShape(TRIANGLE_STRIP) to reach
a similar effect, but it's quite difficult to render texture with letters on such complicated object. I thought that it would be much easier to have one rect with this inscription and after that blent this rectangle in different ways. But I have no idea how to do this? I will be very thankful for any suggestion!

Answers

  • i don't think you need to do much more than change the z position of bits of the text to get that effect. which means the texture mapping is quite easy.

    pick a point on the top edge and a point on the bottom edge. move these towards the camera. create a quad using the left hand corners and the moved edge and another using the moved edge and the right hand quarters.

  • actually, looking at frames from that, it is 9 sections, 3 for each line, with a diagonal cut across each of those 9 sections. BUT the texture coords for those don't change, just the positions of the corners.

  • edited March 2016

    @koogs Does it mean that I should have 9 texture images and 9 separated shapes for this? I mean I shouldn't use beginShape function parameters like TRIANGLE_STRIP or QUAD_STRIP ? Thanks for help!

  • Answer ✓

    TRIANGLES will be easier to get working, i think. i don't think you can do it in one TRIANGLE_STRIP

    0-1-2-3
    |\|\|\|
    4-5-6-7
    |\|\|\|
    8-9-A-B
    |\|\|\|
    C-D-E-F
    
  • and use vertex(x, y, z, u, v)

    u and v are just combinations of 0.0, .333, .666, 1.0, assuming you're using textureMode(NORMAL);

  • edited March 2016 Answer ✓

    the image, image.png, is 640x480 but it should handle other sizes.

    press a key to distort the text.

    # acd 2016
    # forum.processing.org/two/discussion/15609/need-help-with-3d-text-transformation
    import java.util.List;
    
    PImage img;
    List<Quintuple> points = new ArrayList<Quintuple>();
    List<Tri> t = new ArrayList<Tri>(); // needs better name...
    public static final int A = 10;
    public static final int B = 11;
    public static final int C = 12;
    public static final int D = 13;
    public static final int E = 14;
    public static final int F = 15;
    
    int hwidth;
    
    void setup() {
      size(640, 480, P3D);
      img = loadImage("image.png");
      hwidth = width / 2;
    
      // 0-1-2-3
      // |\|\|\|
      // 4-5-6-7
      // |\|\|\|
      // 8-9-A-B
      // |\|\|\|
      // C-D-E-F
    
      // points
      for (int y = 0; y < 4; y++) {
        for (int x = 0; x < 4; x++) {
          points.add(new Quintuple(img.width / 3 * x, img.height / 3 * y, 0, img.width / 3 * x, img.height / 3 * y));
        }
      }
    
      // triangles
      t.add(new Tri(0, 4, 5));
      t.add(new Tri(0, 5, 1));
      t.add(new Tri(1, 5, 6));
      t.add(new Tri(1, 6, 2));
      t.add(new Tri(2, 6, 7));
      t.add(new Tri(2, 7, 3));
      t.add(new Tri(4, 8, 9));
      t.add(new Tri(4, 9, 5));
      t.add(new Tri(5, 9, A));
      t.add(new Tri(5, A, 6));
      t.add(new Tri(6, A, B));
      t.add(new Tri(6, B, 7));
      t.add(new Tri(8, C, D));
      t.add(new Tri(8, D, 9));
      t.add(new Tri(9, D, E));
      t.add(new Tri(9, E, A));
      t.add(new Tri(A, E, F));
      t.add(new Tri(A, F, B));
    }
    
    void draw() {
      background(128);
      // centre image
      translate((width - img.width) / 2, (height - img.height) / 2);
      noStroke();
    
      // draw all the triangles
      beginShape(TRIANGLES);
      texture(img);
      for (Tri tri : t) {
        triVertex(tri);
      }
      endShape();
    }
    
    void triVertex(Tri t) {
      // add all the vertices for this triangle
      tvertex(points.get(t.q0));
      tvertex(points.get(t.q1));
      tvertex(points.get(t.q2));
    }
    
    void tvertex(Quintuple q) {
      vertex(q.pos.x, q.pos.y, q.pos.z, q.u, q.v);
    }
    
    // triangle
    class Tri {
      int q0, q1, q2;
    
      public Tri(int q0, int q1, int q2) {
        this.q0 = q0;
        this.q1 = q1;
        this.q2 = q2;
      }
    }
    
    // position and texture coords
    public class Quintuple {
      PVector pos;
      float u, v;
    
      public Quintuple(float x, float y, float z, float u, float v) {
        pos = new PVector(x, y, z);
        this.u = u;
        this.v = v;
      }
    }
    
    void keyPressed() {
      // randomise z of all points
      for (Quintuple q : points) {
        q.pos.z = random(-100, 100);
      }
    }
    
  • @koogs wow! thanks a loooot!

Sign In or Register to comment.