adding docs for code

Author: perminder-17

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 <a href="#/p5/key">key</a>, 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
+   * <div>
+   * <code>
+   * // 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);
+   * }
+   * </code>
+   * </div>
+   *
+   * <div>
+   * <code>
+   * // 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);
+   * }
+   * </code>
+   * </div>
+   */
+  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();