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 23:46] – 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 104: Line 104:
 <iframe src="https://editor.p5js.org/renick/full/jdci35yJq" width=99% height=800></iframe> <iframe src="https://editor.p5js.org/renick/full/jdci35yJq" width=99% height=800></iframe>
 </HTML> </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.1708588017.txt.gz
  • Last modified: 21 months ago
  • by renick