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); // Create button to increase font size let fontBtn = createButton("Increase Font Size"); fontBtn.mouseClicked(() => { currfontSize += 1; }); fontBtn.position(20, 70); // Create input box 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); // This value depends on the font used let fontScalar = 0.8; // Display text and line if input not empty let enteredText = inputElem.value(); if (enteredText != "") { text(enteredText, 20, fontBaseline); // Draw the Base line stroke("black"); line(0, fontBaseline, width, fontBaseline); // Draw the Descent Line 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); // Create button to increase font size let fontBtn = createButton("Increase Font Size"); fontBtn.mouseClicked(() => { currfontSize += 1; }); fontBtn.position(20, 70); // Create input box 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); // This value depends on the font used let fontScalar = 0.8; // Display text and line if input not empty let enteredText = inputElem.value(); if (enteredText != "") { text(enteredText, 20, fontBaseline); // Sraw the Base line stroke("black"); line(0, fontBaseline, width, fontBaseline); // Draw the Descent Line 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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
