beginshape(TESS) how to uv map

p5.js Coding Questions
1

I have been attempting to UVmap the beginshape(TESS) but I am assuming that I need to get access to the points created after ending the shape? which is why mapping to the points isn’t working.

Any help or pointing me in the right direction would be great.

push();
    noStroke();
    texture(this.tex);
    beginShape(TESS); 
    for(let point of this.points)
    {
      // calculate ajustments...
      var xa =  point.x + worldXoff ;
      var ya =  point.y + worldYoff ;

      var xAdis = xa - (width/2);
      var perAX = xAdis /  (width/2);
      var newAX = perAX * (gridSize/2);

      var yAdis =  ya - (height/2);
      var perAY =  yAdis /  (height/2); 
      var newAY =  perAY * (gridSize/2);

      var scaleX = (maxX - minX ) / this.tex.width;
      var scaleY = (maxY - minY ) / this.tex.height;

      let u = (point.x /  maxX)* (scaleX/2);
      let v = (point.y /  maxY)* (scaleY/2);

      vertex( xa - newAX  , ya - newAY , 0, u, v );
    }
    endShape(CLOSE);
    pop();
2

Generally speaking there is no way to “get access to the points created after ending the shape” and you shouldn’t need to in order to display geometry with a texture. There is probably an issue with this math:

      var scaleX = (maxX - minX ) / this.tex.width;
      var scaleY = (maxY - minY ) / this.tex.height;

      let u = (point.x /  maxX)* (scaleX/2);
      let v = (point.y /  maxY)* (scaleY/2);

either because it is wrong, or it is not the right math for the texture mode you are using.

Code if you are using texture mode NORMAL:

      let u = map(point.x, minX, maxX, 0, 1);
      let v = map(point.y, minY,  maxY, 0, 1);

Code if you are using texture mode IMAGE:

      let u = map(point.x, minX, maxX, 0, this.tex.width);
      let v = map(point.y, minY,  maxY, 0, this.tex.height);
3

Also, beware if you are using lighting: Your textured geometry may not display properly if you don’t call normal(...) with a calculated vertex normal before each call to vertex().

4

Thanks for the help.
If I make a custom shape like the shape of an “L” I still get irregular triangles and the textures you can see in image.

The customer shape is the RED,YELLOW,BLUE,GREEN image…

Capture_pollys
Capture_pollys672×515 84.5 KB

I was able to go back and convert the custom shape to TRIANGLES and the mapping works both your UV map math and what I came up with are not as good.

Thanks so much for everyone’s help.

5

And came up with this it just takes more user input to create all the triangles needed.

Capture_pollys_R
Capture_pollys_R642×507 83 KB

NOTE images used to texture is Power of 2…

6

Still can’t get the math correctly to UV a beginShapes(TESS) is this even possible to UV map a TESS shape?

7

Sorry, I didn’t previously investigate your issue closely enough. The TESS shape mode is definitely not correctly handling UV coordinates. I will open a Github issue, but for now the only workaround is probably to switch to a different shape mode.