p5.js textDescent() Function
Last Updated :
23 Aug, 2023
The textDescent() function in p5.js is used to find out the descent of the current font at its current size. The descent can be defined as the distance of the longest descender character below the baseline, in pixels.
Syntax:
textDescent()
Parameters: This function has no parameters.
Return Value: It returns a number that denotes the descent in pixels.
The example below illustrates the textDescent() function in p5.js:
Example 1: This example shows the text descent using the default font.
let inputElem;
let currfontSize = 28;
let fontBaseline = 150;
function setup() {
createCanvas(600, 300);
let fontBtn = createButton( "Increase Font Size" );
fontBtn.mouseClicked(() => {
currfontSize += 1;
});
fontBtn.position(20, 70);
inputElem = createInput( "" );
inputElem.position(20, 40);
}
function draw() {
clear();
textSize(18);
text( "Write in input to change the text and observe text descent" , 10, 20);
textSize(currfontSize);
let fontScalar = 0.8;
let enteredText = inputElem.value();
if (enteredText != "" ) {
text(enteredText, 20, fontBaseline);
stroke( "black" );
line(0, fontBaseline, width, fontBaseline);
stroke( "green" );
descVal = textDescent() * fontScalar;
line(0, fontBaseline + descVal, width, fontBaseline + descVal);
noStroke();
textSize(18);
text( "Text Descent Value: " + descVal, 20, 275);
}
}
|
Output:
Example 2: This example shows the text descent using a custom font.
let inputElem;
let currfontSize = 28;
let fontBaseline = 150;
let newFont;
function preload() {
newFont = loadFont( "fonts/Montserrat.otf" );
}
function setup() {
createCanvas(600, 300);
textFont(newFont);
let fontBtn = createButton( "Increase Font Size" );
fontBtn.mouseClicked(() => {
currfontSize += 1;
});
fontBtn.position(20, 70);
inputElem = createInput( "" );
inputElem.position(20, 40);
}
function draw() {
clear();
textSize(18);
text( "Write in input to change the text and observe text descent" , 10, 20);
textSize(currfontSize);
let fontScalar = 0.8;
let enteredText = inputElem.value();
if (enteredText != "" ) {
text(enteredText, 20, fontBaseline);
stroke( "black" );
line(0, fontBaseline, width, fontBaseline);
stroke( "green" );
descVal = textDescent() * fontScalar;
line(0, fontBaseline + descVal, width, fontBaseline + descVal);
noStroke();
textSize(18);
text( "Text Descent Value: " + descVal, 20, 275);
}
}
|
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/textDescent
Share your thoughts in the comments
Please Login to comment...