P5 DOM

Because it is based on JavaScript, p5.js also has several methods for manipulating the DOM. createCanvas(), is actually DOM manipulation as you are creating a canvas element in the HTML document.

See the attached Sketch.js file for the JavaScript for the examples. Again, this is written in instance mode.

creating elements

create elements with functions like .createP() and .createDiv().

you can also set .style()

as always, if you set these in setup() they will be run once when the sketch is loaded, but if you set them in draw(), you can animate them with it loop.

changing properties with mouse interaction

You can also hook changes in properties for your new html elements into mouse or keyboard interaction.

creating callback function

Or tie DOM events like button clicks to changes in the canvas or DOM.

sliders and inputs

You can also create elements like sliders and inputs and change values and properties with those.