p5.js texture() Function

The texture() function in p5.js is used to provide a texture for geometry objects. This texture can be an p5.Image, p5.MediaElement or p5.Graphics object. Syntax:

texture( tex )

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

tex: It is a p5.Image, p5.MediaElement or p5.Graphics object that specifies the 2D texture that has to be used on a model.

The program below illustrate the texture() function in p5.js: Example 1:

javascript

let cubeObj;
let newFont;

// Load all the models in preload()
function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
  cubeObj = loadModel("models/cube.obj", true);

  textureImg = loadImage("blue_texture.jpg");
}

function setup() {
  createCanvas(400, 300, WEBGL);
  textFont(newFont, 14);
}

function draw() {
  background("green");
  text("The model below is using an"+
       " image texture", -185, -125);

  scale(0.60);
  lights();
  rotateX(frameCount * 0.005);
  rotateY(frameCount * 0.005);
  noStroke();

  texture(textureImg);

  // Load the given model
  model(cubeObj);
}

Output: image-texture

Example 2:

javascript

let newFont;
let newTexture;

function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
}

function setup() {
  createCanvas(400, 300, WEBGL);
  textFont(newFont, 14);

  newTexture = createGraphics(400, 200);
  newTexture.textSize(75);
}

function draw() {
  background("green");
  text("Use the dropdown to select the"+
       " model to display", -185, -125);

  newTexture.background("yellow");
  newTexture.text("Hello World!", 0, 100);

  // Use the created texture
  texture(newTexture);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  
  box(100);
}

Output: image-textImage

Online editor: https://editor.p5js.org/ Environment Setup: https://www.geeksforgeeks.org/javascript/p5-js-soundfile-object-installation-and-methods/ Reference: https://p5js.org/reference/#/p5/texture

p5.js texture() Function

Explore