diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js
index 17d3cd2fd2..35903d92cc 100644
--- a/src/color/creating_reading.js
+++ b/src/color/creating_reading.js
@@ -31,11 +31,9 @@ import '../core/friendly_errors/fes_core';
  * let value = alpha(c); // Sets 'value' to 102
  * fill(value);
  * rect(50, 15, 35, 70);
+ * describe('Left half of canvas light blue and right half light charcoal grey.');
  * </code>
  * </div>
- *
- * @alt
- * Left half of canvas light blue and right half light charcoal grey.
  */
 p5.prototype.alpha = function(c) {
   p5._validateParameters('alpha', arguments);
@@ -58,11 +56,10 @@ p5.prototype.alpha = function(c) {
  * let blueValue = blue(c);
  * fill(0, 0, blueValue);
  * rect(50, 20, 35, 60); // Draw right rectangle
+ * describe('Left half of canvas light purple and right half a royal blue.');
  * </code>
  * </div>
  *
- * @alt
- * Left half of canvas light purple and right half a royal blue.
  */
 p5.prototype.blue = function(c) {
   p5._validateParameters('blue', arguments);
@@ -88,6 +85,8 @@ p5.prototype.blue = function(c) {
  * let value = brightness(c); // Sets 'value' to 255
  * fill(value);
  * rect(50, 20, 35, 60);
+ * describe(`Left half of canvas salmon pink and the right half with its
+ * brightness colored white.`);
  * </code>
  * </div>
  *
@@ -101,12 +100,10 @@ p5.prototype.blue = function(c) {
  * let value = brightness(c); // A 'value' of 50% is 127.5
  * fill(value);
  * rect(50, 20, 35, 60);
+ * describe(`Left half of canvas olive colored and the right half with its
+ * brightness color gray.`);
  * </code>
  * </div>
- *
- * @alt
- * Left half of canvas salmon pink and the right half with its brightness colored white.
- * Left half of canvas olive colored and the right half with its brightness color gray.
  */
 p5.prototype.brightness = function(c) {
   p5._validateParameters('brightness', arguments);
@@ -144,6 +141,8 @@ p5.prototype.brightness = function(c) {
  * fill(c);
  * noStroke();
  * rect(30, 20, 55, 55);
+ * describe(`Yellow rect in middle right of canvas,
+ * with 55 pixel width and height.`);
  * </code>
  * </div>
  *
@@ -157,6 +156,8 @@ p5.prototype.brightness = function(c) {
  * c = color(65);
  * fill(c);
  * ellipse(75, 75, 80, 80);
+ * describe(`Yellow ellipse in top left of canvas, black ellipse in bottom
+ * right, both 80×80.`);
  * </code>
  * </div>
  *
@@ -167,6 +168,7 @@ p5.prototype.brightness = function(c) {
  * fill(c);
  * noStroke();
  * rect(20, 20, 60, 60);
+ * describe('Bright fuchsia rect in middle of canvas, 60 pixel width and height.');
  * </code>
  * </div>
  *
@@ -180,6 +182,7 @@ p5.prototype.brightness = function(c) {
  * c = color('#00ff00');
  * fill(c);
  * rect(55, 10, 45, 80);
+ * describe('Two bright green rects on opposite sides of the canvas, both 45×80.');
  * </code>
  * </div>
  *
@@ -201,6 +204,7 @@ p5.prototype.brightness = function(c) {
  * c = color('rgba(0%, 0%, 100%, 1)');
  * fill(c);
  * rect(55, 55, 35, 35); // Draw rectangle
+ * describe('Four blue rects in each corner of the canvas, each are 35×35.');
  * </code>
  * </div>
  *
@@ -214,6 +218,8 @@ p5.prototype.brightness = function(c) {
  * c = color('hsla(160, 100%, 50%, 0.5)');
  * fill(c);
  * rect(55, 10, 45, 80); // Draw rectangle
+ * describe(`Bright sea green rect on left and darker rect on right of canvas,
+ * both 45×80.`);
  * </code>
  * </div>
  *
@@ -227,6 +233,8 @@ p5.prototype.brightness = function(c) {
  * c = color('hsba(160, 100%, 50%, 0.5)');
  * fill(c);
  * rect(55, 10, 45, 80); // Draw rectangle
+ * describe(`Dark green rect on left and lighter green rect on right of canvas,
+ * both 45×80.`);
  * </code>
  * </div>
  *
@@ -240,18 +248,10 @@ p5.prototype.brightness = function(c) {
  * c = color(50, 55, 100);
  * fill(c);
  * rect(55, 10, 45, 80);
+ * describe(`Dark blue rect on left and light teal rect on right of canvas,
+ * both 45×80.`);
  * </code>
  * </div>
- *
- * @alt
- * Yellow rect in middle right of canvas, with 55 pixel width and height.
- * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80×80.
- * Bright fuchsia rect in middle of canvas, 60 pixel width and height.
- * Two bright green rects on opposite sides of the canvas, both 45×80.
- * Four blue rects in each corner of the canvas, each are 35×35.
- * Bright sea green rect on left and darker rect on right of canvas, both 45×80.
- * Dark green rect on left and lighter green rect on right of canvas, both 45×80.
- * Dark blue rect on left and light teal rect on right of canvas, both 45×80.
  */
 
 /**
@@ -312,11 +312,10 @@ p5.prototype.color = function() {
  * print(greenValue); // Print "75.0"
  * fill(0, greenValue, 0); // Use 'greenValue' in new fill
  * rect(50, 20, 35, 60); // Draw right rectangle
+ * describe(`blue rect on left and green on right, both with black outlines
+ * & 35×60.`);
  * </code>
  * </div>
- *
- * @alt
- * blue rect on left and green on right, both with black outlines & 35×60.
  */
 p5.prototype.green = function(c) {
   p5._validateParameters('green', arguments);
@@ -347,11 +346,10 @@ p5.prototype.green = function(c) {
  * let value = hue(c); // Sets 'value' to "0"
  * fill(value);
  * rect(50, 20, 35, 60);
+ * describe('salmon pink rect on left and black on right, both 35×60.');
  * </code>
  * </div>
  *
- * @alt
- * salmon pink rect on left and black on right, both 35×60.
  */
 p5.prototype.hue = function(c) {
   p5._validateParameters('hue', arguments);
@@ -394,11 +392,10 @@ p5.prototype.hue = function(c) {
  * rect(50, 20, 20, 60);
  * fill(to);
  * rect(70, 20, 20, 60);
+ * describe(`4 rects one tan, brown, brownish purple, purple, with white
+ * outlines & 20×60`);
  * </code>
  * </div>
- *
- * @alt
- * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20×60
  */
 
 p5.prototype.lerpColor = function(c1, c2, amt) {
@@ -468,11 +465,10 @@ p5.prototype.lerpColor = function(c1, c2, amt) {
  * let value = lightness(c); // Sets 'value' to 50
  * fill(value);
  * rect(50, 20, 35, 60);
+ * describe(`light pastel green rect on left and dark grey rect on right,
+ * both 35×60.`);
  * </code>
  * </div>
- *
- * @alt
- * light pastel green rect on left and dark grey rect on right, both 35×60.
  */
 p5.prototype.lightness = function(c) {
   p5._validateParameters('lightness', arguments);
@@ -497,6 +493,8 @@ p5.prototype.lightness = function(c) {
  * print(redValue); // Print "255.0"
  * fill(redValue, 0, 0); // Use 'redValue' in new fill
  * rect(50, 20, 35, 60); // Draw right rectangle
+ * describe(`yellow rect on left and red rect on right, both with black
+ * outlines and 35×60.`);
  * </code>
  * </div>
  *
@@ -507,12 +505,9 @@ p5.prototype.lightness = function(c) {
  * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1
  * let myColor = red(c);
  * print(myColor); // 0.4980392156862745
+ * describe('grey canvas');
  * </code>
  * </div>
- *
- * @alt
- * yellow rect on left and red rect on right, both with black outlines and 35×60.
- * grey canvas
  */
 p5.prototype.red = function(c) {
   p5._validateParameters('red', arguments);
@@ -542,11 +537,9 @@ p5.prototype.red = function(c) {
  * let value = saturation(c); // Sets 'value' to 126
  * fill(value);
  * rect(50, 20, 35, 60);
+ * describe('deep pink rect on left and grey rect on right, both 35×60.');
  * </code>
  * </div>
- *
- * @alt
- *deep pink rect on left and grey rect on right, both 35×60.
  */
 p5.prototype.saturation = function(c) {
   p5._validateParameters('saturation', arguments);
diff --git a/src/color/p5.Color.js b/src/color/p5.Color.js
index 6eda86a0c1..373c047370 100644
--- a/src/color/p5.Color.js
+++ b/src/color/p5.Color.js
@@ -73,6 +73,7 @@ p5.Color = function(pInst, vals) {
  * text(myColor.toString(), 0, -5);
  * text(myColor.toString('#rrggbb'), 0, -30);
  * text(myColor.toString('rgba%'), 0, -55);
+ * describe('A canvas with 3 text representation of their color.');
  * </code>
  * </div>
  *
@@ -82,9 +83,6 @@ p5.Color = function(pInst, vals) {
  * text(myColor.toString('#rrggbb'), 25, 25);
  * </code>
  * </div>
- *
- * @alt
- * A canvas with 3 text representation of their color.
  */
 p5.Color.prototype.toString = function(format) {
   const a = this.levels;
@@ -270,12 +268,10 @@ p5.Color.prototype.toString = function(format) {
  * function draw() {
  *   backgroundColor.setRed(128 + 128 * sin(millis() / 1000));
  *   background(backgroundColor);
+ *   describe('canvas with gradually changing background color');
  * }
  * </code>
  * </div>
- *
- * @alt
- * canvas with gradually changing background color
  */
 p5.Color.prototype.setRed = function(new_red) {
   this._array[0] = new_red / this.maxes[constants.RGB][0];
@@ -294,12 +290,11 @@ p5.Color.prototype.setRed = function(new_red) {
  * function draw() {
  *   backgroundColor.setGreen(128 + 128 * sin(millis() / 1000));
  *   background(backgroundColor);
+ *   describe('canvas with gradually changing background color');
  * }
  * </code>
  * </div>
  *
- * @alt
- * canvas with gradually changing background color
  **/
 p5.Color.prototype.setGreen = function(new_green) {
   this._array[1] = new_green / this.maxes[constants.RGB][1];
@@ -318,12 +313,11 @@ p5.Color.prototype.setGreen = function(new_green) {
  * function draw() {
  *   backgroundColor.setBlue(128 + 128 * sin(millis() / 1000));
  *   background(backgroundColor);
+ *   describe('canvas with gradually changing background color');
  * }
  * </code>
  * </div>
  *
- * @alt
- * canvas with gradually changing background color
  **/
 p5.Color.prototype.setBlue = function(new_blue) {
   this._array[2] = new_blue / this.maxes[constants.RGB][2];
@@ -345,12 +339,10 @@ p5.Color.prototype.setBlue = function(new_blue) {
  *   squareColor.setAlpha(128 + 128 * sin(millis() / 1000));
  *   fill(squareColor);
  *   rect(13, 13, width - 26, height - 26);
+ *   describe('a square with gradually changing opacity on a gray background');
  * }
  * </code>
  * </div>
- *
- * @alt
- * a square with gradually changing opacity on a gray background
  **/
 p5.Color.prototype.setAlpha = function(new_alpha) {
   this._array[3] = new_alpha / this.maxes[this.mode][3];
@@ -777,11 +769,10 @@ const colorPatterns = {
  * <div>
  * <code>
  * // todo
+ * //
+ * // describe('');
  * </code>
  * </div>
- *
- * @alt
- * //todo
  */
 p5.Color._parseInputs = function(r, g, b, a) {
   const numArgs = arguments.length;
diff --git a/src/color/setting.js b/src/color/setting.js
index 6456befbe5..eac1c926a0 100644
--- a/src/color/setting.js
+++ b/src/color/setting.js
@@ -198,9 +198,8 @@ p5.prototype.background = function(...args) {
  * // Clear the screen on mouse press.
  * function draw() {
  *   ellipse(mouseX, mouseY, 20, 20);
- *   describe(
- *     'small white ellipses are continually drawn at mouse x and y coordinates'
- *   );
+ *   describe(`small white ellipses are continually drawn at mouse’s x and y
+ *   coordinates.`);
  * }
  * function mousePressed() {
  *   clear();
@@ -258,7 +257,7 @@ p5.prototype.clear = function(...args) {
  *   }
  * }
  * describe(
- *   'Green to red gradient from bottom left to top red with shading from top left'
+ *   'Green to red gradient from bottom left to top right with shading from top left'
  * );
  * </code>
  * </div>
@@ -273,9 +272,8 @@ p5.prototype.clear = function(...args) {
  *     point(i, j);
  *   }
  * }
- * describe(
- *   'Rainbow gradient from left to right, brightness increasing to white at top'
- * );
+ * describe(`Rainbow gradient from left to right.
+ * Brightness increasing to white at top.`);
  * </code>
  * </div>
  *
@@ -472,7 +470,6 @@ p5.prototype.colorMode = function(mode, max1, max2, max3, maxA) {
  * describe('blue rect with black outline in center of canvas');
  * </code>
  * </div>
- *
  */
 
 /**
@@ -519,7 +516,8 @@ p5.prototype.fill = function(...args) {
  * rect(15, 10, 55, 55);
  * noFill();
  * rect(20, 20, 60, 60);
- * describe('noFill rect center over white rect. Both 60x60 with black outlines');
+ * describe(`White rect at top middle and noFill rect center,
+ * both with black outlines.`);
  * </code>
  * </div>
  *
@@ -540,7 +538,6 @@ p5.prototype.fill = function(...args) {
  * }
  * </code>
  * </div>
- *
  */
 p5.prototype.noFill = function() {
   this._renderer._setProperty('_doFill', false);
@@ -558,7 +555,7 @@ p5.prototype.noFill = function() {
  * <code>
  * noStroke();
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. no outline');
+ * describe('White rect at center; no outline.');
  * </code>
  * </div>
  *
@@ -579,7 +576,6 @@ p5.prototype.noFill = function() {
  * }
  * </code>
  * </div>
- *
  */
 p5.prototype.noStroke = function() {
   this._renderer._setProperty('_doStroke', false);
@@ -617,7 +613,7 @@ p5.prototype.noStroke = function() {
  * strokeWeight(4);
  * stroke(51);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Dark charcoal grey outline');
+ * describe('White rect at center with dark charcoal grey outline.');
  * </code>
  * </div>
  *
@@ -627,7 +623,7 @@ p5.prototype.noStroke = function() {
  * stroke(255, 204, 0);
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Yellow outline');
+ * describe('White rect at center with yellow outline.');
  * </code>
  * </div>
  *
@@ -638,7 +634,7 @@ p5.prototype.noStroke = function() {
  * strokeWeight(4);
  * stroke(255, 204, 100);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Royal blue outline');
+ * describe('White rect at center with royal blue outline.');
  * </code>
  * </div>
  *
@@ -648,7 +644,7 @@ p5.prototype.noStroke = function() {
  * stroke('red');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Red outline');
+ * describe('White rect at center with red outline.');
  * </code>
  * </div>
  *
@@ -658,7 +654,7 @@ p5.prototype.noStroke = function() {
  * stroke('#fae');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Pink outline');
+ * describe('White rect at center with pink outline.');
  * </code>
  * </div>
  *
@@ -668,7 +664,7 @@ p5.prototype.noStroke = function() {
  * stroke('#222222');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Black outline');
+ * describe('White rect at center with black outline.');
  * </code>
  * </div>
  *
@@ -678,7 +674,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgb(0,255,0)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Bright green outline');
+ * describe('White rect at center with bright green outline.');
  * </code>
  * </div>
  *
@@ -688,7 +684,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgba(0,255,0,0.25)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Soft green outline');
+ * describe('White rect at center with soft green outline.');
  * </code>
  * </div>
  *
@@ -698,7 +694,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgb(100%,0%,10%)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Red outline');
+ * describe('White rect at center with red outline.');
  * </code>
  * </div>
  *
@@ -708,7 +704,7 @@ p5.prototype.noStroke = function() {
  * stroke('rgba(100%,0%,100%,0.5)');
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Dark fuchsia outline');
+ * describe('White rect at center with dark fuchsia outline.');
  * </code>
  * </div>
  *
@@ -718,10 +714,9 @@ p5.prototype.noStroke = function() {
  * stroke(color(0, 0, 255));
  * strokeWeight(4);
  * rect(20, 20, 60, 60);
- * describe('60x60 white rect at center. Blue outline');
+ * describe('White rect at center with blue outline.');
  * </code>
  * </div>
- *
  */
 
 /**
@@ -784,9 +779,8 @@ p5.prototype.stroke = function(...args) {
  * erase();
  * ellipse(25, 30, 30);
  * noErase();
- * describe(
- *   'centered pink rect over purple background. Elliptical area in top-left of rect is erased white'
- * );
+ * describe(`60×60 centered pink rect, purple background.
+ * Elliptical area in top-left of rect is erased white.`);
  * </code>
  * </div>
  *
@@ -799,9 +793,8 @@ p5.prototype.stroke = function(...args) {
  * erase(150, 255);
  * triangle(50, 10, 70, 50, 90, 10);
  * noErase();
- * describe(
- *   'purple rect centered over mint green background. Triangle in top-right is partially erased with fully erased outline'
- * );
+ * describe(`60×60 centered purple rect, mint green background.
+ * Triangle in top-right is partially erased with fully erased outline.`);
  * </code>
  * </div>
  *
@@ -828,13 +821,11 @@ p5.prototype.stroke = function(...args) {
  *   translate(0, 0, 40);
  *   torus(15, 5);
  *   noErase();
- *   describe(
- *     'teal sphere centered over yellow background. Torus rotating around sphere erases to reveal black text underneath'
- *   );
+ *   describe(`60×60 centered teal sphere, yellow background.
+ *   Torus rotating around sphere erases to reveal black text underneath.`);
  * }
  * </code>
  * </div>
- *
  */
 p5.prototype.erase = function(opacityFill = 255, opacityStroke = 255) {
   this._renderer.erase(opacityFill, opacityStroke);
@@ -861,12 +852,10 @@ p5.prototype.erase = function(opacityFill = 255, opacityStroke = 255) {
  * ellipse(50, 50, 60);
  * noErase();
  * rect(70, 10, 10, 80);
- * describe(
- *   'Orange background, with two tall blue rectangles. A centered ellipse erased the first blue rect but not the second'
- * );
+ * describe(`Orange background, with two tall blue rectangles.
+ * A centered ellipse erased the first blue rect but not the second.`);
  * </code>
  * </div>
- *
  */
 
 p5.prototype.noErase = function() {