diff --git a/src/webgl/3d_primitives.js b/src/webgl/3d_primitives.js
index 090a89479e..0cd71a792c 100644
--- a/src/webgl/3d_primitives.js
+++ b/src/webgl/3d_primitives.js
@@ -32,18 +32,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');
@@ -119,6 +112,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>
@@ -236,6 +230,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>
@@ -256,6 +253,14 @@ p5.prototype.box = function(width, height, depth, detailX, detailY) {
  *   background(205, 105, 94);
  *   rotateY(millis() / 1000);
  *   sphere(40, detailX.value(), 16);
+ *   describe(`A white rotating sphere-like shape with a diameter of 40.
+ *     Its actual shape is similar to a clam shell.
+ *     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>
@@ -276,6 +281,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>
@@ -448,6 +462,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>
@@ -468,6 +485,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>
@@ -488,6 +510,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>
@@ -1245,7 +1273,7 @@ p5.RendererGL.prototype.quad = function(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4,
 
   const gId =
     `quad|${x1}|${y1}|${z1}|${x2}|${y2}|${z2}|${x3}|${y3}|${z3}|${x4}|${y4}|${z4}|${detailX}|${detailY}`;
-  
+
   if (!this.geometryInHash(gId)) {
     const quadGeom = new p5.Geometry(detailX, detailY, function() {
       //algorithm adapted from c++ to js
@@ -1273,7 +1301,7 @@ p5.RendererGL.prototype.quad = function(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4,
         }
       }
     });
-    
+
     quadGeom.faces = [];
     for(let y = 0; y < detailY-1; y++){
       for(let x = 0; x < detailX-1; x++){
diff --git a/src/webgl/interaction.js b/src/webgl/interaction.js
index 87680921df..4f42e8e7b8 100644
--- a/src/webgl/interaction.js
+++ b/src/webgl/interaction.js
@@ -36,12 +36,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':
@@ -177,14 +176,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>
@@ -200,11 +199,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>
@@ -220,13 +218,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>
@@ -242,11 +239,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>
@@ -266,13 +262,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.
  */
 
 /**
@@ -371,14 +366,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 739ff21d16..e5158eb1ef 100644
--- a/src/webgl/light.js
+++ b/src/webgl/light.js
@@ -28,6 +28,7 @@ import * as constants from '../core/constants';
  * ambientLight(0);
  * ambientMaterial(250);
  * sphere(40);
+ * describe(`evenly distributed light across a sphere`);
  * </code>
  * </div>
  * <div>
@@ -40,12 +41,10 @@ import * as constants from '../core/constants';
  *   ambientLight(100); // white light
  *   ambientMaterial(255, 102, 94); // magenta material
  *   box(30);
+ *   describe(`evenly distributed light across a rotating sphere`);
  * }
  * </code>
  * </div>
- * @alt
- * evenly distributed light across a sphere
- * evenly distributed light across a rotating sphere
  */
 
 /**
@@ -128,12 +127,10 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) {
  *   pointLight(0, 255, 0, 0, 50, 50);
  *   specularMaterial(255);
  *   sphere(40);
+ *   describe(`different specular light sources from top and bottom of canvas`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * different specular light sources from top and bottom of canvas
  */
 
 /**
@@ -199,12 +196,10 @@ p5.prototype.specularColor = function(v1, v2, v3) {
  *   directionalLight(250, 250, 250, -dirX, -dirY, -1);
  *   noStroke();
  *   sphere(40);
+ *   describe(`light source on canvas changeable with mouse position`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * light source on canvas changeable with mouse position
  */
 
 /**
@@ -311,12 +306,10 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
  *   pointLight(250, 250, 250, locX, locY, 50);
  *   noStroke();
  *   sphere(40);
+ *   describe(`spotlight on canvas changes position with mouse`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * spot light on canvas changes position with mouse
  */
 
 /**
@@ -401,12 +394,10 @@ p5.prototype.pointLight = function(v1, v2, v3, x, y, z) {
  *   rotateY(millis() / 1000);
  *   rotateZ(millis() / 1000);
  *   box();
+ *   describe(`the light is partially ambient and partially directional`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * the light is partially ambient and partially directional
  */
 p5.prototype.lights = function() {
   this._assert3d('lights');
@@ -463,12 +454,12 @@ p5.prototype.lights = function() {
  *   pointLight(250, 250, 250, locX + 25, locY, 50);
  *   sphere(20);
  *   pop();
+ *
+ *   describe(`Two spheres with different falloff values show
+ *     different intensity of light`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * Two spheres with different falloff values show different intensity of light
  */
 p5.prototype.lightFalloff = function(
   constantAttenuation,
@@ -561,12 +552,11 @@ p5.prototype.lightFalloff = function(
  *   spotLight(0, 250, 0, locX, locY, 100, 0, 0, -1, Math.PI / 16);
  *   noStroke();
  *   sphere(40);
+ *
+ *   describe(`Spotlight on a sphere which changes position with mouse`);
  * }
  * </code>
  * </div>
- *
- * @alt
- * Spot light on a sphere which changes position with mouse
  */
 /**
  * @method spotLight
@@ -887,13 +877,12 @@ p5.prototype.spotLight = function(
  *   translate(30, 0, 0);
  *   ambientMaterial(255);
  *   sphere(13);
+ *
+ *   describe(`Three white spheres. Each appears as a different
+ *    color due to lighting.`);
  * }
  * </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 78e19145c2..34ac43dbc8 100755
--- a/src/webgl/loading.js
+++ b/src/webgl/loading.js
@@ -57,12 +57,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>
@@ -86,12 +85,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
@@ -609,12 +607,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 7590d0fe71..d708ee4fbe 100644
--- a/src/webgl/material.js
+++ b/src/webgl/material.js
@@ -50,12 +50,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,
@@ -168,12 +167,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');
@@ -248,6 +246,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() {
@@ -255,9 +258,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,12 +353,13 @@ p5.prototype.shader = function(s) {
  *     rotateY(millis() * 0.0005);
  *     box(width / 4);
  *     pop();
+ *
+ *   describe(`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.`);
  * }
  * </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;
@@ -402,11 +403,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>
@@ -428,11 +428,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>
@@ -451,6 +451,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() {
@@ -459,9 +460,6 @@ p5.prototype.resetShader = function() {
  * </code>
  * </div>
  *
- * @alt
- * rectangle with video as texture
- *
  * @example
  * <div>
  * <code>
@@ -485,11 +483,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');
@@ -540,11 +537,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>
@@ -568,11 +564,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) {
@@ -639,12 +634,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;
@@ -675,11 +670,10 @@ p5.prototype.textureWrap = function(wrapX, wrapY = wrapX) {
  *   background(200);
  *   normalMaterial();
  *   sphere(40);
+ *   describe(`Red, green, and blue gradient.`);
  * }
  * </code>
  * </div>
- * @alt
- * Red, green and blue gradient.
  */
 p5.prototype.normalMaterial = function(...args) {
   this._assert3d('normalMaterial');
@@ -716,6 +710,7 @@ p5.prototype.normalMaterial = function(...args) {
  *   ambientLight(200);
  *   ambientMaterial(70, 130, 230);
  *   sphere(40);
+ *   describe(`radiating light source from top right of canvas`);
  * }
  * </code>
  * </div>
@@ -731,6 +726,7 @@ p5.prototype.normalMaterial = function(...args) {
  *   ambientLight(100); // white light
  *   ambientMaterial(255, 0, 255); // pink material
  *   box(30);
+ *   describe(`box reflecting only red and blue light`);
  * }
  * </code>
  * </div>
@@ -746,13 +742,10 @@ p5.prototype.normalMaterial = function(...args) {
  *   ambientLight(0, 255, 0); // green light
  *   ambientMaterial(255, 0, 255); // pink material
  *   box(30);
+ *   describe(`box reflecting no light`);
  * }
  * </code>
  * </div>
- * @alt
- * radiating light source from top right of canvas
- * box reflecting only red and blue light
- * box reflecting no light
  */
 /**
  * @method  ambientMaterial
@@ -799,12 +792,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
- * radiating light source from top right of canvas
  */
 /**
  * @method  emissiveMaterial
@@ -860,11 +851,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
  */
 
 /**
@@ -927,11 +918,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
- * Shininess on Camera changes position with mouse
  */
 p5.prototype.shininess = function(shine) {
   this._assert3d('shininess');
diff --git a/src/webgl/p5.Camera.js b/src/webgl/p5.Camera.js
index f09dee3923..fde118ec73 100644
--- a/src/webgl/p5.Camera.js
+++ b/src/webgl/p5.Camera.js
@@ -51,6 +51,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>
@@ -97,13 +99,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');
@@ -159,12 +160,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');
@@ -219,12 +220,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');
@@ -282,12 +283,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');
@@ -334,11 +335,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');
@@ -426,12 +425,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;
@@ -461,12 +460,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
- *
  */
 
 /**
@@ -488,12 +484,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
- *
  */
 
 /**
@@ -515,12 +508,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
- *
  */
 
 /**
@@ -543,12 +533,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
- *
  */
 
 /**
@@ -571,12 +558,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
- *
  */
 
 /**
@@ -599,12 +583,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 +603,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`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -645,12 +623,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`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 /**
@@ -668,12 +643,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`);
  * }
  * </code></div>
- *
- * @alt
- * An example showing the use of camera object properties
- *
  */
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -719,11 +691,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';
@@ -835,11 +808,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;
@@ -930,11 +904,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;
@@ -1083,12 +1058,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();
@@ -1141,12 +1116,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();
@@ -1194,13 +1169,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(
@@ -1245,11 +1219,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>
@@ -1297,12 +1270,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,
@@ -1425,13 +1397,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();
@@ -1492,12 +1463,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;
@@ -1765,6 +1736,9 @@ p5.Camera.prototype._isActive = function() {
  *   }
  *
  *   drawBoxes();
+ *
+ *   describe(`Canvas switches between two camera views, each
+ *     showing a series of spinning 3D boxes.`);
  * }
  *
  * function drawBoxes() {
@@ -1786,10 +1760,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 17a61130cd..05f763d3c5 100755
--- a/src/webgl/p5.RendererGL.js
+++ b/src/webgl/p5.RendererGL.js
@@ -389,6 +389,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>
@@ -411,6 +412,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>
@@ -453,6 +456,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() {
@@ -467,8 +475,6 @@ p5.RendererGL.prototype._resetContext = function(options, callback) {
  * }
  * </code>
  * </div>
- *
- * @alt a rotating cube with smoother edges
  */
 /**
  * @method setAttributes
@@ -625,12 +631,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
@@ -664,12 +668,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
@@ -777,13 +779,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 740e95978e..1934dec28a 100644
--- a/src/webgl/p5.Shader.js
+++ b/src/webgl/p5.Shader.js
@@ -358,6 +358,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() {
@@ -365,9 +369,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];