Merge pull request #5593 from Zearin/issue-5139/events

docs(src/events): Use `describe()` over `@alt`

Author: lmccart

src/data/local_storage.js

@@ -39,6 +39,8 @@ import p5 from '../core/main';
  *   if (myText === null) {
  *     myText = '';
  *   }
+ *   describe(`When you type the key name is displayed as black text on white background.
+ *   If you reload the page, the last letter typed is still displaying.`);
  * }
  *
  * function draw() {
@@ -52,10 +54,6 @@ import p5 from '../core/main';
  *   storeItem('myText', myText);
  * }
  * </code></div>
- *
- * @alt
- * When you type the key name is displayed as black text on white background.
- * If you reload the page, the last letter typed is still displaying.
  */
 p5.prototype.storeItem = function(key, value) {
   if (typeof key !== 'string') {
@@ -127,18 +125,16 @@ p5.prototype.storeItem = function(key, value) {
  *   if (myColor !== null) {
  *     background(myColor);
  *   }
+ *   describe(`If you click, the canvas changes to a random color.·
+ *     If you reload the page, the canvas is still the color it was when the
+ *     page was previously loaded.`);
  * }
  *
  * function mousePressed() {
  *   myColor = color(random(255), random(255), random(255));
  *   storeItem('myColor', myColor);
  * }
  * </code></div>
- *
- * @alt
- * If you click, the canvas changes to a random color.
- * If you reload the page, the canvas is still the color it
- * was when the page was previously loaded.
  */
 p5.prototype.getItem = function(key) {
   let value = localStorage.getItem(key);

src/events/acceleration.js

@@ -35,11 +35,10 @@ p5.prototype.deviceOrientation =
  *   background(220, 50);
  *   fill('magenta');
  *   ellipse(width / 2, height / 2, accelerationX);
+ *   describe('Magnitude of device acceleration is displayed as ellipse size.');
  * }
  * </code>
  * </div>
- * @alt
- * Magnitude of device acceleration is displayed as ellipse size
  */
 p5.prototype.accelerationX = 0;
 
@@ -58,11 +57,10 @@ p5.prototype.accelerationX = 0;
  *   background(220, 50);
  *   fill('magenta');
  *   ellipse(width / 2, height / 2, accelerationY);
+ *   describe('Magnitude of device acceleration is displayed as ellipse size');
  * }
  * </code>
  * </div>
- * @alt
- * Magnitude of device acceleration is displayed as ellipse size
  */
 p5.prototype.accelerationY = 0;
 
@@ -82,12 +80,10 @@ p5.prototype.accelerationY = 0;
  *   background(220, 50);
  *   fill('magenta');
  *   ellipse(width / 2, height / 2, accelerationZ);
+ *   describe('Magnitude of device acceleration is displayed as ellipse size');
  * }
  * </code>
  * </div>
- *
- * @alt
- * Magnitude of device acceleration is displayed as ellipse size
  */
 p5.prototype.accelerationZ = 0;
 
@@ -157,11 +153,11 @@ p5.prototype._updatePAccelerations = function() {
  *   rotateX(radians(rotationX));
  *   //rotateY(radians(rotationY));
  *   box(200, 200, 200);
+ *   describe(`red horizontal line right, green vertical line bottom.
+ *     black background.`);
  * }
  * </code>
  * </div>
- * @alt
- * red horizontal line right, green vertical line bottom. black background.
  */
 p5.prototype.rotationX = 0;
 
@@ -190,11 +186,11 @@ p5.prototype.rotationX = 0;
  *   //rotateX(radians(rotationX));
  *   rotateY(radians(rotationY));
  *   box(200, 200, 200);
+ *   describe(`red horizontal line right, green vertical line bottom.
+ *     black background.`);
  * }
  * </code>
  * </div>
- * @alt
- * red horizontal line right, green vertical line bottom. black background.
  */
 p5.prototype.rotationY = 0;
 
@@ -224,15 +220,14 @@ p5.prototype.rotationY = 0;
  *   //rotateX(radians(rotationX));
  *   //rotateY(radians(rotationY));
  *   box(200, 200, 200);
+ *   describe(`red horizontal line right, green vertical line bottom.
+ *     black background.`);
  * }
  * </code>
  * </div>
  *
  * @property {Number} rotationZ
  * @readOnly
- *
- * @alt
- * red horizontal line right, green vertical line bottom. black background.
  */
 p5.prototype.rotationZ = 0;
 
@@ -271,12 +266,10 @@ p5.prototype.rotationZ = 0;
  * }
  *
  * print(rotateDirection);
+ * describe('no image to display.');
  * </code>
  * </div>
  *
- * @alt
- * no image to display.
- *
  * @property {Number} pRotationX
  * @readOnly
  */
@@ -316,12 +309,10 @@ p5.prototype.pRotationX = 0;
  *   rotateDirection = 'counter-clockwise';
  * }
  * print(rotateDirection);
+ * describe('no image to display.');
  * </code>
  * </div>
  *
- * @alt
- * no image to display.
- *
  * @property {Number} pRotationY
  * @readOnly
  */
@@ -357,12 +348,10 @@ p5.prototype.pRotationY = 0;
  *   rotateDirection = 'counter-clockwise';
  * }
  * print(rotateDirection);
+ * describe('no image to display.');
  * </code>
  * </div>
  *
- * @alt
- * no image to display.
- *
  * @property {Number} pRotationZ
  * @readOnly
  */
@@ -403,6 +392,10 @@ p5.prototype._updatePRotations = function() {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when device turns`);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when x-axis turns`);
  * }
  * function deviceTurned() {
  *   if (turnAxis === 'X') {
@@ -415,10 +408,6 @@ p5.prototype._updatePRotations = function() {
  * }
  * </code>
  * </div>
- *
- * @alt
- * 50×50 black rect in center of canvas. turns white on mobile when device turns
- * 50×50 black rect in center of canvas. turns white on mobile when x-axis turns
  */
 p5.prototype.turnAxis = undefined;
 
@@ -446,6 +435,8 @@ let shake_threshold = 30;
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when device moves`);
  * }
  * function deviceMoved() {
  *   value = value + 5;
@@ -458,9 +449,6 @@ let shake_threshold = 30;
  * }
  * </code>
  * </div>
- *
- * @alt
- * 50×50 black rect in center of canvas. turns white on mobile when device moves
  */
 
 p5.prototype.setMoveThreshold = function(val) {
@@ -489,6 +477,8 @@ p5.prototype.setMoveThreshold = function(val) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when device is being shaked`);
  * }
  * function deviceMoved() {
  *   value = value + 5;
@@ -501,10 +491,6 @@ p5.prototype.setMoveThreshold = function(val) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * 50×50 black rect in center of canvas. turns white on mobile when device
- * is being shaked
  */
 
 p5.prototype.setShakeThreshold = function(val) {
@@ -529,6 +515,8 @@ p5.prototype.setShakeThreshold = function(val) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when device moves`);
  * }
  * function deviceMoved() {
  *   value = value + 5;
@@ -538,9 +526,6 @@ p5.prototype.setShakeThreshold = function(val) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * 50×50 black rect in center of canvas. turns white on mobile when device moves
  */
 
 /**
@@ -563,6 +548,8 @@ p5.prototype.setShakeThreshold = function(val) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when device turns`);
  * }
  * function deviceTurned() {
  *   if (value === 0) {
@@ -583,6 +570,8 @@ p5.prototype.setShakeThreshold = function(val) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when x-axis turns`);
  * }
  * function deviceTurned() {
  *   if (turnAxis === 'X') {
@@ -595,10 +584,6 @@ p5.prototype.setShakeThreshold = function(val) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * 50×50 black rect in center of canvas. turns white on mobile when device turns
- * 50×50 black rect in center of canvas. turns white on mobile when x-axis turns
  */
 
 /**
@@ -618,6 +603,8 @@ p5.prototype.setShakeThreshold = function(val) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50-by-50 black rect in center of canvas.
+ *     turns white on mobile when device shakes`);
  * }
  * function deviceShaken() {
  *   value = value + 5;
@@ -627,9 +614,6 @@ p5.prototype.setShakeThreshold = function(val) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * 50×50 black rect in center of canvas. turns white on mobile when device shakes
  */
 
 p5.prototype._ondeviceorientation = function(e) {