#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# need help with 3d text transformation

edited March 2016

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!

Tagged:

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

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

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!