ℹ️ Inputs

02 Jun 2017

Do Now

Go look at your MadLibs. How did we create inputs in JavaScript?

p5 makes inputs even easier to create. We’re going to use them to enhance our drawing app.

In our setup() function, we can create HTML elements, including input fields and sliders:

input = createInput("✨");
// variable name = createInput("default value")
input.position(0, windowHeight);

slider = createSlider(32, width, 32);
// variable name = createSlider(min, max, starting value)
slider.position(0, windowHeight+20)

Once we have inputs, we want to pass those values into our draw() loop:

var emoji = input.value();
var number = slider.value();

If I’m using the same variables in setup() and draw(), where should I be declaring those variables?

Add inputs and sliders to control your drawing app. Be creative! What can you control with each kind of input?