textureWrap() doesn't work?

p5.js Coding Questions
1

Hi, I’ve been trying to use textureWrap(MIRROR) to tile a texture and no matter what I do it doesn’t seem to do anything - the texture just resizes to the full size of the surface. I’ve put textureWrap() in both draw and setup. The image I’m using is a 64x64px jpg.

let grass;

function preload() {
   grass = loadImage('grass.jpg');
}

function setup() {
  createCanvas(1000, 1000, WEBGL);
  textureWrap(MIRROR);
}


function draw() {
  background(220);
  texture(grass);
  box(500)
  orbitControl();
}

Resizing the cube with mouseX - as you can see the texture just stretches, it doesn’t tile.

cube1
cube11239×575 29.4 KB

I also tried REPEAT and CLAMP and they don’t work either. What am I missing? I feel like I’m following the reference exactly.

2

I suspect that the box() method sets the texture coordinates to [0,0][0,1][1,1][1,0] which means that the texture map will be ‘stretched’ over each separate face of the cube so will not be affected by textureWrap() etc. The solution is to create your own box method so you have control over the texture coordinates used, for instance [0,0][0,2][3,2][3,0] will tile the image # as
###
###
two rows of three columns.

BTW it is the texture coordinates that control the tiling not the actual size of the shape

1 Like