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:
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:
Example 2:
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:
Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/amp/
Reference: https://p5js.org/reference/#/p5/texture