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);
+ * }
+ *
+ *