From 4cb1184a8f209ca837a5959dd10bd8748880cac1 Mon Sep 17 00:00:00 2001
From: Mudit Maheshwari <140621191+mudit06mah@users.noreply.github.com>
Date: Tue, 10 Jun 2025 12:49:36 +0530
Subject: [PATCH 1/4] Update README.md

---
 README.md | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 159 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index c8a44f4..705af95 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,7 @@ All of the above usages in p5.js 1.x remain available with the [preload.js](http
 
 ## …using registerPreloadMethod in an add-on libraries
 
-Under to hood, returns a **Promise** from each loadImage, loadSound, and similar functions. Promises are widely used in JavaScript, so it is possible to use a callback in p5.js 1.x to create a Promise, but p5.js 1.x doesn't expect promises to be used, so you have to ensure yourself that, for example, your draw function doesn't start running before loading is done. For an example of a Promise using a callback, check out the example below that makes p5.sound.js compatible with both 1.x and 2.0:
+Under the hood, returns a **Promise** from each loadImage, loadSound, and similar functions. Promises are widely used in JavaScript, so it is possible to use a callback in p5.js 1.x to create a Promise, but p5.js 1.x doesn't expect promises to be used, so you have to ensure yourself that, for example, your draw function doesn't start running before loading is done. For an example of a Promise using a callback, check out the example below that makes p5.sound.js compatible with both 1.x and 2.0:
 
 If your add-on library built with p5.js 1.x uses `registerPreloadMethod` such as in this example from [p5.sound.js](https://github.com/processing/p5.sound.js):
 
@@ -431,3 +431,161 @@ Finally, touch and mouse event handling has been combined to improve sketch cons
 In p5.js 2.0, instead of having separate methods for mouse and touch, we now use the browser's pointer API to handle both simultaneously. Try defining mouse functions as usual and accessing the global touches array to see what pointers are active for multitouch support!
 
 All of the above usages in p5.js 1.x remain available with the [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js) compatibility add-on library.
+
+## …using mouseButton
+
+If you were using `mouseButton` in p5.js 1.x, here's how you can update it in 2.x.
+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.
+
+```js
+function setup() {
+  createCanvas(100, 100);
+
+  describe(
+    "A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
+  );
+}
+```
+
+<table>
+<tr><th>p5.js 1.x</th><th>p5.js 2.x</th></tr>
+<tr><td>
+
+```js
+function draw() {
+  background(200);
+
+  if (mouseIsPressed === true) {
+    if (mouseButton === LEFT) {
+      circle(50, 50, 50);
+    }
+    if (mouseButton === RIGHT) {
+      square(25, 25, 50);
+    }
+    if (mouseButton === CENTER) {
+      triangle(23, 75, 50, 20, 78, 75);
+    }
+  }
+}
+```
+
+</td><td>
+
+
+```js
+function draw() {
+  background(200);
+
+  if (mouseIsPressed === true) {
+    if (mouseButton.left) {
+      circle(50, 50, 50);
+    }
+    if (mouseButton.right) {
+      square(25, 25, 50);
+    }
+    if (mouseButton.center) {
+      triangle(23, 75, 50, 20, 78, 75);
+    }
+  }
+}
+```
+
+</td></tr>
+</table>
+
+## …using keyCode
+`keyCode` is still a `Number` system variable in 2.x.
+```js
+if (keyCode === 13) {
+  // Code to run if the enter key was pressed.
+}
+```
+
+However, system variables like "ENTER" cannot be used like in 1.x, for example:
+```js
+if (keyCode === ENTER) {
+  // Code to run if the enter key was pressed.
+}
+```
+
+Instead, in 2.x you can use the key function to directly compare the key value.
+```js
+if (key === 'Enter') { // Enter key
+  // Code to run if the Enter key was pressed.
+}
+```
+
+A more detailed comparison.
+
+```js
+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.'
+  );
+}
+```
+
+<table>
+<tr><th>p5.js 1.x</th><th>p5.js 2.x</th></tr>
+<tr><td>
+
+```js
+function draw() {
+  // Update x and y if an arrow key is pressed.
+  if (keyIsPressed === true) {
+    if (keyCode === UP_ARROW) {
+      y -= 1;
+    } else if (keyCode === DOWN_ARROW) {
+      y += 1;
+    } else if (keyCode === LEFT_ARROW) {
+      x -= 1;
+    } else if (keyCode === RIGHT_ARROW) {
+      x += 1;
+    }
+  }
+
+  // Style the circle.
+  fill(0);
+
+  // Draw the circle at (x, y).
+  circle(x, y, 5);
+}
+```
+
+</td><td>
+
+
+```js
+function draw() {
+  // Update x and y if an arrow key is pressed.
+  if (keyIsPressed === true) {
+    if (key === 'ArrowUp') { // Up arrow key
+      y -= 1;
+    } else if (key === 'ArrowDown') { // Down arrow key
+      y += 1;
+    } else if (key === 'ArrowLeft') { // Left arrow key
+      x -= 1;
+    } else if (key === 'ArrowRight') { // Right arrow key
+      x += 1;
+    }
+  }
+
+  // Style the circle.
+  fill(0);
+
+  // Draw the circle at (x, y).
+  circle(x, y, 5);
+}
+```
+
+</td></tr>
+</table>
+
+More key codes can be found at websites such as [keycode.info](https://www.toptal.com/developers/keycode)

From 6b6631242a28e414d3a9f9c2ce00a4bebecd4a3d Mon Sep 17 00:00:00 2001
From: Mudit Maheshwari <140621191+mudit06mah@users.noreply.github.com>
Date: Tue, 10 Jun 2025 12:51:05 +0530
Subject: [PATCH 2/4] Update README.md

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 705af95..2b508e2 100644
--- a/README.md
+++ b/README.md
@@ -434,7 +434,6 @@ All of the above usages in p5.js 1.x remain available with the [data.js](https:/
 
 ## …using mouseButton
 
-If you were using `mouseButton` in p5.js 1.x, here's how you can update it in 2.x.
 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.
 
 ```js

From 288af23e0482e37fab3010466e6dfadc947a09c7 Mon Sep 17 00:00:00 2001
From: Mudit Maheshwari <140621191+mudit06mah@users.noreply.github.com>
Date: Thu, 12 Jun 2025 10:45:13 +0530
Subject: [PATCH 3/4] Update README.md and added code in the key section

---
 README.md | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 2b508e2..5d5a604 100644
--- a/README.md
+++ b/README.md
@@ -507,13 +507,22 @@ if (keyCode === ENTER) {
 }
 ```
 
-Instead, in 2.x you can use the key function to directly compare the key value.
+Instead, in 2.x you can use the `key` or `code` function to directly compare the key value.
+
+Using `key`:
 ```js
-if (key === 'Enter') { // Enter key
+if (key === 'Enter') {
   // Code to run if the Enter key was pressed.
 }
 ```
 
+Using `code`:
+```js
+if (code === 'KeyA') { 
+  // Code to run if the 'A' key was pressed.
+}
+```
+
 A more detailed comparison.
 
 ```js

From 06649d8bcc709523490a7971bc52302a93b876b2 Mon Sep 17 00:00:00 2001
From: Mudit Maheshwari <140621191+mudit06mah@users.noreply.github.com>
Date: Fri, 20 Jun 2025 21:24:01 +0530
Subject: [PATCH 4/4] Update mouseButton events as per requested

---
 README.md | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 5d5a604..c5bbab4 100644
--- a/README.md
+++ b/README.md
@@ -432,16 +432,18 @@ In p5.js 2.0, instead of having separate methods for mouse and touch, we now use
 
 All of the above usages in p5.js 1.x remain available with the [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js) compatibility add-on library.
 
-## …using mouseButton
+## …using mouseButton events:
 
-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.
+In 1.X, where the `mouseButton` was a single variable that could have values `left`, `right` and `center`, we cannot detect if the `left` and `right` button have been pressed together.
+In 2.X, the `mouseButton` is now an object with properties: `left`, `right` and `center`, which are booleans indicating whether each button has been pressed respectively.
+This means that we can now detect if multiple buttons are pressed together (like if the `left` and `right` button are pressed together).
 
 ```js
 function setup() {
   createCanvas(100, 100);
 
   describe(
-    "A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
+    "A gray square. Different shapes appear at its center depending on the mouse button that's pressed."
   );
 }
 ```
@@ -453,6 +455,7 @@ function setup() {
 ```js
 function draw() {
   background(200);
+  fill(255, 50);
 
   if (mouseIsPressed === true) {
     if (mouseButton === LEFT) {
@@ -474,6 +477,7 @@ function draw() {
 ```js
 function draw() {
   background(200);
+  fill(255, 50);
 
   if (mouseIsPressed === true) {
     if (mouseButton.left) {
@@ -492,7 +496,10 @@ function draw() {
 </td></tr>
 </table>
 
-## …using keyCode
+Notice that when you press multiple buttons at the same time, multiple shapes can be obtained.
+
+## …using keyCode events:
+
 `keyCode` is still a `Number` system variable in 2.x.
 ```js
 if (keyCode === 13) {
@@ -500,9 +507,9 @@ if (keyCode === 13) {
 }
 ```
 
-However, system variables like "ENTER" cannot be used like in 1.x, for example:
+In 1.x system variables could be used using keyCode
 ```js
-if (keyCode === ENTER) {
+if (keyCode === "ENTER") {
   // Code to run if the enter key was pressed.
 }
 ```