Taking User Input

Throughout our look at drawing with code, we've been making little animations, but many more possibilities open up when we allow the user (you) to control the program while it's running. We can make games, interactive art, or any number of other things that work with user input.

User input can be a lot of things, but for the most part, it's about the keyboard and mouse. To start things off, we'll only be taking input from the keyboard. That means we'll be doing things based on input from the user.

To start taking input, we first need to make a new function, just like setup() and draw(). It looks like keyPressed(), and, like the name implies, is run whenever a key on the keyboard is pressed. Inside the function, we can use the variable key, which is a string indicating which key was pressed (for example, if I pressed the w key, it would be set to "w"). Here's an example of it in action:

function keyPressed() {
    if (key === "a") {
        // Do something.
    }
}

Try making an object move when a user pressed the WASD keys on their keyboard. You can use a more complicated object like the ones in previous lessons, but it isn't necessary. Good luck!

p5.js cheatsheet