How to assign HTML input forms to p5 variables?

Hi, so ive just integrated my p5 sketch into my website which already has the gui made (buttons, sliders, color pickers etc) using HTML5/ standard HTML input modes.

Im trying to figure out a way to link those inputs to variables or something in p5js?

So for instance the html5 color picker can i assign it to the fill color of a shape?
And a slider can i assign it to a number (say between 0 and 1) stored in a variable?

Can someone help me out with this?

Thanks
Gersh

Hi! Welcome to the forum!

You can choose an element from HTML with select and then value to get the value (not sure if it works with a color picker though)

https://p5js.org/reference/#/p5/select

https://p5js.org/reference/#/p5.Element/value

if you have more detailed questions I recommend you to post the code :slight_smile:

2 Likes

Thanks!!! It worked perfectly, only thing is it outputted a hex value so i had to add ’ quotes to the fill part, but otherwise worked perfectly!