# Is it possible to tile repeat a texture?

**URL:** <https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044>\
**Category:** Coding Questions\
**Created:** [February 2, 2019, 3:40pm UTC](https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044 "2019-02-02T15:40:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quilliam](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quilliam/32/505_2.png) [@Quilliam](https://discourse.processing.org/u/Quilliam)\
**Post date:** [February 2, 2019, 3:40pm UTC](https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044/1 "2019-02-02T15:40:56Z")

</div>

I’m trying to build a 3D model class using WebGL mode. I understand how create boxes with textures applied, but not sure how I would achieve essentially the effect of `background-repeat: repeat-y;`. I’d have control of the size of the boxes and textures, so that’s not an issue, but it’s more a case of having a 50px by 225px plane and wanting a 50px by 50px image to repeat down it 4.5 times.

Is this possible?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [February 2, 2019, 5:22pm UTC](https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044/2 "2019-02-02T17:22:18Z")

</div>

[https://processing.org/reference/textureWrap\_.html](https://processing.org/reference/textureWrap_.html)

> <https://github.com/processing/p5.js/issues/2189>

---

<div class="post-metadata">

**Author:** ![Quilliam](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quilliam/32/505_2.png) [@Quilliam](https://discourse.processing.org/u/Quilliam)\
**Post date:** [February 2, 2019, 8:25pm UTC](https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044/3 "2019-02-02T20:25:05Z")

</div>

I can’t tell if i’m missing something but any time I try using textureWrap() it says undefined?

---

<div class="post-metadata">

**Author:** ![fragdemented](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/fragdemented/32/4054_2.png) [@fragdemented](https://discourse.processing.org/u/fragdemented)\
**Post date:** [March 7, 2019, 8:20pm UTC](https://discourse.processing.org/t/is-it-possible-to-tile-repeat-a-texture/8044/4 "2019-03-07T20:20:05Z")

</div>

I just learned this after searching for this very problem. In this example I have a texture that is 64x64. I am creating a plane that is 200x100. If I want the texture to tile across that plane I need to use the following code:

```auto
beginShape(TRIANGLE_STRIP);
  vertex(0,0,0,0,0);
  vertex(0,100,0,0,64);
  vertex(100,0,0,64,0);
  vertex(100,100,0,64,64);
  vertex(100,0,0,0,0);
  vertex(100,100,0,0,64);
  vertex(200,0,0,64,0);
  vertex(200,100,0,64,64);
  endShape(CLOSE);

```

The first 4 vertices create a plane that the UV coordinates paste the texture on. The Next two vertices are exactly the same location as the second two vertices, but they start the UV coordinates over again.The final two vertices close the second plane and the UV coordinates to paste the texture again. This creates a repeating pattern. You are essentially creating a plane 3 times, but only texturing the two ends and squishing the middle plane so that it’s no longer visible.

Edit:  
By the way, this is in p5js version 0.7.3 so the UV coordinates are not normalized.  
endEdit

Did that make sense?