Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
p5js-interaction [2024/02/21 21:10] – renickp5js-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's also a function for mouse wheel, but mouse wheels are not always implemented on mice or may be implemented in different ways. 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's also a function for mouse wheel, but mouse wheels are not always implemented on mice or may be implemented in different ways.
  
-====== 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:
 </HTML> </HTML>
  
-There's more on this here: +For more on mouseIsPressed, see here: https://p5js.org/reference/#/p5/mouseIsPressed
- +
-https://p5js.org/reference/#/p5/mouseIsPressed +
- +
-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="https://editor.p5js.org/renick/full/qLzWoqgz5" width=99% height=800></iframe> <iframe src="https://editor.p5js.org/renick/full/qLzWoqgz5" width=99% height=800></iframe>
 </HTML> </HTML>
 +
 +For more on the mouseMoved function, see here: https://p5js.org/reference/#/p5/mouseMoved
  
 ===== 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 do some math with that value to change our sketch.+In this version, let's show the mouse position value like we did before, and then let's use that value when we click.
  
 <HTML> <HTML>
Line 72: Line 70:
  
 ===== 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.
 +
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/full/CsYBbgRB-" width=99% height=800></iframe>
 +</HTML>
 +
 +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.
 +
 +<HTML>
 +<iframe src="https://editor.p5js.org/renick/full/UZDSNS1IP" width=99% height=800></iframe>
 +</HTML>
  
 ===== 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 'g' to make the circles green, and press any other key to change the color back to gray. Check this out: 
 + 
 +<HTML> 
 +<iframe src="https://editor.p5js.org/renick/full/84Z35pf2h" width=99% height=800></iframe> 
 +</HTML> 
 + 
 +You can read more about the keyTyped function here: https://p5js.org/reference/#/p5/keyTyped 
 + 
 +===== 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 'g' is pressed? We can do that, too, but we'll have to be a bit more clever about storing our data and then drawing from it. Earlier, we stored mouse positions in an array. We can store the lastKey at the same time, and then use that value to draw each of the circles. Let's change our code and see what happens. Notice that we have to include more braces in our anonymous function because it required more than one statement: 
 + 
 +<HTML> 
 +<iframe src="https://editor.p5js.org/renick/full/jdci35yJq" width=99% height=800></iframe> 
 +</HTML> 
 + 
 +===== 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 'true' or 'false', so we can use that in an if-statement to control the behaviour of our program. In this case, we use the key 'b' (represented by the keycode 66) to change the rect under the mouse to the color red: 
 + 
 +<HTML> 
 +<iframe src="https://editor.p5js.org/renick/full/SiRrljdNQ" width=99% height=800></iframe> 
 +</HTML> 
 + 
 +Read more about the keyIsDown function here: https://p5js.org/reference/#/p5/keyIsDown 
 + 
 +You can find all of the key codes here: https://www.toptal.com/developers/keycode 
 + 
 +===== more about mouse and keyboard in p5js ===== 
 + 
 +For more on mouse and keyboard interaction in p5js, see the 'mouse' and 'keyboard' section in the 'Events' section of the reference here: https://p5js.org/reference/
  
 ===== 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://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
  
 +mouse events: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
  • p5js-interaction.1708578658.txt.gz
  • Last modified: 22 months ago
  • by renick