Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4cb1184

Browse files
mudit06mahmudit06mah
authored
Update README.md
1 parent efc62d1 commit 4cb1184

File tree

1 file changed

+159
-1
lines changed

1 file changed

+159
-1
lines changed

‎README.md‎

Lines changed: 159 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ All of the above usages in p5.js 1.x remain available with the [preload.js](http
116116

117117
## …using registerPreloadMethod in an add-on libraries
118118

119-
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:
119+
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:
120120

121121
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):
122122

@@ -431,3 +431,161 @@ Finally, touch and mouse event handling has been combined to improve sketch cons
431431
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!
432432

433433
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.
434+
435+
## …using mouseButton
436+
437+
If you were using `mouseButton` in p5.js 1.x, here's how you can update it in 2.x.
438+
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.
439+
440+
```js
441+
function setup() {
442+
createCanvas(100, 100);
443+
444+
describe(
445+
"A gray square. Different shapes appear at its center depending on the mouse button that's clicked."
446+
);
447+
}
448+
```
449+
450+
<table>
451+
<tr><th>p5.js 1.x</th><th>p5.js 2.x</th></tr>
452+
<tr><td>
453+
454+
```js
455+
function draw() {
456+
background(200);
457+
458+
if (mouseIsPressed === true) {
459+
if (mouseButton === LEFT) {
460+
circle(50, 50, 50);
461+
}
462+
if (mouseButton === RIGHT) {
463+
square(25, 25, 50);
464+
}
465+
if (mouseButton === CENTER) {
466+
triangle(23, 75, 50, 20, 78, 75);
467+
}
468+
}
469+
}
470+
```
471+
472+
</td><td>
473+
474+
475+
```js
476+
function draw() {
477+
background(200);
478+
479+
if (mouseIsPressed === true) {
480+
if (mouseButton.left) {
481+
circle(50, 50, 50);
482+
}
483+
if (mouseButton.right) {
484+
square(25, 25, 50);
485+
}
486+
if (mouseButton.center) {
487+
triangle(23, 75, 50, 20, 78, 75);
488+
}
489+
}
490+
}
491+
```
492+
493+
</td></tr>
494+
</table>
495+
496+
## …using keyCode
497+
`keyCode` is still a `Number` system variable in 2.x.
498+
```js
499+
if (keyCode === 13) {
500+
// Code to run if the enter key was pressed.
501+
}
502+
```
503+
504+
However, system variables like "ENTER" cannot be used like in 1.x, for example:
505+
```js
506+
if (keyCode === ENTER) {
507+
// Code to run if the enter key was pressed.
508+
}
509+
```
510+
511+
Instead, in 2.x you can use the key function to directly compare the key value.
512+
```js
513+
if (key === 'Enter') { // Enter key
514+
// Code to run if the Enter key was pressed.
515+
}
516+
```
517+
518+
A more detailed comparison.
519+
520+
```js
521+
let x = 50;
522+
let y = 50;
523+
524+
function setup() {
525+
createCanvas(100, 100);
526+
527+
background(200);
528+
529+
describe(
530+
'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.'
531+
);
532+
}
533+
```
534+
535+
<table>
536+
<tr><th>p5.js 1.x</th><th>p5.js 2.x</th></tr>
537+
<tr><td>
538+
539+
```js
540+
function draw() {
541+
// Update x and y if an arrow key is pressed.
542+
if (keyIsPressed === true) {
543+
if (keyCode === UP_ARROW) {
544+
y -= 1;
545+
} else if (keyCode === DOWN_ARROW) {
546+
y += 1;
547+
} else if (keyCode === LEFT_ARROW) {
548+
x -= 1;
549+
} else if (keyCode === RIGHT_ARROW) {
550+
x += 1;
551+
}
552+
}
553+
554+
// Style the circle.
555+
fill(0);
556+
557+
// Draw the circle at (x, y).
558+
circle(x, y, 5);
559+
}
560+
```
561+
562+
</td><td>
563+
564+
565+
```js
566+
function draw() {
567+
// Update x and y if an arrow key is pressed.
568+
if (keyIsPressed === true) {
569+
if (key === 'ArrowUp') { // Up arrow key
570+
y -= 1;
571+
} else if (key === 'ArrowDown') { // Down arrow key
572+
y += 1;
573+
} else if (key === 'ArrowLeft') { // Left arrow key
574+
x -= 1;
575+
} else if (key === 'ArrowRight') { // Right arrow key
576+
x += 1;
577+
}
578+
}
579+
580+
// Style the circle.
581+
fill(0);
582+
583+
// Draw the circle at (x, y).
584+
circle(x, y, 5);
585+
}
586+
```
587+
588+
</td></tr>
589+
</table>
590+
591+
More key codes can be found at websites such as [keycode.info](https://www.toptal.com/developers/keycode)

0 commit comments

Comments
 (0)