diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index 55bd9e60ab..6e9856a5dd 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -33,18 +33,11 @@ import * as constants from '../core/constants';
  * function draw() {
  *   background(200);
  *   plane(50, 50);
+ *   describe(`A white plane (shaped like a square).
+ *     Black lines show that the plane is built from 2 triangles.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * Nothing displayed on canvas
- * Rotating interior view of a box with sides that change color.
- * 3d red and green gradient.
- * Rotating interior view of a cylinder with sides that change color.
- * Rotating view of a cylinder with sides that change color.
- * 3d red and green gradient.
- * rotating view of a multi-colored cylinder with concave sides.
  */
 p5.prototype.plane = function(width, height, detailX, detailY) {
   this._assert3d('plane');
@@ -121,6 +114,7 @@ p5.prototype.plane = function(width, height, detailX, detailY) {
  *   rotateX(frameCount * 0.01);
  *   rotateY(frameCount * 0.01);
  *   box(50);
+ *   describe(`Rotating view of a 3D box with sides of length 50.`);
  * }
  * </code>
  * </div>
@@ -239,6 +233,9 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
  * function draw() {
  *   background(205, 102, 94);
  *   sphere(40);
+ *   describe(`A white sphere with a diameter of 40.
+ *     Black lines on its surface show how the sphere is built out of
+ *     many small triangles.`);
  * }
  * </code>
  * </div>
@@ -262,6 +259,12 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
  *   background(205, 105, 94);
  *   rotateY(millis() / 1000);
  *   sphere(40, detailX.value(), 16);
+ *   describe(`A rotating shape, resembling a clam shell or
+ *    “flattened” sphere, with white surface and a diameter of 40.
+ *    The shape is built from many small triangles, which each have
+ *    a black stroke to visually isolate.
+ *    Below the drawing is a slider. Increasing it adds more
+ *    triangles, such that the overall shape becomes rounder as the slider approaches its maximum.`);
  * }
  * </code>
  * </div>
@@ -285,6 +288,15 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
  *   background(205, 105, 94);
  *   rotateY(millis() / 1000);
  *   sphere(40, 16, detailY.value());
+ *   describe(`A white rotating sphere-like shape with a diameter of 40.
+ *     Its actual shape is like a cylinder with the top and bottom
+ *     surface protruding outward.
+ *     Black lines on its surface show how the sphere is built out of
+ *     many small triangles.
+ *     When adjusting the slider below the drawing, the shape increases
+ *     the number of small triangles making up the sphere, making the
+ *     final shape increasingly round as the slider approaches its
+ *     maximum setting.`);
  * }
  * </code>
  * </div>
@@ -458,6 +470,9 @@ const _truncatedCone = function(
  *   rotateX(frameCount * 0.01);
  *   rotateZ(frameCount * 0.01);
  *   cylinder(20, 50);
+ *   describe(`A spinning view of a white cylinder.
+ *     Black lines on its surface show how the cylinder is built out of
+ *     many small triangles.`);
  * }
  * </code>
  * </div>
@@ -481,6 +496,11 @@ const _truncatedCone = function(
  *   background(205, 105, 94);
  *   rotateY(millis() / 1000);
  *   cylinder(20, 75, detailX.value(), 1);
+ *   describe(`A spinning view of what appears to be a white plane.
+ *     Black lines on its surface show how the shape is built out of
+ *     many small triangles.
+ *     As you increase the slider below the canvas, the shape gradually
+ *     becomes smoother and closer to a cylinder.`);
  * }
  * </code>
  * </div>
@@ -504,6 +524,12 @@ const _truncatedCone = function(
  *   background(205, 105, 94);
  *   rotateY(millis() / 1000);
  *   cylinder(20, 75, 16, detailY.value());
+ *   describe(`A spinning view of a white cylinder.
+ *     Black lines on its surface show how the shape is built out of
+ *     many small triangles.
+ *     As you increase the slider below the canvas, the shape increases
+ *     the number of triangles on the outer (round) surface, but the
+ *     smoothness of the shape remains the same.`);
  * }
  * </code>
  * </div>
diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js
index d13a9acd3e..b56aac8cf1 100644
--- a/src/webgl/interaction.js
+++ b/src/webgl/interaction.js
@@ -39,12 +39,11 @@ import * as constants from '../core/constants';
  *   orbitControl();
  *   rotateY(0.5);
  *   box(30, 50);
+ *   describe(`Camera orbits around a box when mouse moved while
+ *     holding the button down.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * Camera orbits around a box when mouse is hold-clicked & then moved.
  */
 
 // implementation based on three.js 'orbitControls':
@@ -183,14 +182,14 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
  *   if (keyIsDown(32)) {
  *     noDebugMode();
  *   }
+ *   describe(`a 3D box is centered on a grid in a 3D sketch.
+ *     an icon indicates the direction of each axis:
+ *     a red line points +X, a green line +Y, and a blue line +Z.
+ *     the grid and icon disappear when the spacebar is pressed.`);
  * }
  * </code>
  * </div>
- * @alt
- * a 3D box is centered on a grid in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z. the grid and icon disappear when the
- * spacebar is pressed.
+ *
  *
  * @example
  * <div>
@@ -207,11 +206,10 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
  *   background(200);
  *   orbitControl();
  *   box(15, 30);
+ *   describe(`a 3D box is centered on a grid in a 3D sketch.`);
  * }
  * </code>
  * </div>
- * @alt
- * a 3D box is centered on a grid in a 3D sketch.
  *
  * @example
  * <div>
@@ -230,13 +228,12 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
  *   background(200);
  *   orbitControl();
  *   box(15, 30);
+ *   describe(`a 3D box is centered in a 3D sketch.
+ *     an icon indicates the direction of each axis:
+ *     a red line points +X, a green line +Y, and a blue line +Z.`);
  * }
  * </code>
  * </div>
- * @alt
- * a 3D box is centered in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z.
  *
  * @example
  * <div>
@@ -253,11 +250,10 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
  *   background(200);
  *   orbitControl();
  *   box(15, 30);
+ *   describe(`a 3D box is centered on a grid in a 3D sketch`);
  * }
  * </code>
  * </div>
- * @alt
- * a 3D box is centered on a grid in a 3D sketch
  *
  * @example
  * <div>
@@ -280,13 +276,12 @@ p5.prototype.orbitControl = function(sensitivityX, sensitivityY, sensitivityZ) {
  *   // set the stroke color and weight for the grid!
  *   stroke(255, 0, 150);
  *   strokeWeight(0.8);
+ *   describe(`a 3D box is centered on a grid in a 3D sketch.
+ *     an icon indicates the direction of each axis:
+ *     a red line points +X, a green line +Y, and a blue line +Z.`);
  * }
  * </code>
  * </div>
- * @alt
- * a 3D box is centered on a grid in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z.
  */
 
 /**
@@ -388,14 +383,13 @@ p5.prototype.debugMode = function(...args) {
  *   if (keyIsDown(32)) {
  *     noDebugMode();
  *   }
+ *   describe(`a 3D box is centered on a grid in a 3D sketch.
+ *     an icon indicates the direction of each axis:
+ *     a red line points +X, a green line +Y, and a blue line +Z.
+ *     the grid and icon disappear when the spacebar is pressed.`);
  * }
  * </code>
  * </div>
- * @alt
- * a 3D box is centered on a grid in a 3D sketch. an icon
- * indicates the direction of each axis: a red line points +X,
- * a green line +Y, and a blue line +Z. the grid and icon disappear when the
- * spacebar is pressed.
  */
 p5.prototype.noDebugMode = function() {
   this._assert3d('noDebugMode');
diff --git a/src/webgl/light.js b/src/webgl/light.js
index b822d81eaf..cf66ce270e 100644
--- a/src/webgl/light.js
+++ b/src/webgl/light.js
@@ -47,8 +47,6 @@ import * as constants from '../core/constants';
  * }
  * </code>
  * </div>
- * @alt
- * sphere with coral color under black light
  *
  * @example
  * <div>
@@ -66,8 +64,6 @@ import * as constants from '../core/constants';
  * }
  * </code>
  * </div>
- * @alt
- * sphere with coral color under white light
  */
 
 /**
@@ -147,7 +143,9 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) {
  *   createCanvas(100, 100, WEBGL);
  *   noStroke();
  *   describe(
- *     'Sphere with specular highlight. Clicking the mouse toggles the specular highlight color between red and the default white.'
+ *     `Sphere with specular highlight.
+ *      Clicking the mouse toggles the specular highlight color between
+ *      red and the default white.`
  *   );
  * }
  *
@@ -180,9 +178,6 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) {
  * </code>
  * </div>
  *
- * @alt
- * Sphere with specular highlight. Clicking the mouse toggles the
- * specular highlight color between red and the default white.
  */
 
 /**
@@ -262,7 +257,8 @@ p5.prototype.specularColor = function(v1, v2, v3) {
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   describe(
- *     'scene with sphere and directional light. The direction of the light is controlled with the mouse position.'
+ *     `Scene with sphere and directional light. The direction of
+ *      the light is controlled with the mouse position.`
  *   );
  * }
  * function draw() {
@@ -276,10 +272,6 @@ p5.prototype.specularColor = function(v1, v2, v3) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * scene with sphere and directional light. The direction of
- * the light is controlled with the mouse position.
  */
 
 /**
@@ -383,7 +375,8 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   describe(
- *     'scene with sphere and point light. The position of the light is controlled with the mouse position.'
+ *     `Scene with sphere and point light. The position of
+ *      the light is controlled with the mouse position.`
  *   );
  * }
  * function draw() {
@@ -404,10 +397,6 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * scene with sphere and point light. The position of
- * the light is controlled with the mouse position.
  */
 
 /**
@@ -492,7 +481,7 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
- *   describe('the light is partially ambient and partially directional');
+ *   describe('The light is partially ambient and partially directional');
  * }
  * function draw() {
  *   background(0);
@@ -504,9 +493,6 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * the light is partially ambient and partially directional
  */
 p5.prototype.lights = function() {
   this._assert3d('lights');
@@ -547,7 +533,7 @@ p5.prototype.lights = function() {
  *   createCanvas(100, 100, WEBGL);
  *   noStroke();
  *   describe(
- *     'Two spheres with different falloff values show different intensity of light'
+ *     'Two spheres with different falloff values show different intensities of light'
  *   );
  * }
  * function draw() {
@@ -574,9 +560,6 @@ p5.prototype.lights = function() {
  * }
  * </code>
  * </div>
- *
- * @alt
- * Two spheres with different falloff values show different intensity of light
  */
 p5.prototype.lightFalloff = function(
   constantAttenuation,
@@ -670,7 +653,8 @@ p5.prototype.lightFalloff = function(
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
  *   describe(
- *     'scene with sphere and spot light. The position of the light is controlled with the mouse position.'
+ *     `Scene with sphere and spot light.
+ *      The position of the light is controlled with the mouse position.`
  *   );
  * }
  * function draw() {
@@ -692,10 +676,6 @@ p5.prototype.lightFalloff = function(
  * }
  * </code>
  * </div>
- *
- * @alt
- * scene with sphere and spot light. The position of
- * the light is controlled with the mouse position.
  */
 /**
  * @method spotLight
@@ -1028,10 +1008,6 @@ p5.prototype.spotLight = function(
  * }
  * </code>
  * </div>
- *
- * @alt
- * Three white spheres. Each appears as a different
- * color due to lighting.
  */
 p5.prototype.noLights = function() {
   this._assert3d('noLights');
diff --git a/src/webgl/loading.js b/src/webgl/loading.js
index 039eba7fea..3381b2d049 100755
--- a/src/webgl/loading.js
+++ b/src/webgl/loading.js
@@ -58,12 +58,11 @@ import './p5.Geometry';
  *   rotateX(frameCount * 0.01);
  *   rotateY(frameCount * 0.01);
  *   model(octahedron);
+ *   describe(`Vertically rotating 3-d octahedron.`);
  * }
  * </code>
  * </div>
  *
- * @alt
- * Vertically rotating 3-d octahedron.
  *
  * @example
  * <div>
@@ -88,12 +87,11 @@ import './p5.Geometry';
  *   rotateY(frameCount * 0.01);
  *   normalMaterial(); // For effect
  *   model(teapot);
+ *   describe(`Vertically rotating 3-d teapot with red, green, and
+ *     blue gradient.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * Vertically rotating 3-d teapot with red, green and blue gradient.
  */
 /**
  * @method loadModel
@@ -612,12 +610,10 @@ function parseASCIISTL(model, lines) {
  *   rotateX(frameCount * 0.01);
  *   rotateY(frameCount * 0.01);
  *   model(octahedron);
+ *   describe(`Vertically rotating 3-d octahedron.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * Vertically rotating 3-d octahedron.
  */
 p5.prototype.model = function(model) {
   this._assert3d('model');
diff --git a/src/webgl/material.js b/src/webgl/material.js
index f908edc105..99990cdc5b 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -51,12 +51,11 @@ import './p5.Texture';
  * function draw() {
  *   mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
  *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ *   describe(`Zooming Mandelbrot set. A colorful, infinitely
+ *     detailed fractal.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * zooming Mandelbrot set. a colorful, infinitely detailed fractal.
  */
 p5.prototype.loadShader = function(
   vertFilename,
@@ -170,12 +169,11 @@ p5.prototype.loadShader = function(
  *   // 'r' is the size of the image in Mandelbrot-space
  *   mandel.setUniform('r', 1.5 * exp(-6.5 * (1 + sin(millis() / 2000))));
  *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ *   describe(`Zooming Mandelbrot set. A colorful, infinitely
+ *     detailed fractal.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * zooming Mandelbrot set. a colorful, infinitely detailed fractal.
  */
 p5.prototype.createShader = function(vertSrc, fragSrc) {
   this._assert3d('createShader');
@@ -254,6 +252,11 @@ p5.prototype.createShader = function(vertSrc, fragSrc) {
  *     shader(orangeBlue);
  *   }
  *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ *
+ *   describe(`Canvas toggles between a circular gradient of
+ *     orange and blue vertically. And a circular gradient of
+ *     red and green moving horizontally when mouse is
+ *     clicked/pressed.`);
  * }
  *
  * function mouseClicked() {
@@ -261,9 +264,6 @@ p5.prototype.createShader = function(vertSrc, fragSrc) {
  * }
  * </code>
  * </div>
- *
- * @alt
- * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
  */
 p5.prototype.shader = function(s) {
   this._assert3d('shader');
@@ -353,21 +353,18 @@ p5.prototype.shader = function(s) {
  *   pop();
  *
  *   // Draw a box using the default fill shader
- *   // resetShader() restores the default fill shader
- *   resetShader();
- *   fill(255, 0, 0);
- *   push();
- *   translate(width / 4, 0, 0);
- *   rotateX(millis() * 0.00025);
- *   rotateY(millis() * 0.0005);
- *   box(width / 4);
- *   pop();
+ *     // resetShader() restores the default fill shader
+ *     resetShader();
+ *     fill(255, 0, 0);
+ *     push();
+ *     translate(width / 4, 0, 0);
+ *     rotateX(millis() * 0.00025);
+ *     rotateY(millis() * 0.0005);
+ *     box(width / 4);
+ *     pop();
  * }
  * </code>
  * </div>
- * @alt
- * Two rotating cubes. The left one is painted using a custom (user-defined) shader,
- * while the right one is painted using the default fill shader.
  */
 p5.prototype.resetShader = function() {
   this._renderer.userFillShader = this._renderer.userStrokeShader = null;
@@ -412,11 +409,10 @@ p5.prototype.resetShader = function() {
  *   //pass image as texture
  *   texture(img);
  *   box(width / 2);
+ *   describe(`spinning cube with a texture from an image`);
  * }
  * </code>
  * </div>
- * @alt
- * spinning cube with a texture from an image
  *
  * @example
  * <div>
@@ -439,11 +435,11 @@ p5.prototype.resetShader = function() {
  *   rotateX(0.5);
  *   noStroke();
  *   plane(50);
+ *   describe(`plane with a texture from an image created by
+ *     createGraphics()`);
  * }
  * </code>
  * </div>
- * @alt
- * plane with a texture from an image created by createGraphics()
  *
  * @example
  * <div>
@@ -463,6 +459,7 @@ p5.prototype.resetShader = function() {
  *   //pass video frame as texture
  *   texture(vid);
  *   rect(-40, -40, 80, 80);
+ *   describe(`rectangle with video as texture`);
  * }
  *
  * function mousePressed() {
@@ -471,9 +468,6 @@ p5.prototype.resetShader = function() {
  * </code>
  * </div>
  *
- * @alt
- * rectangle with video as texture
- *
  * @example
  * <div>
  * <code>
@@ -498,11 +492,10 @@ p5.prototype.resetShader = function() {
  *   vertex(40, 40, 1, 1);
  *   vertex(-40, 40, 0, 1);
  *   endShape();
+ *   describe(`quad with a texture, mapped using normalized coordinates`);
  * }
  * </code>
  * </div>
- * @alt
- * quad with a texture, mapped using normalized coordinates
  */
 p5.prototype.texture = function(tex) {
   this._assert3d('texture');
@@ -554,11 +547,10 @@ p5.prototype.texture = function(tex) {
  *   vertex(50, 50, 1, 1);
  *   vertex(-50, 50, 0, 1);
  *   endShape();
+ *   describe(`quad with a texture, mapped using normalized coordinates`);
  * }
  * </code>
  * </div>
- * @alt
- * quad with a texture, mapped using normalized coordinates
  *
  * @example
  * <div>
@@ -583,11 +575,10 @@ p5.prototype.texture = function(tex) {
  *   vertex(50, 50, img.width, img.height);
  *   vertex(-50, 50, 0, img.height);
  *   endShape();
+ *   describe(`quad with a texture, mapped using image coordinates`);
  * }
  * </code>
  * </div>
- * @alt
- * quad with a texture, mapped using image coordinates
  */
 p5.prototype.textureMode = function(mode) {
   if (mode !== constants.IMAGE && mode !== constants.NORMAL) {
@@ -655,12 +646,12 @@ p5.prototype.textureMode = function(mode) {
  *   vertex(-1, 1, 0, 0, v);
  *   vertex(-1, -1, 0, 0, 0);
  *   endShape();
+ *
+ *   describe(`an image of the rocky mountains repeated in
+ *     mirrored tiles`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * an image of the rocky mountains repeated in mirrored tiles
  */
 p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) {
   this._renderer.textureWrapX = wrapX;
@@ -698,11 +689,10 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) {
  *   background(200);
  *   normalMaterial();
  *   sphere(40);
+ *   describe(`Red, green, and blue gradient.`);
  * }
  * </code>
  * </div>
- * @alt
- * Sphere with normal material
  */
 p5.prototype.normalMaterial = function(...args) {
   this._assert3d('normalMaterial');
@@ -756,11 +746,10 @@ p5.prototype.normalMaterial = function(...args) {
  *   ambientLight(255);
  *   ambientMaterial(70, 130, 230);
  *   sphere(40);
+ *   describe(`radiating light source from top right of canvas`);
  * }
  * </code>
  * </div>
- * @alt
- * sphere reflecting red, blue, and green light
  *
  * @example
  * <div>
@@ -776,11 +765,10 @@ p5.prototype.normalMaterial = function(...args) {
  *   ambientLight(255, 0, 255); // magenta light
  *   ambientMaterial(255); // white material
  *   box(30);
+ *   describe(`box reflecting only red and blue light`);
  * }
  * </code>
  * </div>
- * @alt
- * box reflecting only red and blue light
  *
  * @example
  * <div>
@@ -789,18 +777,17 @@ p5.prototype.normalMaterial = function(...args) {
  * // green, it does not reflect any light
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
- *   describe('box reflecting no light');
+ *   describe('Box reflecting no light');
  * }
  * function draw() {
  *   background(70);
  *   ambientLight(0, 255, 0); // green light
  *   ambientMaterial(255, 0, 255); // magenta material
  *   box(30);
+ *   describe(`Box reflecting no light`);
  * }
  * </code>
  * </div>
- * @alt
- * box reflecting no light
  */
 
 /**
@@ -858,7 +845,7 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) {
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
- *   describe('sphere with green emissive material');
+ *   describe('Sphere with green emissive material');
  * }
  * function draw() {
  *   background(0);
@@ -866,12 +853,10 @@ p5.prototype.ambientMaterial = function(v1, v2, v3) {
  *   ambientLight(0);
  *   emissiveMaterial(130, 230, 0);
  *   sphere(40);
+ *   describe(`Radiating light source from top right of canvas`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * sphere with green emissive material
  */
 
 /**
@@ -949,11 +934,11 @@ p5.prototype.emissiveMaterial = function(v1, v2, v3, a) {
  *   specularMaterial(250);
  *   shininess(50);
  *   torus(30, 10, 64, 64);
+ *
+ *   describe(`torus with specular material`);
  * }
  * </code>
  * </div>
- * @alt
- * torus with specular material
  */
 
 /**
@@ -1003,7 +988,7 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) {
  * <code>
  * function setup() {
  *   createCanvas(100, 100, WEBGL);
- *   describe('two spheres, one more shiny than the other');
+ *   describe('Two spheres, one more shiny than the other');
  * }
  * function draw() {
  *   background(0);
@@ -1019,11 +1004,10 @@ p5.prototype.specularMaterial = function(v1, v2, v3, alpha) {
  *   translate(50, 0, 0);
  *   shininess(20);
  *   sphere(20);
+ *   describe(`Shininess on Camera changes position with mouse`);
  * }
  * </code>
  * </div>
- * @alt
- * two spheres, one more shiny than the other
  */
 p5.prototype.shininess = function(shine) {
   this._assert3d('shininess');
diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js
index 380b0ef145..1f825a982a 100644
--- a/src/webgl/p5.Camera.js
+++ b/src/webgl/p5.Camera.js
@@ -52,6 +52,8 @@ import p5 from '../core/main';
  *   //move the camera away from the plane by a sin wave
  *   camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
  *   plane(10, 10);
+ *   describe(`White square repeatedly grows to fill canvas and
+ *     then shrinks.`);
  * }
  * </code>
  * </div>
@@ -101,13 +103,12 @@ import p5 from '../core/main';
  *   stroke(255);
  *   fill(255, 102, 94);
  *   box(85);
+ *   describe(`An interactive example of a red cube with 3 sliders
+ *     for moving it across x, y, and z axis and 3 sliders for shifting
+ *     its center.`);
  * }
  * </code>
  * </div>
- * @alt
- * White square repeatedly grows to fill canvas and then shrinks.
- * An interactive example of a red cube with 3 sliders for moving it across x, y,
- * z axis and 3 sliders for shifting its center.
  */
 p5.prototype.camera = function(...args) {
   this._assert3d('camera');
@@ -166,12 +167,12 @@ p5.prototype.camera = function(...args) {
  *   translate(15, 0, sin(frameCount / 30 + PI) * 95);
  *   box(30);
  *   pop();
+ *
+ *   describe(`Two colored 3D boxes move back and forth, rotating as
+ *     mouse is dragged.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * two colored 3D boxes move back and forth, rotating as mouse is dragged.
  */
 p5.prototype.perspective = function(...args) {
   this._assert3d('perspective');
@@ -229,12 +230,12 @@ p5.prototype.perspective = function(...args) {
  *   translate(15, 0, sin(frameCount / 30 + PI) * 65);
  *   box(30);
  *   pop();
+ *
+ *   describe(`Two 3D boxes move back and forth along same plane,
+ *     rotating as mouse is dragged.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * two 3D boxes move back and forth along same plane, rotating as mouse is dragged.
  */
 p5.prototype.ortho = function(...args) {
   this._assert3d('ortho');
@@ -295,12 +296,12 @@ p5.prototype.ortho = function(...args) {
  *   translate(15, 0, sin(frameCount / 30 + PI) * 25);
  *   box(30);
  *   pop();
+ *
+ *   describe(`Two 3D boxes move back and forth along same plane, rotating
+ *     as mouse is dragged.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * two 3D boxes move back and forth along same plane, rotating as mouse is dragged.
  */
 p5.prototype.frustum = function(...args) {
   this._assert3d('frustum');
@@ -348,11 +349,9 @@ p5.prototype.frustum = function(...args) {
  *   camera.lookAt(0, 0, 0);
  *   camera.setPosition(sin(frameCount / 60) * 200, 0, 100);
  *   box(20);
+ *   describe(`An example that creates a camera and moves it around the box.`);
  * }
  * </code></div>
- *
- * @alt
- * An example that creates a camera and moves it around the box.
  */
 p5.prototype.createCamera = function() {
   this._assert3d('createCamera');
@@ -443,12 +442,12 @@ p5.prototype.createCamera = function() {
  *   box(20);
  *   translate(35, 0, 0);
  *   box(20);
+ *
+ *   describe(`Camera view pans left and right across a series of
+ *     rotating 3D boxes.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * camera view pans left and right across a series of rotating 3D boxes.
  */
 p5.Camera = function(renderer) {
   this._renderer = renderer;
@@ -479,12 +478,9 @@ p5.Camera = function(renderer) {
  *   orbitControl();
  *   box(10);
  *   div.html('eyeX = ' + cam.eyeX);
+ *   describe(`An example showing the use of camera object properties`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -507,12 +503,9 @@ p5.Camera = function(renderer) {
  *   orbitControl();
  *   box(10);
  *   div.html('eyeY = ' + cam.eyeY);
+ *   describe(`An example showing the use of camera object properties`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -535,12 +528,9 @@ p5.Camera = function(renderer) {
  *   orbitControl();
  *   box(10);
  *   div.html('eyeZ = ' + cam.eyeZ);
+ *   describe(`An example showing the use of camera object properties`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -564,12 +554,9 @@ p5.Camera = function(renderer) {
  * function draw() {
  *   orbitControl();
  *   box(10);
+ *   describe(`An example showing the use of camera object properties`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -593,12 +580,9 @@ p5.Camera = function(renderer) {
  * function draw() {
  *   orbitControl();
  *   box(10);
+ *   describe(`An example showing the use of camera object properties`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -622,12 +606,9 @@ p5.Camera = function(renderer) {
  * function draw() {
  *   orbitControl();
  *   box(10);
+ *   describe(`An example showing the use of camera object properties`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -645,13 +626,9 @@ p5.Camera = function(renderer) {
  *   div.position(0, 0);
  *   div.style('color', 'blue');
  *   div.style('font-size', '18px');
- *   describe('An example showing the use of camera object properties');
+ *   describe(`An example showing the use of camera object properties`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -672,10 +649,6 @@ p5.Camera = function(renderer) {
  *   describe('An example showing the use of camera object properties');
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -696,10 +669,6 @@ p5.Camera = function(renderer) {
  *   describe('An example showing the use of camera object properties');
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -745,11 +714,12 @@ p5.Camera = function(renderer) {
  *   translate(15, 0, sin(frameCount / 30 + PI) * 95);
  *   box(30);
  *   pop();
+ *
+ *   describe(`Two colored 3D boxes move back and forth, rotating as
+ *     mouse is dragged.`);
  * }
  * </code>
  * </div>
- * @alt
- * two colored 3D boxes move back and forth, rotating as mouse is dragged.
  */
 p5.Camera.prototype.perspective = function(fovy, aspect, near, far) {
   this.cameraType = arguments.length > 0 ? 'custom' : 'default';
@@ -862,11 +832,12 @@ p5.Camera.prototype.perspective = function(fovy, aspect, near, far) {
  *   translate(15, 0, sin(frameCount / 30 + PI) * 65);
  *   box(30);
  *   pop();
+ *
+ *   describe(`Two 3D boxes move back and forth along same plane, rotating
+ *     as mouse is dragged.`);
  * }
  * </code>
  * </div>
- * @alt
- * two 3D boxes move back and forth along same plane, rotating as mouse is dragged.
  */
 p5.Camera.prototype.ortho = function(left, right, bottom, top, near, far) {
   if (left === undefined) left = -this._renderer.width / 2;
@@ -958,11 +929,12 @@ p5.Camera.prototype.ortho = function(left, right, bottom, top, near, far) {
  *   translate(15, 0, sin(frameCount / 30 + PI) * 25);
  *   box(30);
  *   pop();
+ *
+ *   describe(`Two 3D boxes move back and forth along same plane, rotating
+ *     as mouse is dragged.`);
  * }
  * </code>
  * </div>
- * @alt
- * two 3D boxes move back and forth along same plane, rotating as mouse is dragged.
  */
 p5.Camera.prototype.frustum = function(left, right, bottom, top, near, far) {
   if (left === undefined) left = -this._renderer.width / 2;
@@ -1113,12 +1085,12 @@ p5.Camera.prototype._rotateView = function(a, x, y, z) {
  *   box(20);
  *   translate(35, 0, 0);
  *   box(20);
+ *
+ *   describe(`Camera view pans left and right across a series of
+ *     rotating 3D boxes.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * camera view pans left and right across a series of rotating 3D boxes.
  */
 p5.Camera.prototype.pan = function(amount) {
   const local = this._getLocalAxes();
@@ -1171,12 +1143,12 @@ p5.Camera.prototype.pan = function(amount) {
  *   box(20);
  *   translate(0, 35, 0);
  *   box(20);
+ *
+ *   describe(`Camera view tilts up and down across a series of
+ *     rotating 3D boxes.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * camera view tilts up and down across a series of rotating 3D boxes.
  */
 p5.Camera.prototype.tilt = function(amount) {
   const local = this._getLocalAxes();
@@ -1224,13 +1196,12 @@ p5.Camera.prototype.tilt = function(amount) {
  *   box(20);
  *   translate(35, 0, 0);
  *   box(20);
+ *
+ *   describe(`Camera view of rotating 3D cubes changes to look at a
+ *     new random point every second.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * camera view of rotating 3D cubes changes to look at a new random
- * point every second .
  */
 p5.Camera.prototype.lookAt = function(x, y, z) {
   this.camera(
@@ -1275,11 +1246,10 @@ p5.Camera.prototype.lookAt = function(x, y, z) {
  *   // Move the camera away from the plane by a sin wave
  *   cam.camera(0, 0, 20 + sin(frameCount * 0.01) * 10, 0, 0, 0, 0, 1, 0);
  *   plane(10, 10);
+ *   describe(`White square repeatedly grows to fill canvas and then shrinks.`);
  * }
  * </code>
  * </div>
- * @alt
- * White square repeatedly grows to fill canvas and then shrinks.
  *
  * @example
  * <div>
@@ -1327,12 +1297,11 @@ p5.Camera.prototype.lookAt = function(x, y, z) {
  *   stroke(255);
  *   fill(255, 102, 94);
  *   box(85);
+ *   describe(`An interactive example of a red cube with 3 sliders for
+ *     moving it across x, y, z axis and 3 sliders for shifting its center.`);
  * }
  * </code>
  * </div>
- * @alt
- * An interactive example of a red cube with 3 sliders for moving it across x, y,
- * z axis and 3 sliders for shifting its center.
  */
 p5.Camera.prototype.camera = function(
   eyeX,
@@ -1456,13 +1425,12 @@ p5.Camera.prototype.camera = function(
  *   box(50, 8, 50);
  *   translate(15, 15, 0);
  *   box(50, 8, 50);
+ *
+ *   describe(`Camera view moves along a series of 3D boxes,
+ *     maintaining the same orientation throughout the move`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * camera view moves along a series of 3D boxes, maintaining the same
- * orientation throughout the move
  */
 p5.Camera.prototype.move = function(x, y, z) {
   const local = this._getLocalAxes();
@@ -1523,12 +1491,12 @@ p5.Camera.prototype.move = function(x, y, z) {
  *   }
  *
  *   box(20);
+ *
+ *   describe(`Camera position changes as the user presses keys,
+ *     altering view of a 3D box`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * camera position changes as the user presses keys, altering view of a 3D box
  */
 p5.Camera.prototype.setPosition = function(x, y, z) {
   const diffX = x - this.eyeX;
@@ -1800,6 +1768,9 @@ p5.Camera.prototype._isActive = function() {
  *   }
  *
  *   drawBoxes();
+ *
+ *   describe(`Canvas switches between two camera views, each
+ *     showing a series of spinning 3D boxes.`);
  * }
  *
  * function drawBoxes() {
@@ -1821,10 +1792,6 @@ p5.Camera.prototype._isActive = function() {
  * }
  * </code>
  * </div>
- *
- * @alt
- * Canvas switches between two camera views, each showing a series of spinning
- * 3D boxes.
  */
 p5.prototype.setCamera = function(cam) {
   this._renderer._curCamera = cam;
diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
index ab22ad2808..e88736d604 100755
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -383,6 +383,7 @@ p5.RendererGL.prototype._resetContext = function(options, callback) {
  *   fill(0, 0, 0);
  *   box(50);
  *   pop();
+ *   describe(`A rotating view of a solid black cube.`);
  * }
  * </code>
  * </div>
@@ -405,6 +406,8 @@ p5.RendererGL.prototype._resetContext = function(options, callback) {
  *   fill(0, 0, 0);
  *   box(50);
  *   pop();
+ *   describe(`A rotating view of a solid black cube.
+ *     Its edges are smoother than the previous cube.`);
  * }
  * </code>
  * </div>
@@ -447,6 +450,11 @@ p5.RendererGL.prototype._resetContext = function(options, callback) {
  *   rotateY(t * 0.83);
  *   rotateZ(t * 0.91);
  *   torus(width * 0.3, width * 0.07, 24, 10);
+ *
+ *   describe(`A rotating view of a torus.
+ *     As it spins, its sides show a variety of colors.
+ *     While holding the mouse button down, the transitions
+ *     between the colors take on a more polygonal appearance.`);
  * }
  *
  * function mousePressed() {
@@ -461,8 +469,6 @@ p5.RendererGL.prototype._resetContext = function(options, callback) {
  * }
  * </code>
  * </div>
- *
- * @alt a rotating cube with smoother edges
  */
 /**
  * @method setAttributes
@@ -619,12 +625,10 @@ p5.RendererGL.prototype.background = function(...args) {
  *   rotateX(frameCount * 0.01);
  *   rotateY(frameCount * 0.01);
  *   box(75, 75, 75);
+ *   describe(`black canvas with purple cube spinning`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * black canvas with purple cube spinning
  */
 p5.RendererGL.prototype.fill = function(v1, v2, v3, a) {
   //see material.js for more info on color blending in webgl
@@ -658,12 +662,10 @@ p5.RendererGL.prototype.fill = function(v1, v2, v3, a) {
  *   rotateX(frameCount * 0.01);
  *   rotateY(frameCount * 0.01);
  *   box(75, 75, 75);
+ *   describe(`black canvas with purple cube with pink outline spinning`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * black canvas with purple cube with pink outline spinning
  */
 p5.RendererGL.prototype.stroke = function(r, g, b, a) {
   //@todo allow transparency in stroking currently doesn't have
@@ -771,13 +773,11 @@ p5.RendererGL.prototype.noErase = function() {
  *   rotateY(frameCount * 0.01);
  *   sphere(75);
  *   pop();
+ *   describe(`black canvas with two purple rotating spheres with
+ *     pink outlines the sphere on top has much heavier outlines.`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * black canvas with two purple rotating spheres with pink
- * outlines the sphere on top has much heavier outlines,
  */
 p5.RendererGL.prototype.strokeWeight = function(w) {
   if (this.curStrokeWeight !== w) {
diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js
index 5435814f2d..548a3bbc64 100644
--- a/src/webgl/p5.Shader.js
+++ b/src/webgl/p5.Shader.js
@@ -362,6 +362,10 @@ p5.Shader.prototype.useProgram = function() {
  *     grad.setUniform('offset', [0, sin(millis() / 2000) + 1]);
  *   }
  *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
+ *
+ *   describe(`An circular gradient of orange on a blue background oscillates vertically.
+ *     Clicking the mouse toggles between the original gradient, and a
+ *     circular gradient of red and green oscillating horizontally.`);
  * }
  *
  * function mouseClicked() {
@@ -369,9 +373,6 @@ p5.Shader.prototype.useProgram = function() {
  * }
  * </code>
  * </div>
- *
- * @alt
- * canvas toggles between a circular gradient of orange and blue vertically. and a circular gradient of red and green moving horizontally when mouse is clicked/pressed.
  */
 p5.Shader.prototype.setUniform = function(uniformName, data) {
   const uniform = this.uniforms[uniformName];