p5.js textureWrap() Method

The textureWrap() function in p5.js is used to set the global texture wrapping mode. It can be used to set the behavior of texture when it goes outside its normal range. It has three modes:

• The CLAMP mode causes the pixels at the edge of the texture to extend to its limit. This is the default behavior.
• The REPEAT mode causes the texture to tile on repeat until it reaches the limit. 
• The MIRROR mode works similarly to REPEAT, but it inverts the texture on every new tile.

The REPEAT and MIRROR works only if the texture size is power of 2. The changes are into effect until the next call to the function is made.

Syntax:

textureWrap(wrapX, [wrapY])

Parameters: This function accepts two parameters as mentioned above and described below:

• wrapX: This is a constant that sets the mode of the texture wrapping in the x direction. It can have the values CLAMP, REPEAT or MIRROR. The default is the CLAMP mode.
• wrapY: This is a constant that sets the mode of the texture wrapping in the y direction. It can have the values CLAMP, REPEAT or MIRROR. It is an optional parameter.

The below example illustrates the textureWrap() function in p5.js:

Example 1: Using the CLAMP mode for the texture wrapping.

Javascript

let img;

function preload() {
  img = loadImage('images/gfg.jpg');
}

function setup() {
  createCanvas(300, 300, WEBGL);

  // Set the texture wrapping mode
  // to CLAMP
  textureWrap(CLAMP);
}

function draw() {
  background(0);

  let dX = mouseX;
  let dY = mouseY;

  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);

  scale(width / 2);

  texture(img);

  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);

  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);

  endShape();
}

Output:

Example 2: Using the MIRROR mode for the texture wrapping.

Javascript

let img;
function preload() {
  img = loadImage('images/gfg.jpg');
}

function setup() {
  createCanvas(300, 300, WEBGL);

  // Set the texture wrapping mode
  // to MIRROR
  textureWrap(MIRROR);
}

function draw() {
  background(0);

  let dX = mouseX;
  let dY = mouseY;

  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);

  scale(width / 2);

  texture(img);

  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);

  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);

  endShape();
}

Output:

Example 3: Using the REPEAT mode for the texture wrapping.

Javascript

let img;
function preload() {
  img = loadImage('images/gfg.jpg');
}

function setup() {
  createCanvas(300, 300, WEBGL);

  // Set the texture wrapping mode
  // to REPEAT
  textureWrap(REPEAT);
}

function draw() {
  background(0);

  let dX = mouseX;
  let dY = mouseY;

  let u = lerp(1.0, 2.0, dX);
  let v = lerp(1.0, 2.0, dY);

  scale(width / 2);

  texture(img);

  beginShape();
  vertex(-1, -1, 0, 0, 0);
  vertex(1, -1, 0, u, 0);
  vertex(1, 1, 0, u, v);

  vertex(1, 1, 0, u, v);
  vertex(-1, 1, 0, 0, v);
  vertex(-1, -1, 0, 0, 0);

  endShape();
}

Output:

Reference:https://p5js.org/reference/#/p5/textureWrap