docs(src/events): Use describe() instead of @alt

Addresses processing#5139

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×50 black rect in center of canvas.
+ *     turns white on mobile when device turns`);
+ *   describe(`50×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×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×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×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
  */
 
 /**
@@ -583,6 +568,10 @@ p5.prototype.setShakeThreshold = function(val) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`50×50 black rect in center of canvas.
+ *     turns white on mobile when device turns`);
+ *   describe(`50×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×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) {

src/events/keyboard.js

@@ -23,12 +23,10 @@ import p5 from '../core/main';
  *     fill(255);
  *   }
  *   rect(25, 25, 50, 50);
+ *   describe('50×50 white rect that turns black on keypress.');
  * }
  * </code>
  * </div>
- *
- * @alt
- * 50×50 white rect that turns black on keypress.
  */
 p5.prototype.isKeyPressed = false;
 p5.prototype.keyIsPressed = false; // khan
@@ -53,11 +51,9 @@ p5.prototype.keyIsPressed = false; // khan
  * function draw() {
  *   background(200);
  *   text(key, 33, 65); // Display last key pressed.
+ *   describe('canvas displays any key value that is pressed in pink font.');
  * }
  * </code></div>
- *
- * @alt
- * canvas displays any key value that is pressed in pink font.
  */
 p5.prototype.key = '';
 
@@ -76,6 +72,8 @@ p5.prototype.key = '';
  * function draw() {
  *   fill(fillVal);
  *   rect(25, 25, 50, 50);
+ *   describe(`Grey rect center. turns white when up arrow pressed and black when down.
+ *     Display key pressed and its keyCode in a yellow box.`);
  * }
  *
  * function keyPressed() {
@@ -94,9 +92,6 @@ p5.prototype.key = '';
  *   print(key, ' ', keyCode);
  * }
  * </code></div>
- * @alt
- * Grey rect center. turns white when up arrow pressed and black when down
- * Display key pressed and its keyCode in a yellow box
  */
 p5.prototype.keyCode = 0;
 
@@ -130,6 +125,8 @@ p5.prototype.keyCode = 0;
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`black rect center. turns white when key pressed and black
+ *     when released.`);
  * }
  * function keyPressed() {
  *   if (value === 0) {
@@ -146,6 +143,8 @@ p5.prototype.keyCode = 0;
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`black rect center. turns white when left arrow pressed and
+ *     black when right.`);
  * }
  * function keyPressed() {
  *   if (keyCode === LEFT_ARROW) {
@@ -164,10 +163,6 @@ p5.prototype.keyCode = 0;
  * }
  * </code>
  * </div>
- *
- * @alt
- * black rect center. turns white when key pressed and black when released
- * black rect center. turns white when left arrow pressed and black when right.
  */
 p5.prototype._onkeydown = function(e) {
   if (this._downKeys[e.which]) {
@@ -203,6 +198,8 @@ p5.prototype._onkeydown = function(e) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`black rect center. turns white when key pressed and black
+ *     when pressed again`);
  * }
  * function keyReleased() {
  *   if (value === 0) {
@@ -214,9 +211,6 @@ p5.prototype._onkeydown = function(e) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * black rect center. turns white when key pressed and black when pressed again
  */
 p5.prototype._onkeyup = function(e) {
   this._downKeys[e.which] = false;
@@ -263,6 +257,8 @@ p5.prototype._onkeyup = function(e) {
  * function draw() {
  *   fill(value);
  *   rect(25, 25, 50, 50);
+ *   describe(`black rect center. turns white when 'a' key typed and
+ *     black when 'b' pressed`);
  * }
  * function keyTyped() {
  *   if (key === 'a') {
@@ -275,9 +271,6 @@ p5.prototype._onkeyup = function(e) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * black rect center. turns white when 'a' key typed and black when 'b' pressed
  */
 p5.prototype._onkeypress = function(e) {
   if (e.which === this._lastKeyCodeTyped) {
@@ -345,6 +338,8 @@ p5.prototype._onblur = function(e) {
  *
  *   clear();
  *   ellipse(x, y, 50, 50);
+ *   describe(`50×50 red ellipse moves left, right, up, and
+ *     down with arrow presses.`);
  * }
  * </code></div>
  *
@@ -369,12 +364,10 @@ p5.prototype._onblur = function(e) {
  *   clear();
  *   fill(255, 0, 0);
  *   ellipse(50, 50, diameter, diameter);
+ *   describe(`50×50 red ellipse gets bigger or smaller when
+ *     + or - are pressed.`);
  * }
  * </code></div>
- *
- * @alt
- * 50×50 red ellipse moves left, right, up and down with arrow presses.
- * 50×50 red ellipse gets bigger or smaller when + or - are pressed.
  */
 p5.prototype.keyIsDown = function(code) {
   p5._validateParameters('keyIsDown', arguments);