Learn how to add mouse and keyboard interactions to your p5.js sketches!

Interaction with p5.js

Congratulations! You now have the fundamentals of interaction in p5.js down. Throughout this lesson we covered a range of mouse and key interactions that help to bring more possibilities to your projects.

Here is a review of the main points covered in the lesson:

* How to use `mouseX` and `mouseY` to track mouse position, modify shapes, determine shape positions, and more!
* Using the  built-in `mouseIsPressed` variable to detect mouse presses and trigger events from the presses.
* How to use the `mousePressed()` function to trigger events when the mouse button is pressed over the current canvas element.
* How to use the `dist()` function to calculate the distance between two points.
* Using the `key` variable to store the alphanumeric value of the most recent key pressed.
* Detecting special keys and ASCII character values with the `keyCode` variable.
* How to use the `keyIsPressed` boolean to detect general key presses.
* Using the `keyPressed()` function to trigger events when a key is pressed.

Review

The p5.js library has the ability to store data from the keyboard input for a variety of uses. For example, suppose we wanted to know when a certain key was typed and have that key trigger a unique event or have key input be part of a game. Both are possible in p5.js!

But before we get further into the details of key input in p5.js, it is important that we have a basic understanding of ASCII code, the standard representation of characters that allows computers to understand key inputs.

[ASCII](https://en.wikipedia.org/wiki/ASCII) stands for the American Standard Code for Information Interchange and is a 7-bit character code where each bit represents a unique character. For example, the lowercase 'a' in ASCII code has a decimal value of 97, the hexadecimal value of 61 in, and the binary value of 1100001. This numeric representation in decimal value is important to remember. This [ASCII table](https://www.ascii-code.com/) provides a full list of the code.

Now that we have a basic grasp of ASCII, let's dive into key input!

The built-in `key` variable stores alphanumeric characters. More specifically, it holds the value of the most recent key pressed. So if the most recently pressed key was `f` and we were to `console.log(key)` then it would log `f` to the console. 

This means that the `key` variable can also be used to determine if a specific key was pressed. In the example below, we are using an `if` statement to draw some text if the `key` value pressed is `a`.

  ```js
// If the 'a' key is pressed, draw the following text in the canvas
if (key === 'a'){
  textSize(22);
  text('a key was pressed!', width / 2, height / 2);
} 
  ```

It is important to note that `key` works best with non-special keys such as 'a', 't', and 'x'. 

The other important key input variable we are going to learn about is the `keyCode` variable. The `keyCode` variable stores the decimal value of the ASCII code of the most recently pressed key. It can also be used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, and more. A larger list of special keys can be found on the [p5.js keyCode reference page](https://p5js.org/reference/#/p5/keyCode).

Similar to the example code above, the code below will draw text to the canvas when the correct `keyCode` input is detected. In this instance, that input is `32` which is the ASCII code's decimal value for the space character.

```js
// If the spacebar is pressed, draw the following text in the canvas
if (keyCode === 32) {
  textSize(22);
  text('The spacebar key was pressed!', width / 2, height / 2);
}
```

If you are not familiar with the `text()` and `textSize()` functions used in the examples above, the [`text()` function](https://p5js.org/reference/#/p5/text)  is used to draw text onto the canvas. The [`textSize()` function](https://p5js.org/reference/#/p5/textSize) sets the size of the text. 

While the `key` variable can detect both uppercase and lowercase characters, the `keyCode` variable is unable to differentiate the ASCII values from each other. For example, if we were to print the keyCode value of 'a' and 'A' both would print out the number 65, even though the decimal value of the ASCII code of 'a' is 97.

Using Key Input

Say we wanted to create a browser-based version of the classic arcade game Asteroids, where the mouse position controlled the movement of the game's spaceship and the blaster was triggered by pressing the spacebar. How would we go about programming those actions?

The p5.js library makes it easy to add interactivity to do something like that! It provides tools that let us turn mouse and keyboard inputs into creative interactions within the canvas!

In this lesson, we will look at the various kinds of interaction that are foundational to p5.js. Specifically, we will look at how to combine key and mouse events to trigger events and move drawn shapes around, creating more versatile programs.

Introduction to Interaction in p5.js

The `dist()` function is a powerful tool for calculating the distance between two points, stationary or dynamic. This function is oftentimes used in conjunction with mouse events. Understanding how and when to use `dist()` can simplify calculations and make fun and interesting sketches.

![Diagram of the dist() function](https://static-assets.codecademy.com/Courses/Learn-p5/interaction/dist.svg)

The `dist()` function takes four arguments: the x and y coordinates of the first point (`x1` and `y1` in the diagram above) and the x and y coordinates of the second point (`x2` and `y2` above).

For example, you can use the `dist()` function to calculate the dynamic distance between the center of the canvas and the mouse position as follows:

```js
let distance = dist(mouseX, mouseY, width / 2, height / 2);
```

The `distance` variable in the above code will return the distance between the center of the canvas and the mouse position wherever the mouse is.

Understanding the dist() Function

Similar to how we can use mouse input to perform actions in our p5.js sketches, we can also use _key events_ for interaction! These key events are used with general key input or for detecting specific key presses. 

The built-in variable `keyIsPressed` evaluates to `true` when any key is pressed and `false` otherwise. Any code written in an `if` statement with the `keyIsPressed` conditional will run continuously as long as a key is being pressed. `keyIsPressed` can be combined with either `key` or `keyCode` to check key presses.

![keyIsPressed graphic](https://static-assets.codecademy.com/Courses/Learn-p5/interaction/keydown.png)

The `keyPressed()`function is called once every time a key is pressed. Since the function is only called once per key press the code will also only run once per press.  Within the function block, it's possible to test which key has been pressed and to use this value for any purpose.

Take a look at **keyEvents.js** on the right. The code highlights the different functionalities of `keyIsPressed` and `keyPressed()`. While a key is pressed, the code inside the `if` statement constantly runs, increasing the size of the shapes drawn in the sketch. At the same time, when the key is pressed, the `keyPressed()` function will change the color of the shapes, but only once, until the key is released and pressed again.

There are other key event functions offered by p5.js, such as:
* The [`keyReleased()` function](https://p5js.org/reference/#/p5/keyReleased), which can be used to trigger an event every time a key release is detected.
* The [`keyTyped()` function](https://p5js.org/reference/#/p5/keyTyped), which can be used to determine each time a specific key is pressed. Note that the function cannot detect special keys but can distinguish between lower-case and upper-case letters.
* The [`keyIsDown()` function](https://p5js.org/reference/#/p5/keyIsDown), which can be used to check if a key is currently being pressed. 

Detecting Key Events

p5.js also provides us with functions that trigger when specific _mouse events_ are detected. Some examples of mouse events include pressing the mouse, pressing and releasing the mouse, and detecting mouse movements. The mouse event functions in p5.js work like [JavaScript DOM events](https://www.codecademy.com/content-items/2902eab2ed6ce6afcc653d0278e9e723/exercises/intro-javascript-events) behind the scenes, in which p5.js waits for an event to happen to run specific mouse event functions.

The `mousePressed()` function is called once after every mouse button press over the canvas. This means that the code block within the `mousePressed()` function will only run once the mouse has been pressed. To run the code again, the mouse needs to be released and pressed a second time.

![mousePressed() graphic](https://static-assets.codecademy.com/Courses/Learn-p5/interaction/mousedown.png)

We can also use the built-in `mouseIsPressed` variable to determine whether the mouse is pressed or not. When the mouse is pressed, the `mouseIsPressed` variable evaluates to `true`, and when it is not pressed, it evaluates to `false`. We can create an `if` statement using the `mouseIsPressed` variable to continuously run a code block while the mouse is pressed.

Take a look at **mouseEvents.js** on the right. The code shows the differences in using the `mousePressed()` function and the `mouseIsPressed` variable. Once a mouse press is detected, the `mouseIsPressed` variable returns `true` and begins drawing ellipses at random positions around the canvas for as long as the mouse is pressed. Simultaneously, the `mousePressed()` function randomly chooses the color of the ellipses and the background, but those colors will not change until the mouse is released and pressed again. 

There are also other mouse event functions that p5.js offers, such as:
* The [`mouseMoved()` function](https://p5js.org/reference/#/p5.Element/mouseMoved), which can be used to trigger an event every time the mouse moves while the mouse has not been pressed.
* The [`mouseClicked()` function](https://p5js.org/reference/#/p5.Element/mouseClicked), which can be used to detect a mouse button press and release over an element.

Some mouse events act in similar ways, but they can be layered to create various interactions within a p5.js project.

Detecting Mouse Events

p5.js makes it easy for us to use the mouse position with the built-in variables `mouseX` and `mouseY`. These two variables allow for a variety of mappings to visual elements in a p5.js sketch.

The `mouseX` and `mouseY` variables always contain the mouse's current horizontal and vertical positions, relative to the origin of the canvas. p5.js will continuously check where the mouse is and update `mouseX` and `mouseY` to the latest position, making these variables ideal for manipulating elements on the canvas dynamically.

``` js
// Draw an ellipse sized 100 pixels by 100 pixels positioned at the current mouse position
ellipse(mouseX, mouseY, 100, 100);
```

In the code example above, the `mouseX` and `mouseY` variables are used as the x and y coordinates for the center of the ellipse. This means that whenever the mouse position changes, the center position of the ellipse will follow.

To generalize, in situations where numerical values can be used, we can now use the `mouseX` and `mouseY` variables!