# beginshape(TESS) how to uv map

**URL:** <https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607>\
**Category:** Coding Questions\
**Created:** [October 4, 2021, 12:57pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607 "2021-10-04T12:57:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![madwilson](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@madwilson](https://discourse.processing.org/u/madwilson)\
**Post date:** [October 4, 2021, 12:57pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607/1 "2021-10-04T12:57:36Z")

</div>

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.

```auto
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();

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 4, 2021, 8:36pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607/2 "2021-10-04T20:36:27Z")

</div>

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:

```auto
      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](https://p5js.org/reference/#/p5/textureMode) you are using.

Code if you are using texture mode `NORMAL`:

```javascript
      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`:

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

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 4, 2021, 8:37pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607/3 "2021-10-04T20:37:53Z")

</div>

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()`.

---

<div class="post-metadata">

**Author:** ![madwilson](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@madwilson](https://discourse.processing.org/u/madwilson)\
**Post date:** [October 4, 2021, 9:28pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607/4 "2021-10-04T21:28:42Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1e1bb14d4f3145e931a10ceaadd7446c08b77c43.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![madwilson](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@madwilson](https://discourse.processing.org/u/madwilson)\
**Post date:** [October 4, 2021, 9:29pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607/5 "2021-10-04T21:29:18Z")

</div>

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

 ![Capture_pollys_R](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/13c0cf2379bc3ccd39169c14a52503e817906589.jpeg)

NOTE images used to texture is Power of 2…

---

<div class="post-metadata">

**Author:** ![madwilson](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@madwilson](https://discourse.processing.org/u/madwilson)\
**Post date:** [March 9, 2022, 5:00pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607/6 "2022-03-09T17:00:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [March 9, 2022, 10:05pm UTC](https://discourse.processing.org/t/beginshape-tess-how-to-uv-map/32607/7 "2022-03-09T22:05:05Z")

</div>

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.