Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
| p5js-interaction [2024/02/21 20:54] – renick | p5js-interaction [2024/03/13 07:47] (current) – renick | ||
|---|---|---|---|
| Line 16: | Line 16: | ||
| p5js also has some functions that deal with mouse position relative to the previous frame, including detecting mouse movement, mouse dragging, and whether the left button is pressed. There' | p5js also has some functions that deal with mouse position relative to the previous frame, including detecting mouse movement, mouse dragging, and whether the left button is pressed. There' | ||
| - | ====== tracking the mouse ====== | + | ===== tracking the mouse ===== |
| In the following example, we make a box follow the mouse. | In the following example, we make a box follow the mouse. | ||
| Line 46: | Line 46: | ||
| </ | </ | ||
| - | There' | + | For more on mouseIsPressed, |
| - | + | ||
| - | https:// | + | |
| - | + | ||
| - | This wo | + | |
| On my laptop, mouseButton == CENTER seems buggy in this example: | On my laptop, mouseButton == CENTER seems buggy in this example: | ||
| Line 56: | Line 52: | ||
| ===== making something happen when the mouse moves ===== | ===== making something happen when the mouse moves ===== | ||
| + | |||
| + | In this version, we'll make the rect get smaller when the mouse moves. At the same time, we'll make the animation a little smoother. | ||
| < | < | ||
| <iframe src=" | <iframe src=" | ||
| </ | </ | ||
| + | |||
| + | For more on the mouseMoved function, see here: https:// | ||
| ===== using the mouse position when we click ===== | ===== using the mouse position when we click ===== | ||
| + | |||
| + | In this version, let's show the mouse position value like we did before, and then let's use that value when we click. | ||
| + | |||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||
| ===== capturing mouse data ===== | ===== capturing mouse data ===== | ||
| + | |||
| + | Let's gather the mouse position from each click and use it. We'll store it in a variable called mouseClickPositions as objects with an x and y (actually, we should use the Point class which we studied before!). Then in the draw loop we can use forEach to draw all of the click values. | ||
| + | |||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||
| + | |||
| + | Notice that we're still just using mouseX and mouseY. | ||
| + | |||
| + | ==== tracking two different kinds of mouse positions: clicked and not clicked ==== | ||
| + | |||
| + | That's cool, but what if we want the mouse positions to do something WITHOUT clicking? No problem! The code is very similar. We just need a different array for storing the mouse positions. Notice where we put the code. | ||
| + | |||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||
| ===== making the keyboard do something ===== | ===== making the keyboard do something ===== | ||
| - | ===== using the value of the key to do more ===== | + | Now let's use the keyboard to make things more interesting. We'll make a variable called lastKey, where we'll store the value of the last key which has been pressed. We'll use that value in a conditional statement that controls the color of the small circles that we are drawing as the mouse moves around. Press ' |
| + | |||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||
| + | |||
| + | You can read more about the keyTyped function here: https:// | ||
| + | |||
| + | ===== storing the key presses to do more ===== | ||
| + | |||
| + | Well, that's kind of cool, but what about keeping the gray ones from before, and only making green ones when ' | ||
| + | |||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||
| + | |||
| + | ===== doing something while a key is down ===== | ||
| + | |||
| + | Above, we stored key presses. We can also do something based on whether a certain key is pressed. The keyIsDown function returns either ' | ||
| + | |||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||
| + | |||
| + | Read more about the keyIsDown function here: https:// | ||
| + | |||
| + | You can find all of the key codes here: https:// | ||
| + | |||
| + | ===== more about mouse and keyboard in p5js ===== | ||
| + | |||
| + | For more on mouse and keyboard interaction in p5js, see the ' | ||
| ===== using mouse and keyboard events outside of p5js ===== | ===== using mouse and keyboard events outside of p5js ===== | ||
| + | All of these are done with the functions provided by p5js. There is a whole set of keyboard and mouse event handlers built into your browser. You can find more information on them here: | ||
| + | |||
| + | keyboard events: https:// | ||
| + | mouse events: https:// | ||