need help with 3d text transformation

ira_ira

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!

koogs

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.

koogs

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.

ira_ira

@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!

koogs

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

koogs

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

koogs

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

ira_ira

@koogs wow! thanks a loooot!