使用triangle_strip模式处理形状的纹理

Question

I want to construct TRIANGLE_STRIP shape with different texture in each sector. Is it possible to use TRIANGLE_STRIP shape in this case? I can't understand how to set horizontal and vertical coordinate for the texture mapping in this shape mode because each triangle shares vertex points with each other and because of that I can set horizontal and vertical coordinate for the texture mapping only for one image.

PImage img1, img2, img3, img4, img5;
void setup() {
  size(800, 300, P3D);
  img1 = loadImage("img1.png");
  img2 = loadImage("img2.png");
  ....
  textureMode(NORMAL);
 // textureWrap(REPEAT);
}
void draw(){
  background(0);
  stroke(255);
   beginShape(TRIANGLE_STRIP);
   texture(img1);
    vertex(30, 286,0,1);
    vertex(158, 30, 0.5, 0);
    vertex(286, 286,1,1);
    texture(img2);
    vertex(414, 30, ?, ?);
    texture(img3);
    vertex(542, 286, ?, ?);
    texture(img4);
    vertex(670, 30,?,?);
    texture(img4);
    vertex(798, 286,?,?);
    endShape();
}

UPD

I wand to acheive the result similar to that animation: https://mir-s3-cdn-cf.behance.net/project_modules/disp/7d7bf511219015.560f42336f0bd.gif

First of all I want to construct complicated object based on TRIANGLE_STRIP or QUAD_STRIP shape mode and after that just change z coordinate of vertexes.

So I just took image with such inscription and cut it on different images for each sector of shape.

If someone knows how to make it in more easy way I will be very thankful for help.

Answer 1

Step 1: Create a small sketch that simply displays a triangle strip (without any texturing) over the entire space you want to take up. Here's an example that fills the whole screen:

void setup() {
  size(300, 200);
}
void draw() {
  background(0);
  stroke(0);
  beginShape(TRIANGLE_STRIP);

  vertex(0, 200);
  vertex(0, 0);
  vertex(50, 200);
  vertex(100, 0);
  vertex(150, 200);
  vertex(200, 0);
  vertex(250, 200);
  vertex(300, 0);
  vertex(300, 200);

  endShape();
}

The goal is to make sure your vertexes cover the area you want your image to cover. You want something that looks like this:

This will also make it easier to map the vertex coordinates to image texture coordinates.

Step 2: Create an image that you want to use as a texture. I'll use this one:

Step 3: For each vertex you're drawing on the screen, figure out where in the image that point is. If a point is in the middle of the screen, then you need to figure out the position of the middle of the image. That's your values for u and v .

Alternatively, you can use textureMode(NORMAL) so you can specify u and v as normalized values between 0 and 1 . The middle of the image becomes point (.5, .5) .

Which approach you take is up to you, but in either case you have to map the screen vertex positions to the image u, v positions. I'll use the normalized values here:

PImage img;

void setup() {
  size(300, 200, P3D);
  img = loadImage("test.png");
  textureMode(NORMAL);
}
void draw() {
  background(0);
  stroke(0);
  beginShape(TRIANGLE_STRIP);

  texture(img);
  vertex(0, 200, 0, 1);
  vertex(0, 0, 0, 0);
  vertex(50, 200, .16, 1);
  vertex(100, 0, .33, 0);
  vertex(150, 200, .5, 1);
  vertex(200, 0, .66, 0);
  vertex(250, 200, .83, 1);
  vertex(300, 0, 1, 0);
  vertex(300, 200, 1, 1);

  endShape();
}

Step 4: Now you can modify the position of one of the vertexes, and you'll morph the image drawn on screen:

PImage img;

void setup() {
  size(300, 200, P3D);
  img = loadImage("test.png");
  textureMode(NORMAL);
}
void draw() {
  background(0);
  stroke(0);
  beginShape(TRIANGLE_STRIP);

  texture(img);
  vertex(0, 200, 0, 1);
  vertex(0, 0, 0, 0);
  vertex(50, 200, .16, 1);
  vertex(100, 0, .33, 0);
  vertex(mouseX, mouseY, .5, 1);
  vertex(200, 0, .66, 0);
  vertex(250, 200, .83, 1);
  vertex(300, 0, 1, 0);
  vertex(300, 200, 1, 1);

  endShape();
}

You can play around with it to get the exact effect you're looking for, but following these steps should be your general approach. Note that you only need to use a single image, and you need to figure out the u and v values for every vertex you draw on screen. Start with a triangle mesh that displays the image normally, and then modify that to morph your image.

Also note that I could have done a lot of this calculation programatically. For example, instead of hard-coding the value 150 , I could have used width/2.0 . But first you need to understand the relationship between the x,y on screen and the u,v in the texture. Once you understand that relationship, you can calculate them programatically if you want.