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;
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);
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);
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/
Reference: https://p5js.org/reference/#/p5/texture
Last Updated :
04 Mar, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...