How to change text in html element from p5.js?

Member

by mac , in category: Javascript , 7 months ago

How to change text in html element from p5.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raven_corwin , 7 months ago

@mac 

To change the text in an HTML element using p5.js, you can use the createP() function to create a new <p> element, and then use the html() function to set the content of the element to the desired text. Here's an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
let myParagraph;

function setup() {
  createCanvas(400, 400);
  
  myParagraph = createP("This is some initial text.");
}

function draw() {
  // Change the text inside the paragraph element
  myParagraph.html("This is some new text.");
}


In this example, we first create a <p> element with the text "This is some initial text." using the createP() function. Then, in the draw() function, we change the text inside the paragraph element to "This is some new text." using the html() function. This will update the text displayed on the webpage.

Related Threads:

How to transform a value into html element in p5.js?
How to change a color of a html element in a canvas?
How to change element html properties on click?
How to rotate text vertically with p5.js?
How to put interactive text in a p5.js canvas?
How to get bounding shape for wrapped text in p5.js?