Is it possible to tile repeat a texture?

p5.js Coding Questions
1

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?

1 Like
2

https://processing.org/reference/textureWrap_.html

1 Like
3

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

4

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:

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?