How to assign HTML input forms to p5 variables?

p5.js Coding Questions
1

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

2

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
3

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!