Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revisionLast revisionBoth sides next revision | ||
p5js-interaction [2024/02/21 20:55] – renick | p5js-interaction [2024/02/22 00:31] – 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 62: | Line 58: | ||
<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:// | ||
+ | |||
+ | ===== 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:// |