p5.js textureMode() Method

The textureMode() function in p5.js is uses to set the coordinate space for texture mapping. This function works on the WEBGL mode. The IMAGE mode refers to the mapping the actual coordinates of the image. The NORMAL mode refers to the mapping of the normalized space of values ranging from 0 to 1.

Syntax:

textureMode(mode)

Parameters: This function accepts a single parameter as mentioned above and described below:

• mode: This is a constant that sets the mode of the texture mapping. It can have two values, IMAGE or NORMAL. The default is the IMAGE mode.

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

Example:

Javascript

// Creating a global image variable
let img;


// Load the image in the
// preload function
function preload() {
  img =
    loadImage('images/gfg_logo.jpg');
}

// Create the canvas
function setup() {
  createCanvas(500, 300, WEBGL);
}

function draw() {

  // Draw the texture
  texture(img);

  // Set the mode to NORMAL
  // for the texture
  textureMode(NORMAL);

  beginShape();

  // Adding the coordinates in NORMAL form
  vertex(-100, -100, 0, 0);
  vertex(100, -100, 1, 0);
  vertex(100, 100, 1, 1);
  vertex(-100, 100, 0, 1);

  endShape();
}

Output:

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