Transition guide for using mouse/touch events from 1.x to 2.x. #27
Conversation
|
@perminder-17 I have added code as well, can you review it again and let me know if I need to add something else? |
There was a problem hiding this comment.
Hi @mudit06mah ! Thank you so much for this work. I've added some comments that I hope can be helpful.
|
|
||
| ## …using mouseButton | ||
|
|
||
| In 2.X, the `mouseButton` is now an object with props: `left`, `right` and `center`, which are booleans indicating whether each button has been pressed respectively. |
There was a problem hiding this comment.
To clarify this a bit, consider something like:
"In p5.js 1.x, mouseButton is a variable whose value can be left, right, or center. This means if a user pressed more than one mouse button at a time, that information would be lost.
In 2.X, the mouseButton is now an object with properties: left, right, and center. This means there are three variables now organized under mouseButtons. Each is a boolean: can be true or false when that button is pressed.
With the code snippets below, try to press more than one button - like both left and right simultaneously - to see what is now possible:"
You can edit this of course, but I would suggest:
- "props" -> write out "properties" please, to make it easier to read
- Describe as plainly as possible what the implication is of this data structure difference
| ```js | ||
| function draw() { | ||
| background(200); | ||
|
|
There was a problem hiding this comment.
I suggest adding fill(255, 50) to both examples as this demonstrates more clearly the conceptual change
| </td></tr> | ||
| </table> | ||
|
|
||
| ## …using keyCode |
There was a problem hiding this comment.
Also here: minor suggestion to add "events" to the heading
| } | ||
| ``` | ||
|
|
||
| However, system variables like "ENTER" cannot be used like in 1.x, for example: |
There was a problem hiding this comment.
System variables remain, but they can be used with code. Eg., this would work: if (key === ENTER) {
|
|
||
| However, system variables like "ENTER" cannot be used like in 1.x, for example: | ||
| ```js | ||
| if (keyCode === ENTER) { |
There was a problem hiding this comment.
This is a really confusing change for many people, so I wonder if it would be useful to make something like a table:
| variable | p5.js 1.x | p5.js 2.x |
|---|---|---|
key |
Text String (e.g.: "ArrowUp") | Text String (e.g.: "ArrowUp", "f" or "F") |
code |
Not supported | Text String (e.g.: "ArrowUp", "KeyF") |
keyCode |
Number | Number (e.g., 70) |
| System variables | Number | Text String (e.g: "ArrowUp") |
All the system variables are still supported: BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW
The difference between key and code is that the key reflects the value: for example, when you type letter, the key value will include capitalization if you also use Shift or Caps Lock: could be "f" or "F". This reflects the intent of what the user is typing when it's text. However, code reflects the physical key, and would always be the same in this case: KeyF - so it can be easily used in designing an interaction where capitalization doesn't matter. In 1.x, you could compare keyCode to 70 (the f/F key), so code is a more readable version of that informaiton.
| </table> | ||
|
|
||
| ## …using keyCode | ||
| `keyCode` is still a `Number` system variable in 2.x. |
There was a problem hiding this comment.
I think this could benefit from an introduction. The important message here is that: "In 2.x, p5.js introduces code as a way to get keyboard information. This is a string that reflects the physical key, like ArrowLeft or keyF. The values of this variable are based on KeyboardEvent.code. This additional also included some changes to how key and keyCode can be used, compared to 1.x"
Maybe the table I suggested below could be useful here?
| function draw() { | ||
| // Update x and y if an arrow key is pressed. | ||
| if (keyIsPressed === true) { | ||
| if (key === 'ArrowUp') { // Up arrow key |
There was a problem hiding this comment.
Please use system variables here, as in: key === ARROW_UP
|
|
||
| Using `key`: | ||
| ```js | ||
| if (key === 'Enter') { |
There was a problem hiding this comment.
both key === ENTER and code === ENTER would work; the recommended usage is keyIsDown(ENTER) - this would be entirely backwards-compatible between 1.x and 2.x
|
|
||
| </td></tr> | ||
| </table> | ||
|
|
There was a problem hiding this comment.
Could you add a full version of your example above but with keyIsDown please? That would work with system variables in both versions, so it's recommended.
| } | ||
| ``` | ||
|
|
||
| <table> |
There was a problem hiding this comment.
Minor: key event handling is much smoother. In your example, try to quickly switch keys; in 1.x, it's easy to get "stuck" which is difficult for game design. In 2.x, it is handles smoothly. I'm not sure how best to describe this behavior, but if you have an idea, that would be welcome!
There was a problem hiding this comment.
Here's a sketch that shows this: https://editor.p5js.org/ksen0/sketches/vrMANhunx - you can switch the versions, it's backwards compatible, and try to key-smash the arrow keys. If the if (keyIsPressed === true) condition is removed, then in both cases it never gets "stuck."
Updated Readme to provide transition guide for using mouse/touch events from 1.x to 2.x. (also fixed a minor grammatical error)
closes #23