diff --git a/src/events/keyboard.js b/src/events/keyboard.js index 1e9eaaebd7..39574d8b19 100644 --- a/src/events/keyboard.js +++ b/src/events/keyboard.js @@ -111,7 +111,6 @@ function keyboard(p5, fn){ */ fn.keyIsPressed = false; - fn.code = null; /** * A `String` system variable that contains the value of the last key typed. @@ -195,6 +194,117 @@ function keyboard(p5, fn){ */ fn.key = ''; + /** + * The `code` property represents a physical key on the keyboard (as opposed + * to the character generated by pressing the key). In other words, this + * property returns a value that isn't altered by keyboard layout or the state + * of the modifier keys. + * + * This property is useful when you want to handle keys based on their + * physical positions on the input device rather than the characters associated + * with those keys; + * + * Unlike key, the `code` property differentiates between + * physical keys that generate the same character—for example, `CtrlLeft` and + * `CtrlRight`—so each can be handled independently. + * + * Pressing the key physically labeled “A” always yields `KeyA`, regardless + * of the current keyboard layout (QWERTY, Dvorak, AZERTY, etc.) or the character + * that appears in a text field. + * + * The code property returns a plain string (e.g., 'ArrowRight'). You can + * compare it directly with string literals: + * ```js + * if (code === 'ArrowRight') { + * // … + * } + * ``` + * + * For extra clarity, you can instead use the predefined key-code constants + * provided by p5.js—`BACKSPACE`, `DELETE`, `ENTER`, `RETURN`, `TAB`, `ESCAPE`, `SHIFT`, + * `CONTROL`, `OPTION`, `ALT`, `UP_ARROW`, `DOWN_ARROW`, `LEFT_ARROW`, and `RIGHT_ARROW`. + * These are simply shorthands for the same string values: + * ```js + * if (code === RIGHT_ARROW) { + * // .. + * } + * ``` + * + * @property {String} code + * @readOnly + * + * @example + *
+ * + * // Click on the canvas to begin detecting key presses. + * + * function setup() { + * createCanvas(100, 100); + * + * describe( + * 'A gray square. The last key pressed is displayed at the center.' + * ); + * } + * + * function draw() { + * background(200); + * + * // Style the text. + * textAlign(CENTER); + * textSize(16); + * + * // Display the last key pressed. + * text(code, 50, 50); + * } + * + *
+ * + *
+ * + * // Click on the canvas to begin detecting key presses. + * + * let x = 50; + * let y = 50; + * + * function setup() { + * createCanvas(100, 100); + * + * background(200); + * + * describe( + * 'A gray square with a black circle at its center. The circle moves when the user presses an arrow key. It leaves a trail as it moves.' + * ); + * } + * + * function draw() { + * // Update x and y if an arrow key is pressed. + * if (code === LEFT_ARROW) { + * x -= 1; + * } + * + * if (code === RIGHT_ARROW) { + * x += 1; + * } + * + * if (code === UP_ARROW) { + * y -= 1; + * } + * + * if (code === DOWN_ARROW) { + * y += 1; + * } + * + * // Style the circle. + * fill(0); + * + * // Draw the circle. + * circle(x, y, 5); + * } + * + *
+ */ + fn.code = ''; + /** * A `Number` system variable that contains the code of the last key pressed. * @@ -652,7 +762,7 @@ function keyboard(p5, fn){ if (!this._areDownKeys()) { this.keyIsPressed = false; this.key = ''; - this.code = null; + this.code = ''; } else { // If other keys are still pressed, update code to the last pressed key const lastPressedCode = Object.keys(this._downKeyCodes).pop();