let inputElem;
let currfontSize = 28;
let currFont;
function
preload() {
currFont = loadFont(
"fonts/Montserrat.otf"
);
}
function
setup() {
createCanvas(600, 300);
let fontBtn = createButton(
"Increase Font Size"
);
fontBtn.mouseClicked(() => {
currfontSize += 2;
});
fontBtn.position(20, 70);
inputElem = createInput(
""
);
inputElem.position(20, 40);
textFont(currFont, currfontSize);
}
function
draw() {
clear();
textSize(18);
text(
"Write in input to change the text and observe the bounding box"
,
10,
20
);
let enteredText = inputElem.value();
if
(enteredText !=
""
) {
let bounding_box = currFont.textBounds(enteredText, 20, 150, currfontSize);
text(
"Box Position X: "
+ bounding_box.x, 20, 180);
text(
"Box Position Y: "
+ bounding_box.y, 20, 200);
text(
"Box Height: "
+ bounding_box.h, 20, 220);
text(
"Box Width: "
+ bounding_box.w, 20, 240);
textSize(currfontSize);
fill(255);
stroke(0);
rect(bounding_box.x, bounding_box.y, bounding_box.w, bounding_box.h);
fill(0);
noStroke();
text(enteredText, 20, 150);
}
}