From af5e09ec4dad1667d31f3532248d4f8661c8f347 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Fri, 31 Oct 2025 12:20:09 +0100 Subject: [PATCH 1/7] Document changes for p5.js 1.x to 2.0 transition Added a list of changes for transitioning from p5.js 1.x to 2.0, including new function usage and compatibility add-ons. Addresses https://github.com/processing/p5.js-compatibility/issues/14 --- README.md | 32 +++++++++++++++++++++++--------- 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 7b13599..ff8857d 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Even as p5.js 2.0 becomes more stable, p5.js 1.x will continue to be supported until August, 2026. Between 1.x and 2.0, there are many additions, and some breaking changes. In addition to making p5.js 2.0 available as a library, we are working on preparing several compatibility add-on libraries that would make it possible to keep using 1.x features that are no longer part of 2.0. -We are working on three compatibility add-on libraries which will make these 1.x features available for 2.0: +We are working on three compatibility add-on libraries which will make these 1.x features available for 2.0. 1. [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js) @@ -19,6 +19,20 @@ These add-on libraries are available in the **p5.js Editor** in the Settings > L image +# List of changes + +These changes affect authorign of p5.js sketches. Read on for more information on how to transition, or how to use relevant compatibility addons. + +1. Instead of `bezierVertex(x1, y1, x2, y2, x3, y3)` and `quadraticVertex(x1, y1, x2, y2)`, use multiple `bezierVertex(x, y)` calls, and set order with `bezierOrder` _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on)_ +2. Instead of `curveVerzex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on)_ +3. Instead of `fontWidth(..)1, use `textWidth(..)` to measure text without space (tight bounding box). In 2.x, `fontWidth(..)` measures text width including trailing space. +4. Instead of `keyCode === UP_ARROW` (and similar), use `keyIsDown(UP_ARROW)` (work in both versions) or `code === UP_ARROW` (works in 2.x). _(to revert to 1.x use, include [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js) compatibility add-on)_ +5. Instead of `mouseButton === RIGHT` (and similar), use `mouseButton.right` +6. Instead of `preload()`, `loadImage(...)`, `loadJSON(...)` and all other `load...` functions return **promises** can be used with `async/await` in `setup()` (or with callbacks) _(to revert to 1.x use, include [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js) compatibility add-on)_ +7. Affecting only add-on libraries: read below how `registerPreloadMethod` can support both preload (1.x) and promises (2.x) +8. Use JavaScript versions of the following functions, which have been removed in 2.x: `createStringDict()`, `createNumberDict()`, `p5.TypedDict`, `p5.NumberDict`, `append()`, `arrayCopy()`, `concat()`, `reverse()`, `shorten()`, `sort()`, `splice()`, `subset()` _(to revert to 1.x use, include [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js) compatibility add-on)_ + + # How to update p5.js code from 1.x to 2.0 Most things are the same between p5.js 1.x and 2.0, but there are some big differences: p5.js 2.0 has new capabilities, and it also no longer supports some aspects of p5.js 1.x. @@ -473,14 +487,6 @@ The below functions are also better supported in JavaScript itself: * `splice()` * `subset()` -Finally, touch and mouse event handling has been combined to improve sketch consistency across devices: - -* `touchStarted()` -* `touchEnded()` -* `touchMoved()` - -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 events: @@ -549,6 +555,14 @@ function draw() { Notice that when you press multiple buttons at the same time, multiple shapes can be obtained. +Finally, touch and mouse event handling has been combined to improve sketch consistency across devices: + +* `touchStarted()` +* `touchEnded()` +* `touchMoved()` + +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! + ## …using keyCode events: The sketch below works in both versions, but try to use it while quickly pressing different arrow keys - you will notice that the event handling in p5.js 2.x is smoother: From 1d8111624fba4bd5a6e46b4c3c07c5b54575564a Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Fri, 31 Oct 2025 12:20:33 +0100 Subject: [PATCH 2/7] Fix typos and improve clarity in README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ff8857d..bec271f 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Even as p5.js 2.0 becomes more stable, p5.js 1.x will continue to be supported until August, 2026. Between 1.x and 2.0, there are many additions, and some breaking changes. In addition to making p5.js 2.0 available as a library, we are working on preparing several compatibility add-on libraries that would make it possible to keep using 1.x features that are no longer part of 2.0. -We are working on three compatibility add-on libraries which will make these 1.x features available for 2.0. +We are working on three compatibility add-on libraries which will make these 1.x features available for 2.0: 1. [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js) @@ -24,7 +24,7 @@ These add-on libraries are available in the **p5.js Editor** in the Settings > L These changes affect authorign of p5.js sketches. Read on for more information on how to transition, or how to use relevant compatibility addons. 1. Instead of `bezierVertex(x1, y1, x2, y2, x3, y3)` and `quadraticVertex(x1, y1, x2, y2)`, use multiple `bezierVertex(x, y)` calls, and set order with `bezierOrder` _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on)_ -2. Instead of `curveVerzex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on)_ +2. Instead of `curveVertex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on)_ 3. Instead of `fontWidth(..)1, use `textWidth(..)` to measure text without space (tight bounding box). In 2.x, `fontWidth(..)` measures text width including trailing space. 4. Instead of `keyCode === UP_ARROW` (and similar), use `keyIsDown(UP_ARROW)` (work in both versions) or `code === UP_ARROW` (works in 2.x). _(to revert to 1.x use, include [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js) compatibility add-on)_ 5. Instead of `mouseButton === RIGHT` (and similar), use `mouseButton.right` From a3d4294783859c6d461bfad8085bf1a35345d54a Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Fri, 31 Oct 2025 12:21:57 +0100 Subject: [PATCH 3/7] Fix formatting and update compatibility instructions --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index bec271f..768f675 100644 --- a/README.md +++ b/README.md @@ -23,14 +23,14 @@ These add-on libraries are available in the **p5.js Editor** in the Settings > L These changes affect authorign of p5.js sketches. Read on for more information on how to transition, or how to use relevant compatibility addons. -1. Instead of `bezierVertex(x1, y1, x2, y2, x3, y3)` and `quadraticVertex(x1, y1, x2, y2)`, use multiple `bezierVertex(x, y)` calls, and set order with `bezierOrder` _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on)_ -2. Instead of `curveVertex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on)_ +1. Instead of `bezierVertex(x1, y1, x2, y2, x3, y3)` and `quadraticVertex(x1, y1, x2, y2)`, use multiple `bezierVertex(x, y)` calls, and set order with `bezierOrder` _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ +2. Instead of `curveVertex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(for 1.x usage, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ 3. Instead of `fontWidth(..)1, use `textWidth(..)` to measure text without space (tight bounding box). In 2.x, `fontWidth(..)` measures text width including trailing space. -4. Instead of `keyCode === UP_ARROW` (and similar), use `keyIsDown(UP_ARROW)` (work in both versions) or `code === UP_ARROW` (works in 2.x). _(to revert to 1.x use, include [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js) compatibility add-on)_ +4. Instead of `keyCode === UP_ARROW` (and similar), use `keyIsDown(UP_ARROW)` (work in both versions) or `code === UP_ARROW` (works in 2.x). _(to revert to 1.x use, include [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js))_ 5. Instead of `mouseButton === RIGHT` (and similar), use `mouseButton.right` -6. Instead of `preload()`, `loadImage(...)`, `loadJSON(...)` and all other `load...` functions return **promises** can be used with `async/await` in `setup()` (or with callbacks) _(to revert to 1.x use, include [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js) compatibility add-on)_ +6. Instead of `preload()`, `loadImage(...)`, `loadJSON(...)` and all other `load...` functions return **promises** can be used with `async/await` in `setup()` (or with callbacks) _(to revert to 1.x use, include [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js))_ 7. Affecting only add-on libraries: read below how `registerPreloadMethod` can support both preload (1.x) and promises (2.x) -8. Use JavaScript versions of the following functions, which have been removed in 2.x: `createStringDict()`, `createNumberDict()`, `p5.TypedDict`, `p5.NumberDict`, `append()`, `arrayCopy()`, `concat()`, `reverse()`, `shorten()`, `sort()`, `splice()`, `subset()` _(to revert to 1.x use, include [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js) compatibility add-on)_ +8. Use JavaScript versions of the following functions, which have been removed in 2.x: `createStringDict()`, `createNumberDict()`, `p5.TypedDict`, `p5.NumberDict`, `append()`, `arrayCopy()`, `concat()`, `reverse()`, `shorten()`, `sort()`, `splice()`, `subset()` _(to revert to 1.x use, include [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js))_ # How to update p5.js code from 1.x to 2.0 From a99a37cb1a57340bd80d455d18678a2b33fad163 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Thu, 6 Nov 2025 23:29:27 +0100 Subject: [PATCH 4/7] Fix typos and improve clarity in README.md --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 768f675..f5b685a 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ These add-on libraries are available in the **p5.js Editor** in the Settings > L # List of changes -These changes affect authorign of p5.js sketches. Read on for more information on how to transition, or how to use relevant compatibility addons. +These changes affect authoring of p5.js sketches. Read on for more information on how to transition, or how to use relevant compatibility addons. 1. Instead of `bezierVertex(x1, y1, x2, y2, x3, y3)` and `quadraticVertex(x1, y1, x2, y2)`, use multiple `bezierVertex(x, y)` calls, and set order with `bezierOrder` _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ 2. Instead of `curveVertex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(for 1.x usage, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ @@ -31,7 +31,7 @@ These changes affect authorign of p5.js sketches. Read on for more information o 6. Instead of `preload()`, `loadImage(...)`, `loadJSON(...)` and all other `load...` functions return **promises** can be used with `async/await` in `setup()` (or with callbacks) _(to revert to 1.x use, include [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js))_ 7. Affecting only add-on libraries: read below how `registerPreloadMethod` can support both preload (1.x) and promises (2.x) 8. Use JavaScript versions of the following functions, which have been removed in 2.x: `createStringDict()`, `createNumberDict()`, `p5.TypedDict`, `p5.NumberDict`, `append()`, `arrayCopy()`, `concat()`, `reverse()`, `shorten()`, `sort()`, `splice()`, `subset()` _(to revert to 1.x use, include [data.js](https://github.com/processing/p5.js-compatibility/blob/main/src/data.js))_ - +9. In 1.x, `createVector()` was a shortcut for `createVector(0, 0, 0)`. In 2.x, p5.js has vectors of any dimension, so you must provide your desired number of zeros. `Use createVector(0, 0)` for a 2D vector and `createVector(0, 0, 0)` for a 3D vector - this will work in all versions. # How to update p5.js code from 1.x to 2.0 @@ -59,9 +59,9 @@ Step 3: If your 1.x sketch does not run with p5.js 2.0, you have two options: * Update your code to match 2.0 * or include a compatibility add-on library (also possible in the p5.js Editor once the new release is live.) -# Changes to make if your sketch includes… +# Changes to make if your sketch includes... -## …loading images, sound, fonts, and other assets +## ...loading images, sound, fonts, and other assets (`preload.js`) One of the biggest changes in 2.0 is involves how you can include other files, media, and assets. The p5.js 1.x style of using `preload()` does not reflect anymore how assets are loaded on the web, so p5.js 2.0 uses JavaScript’s async/await keywords to support asynchronicity. @@ -128,7 +128,7 @@ Laslty, some loader functions have been updated: All of the above usages in p5.js 1.x remain available with the [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js) compatibility add-on library. -## …using registerPreloadMethod in an add-on libraries +## ...using registerPreloadMethod in an add-on libraries 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: @@ -177,7 +177,7 @@ function loadSound (path) { And that's it! You can check this example of making an add-on library backwards-compatible and work with p5.js 2.0 here: [the p5.sound.js example](https://github.com/processing/p5.sound.js/commit/608ffa93f241538c4fb353544f6d01275911d212) -## …making shapes +## ...making shapes (`shapes.js`) If you use `vertex` and `bezierVertex` is the p5.js 1.x code, here's how you can approach updating your code. @@ -414,7 +414,7 @@ function setup() { All of the above usages in p5.js 1.x remain available with the [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js) compatibility add-on library. -## …using `fontWidth()` +## ...using `fontWidth()` In p5.js 2.x, there are two ways to measure text: [fontWidth(...)](https://beta.p5js.org/reference/p5/fontwidth/) and [textWidth(...)](https://beta.p5js.org/reference/p5/textwidth/). In 2.x, `textWidth()` calculates the text's tight bounding box, which is what p5.js 1.x `fontWidth()` does. In other words: @@ -465,7 +465,7 @@ function setup() { -## …using data structures and functions that have improved alternatives +## ...using data structures and functions that have improved alternatives (`data.js`) One bit change relates to data structures in JavaScript. The following funcitons have been removed in p5.js 2.0. These were originally in p5.js 1.x because, historically, they were also in Processing. However, p5.js is a JavaScript library, and JavaScript objects and key-value maps can be used instead of these functions: @@ -489,7 +489,7 @@ The below functions are also better supported in JavaScript itself: 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 events: +## ...using mouseButton events 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. @@ -563,7 +563,7 @@ 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! -## …using keyCode events: +## ...using keyCode events: The sketch below works in both versions, but try to use it while quickly pressing different arrow keys - you will notice that the event handling in p5.js 2.x is smoother: From 584ed3112da0aca1b330df9530f2ff2a850c342c Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Fri, 7 Nov 2025 10:09:11 +0100 Subject: [PATCH 5/7] Update README.md Co-authored-by: Dave Pagurek --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f5b685a..c584851 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ These changes affect authoring of p5.js sketches. Read on for more information o 1. Instead of `bezierVertex(x1, y1, x2, y2, x3, y3)` and `quadraticVertex(x1, y1, x2, y2)`, use multiple `bezierVertex(x, y)` calls, and set order with `bezierOrder` _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ 2. Instead of `curveVertex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(for 1.x usage, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ -3. Instead of `fontWidth(..)1, use `textWidth(..)` to measure text without space (tight bounding box). In 2.x, `fontWidth(..)` measures text width including trailing space. +3. The previous usage of of `textWidth(..)` is now covered by `fontWidth(..)` in 2.x. Use `textWidth(..)` to measure text *without* space (tight bounding box). In 2.x, `fontWidth(..)` measures text width including trailing space. 4. Instead of `keyCode === UP_ARROW` (and similar), use `keyIsDown(UP_ARROW)` (work in both versions) or `code === UP_ARROW` (works in 2.x). _(to revert to 1.x use, include [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js))_ 5. Instead of `mouseButton === RIGHT` (and similar), use `mouseButton.right` 6. Instead of `preload()`, `loadImage(...)`, `loadJSON(...)` and all other `load...` functions return **promises** can be used with `async/await` in `setup()` (or with callbacks) _(to revert to 1.x use, include [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js))_ From 88c66a0c192b88e38f4b73f1f4de95f4e32260f7 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Fri, 7 Nov 2025 10:13:00 +0100 Subject: [PATCH 6/7] Update README.md --- README.md | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c584851..579db0f 100644 --- a/README.md +++ b/README.md @@ -555,13 +555,43 @@ function draw() { Notice that when you press multiple buttons at the same time, multiple shapes can be obtained. -Finally, touch and mouse event handling has been combined to improve sketch consistency across devices: +Finally, touch and mouse event handling has been combined to improve sketch consistency across devices. 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`](https://beta.p5js.org/reference/p5/touches/) array to see what pointers are active for multitouch support! + + + + +
p5.js 1.xp5.js 2.x
* `touchStarted()` * `touchEnded()` * `touchMoved()` -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! + + +```js +// On a touchscreen device, touch the canvas using one or more fingers +// at the same time. + +function setup() { + createCanvas(100, 100); + + describe( + 'A gray square. White circles appear where the user touches the square.' + ); +} + +function draw() { + background(200); + + // Draw a circle at each touch point. + for (let touch of touches) { + circle(touch.x, touch.y, 40); + } +} +``` + +
+ ## ...using keyCode events: From 7fd7044708772e30027cb5f2140a9abb57cc7c73 Mon Sep 17 00:00:00 2001 From: kit <1304340+ksen0@users.noreply.github.com> Date: Fri, 7 Nov 2025 10:13:26 +0100 Subject: [PATCH 7/7] Update README.md Co-authored-by: Dave Pagurek --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 579db0f..4720e27 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ These changes affect authoring of p5.js sketches. Read on for more information o 1. Instead of `bezierVertex(x1, y1, x2, y2, x3, y3)` and `quadraticVertex(x1, y1, x2, y2)`, use multiple `bezierVertex(x, y)` calls, and set order with `bezierOrder` _(to revert to 1.x use, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ 2. Instead of `curveVertex`, use `splineVertex` - and expect `endShape(CLOSE)` to create a smoothly connected shape _(for 1.x usage, include [shapes.js](https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js))_ 3. The previous usage of of `textWidth(..)` is now covered by `fontWidth(..)` in 2.x. Use `textWidth(..)` to measure text *without* space (tight bounding box). In 2.x, `fontWidth(..)` measures text width including trailing space. -4. Instead of `keyCode === UP_ARROW` (and similar), use `keyIsDown(UP_ARROW)` (work in both versions) or `code === UP_ARROW` (works in 2.x). _(to revert to 1.x use, include [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js))_ +4. Instead of `keyCode === UP_ARROW` (and similar), use `keyIsDown(UP_ARROW)` (works in both versions) or `code === UP_ARROW` (works in 2.x). _(to revert to 1.x use, include [events.js](https://github.com/processing/p5.js-compatibility/blob/main/src/events.js))_ 5. Instead of `mouseButton === RIGHT` (and similar), use `mouseButton.right` 6. Instead of `preload()`, `loadImage(...)`, `loadJSON(...)` and all other `load...` functions return **promises** can be used with `async/await` in `setup()` (or with callbacks) _(to revert to 1.x use, include [preload.js](https://github.com/processing/p5.js-compatibility/blob/main/src/preload.js))_ 7. Affecting only add-on libraries: read below how `registerPreloadMethod` can support both preload (1.x) and promises (2.x)