p5 2.2.1-rc.0 → 2.2.1

package/dist/{rendering-CsICjEXA.js → rendering-h9unX5K0.js}

@@ -1,7 +1,7 @@
-import { p as CORNER, t as CORNERS, v as CENTER, aB as COVER, aC as CONTAIN, a9 as RIGHT, aw as BOTTOM, B as BLEND, aD as FILL, ad as IMAGE, C as CLAMP, w as ROUND, Y as LINES, X as POINTS, c as TRIANGLES, ab as BLUR, D as DARKEST, L as LIGHTEST, A as ADD, S as SUBTRACT, a as SCREEN, E as EXCLUSION, R as REPLACE, M as MULTIPLY, b as REMOVE, as as BURN, ao as OVERLAY, ap as HARD_LIGHT, aq as SOFT_LIGHT, ar as DODGE, d as UNSIGNED_INT, U as UNSIGNED_BYTE, av as LEFT, ax as BASELINE, ay as TOP, aE as SIMPLE, aF as FULL, q as TWO_PI, Q as OPEN, a2 as NORMAL, V as CLOSE, at as PIE, au as CHORD, h as TEXTURE, P as P2D, g as LINEAR, aa as WEBGL2, N as NEAREST, aG as LINEAR_MIPMAP, f as REPEAT, e as MIRROR, F as FLOAT, ac as WEBGL, H as HALF_FLOAT } from './constants-DEJVKr9Z.js';
-import { C as Color, c as creatingReading, h as RGBA, R as RGB } from './creating_reading-CgHCHxqN.js';
+import { p as CORNER, t as CORNERS, v as CENTER, aB as COVER, aC as CONTAIN, a9 as RIGHT, aw as BOTTOM, B as BLEND, aD as FILL, ad as IMAGE, C as CLAMP, w as ROUND, Y as LINES, X as POINTS, c as TRIANGLES, ab as BLUR, D as DARKEST, L as LIGHTEST, A as ADD, S as SUBTRACT, a as SCREEN, E as EXCLUSION, R as REPLACE, M as MULTIPLY, b as REMOVE, as as BURN, ao as OVERLAY, ap as HARD_LIGHT, aq as SOFT_LIGHT, ar as DODGE, d as UNSIGNED_INT, U as UNSIGNED_BYTE, av as LEFT, ax as BASELINE, ay as TOP, aE as SIMPLE, aF as FULL, q as TWO_PI, Q as OPEN, a2 as NORMAL, V as CLOSE, at as PIE, au as CHORD, h as TEXTURE, P as P2D, g as LINEAR, aa as WEBGL2, N as NEAREST, aG as LINEAR_MIPMAP, f as REPEAT, e as MIRROR, F as FLOAT, ac as WEBGL, H as HALF_FLOAT } from './constants-DQyACdzq.js';
+import { C as Color, c as creatingReading, h as RGBA, R as RGB } from './creating_reading-ZXzcZEsb.js';
 import { Element } from './dom/p5.Element.js';
-import { R as Renderer, I as Image } from './p5.Renderer-QoFcvj3f.js';
+import { R as Renderer, I as Image } from './p5.Renderer-D-5LdCRz.js';
 import { MediaElement } from './dom/p5.MediaElement.js';
 import primitives from './shape/2d_primitives.js';
 import attributes from './shape/attributes.js';
@@ -65,8 +65,6 @@ function image(p5, fn){
    * @return {p5.Image}       new <a href="#/p5.Image">p5.Image</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -93,11 +91,8 @@ function image(p5, fn){
    *
    *   describe('A black square drawn in the middle of a gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -131,11 +126,8 @@ function image(p5, fn){
    *
    *   describe('A square with a horizontal color gradient that transitions from gray to black.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -172,8 +164,6 @@ function image(p5, fn){
    *
    *   describe('A black square drawn in the middle of a gray square.');
    * }
-   * </code>
-   * </div>
    */
   fn.createImage = function(width, height) {
     // p5._validateParameters('createImage', arguments);
@@ -204,9 +194,8 @@ function image(p5, fn){
    *  @param  {String} [filename]  file name. Defaults to 'untitled'.
    *  @param  {String} [extension] file extension, either 'png', 'webp', or 'jpg'. Defaults to 'png'.
    *
-   *  @example
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *   background(255);
@@ -216,11 +205,9 @@ function image(p5, fn){
    *
    *   describe('A white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -231,11 +218,9 @@ function image(p5, fn){
    *
    *   describe('A white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -246,11 +231,9 @@ function image(p5, fn){
    *
    *   describe('A white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   let cnv = createCanvas(100, 100);
    *
@@ -261,11 +244,9 @@ function image(p5, fn){
    *
    *   describe('A white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   let cnv = createCanvas(100, 100);
    *
@@ -276,11 +257,9 @@ function image(p5, fn){
    *
    *   describe('A white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   let cnv = createCanvas(100, 100);
    *
@@ -291,8 +270,6 @@ function image(p5, fn){
    *
    *   describe('A white square.');
    * }
-   * </code>
-   * </div>
    */
   /**
    *  @method saveCanvas
@@ -636,8 +613,6 @@ function image(p5, fn){
    *                                frames of objects. Each object has three
    *                                properties: `imageData`, `filename`, and `extension`.
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -657,11 +632,8 @@ function image(p5, fn){
    *     saveFrames('frame', 'png', 1, 5);
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -686,8 +658,6 @@ function image(p5, fn){
    *     print(frame);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.saveFrames = function(fName, ext, _duration, _fps, callback) {
     // p5._validateParameters('saveFrames', arguments);
@@ -875,9 +845,6 @@ function files(p5, fn){
    * @return {Promise<Object>} object containing the loaded data.
    *
    * @example
-   *
-   * <div>
-   * <code>
    * let myData;
    *
    * async function setup() {
@@ -895,11 +862,8 @@ function files(p5, fn){
    *
    *   describe('A pink circle on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myData;
    *
    * async function setup() {
@@ -924,11 +888,8 @@ function files(p5, fn){
    *
    *   describe('Several pink bubbles floating in a blue sky.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myData;
    *
    * async function setup() {
@@ -953,11 +914,8 @@ function files(p5, fn){
    *
    *   describe(`A white circle on a gray background. The text "${quake.place}" is written beneath the circle.`);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let bigQuake;
    *
    * // Load the GeoJSON and preprocess it.
@@ -997,11 +955,8 @@ function files(p5, fn){
    *     }
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let bigQuake;
    *
    * // Load the GeoJSON and preprocess it.
@@ -1047,8 +1002,6 @@ function files(p5, fn){
    * function handleError(error) {
    *   console.log('Oops!', error);
    * }
-   * </code>
-   * </div>
    */
   fn.loadJSON = async function (path, successCallback, errorCallback) {
     // p5._validateParameters('loadJSON', arguments);
@@ -1104,9 +1057,6 @@ function files(p5, fn){
    * @return {Promise<String[]>} new array containing the loaded text.
    *
    * @example
-   *
-   * <div>
-   * <code>
    * let myData;
    *
    * async function setup() {
@@ -1129,11 +1079,8 @@ function files(p5, fn){
    *
    *   describe(`The text "${phrase}" written in black on a gray background.`);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let lastLine;
    *
    * // Load the text and preprocess it.
@@ -1159,11 +1106,8 @@ function files(p5, fn){
    * function handleData(data) {
    *   lastLine = data[data.length - 1];
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let lastLine;
    *
    * // Load the text and preprocess it.
@@ -1194,8 +1138,6 @@ function files(p5, fn){
    * function handleError(error) {
    *   console.error('Oops!', error);
    * }
-   * </code>
-   * </div>
    */
   fn.loadStrings = async function (path, successCallback, errorCallback) {
     // p5._validateParameters('loadStrings', arguments);
@@ -1244,8 +1186,7 @@ function files(p5, fn){
    * @return {Promise<Object>}            <a href="#/p5.Table">Table</a> object containing data
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * let table;
    *
    * async function setup() {
@@ -1268,8 +1209,6 @@ function files(p5, fn){
    *     text(row.getString(c), 10, 30 + c * 20);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.loadTable = async function (
     path,
@@ -1369,8 +1308,6 @@ function files(p5, fn){
    *                  object.
    *
    * @example
-   * <div>
-   * <code>
    * let myXML;
    *
    * // Load the XML and create a p5.XML object.
@@ -1406,11 +1343,8 @@ function files(p5, fn){
    *     'The words "Goat", "Leopard", and "Zebra" written on three separate lines. The text is black on a gray background.'
    *   );
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let lastMammal;
    *
    * // Load the XML and create a p5.XML object.
@@ -1440,11 +1374,8 @@ function files(p5, fn){
    *   // Get the content of the last mammal.
    *   lastMammal = mammals[mammals.length - 1].getContent();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let lastMammal;
    *
    * // Load the XML and preprocess it.
@@ -1479,8 +1410,6 @@ function files(p5, fn){
    * function handleError(error) {
    *   console.error('Oops!', error);
    * }
-   * </code>
-   * </div>
    */
   fn.loadXML = async function (path, successCallback, errorCallback) {
     try{
@@ -1514,30 +1443,24 @@ function files(p5, fn){
    * @returns {Promise<Uint8Array>} a Uint8Array containing the loaded buffer
    *
    * @example
-   *
-   * <div>
-   * <code>
    * let data;
    *
    * async function setup() {
-   * createCanvas(100, 100); // Create a canvas
-   * data = await loadBytes('assets/mammals.xml'); // Load the bytes from the XML file
+   *   createCanvas(100, 100); // Create a canvas
+   *   data = await loadBytes('assets/mammals.xml'); // Load the bytes from the XML file
    *
-   * background(255); // Set a white background
-   * fill(0);       // Set text color to black
+   *   background(255); // Set a white background
+   *   fill(0);       // Set text color to black
    *
-   * // Display the first 5 byte values on the canvas in hexadecimal format
-   * for (let i = 0; i < 5; i++) {
-   * let byteHex = data[i].toString(16);
-   * text(byteHex, 10, 18 * (i + 1)); // Adjust spacing as needed
-   * }
+   *   // Display the first 5 byte values on the canvas in hexadecimal format
+   *   for (let i = 0; i < 5; i++) {
+   *     let byteHex = data[i].toString(16);
+   *     text(byteHex, 10, 18 * (i + 1)); // Adjust spacing as needed
+   *   }
    *
-   * describe('no image displayed, displays first 5 bytes of mammals.xml in hexadecimal format');
+   *   describe('no image displayed, displays first 5 bytes of mammals.xml in hexadecimal format');
    * }
-   * </code>
-   * </div>
    */
-
   fn.loadBytes = async function (path, successCallback, errorCallback) {
     try{
       let { data } = await request(path, 'arrayBuffer');
@@ -1571,8 +1494,6 @@ function files(p5, fn){
    * @returns {Promise<Blob>} A promise that resolves with the loaded Blob.
    *
    * @example
-   * <div>
-   * <code>
    * let myBlob;
    *
    * async function setup() {
@@ -1594,8 +1515,6 @@ function files(p5, fn){
    *     console.error('Error loading blob:', err);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.loadBlob = async function(path, successCallback, errorCallback) {
     try{
@@ -1632,7 +1551,7 @@ function files(p5, fn){
    *                   completes successfully or rejects with the error after
    *                   one occurs.
    * @example
-   * <div class='norender'><code>
+   * // META:norender
    * // Examples use USGS Earthquake API:
    * //   https://earthquake.usgs.gov/fdsnws/event/1/#methods
    * let earthquakes;
@@ -1658,7 +1577,6 @@ function files(p5, fn){
    *   text(earthquakeName, 0, height - 30, width, 30);
    *   noLoop();
    * }
-   * </code></div>
    */
   /**
    * @method httpGet
@@ -1703,8 +1621,6 @@ function files(p5, fn){
    *                   one occurs.
    *
    * @example
-   * <div>
-   * <code>
    * // Examples use jsonplaceholder.typicode.com for a Mock Data API
    *
    * let url = 'https://jsonplaceholder.typicode.com/posts';
@@ -1721,10 +1637,8 @@ function files(p5, fn){
    *     text(result.body, mouseX, mouseY);
    *   });
    * }
-   * </code>
-   * </div>
    *
-   * <div><code>
+   * @example
    * let url = 'ttps://invalidURL'; // A bad URL that will cause errors
    * let postData = { title: 'p5 Clicked!', body: 'p5.js is very cool.' };
    *
@@ -1747,7 +1661,6 @@ function files(p5, fn){
    *     }
    *   );
    * }
-   * </code></div>
    */
   /**
    * @method httpPost
@@ -1845,8 +1758,6 @@ function files(p5, fn){
    *                   one occurs.
    *
    * @example
-   * <div>
-   * <code>
    * // Examples use USGS Earthquake API:
    * // https://earthquake.usgs.gov/fdsnws/event/1/#methods
    *
@@ -1897,8 +1808,6 @@ function files(p5, fn){
    *     eqFeatureIndex += 1;
    *   }
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method httpDo
@@ -2005,8 +1914,6 @@ function files(p5, fn){
    * @return {p5.PrintWriter} stream for writing data.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2038,11 +1945,8 @@ function files(p5, fn){
    *     myWriter.close();
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2079,8 +1983,6 @@ function files(p5, fn){
    *     myWriter.close();
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.createWriter = function (name, extension) {
     let newPW;
@@ -2118,8 +2020,6 @@ function files(p5, fn){
    * @param  {String} [extension] format to use for the file.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2149,8 +2049,6 @@ function files(p5, fn){
    *   // Save the file and close the print stream.
    *   myWriter.close();
    * }
-   * </code>
-   * </div>
    */
   p5.PrintWriter = function (filename, extension) {
     let self = this;
@@ -2170,8 +2068,6 @@ function files(p5, fn){
      *                                   or array of strings and numbers.
      *
      * @example
-     * <div>
-     * <code>
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -2200,8 +2096,6 @@ function files(p5, fn){
      *   // Save the file and close the print stream.
      *   myWriter.close();
      * }
-     * </code>
-     * </div>
      */
     this.write = function (data) {
       this.content += data;
@@ -2220,8 +2114,6 @@ function files(p5, fn){
      *                                   or array of strings and numbers.
      *
      * @example
-     * <div>
-     * <code>
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -2250,8 +2142,6 @@ function files(p5, fn){
      *   // Save the file and close the print stream.
      *   myWriter.close();
      * }
-     * </code>
-     * </div>
      */
     this.print = function (data) {
       this.content += `${data}\n`;
@@ -2263,8 +2153,6 @@ function files(p5, fn){
      * @method clear
      *
      * @example
-     * <div>
-     * <code>
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -2295,8 +2183,6 @@ function files(p5, fn){
      *   // Save the file and close the print stream.
      *   myWriter.close();
      * }
-     * </code>
-     * </div>
      */
     this.clear = function () {
       this.content = '';
@@ -2308,8 +2194,6 @@ function files(p5, fn){
      * @method close
      *
      * @example
-     * <div>
-     * <code>
      * function setup() {
      *   createCanvas(100, 100);
      *
@@ -2341,8 +2225,6 @@ function files(p5, fn){
      *   // Save the file and close the print stream.
      *   myWriter.close();
      * }
-     * </code>
-     * </div>
      */
     this.close = function () {
       // convert String to Array for the writeFile Blob
@@ -2407,7 +2289,7 @@ function files(p5, fn){
    *                            rather than readability.
    *
    * @example
-   * <div class="norender"><code>
+   * // META:norender
    * // Saves the canvas as an image
    * cnv = createCanvas(300, 300);
    * save(cnv, 'myCanvas.jpg');
@@ -2415,23 +2297,23 @@ function files(p5, fn){
    * // Saves the canvas as an image by default
    * save('myCanvas.jpg');
    * describe('An example for saving a canvas as an image.');
-   * </code></div>
    *
-   * <div class="norender"><code>
+   * @example
+   * // META:norender
    * // Saves p5.Image as an image
    * img = createImage(10, 10);
    * save(img, 'myImage.png');
    * describe('An example for saving a p5.Image element as an image.');
-   * </code></div>
    *
-   * <div class="norender"><code>
+   * @example
+   * // META:norender
    * // Saves p5.Renderer object as an image
    * obj = createGraphics(100, 100);
    * save(obj, 'myObject.png');
    * describe('An example for saving a p5.Renderer element.');
-   * </code></div>
    *
-   * <div class="norender"><code>
+   * @example
+   * // META:norender
    * let myTable = new p5.Table();
    * // Saves table as html file
    * save(myTable, 'myTable.html');
@@ -2444,9 +2326,9 @@ function files(p5, fn){
    *
    * describe(`An example showing how to save a table in formats of
    *   HTML, CSV and TSV.`);
-   * </code></div>
    *
-   * <div class="norender"><code>
+   * @example
+   * // META:norender
    * let myJSON = { a: 1, b: true };
    *
    * // Saves pretty JSON
@@ -2456,15 +2338,14 @@ function files(p5, fn){
    * save(myJSON, 'my.json', true);
    *
    * describe('An example for saving JSON to a txt file with some extra arguments.');
-   * </code></div>
    *
-   * <div class="norender"><code>
+   * @example
+   * // META:norender
    * // Saves array of strings to text file with line breaks after each item
    * let arrayOfStrings = ['a', 'b'];
    * save(arrayOfStrings, 'my.txt');
    * describe(`An example for saving an array of strings to text file
    *   with line breaks.`);
-   * </code></div>
    */
   fn.save = function (object, _filename, _options) {
     // TODO: parameters is not used correctly
@@ -2548,8 +2429,6 @@ function files(p5, fn){
    *                              to `true`.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2576,11 +2455,8 @@ function files(p5, fn){
    *     saveJSON(data, 'numbers.json');
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2607,11 +2483,8 @@ function files(p5, fn){
    *     saveJSON(data, 'state.json');
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2638,8 +2511,6 @@ function files(p5, fn){
    *     saveJSON(data, 'state.json', true);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.saveJSON = function (json, filename, optimize) {
     // p5._validateParameters('saveJSON', arguments);
@@ -2684,8 +2555,6 @@ function files(p5, fn){
    *                             string. Defaults to `false`.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2712,11 +2581,8 @@ function files(p5, fn){
    *     saveStrings(data, 'data.txt');
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2745,11 +2611,8 @@ function files(p5, fn){
    *     saveStrings(data, 'cat', 'txt');
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2782,8 +2645,6 @@ function files(p5, fn){
    *     saveStrings(data, 'box', 'txt', true);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.saveStrings = function (list, filename, extension, isCRLF) {
     // p5._validateParameters('saveStrings', arguments);
@@ -2810,19 +2671,18 @@ function files(p5, fn){
   }
 
   /**
-   *  Writes the contents of a <a href="#/p5.Table">Table</a> object to a file. Defaults to a
-   *  text file with comma-separated-values ('csv') but can also
-   *  use tab separation ('tsv'), or generate an HTML table ('html').
-   *  The file saving process and location of the saved file will
-   *  vary between web browsers.
+   * Writes the contents of a <a href="#/p5.Table">Table</a> object to a file. Defaults to a
+   * text file with comma-separated-values ('csv') but can also
+   * use tab separation ('tsv'), or generate an HTML table ('html').
+   * The file saving process and location of the saved file will
+   * vary between web browsers.
    *
-   *  @method saveTable
+   * @method saveTable
    * @deprecated p5.Table will be removed in a future version of p5.js to make way for a new, friendlier version :)
-   *  @param  {p5.Table} Table  the <a href="#/p5.Table">Table</a> object to save to a file
-   *  @param  {String} filename the filename to which the Table should be saved
-   *  @param  {String} [options]  can be one of "tsv", "csv", or "html"
-   *  @example
-   *  <div><code>
+   * @param  {p5.Table} Table  the <a href="#/p5.Table">Table</a> object to save to a file
+   * @param  {String} filename the filename to which the Table should be saved
+   * @param  {String} [options]  can be one of "tsv", "csv", or "html"
+   * @example
    * let table;
    *
    * function setup() {
@@ -2846,7 +2706,6 @@ function files(p5, fn){
    * // Saves the following to a file called 'new.csv':
    * // id,species,name
    * // 0,Panthera leo,Lion
-   * </code></div>
    */
   fn.saveTable = function (table, filename, options) {
     // p5._validateParameters('saveTable', arguments);
@@ -3021,8 +2880,6 @@ function loadingDisplaying(p5, fn){
    * @return {Promise<p5.Image>}   the <a href="#/p5.Image">p5.Image</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * // Load the image and create a p5.Image object.
@@ -3035,11 +2892,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('Image of the underside of a white umbrella and a gridded ceiling.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * async function setup() {
    *   // Call handleImage() once the image loads.
    *   await loadImage('assets/laDefense.jpg', handleImage);
@@ -3051,11 +2905,8 @@ function loadingDisplaying(p5, fn){
    * function handleImage(img) {
    *   image(img, 0, 0);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * async function setup() {
    *   // Call handleImage() once the image loads or
    *   // call handleError() if an error occurs.
@@ -3073,8 +2924,6 @@ function loadingDisplaying(p5, fn){
    * function handleError(event) {
    *   console.error('Oops!', event);
    * }
-   * </code>
-   * </div>
    */
   fn.loadImage = async function(
     path,
@@ -3164,8 +3013,6 @@ function loadingDisplaying(p5, fn){
    * @param {String} [options.notificationID='progressBar'] The id to give to the notification's DOM element.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -3189,11 +3036,8 @@ function loadingDisplaying(p5, fn){
    *     saveGif('mySketch', 5);
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -3218,8 +3062,6 @@ function loadingDisplaying(p5, fn){
    *     saveGif('mySketch', 5, { delay: 1 });
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.saveGif = async function(
     fileName,
@@ -3247,7 +3089,7 @@ function loadingDisplaying(p5, fn){
     const silent = (options && options.silent) || false;
     const notificationDuration = (options && options.notificationDuration) || 0;
     const notificationID = (options && options.notificationID) || 'progressBar';
-     const resetAnimation = (options && options.reset !== undefined) ? options.reset : true;
+    const resetAnimation = (options && options.reset !== undefined) ? options.reset : true;
     // if arguments in the options object are not correct, cancel operation
     if (typeof delay !== 'number') {
       throw TypeError('Delay parameter must be a number');
@@ -3302,7 +3144,7 @@ function loadingDisplaying(p5, fn){
     // initialize variables for the frames processing
     let frameIterator;
     let totalNumberOfFrames;
-    
+
     if (resetAnimation) {
       frameIterator = nFramesDelay;
       this.frameCount = frameIterator;
@@ -3353,7 +3195,7 @@ function loadingDisplaying(p5, fn){
     //
     // Waiting on this empty promise means we'll continue as soon as setup
     // finishes without waiting for another frame.
-   await new Promise(requestAnimationFrame);
+    await new Promise(requestAnimationFrame);
 
     while (frameIterator < totalNumberOfFrames) {
       /*
@@ -3903,8 +3745,6 @@ function loadingDisplaying(p5, fn){
    * @param  {Number}   [height] height to draw the image.
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -3920,11 +3760,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('An image of the underside of a white umbrella with a gridded ceiling above. The image has dark gray borders on its left and top.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -3940,11 +3777,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('An image of the underside of a white umbrella with a gridded ceiling above. The image is drawn in the top left corner of a dark gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -3960,11 +3794,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('An image of a gridded ceiling drawn in the center of a dark gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -3979,11 +3810,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('An image of an astronaut on the moon. The top and bottom borders of the image are dark gray.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -3999,8 +3827,6 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('A pixelated image of the underside of a white umbrella with a gridded ceiling above.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method image
@@ -4150,8 +3976,6 @@ function loadingDisplaying(p5, fn){
    * @param  {Number}        [alpha]
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -4170,11 +3994,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -4193,11 +4014,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a red tint.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -4216,11 +4034,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('Two images of an umbrella and a ceiling side-by-side. The image on the right has a transparent red tint.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -4239,26 +4054,21 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('Two images of an umbrella and a ceiling side-by-side. The image on the right is transparent.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method tint
    * @param  {String}        value   CSS color string.
    */
-
   /**
    * @method tint
    * @param  {Number}        gray   grayscale value.
    * @param  {Number}        [alpha]
    */
-
   /**
    * @method tint
    * @param  {Number[]}      values  array containing the red, green, blue &
    *                                 alpha components of the color.
    */
-
   /**
    * @method tint
    * @param  {p5.Color}      color   the tint color
@@ -4277,8 +4087,6 @@ function loadingDisplaying(p5, fn){
    * @method noTint
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -4299,8 +4107,6 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('Two images of an umbrella and a ceiling side-by-side. The image on the left has a red tint.');
    * }
-   * </code>
-   * </div>
    */
   fn.noTint = function() {
     this._renderer.states.setValue('tint', null);
@@ -4339,9 +4145,6 @@ function loadingDisplaying(p5, fn){
    * @param {(CORNER|CORNERS|CENTER)} mode either CORNER, CORNERS, or CENTER.
    *
    * @example
-   *
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -4360,11 +4163,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('A square image of a brick wall is drawn at the top left of a gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -4383,11 +4183,8 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('An image of a brick wall is drawn on a gray square. The image is squeezed into a small rectangular area.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -4406,8 +4203,6 @@ function loadingDisplaying(p5, fn){
    *
    *   describe('A square image of a brick wall is drawn on a gray square.');
    * }
-   * </code>
-   * </div>
    */
   fn.imageMode = function(m) {
     // p5._validateParameters('imageMode', arguments);
@@ -4502,8 +4297,6 @@ class Camera {
    *                           Defaults to `10 * 800`.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -4552,11 +4345,8 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -4609,8 +4399,6 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   perspective(fovy, aspect, near, far) {
     const range = this._renderer.zClipRange();
@@ -4715,8 +4503,6 @@ class Camera {
    * @param  {Number} [far]    z-coordinate of the frustum’s far plane. Defaults to `max(width, height) + 800`.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -4769,11 +4555,8 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -4833,8 +4616,6 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   ortho(left, right, bottom, top, near, far) {
     const source = this.fbo || this._renderer;
@@ -4906,8 +4687,6 @@ class Camera {
    * @param  {Number} [far]    z-coordinate of the frustum’s far plane. Defaults to `10 * 800`.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -4966,8 +4745,6 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   frustum(left, right, bottom, top, near, far) {
     if (left === undefined) left = -this._renderer.width * 0.05;
@@ -5073,8 +4850,6 @@ class Camera {
    * @param {Number} angle amount to rotate camera in current
    * <a href="#/p5/angleMode">angleMode</a> units.
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let delta = 0.01;
    *
@@ -5109,8 +4884,6 @@ class Camera {
    *   translate(0, 30, 0);
    *   box(20);
    * }
-   * </code>
-   * </div>
    *
    * @alt
    * camera view rotates in counter clockwise direction with vertically stacked boxes in front of it.
@@ -5154,8 +4927,6 @@ class Camera {
    *                       <a href="#/p5/angleMode">angleMode()</a>.
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let delta = 0.001;
    *
@@ -5193,8 +4964,6 @@ class Camera {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
   pan(amount) {
     const local = this._getLocalAxes();
@@ -5219,8 +4988,6 @@ class Camera {
    *                       <a href="#/p5/angleMode">angleMode()</a>.
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let delta = 0.001;
    *
@@ -5258,8 +5025,6 @@ class Camera {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
   tilt(amount) {
     const local = this._getLocalAxes();
@@ -5283,8 +5048,6 @@ class Camera {
    * @param {Number} z z-coordinate of the position where the camera should look in "world" space.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to look at a different cube.
    *
    * let cam;
@@ -5344,8 +5107,6 @@ class Camera {
    *     isLookingLeft = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   lookAt(x, y, z) {
     this.camera(
@@ -5402,8 +5163,6 @@ class Camera {
    * @param  {Number} [upZ]      z-component of the camera’s "up" vector. Defaults to 0.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -5460,11 +5219,8 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -5526,8 +5282,6 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   camera(
     eyeX,
@@ -5605,8 +5359,6 @@ class Camera {
    * @param {Number} y distance to move along the camera’s "local" y-axis.
    * @param {Number} z distance to move along the camera’s "local" z-axis.
    * @example
-   * <div>
-   * <code>
    * // Click the canvas to begin detecting key presses.
    *
    * let cam;
@@ -5665,8 +5417,6 @@ class Camera {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
   move(x, y, z) {
     const local = this._getLocalAxes();
@@ -5703,8 +5453,6 @@ class Camera {
    * @param {Number} z z-coordinate in "world" space.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -5759,11 +5507,8 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -5822,8 +5567,6 @@ class Camera {
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   setPosition(x, y, z) {
     const diffX = x - this.eyeX;
@@ -5853,8 +5596,6 @@ class Camera {
    * @param {p5.Camera} cam camera to copy.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to "reset" the camera zoom.
    *
    * let cam1;
@@ -5953,8 +5694,6 @@ class Camera {
    * @param {Number} amt amount of interpolation between 0.0 (`cam0`) and 1.0 (`cam1`).
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let cam0;
    * let cam1;
@@ -5996,8 +5735,6 @@ class Camera {
    *
    *   box();
    * }
-   * </code>
-   * </div>
    */
   slerp(cam0, cam1, amt) {
     // If t is 0 or 1, do not interpolate and set the argument camera.
@@ -6542,8 +6279,6 @@ function camera(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -6559,11 +6294,8 @@ function camera(p5, fn){
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -6582,11 +6314,8 @@ function camera(p5, fn){
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Adjust the range sliders to change the camera's position.
    *
    * let xSlider;
@@ -6626,8 +6355,6 @@ function camera(p5, fn){
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
   fn.camera = function (...args) {
     this._assert3d('camera');
@@ -6693,8 +6420,6 @@ function camera(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to squeeze the box.
    *
    * let isSqueezed = false;
@@ -6725,11 +6450,8 @@ function camera(p5, fn){
    * function doubleClicked() {
    *   isSqueezed = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -6757,8 +6479,6 @@ function camera(p5, fn){
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
   fn.perspective = function (...args) {
     this._assert3d('perspective');
@@ -6767,7 +6487,6 @@ function camera(p5, fn){
     return this;
   };
 
-
   /**
    * Enables or disables perspective for lines in 3D sketches.
    *
@@ -6803,8 +6522,6 @@ function camera(p5, fn){
    * @param {Boolean} enable whether to enable line perspective.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click the canvas to toggle the line perspective.
    *
    * function setup() {
@@ -6837,11 +6554,8 @@ function camera(p5, fn){
    *   let isEnabled = linePerspective();
    *   linePerspective(!isEnabled);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Double-click the canvas to toggle the line perspective.
    *
    * function setup() {
@@ -6877,8 +6591,6 @@ function camera(p5, fn){
    *   let isEnabled = linePerspective();
    *   linePerspective(!isEnabled);
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method linePerspective
@@ -6932,8 +6644,6 @@ function camera(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -6959,11 +6669,8 @@ function camera(p5, fn){
    *     box(10);
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -6993,8 +6700,6 @@ function camera(p5, fn){
    *     box(10);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.ortho = function (...args) {
     this._assert3d('ortho');
@@ -7045,8 +6750,6 @@ function camera(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -7072,11 +6775,8 @@ function camera(p5, fn){
    *     box(10);
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *   describe('A white cube on a gray background.');
@@ -7105,8 +6805,6 @@ function camera(p5, fn){
    *     box(10);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.frustum = function (...args) {
     this._assert3d('frustum');
@@ -7137,8 +6835,6 @@ function camera(p5, fn){
    * @for p5
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -7182,8 +6878,6 @@ function camera(p5, fn){
    *     usingCam1 = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.createCamera = function () {
     this._assert3d('createCamera');
@@ -7204,8 +6898,6 @@ function camera(p5, fn){
    * @for p5
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -7249,8 +6941,6 @@ function camera(p5, fn){
    *     usingCam1 = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.setCamera = function (cam) {
     this._renderer.setCamera(cam);
@@ -7285,8 +6975,6 @@ function camera(p5, fn){
    * @param {RendererGL} rendererGL instance of WebGL renderer
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let delta = 0.001;
    *
@@ -7324,11 +7012,8 @@ function camera(p5, fn){
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Double-click to toggle between cameras.
    *
    * let cam1;
@@ -7374,8 +7059,6 @@ function camera(p5, fn){
    *     isDefaultCamera = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   p5.Camera = Camera;
 
@@ -7439,8 +7122,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -7484,11 +7165,8 @@ function camera(p5, fn){
    *   // Display the value of eyeX, rounded to the nearest integer.
    *   text(`eyeX: ${round(cam.eyeX)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -7535,8 +7213,6 @@ function camera(p5, fn){
    *   // Display the value of eyeX, rounded to the nearest integer.
    *   text(`eyeX: ${round(cam.eyeX)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -7549,8 +7225,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -7594,11 +7268,8 @@ function camera(p5, fn){
    *   // Display the value of eyeY, rounded to the nearest integer.
    *   text(`eyeY: ${round(cam.eyeY)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -7648,8 +7319,6 @@ function camera(p5, fn){
    *   // Display the value of eyeY, rounded to the nearest integer.
    *   text(`eyeY: ${round(cam.eyeY)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -7662,8 +7331,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -7707,11 +7374,8 @@ function camera(p5, fn){
    *   // Display the value of eyeZ, rounded to the nearest integer.
    *   text(`eyeZ: ${round(cam.eyeZ)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -7761,8 +7425,6 @@ function camera(p5, fn){
    *   // Display the value of eyeZ, rounded to the nearest integer.
    *   text(`eyeZ: ${round(cam.eyeZ)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -7776,8 +7438,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -7821,11 +7481,8 @@ function camera(p5, fn){
    *   // Display the value of centerX, rounded to the nearest integer.
    *   text(`centerX: ${round(cam.centerX)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -7875,8 +7532,6 @@ function camera(p5, fn){
    *   // Display the value of centerX, rounded to the nearest integer.
    *   text(`centerX: ${round(cam.centerX)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -7890,8 +7545,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -7935,11 +7588,8 @@ function camera(p5, fn){
    *   // Display the value of centerY, rounded to the nearest integer.
    *   text(`centerY: ${round(cam.centerY)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -7989,8 +7639,6 @@ function camera(p5, fn){
    *   // Display the value of centerY, rounded to the nearest integer.
    *   text(`centerY: ${round(cam.centerY)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -8004,8 +7652,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -8049,11 +7695,8 @@ function camera(p5, fn){
    *   // Display the value of centerZ, rounded to the nearest integer.
    *   text(`centerZ: ${round(cam.centerZ)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -8100,8 +7743,6 @@ function camera(p5, fn){
    *   // Display the value of centerZ, rounded to the nearest integer.
    *   text(`centerZ: ${round(cam.centerZ)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -8115,8 +7756,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -8159,11 +7798,8 @@ function camera(p5, fn){
    *   // Display the value of upX, rounded to the nearest tenth.
    *   text(`upX: ${round(cam.upX, 1)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -8212,8 +7848,6 @@ function camera(p5, fn){
    *   // Display the value of upX, rounded to the nearest tenth.
    *   text(`upX: ${round(cam.upX, 1)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -8227,8 +7861,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -8271,11 +7903,8 @@ function camera(p5, fn){
    *   // Display the value of upY, rounded to the nearest tenth.
    *   text(`upY: ${round(cam.upY, 1)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -8324,8 +7953,6 @@ function camera(p5, fn){
    *   // Display the value of upY, rounded to the nearest tenth.
    *   text(`upY: ${round(cam.upY, 1)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -8339,8 +7966,6 @@ function camera(p5, fn){
    * @readonly
    *
    * @example
-   * <div>
-   * <code>
    * let cam;
    * let font;
    *
@@ -8383,11 +8008,8 @@ function camera(p5, fn){
    *   // Display the value of upZ, rounded to the nearest tenth.
    *   text(`upZ: ${round(cam.upZ, 1)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let cam;
    * let font;
    *
@@ -8436,8 +8058,6 @@ function camera(p5, fn){
    *   // Display the value of upZ, rounded to the nearest tenth.
    *   text(`upZ: ${round(cam.upZ, 1)}`, 0, 45);
    * }
-   * </code>
-   * </div>
    */
 }
 
@@ -9232,8 +8852,6 @@ class Renderer3D extends Renderer {
    * @param  {Number}            [a]  opacity
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(200, 200, WEBGL);
    * }
@@ -9246,8 +8864,6 @@ class Renderer3D extends Renderer {
    *   rotateY(frameCount * 0.01);
    *   box(75, 75, 75);
    * }
-   * </code>
-   * </div>
    *
    * @alt
    * black canvas with purple cube spinning
@@ -9272,8 +8888,6 @@ class Renderer3D extends Renderer {
    * @param  {Number}            [v3] blue or brightness value
    * @param  {Number}            [a]  opacity
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(200, 200, WEBGL);
    * }
@@ -9286,8 +8900,6 @@ class Renderer3D extends Renderer {
    *   rotateY(frameCount * 0.01);
    *   box(75, 75, 75);
    * }
-   * </code>
-   * </div>
    *
    * @alt
    * black canvas with purple cube with pink outline spinning
@@ -9881,10 +9493,6 @@ class Renderer3D extends Renderer {
       this.scratchMat3.inverseTranspose4x4(this.states.uViewMatrix);
       shader.setUniform("uCameraNormalMatrix", this.scratchMat3.mat3);
     }
-    if (shader.uniforms.uCameraRotation) {
-      this.scratchMat3.inverseTranspose4x4(this.states.uViewMatrix);
-      shader.setUniform("uCameraRotation", this.scratchMat3.mat3);
-    }
     shader.setUniform("uViewport", this._viewport);
   }
 
@@ -10440,88 +10048,80 @@ if (typeof p5 !== "undefined") {
 
 
 function primitives3D(p5, fn){
-/**
- * Sets the stroke rendering mode to balance performance and visual features when drawing lines.
- *
- * `strokeMode()` offers two modes:
- *
- * - `SIMPLE`: Optimizes for speed by disabling caps, joins, and stroke color features.
- *   Use this mode for faster line rendering when these visual details are unnecessary.
- * - `FULL`: Enables caps, joins, and stroke color for lines.
- *   This mode provides enhanced visuals but may reduce performance due to additional processing.
- *
- * Choose the mode that best suits your application's needs to either improve rendering speed or enhance visual quality.
- *
- * @method strokeMode
- * @param {String} mode - The stroke mode to set. Possible values are:
- *   - `'SIMPLE'`: Fast rendering without caps, joins, or stroke color.
- *   - `'FULL'`: Detailed rendering with caps, joins, and stroke color.
- *
- * @example
- * <div>
- * <code>
- * function setup() {
- *   createCanvas(300, 300, WEBGL);
- *   describe('A sphere with red stroke and a red, wavy line on a gray background. The wavy line have caps, joins and colors.');
- * }
- *
- * function draw() {
- *   background(128);
- *   strokeMode(FULL); // Enables detailed rendering with caps, joins, and stroke color.
- *   push();
- *   strokeWeight(1);
- *   translate(0, -50, 0);
- *   sphere(50);
- *   pop();
- *   orbitControl();
- *
- *   noFill();
- *   strokeWeight(15);
- *   stroke('red');
- *   beginShape();
- *   bezierOrder(2); // Sets the order of the Bezier curve.
- *   bezierVertex(80, 80);
- *   bezierVertex(50, -40);
- *   bezierVertex(-80, 80);
- *   endShape();
- * }
- * </code>
- * </div>
- *
- * <div>
- * <code>
- * function setup() {
- *   createCanvas(300, 300, WEBGL);
- *   describe('A sphere with red stroke and a  wavy line without full curve decorations without caps and color on a gray background.');
- * }
- *
- * function draw() {
- *   background(128);
- *   strokeMode(SIMPLE); // Simplifies stroke rendering for better performance.
- *
- *   // Draw sphere
- *   push();
- *   strokeWeight(1);
- *   translate(0, -50, 0);
- *   sphere(50);
- *   pop();
- *   orbitControl();
- *
- *   // Draw modified wavy red line
- *   noFill();
- *   strokeWeight(15);
- *   stroke('red');
- *   beginShape();
- *   bezierOrder(2); // Sets the order of the Bezier curve.
- *   bezierVertex(80, 80);
- *   bezierVertex(50, -40);
- *   bezierVertex(-80, 80);
- *   endShape();
- * }
- * </code>
- * </div>
- */
-
+  /**
+   * Sets the stroke rendering mode to balance performance and visual features when drawing lines.
+   *
+   * `strokeMode()` offers two modes:
+   *
+   * - `SIMPLE`: Optimizes for speed by disabling caps, joins, and stroke color features.
+   *   Use this mode for faster line rendering when these visual details are unnecessary.
+   * - `FULL`: Enables caps, joins, and stroke color for lines.
+   *   This mode provides enhanced visuals but may reduce performance due to additional processing.
+   *
+   * Choose the mode that best suits your application's needs to either improve rendering speed or enhance visual quality.
+   *
+   * @method strokeMode
+   * @param {String} mode - The stroke mode to set. Possible values are:
+   *   - `'SIMPLE'`: Fast rendering without caps, joins, or stroke color.
+   *   - `'FULL'`: Detailed rendering with caps, joins, and stroke color.
+   *
+   * @example
+   * function setup() {
+   *   createCanvas(300, 300, WEBGL);
+   *   describe('A sphere with red stroke and a red, wavy line on a gray background. The wavy line have caps, joins and colors.');
+   * }
+   *
+   * function draw() {
+   *   background(128);
+   *   strokeMode(FULL); // Enables detailed rendering with caps, joins, and stroke color.
+   *   push();
+   *   strokeWeight(1);
+   *   translate(0, -50, 0);
+   *   sphere(50);
+   *   pop();
+   *   orbitControl();
+   *
+   *   noFill();
+   *   strokeWeight(15);
+   *   stroke('red');
+   *   beginShape();
+   *   bezierOrder(2); // Sets the order of the Bezier curve.
+   *   bezierVertex(80, 80);
+   *   bezierVertex(50, -40);
+   *   bezierVertex(-80, 80);
+   *   endShape();
+   * }
+   *
+   * @example
+   * function setup() {
+   *   createCanvas(300, 300, WEBGL);
+   *   describe('A sphere with red stroke and a  wavy line without full curve decorations without caps and color on a gray background.');
+   * }
+   *
+   * function draw() {
+   *   background(128);
+   *   strokeMode(SIMPLE); // Simplifies stroke rendering for better performance.
+   *
+   *   // Draw sphere
+   *   push();
+   *   strokeWeight(1);
+   *   translate(0, -50, 0);
+   *   sphere(50);
+   *   pop();
+   *   orbitControl();
+   *
+   *   // Draw modified wavy red line
+   *   noFill();
+   *   strokeWeight(15);
+   *   stroke('red');
+   *   beginShape();
+   *   bezierOrder(2); // Sets the order of the Bezier curve.
+   *   bezierVertex(80, 80);
+   *   bezierVertex(50, -40);
+   *   bezierVertex(-80, 80);
+   *   endShape();
+   * }
+   */
   fn.strokeMode = function (mode) {
     if (mode === undefined) {
       return this._renderer._simpleLines ? SIMPLE : FULL;
@@ -10533,6 +10133,7 @@ function primitives3D(p5, fn){
       throw Error('no such parameter');
     }
   };
+
   /**
    * Creates a custom <a href="#/p5.Geometry">p5.Geometry</a> object from
    * simpler 3D shapes.
@@ -10559,8 +10160,6 @@ function primitives3D(p5, fn){
    * @returns {p5.Geometry} new 3D shape.
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let shape;
@@ -10594,11 +10193,8 @@ function primitives3D(p5, fn){
    * function createShape() {
    *   cone();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let shape;
@@ -10637,11 +10233,8 @@ function primitives3D(p5, fn){
    *   cylinder(3, 20);
    *   pop();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let shape;
@@ -10687,11 +10280,8 @@ function primitives3D(p5, fn){
    *   cylinder(3, 20);
    *   pop();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let button;
@@ -10754,8 +10344,6 @@ function primitives3D(p5, fn){
    *     pop();
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.buildGeometry = function(callback) {
     return this._renderer.buildGeometry(callback);
@@ -10789,8 +10377,6 @@ function primitives3D(p5, fn){
    * @param {p5.Geometry} geometry 3D shape whose resources should be freed.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -10807,11 +10393,8 @@ function primitives3D(p5, fn){
    *   // Free the shape's resources.
    *   freeGeometry(shape);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let button;
@@ -10872,8 +10455,6 @@ function primitives3D(p5, fn){
    *     pop();
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.freeGeometry = function(geometry) {
     this._renderer.geometryBufferCache.freeBuffers(geometry.gid);
@@ -10913,8 +10494,6 @@ function primitives3D(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -10932,11 +10511,8 @@ function primitives3D(p5, fn){
    *   // Draw the plane.
    *   plane();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -10955,11 +10531,8 @@ function primitives3D(p5, fn){
    *   // Set its width and height to 30.
    *   plane(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -10978,8 +10551,6 @@ function primitives3D(p5, fn){
    *   // Set its width to 30 and height to 50.
    *   plane(30, 50);
    * }
-   * </code>
-   * </div>
    */
   fn.plane = function(
     width = 50,
@@ -11032,8 +10603,6 @@ function primitives3D(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11051,11 +10620,8 @@ function primitives3D(p5, fn){
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11074,11 +10640,8 @@ function primitives3D(p5, fn){
    *   // Set its width and height to 30.
    *   box(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11097,11 +10660,8 @@ function primitives3D(p5, fn){
    *   // Set its width to 30 and height to 50.
    *   box(30, 50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11120,8 +10680,6 @@ function primitives3D(p5, fn){
    *   // Set its width to 30, height to 50, and depth to 10.
    *   box(30, 50, 10);
    * }
-   * </code>
-   * </div>
    */
   fn.box = function(width, height, depth, detailX, detailY) {
     this._assert3d('box');
@@ -11161,8 +10719,6 @@ function primitives3D(p5, fn){
    *
    * @chainable
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11180,11 +10736,8 @@ function primitives3D(p5, fn){
    *   // Draw the sphere.
    *   sphere();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11203,11 +10756,8 @@ function primitives3D(p5, fn){
    *   // Set its radius to 30.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11227,11 +10777,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 6.
    *   sphere(30, 6);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11252,8 +10799,6 @@ function primitives3D(p5, fn){
    *   // Set its detailY to 4.
    *   sphere(30, 24, 4);
    * }
-   * </code>
-   * </div>
    */
   fn.sphere = function(radius = 50, detailX = 24, detailY = 16) {
     this._assert3d('sphere');
@@ -11310,8 +10855,6 @@ function primitives3D(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11329,11 +10872,8 @@ function primitives3D(p5, fn){
    *   // Draw the cylinder.
    *   cylinder();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11352,11 +10892,8 @@ function primitives3D(p5, fn){
    *   // Set its radius and height to 30.
    *   cylinder(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11375,11 +10912,8 @@ function primitives3D(p5, fn){
    *   // Set its radius to 30 and height to 50.
    *   cylinder(30, 50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11399,11 +10933,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 5.
    *   cylinder(30, 50, 5);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11423,11 +10954,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 24 and detailY to 2.
    *   cylinder(30, 50, 24, 2);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11448,11 +10976,8 @@ function primitives3D(p5, fn){
    *   // Don't draw its bottom.
    *   cylinder(30, 50, 24, 1, false);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11473,8 +10998,6 @@ function primitives3D(p5, fn){
    *   // Don't draw its bottom or top.
    *   cylinder(30, 50, 24, 1, false, false);
    * }
-   * </code>
-   * </div>
    */
   fn.cylinder = function(
     radius = 50,
@@ -11537,8 +11060,6 @@ function primitives3D(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11556,11 +11077,8 @@ function primitives3D(p5, fn){
    *   // Draw the cone.
    *   cone();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11579,11 +11097,8 @@ function primitives3D(p5, fn){
    *   // Set its radius and height to 30.
    *   cone(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11602,11 +11117,8 @@ function primitives3D(p5, fn){
    *   // Set its radius to 30 and height to 50.
    *   cone(30, 50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11626,11 +11138,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 5.
    *   cone(30, 50, 5);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11650,11 +11159,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 5.
    *   cone(30, 50, 5);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11674,11 +11180,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 24 and detailY to 2.
    *   cone(30, 50, 24, 2);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11699,8 +11202,6 @@ function primitives3D(p5, fn){
    *   // Don't draw its base.
    *   cone(30, 50, 24, 1, false);
    * }
-   * </code>
-   * </div>
    */
   fn.cone = function(
     radius = 50,
@@ -11760,8 +11261,6 @@ function primitives3D(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11780,11 +11279,8 @@ function primitives3D(p5, fn){
    *   // Set its radiusX to 30.
    *   ellipsoid(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11804,11 +11300,8 @@ function primitives3D(p5, fn){
    *   // Set its radiusY to 40.
    *   ellipsoid(30, 40);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11829,11 +11322,8 @@ function primitives3D(p5, fn){
    *   // Set its radiusZ to 50.
    *   ellipsoid(30, 40, 50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11855,11 +11345,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 4.
    *   ellipsoid(30, 40, 50, 4);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11882,8 +11369,6 @@ function primitives3D(p5, fn){
    *   // Set its detailY to 3.
    *   ellipsoid(30, 40, 50, 4, 3);
    * }
-   * </code>
-   * </div>
    */
   fn.ellipsoid = function(
     radiusX = 50,
@@ -11933,8 +11418,6 @@ function primitives3D(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11952,11 +11435,8 @@ function primitives3D(p5, fn){
    *   // Draw the torus.
    *   torus();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11975,11 +11455,8 @@ function primitives3D(p5, fn){
    *   // Set its radius to 30.
    *   torus(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -11998,11 +11475,8 @@ function primitives3D(p5, fn){
    *   // Set its radius to 30 and tubeRadius to 15.
    *   torus(30, 15);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -12022,11 +11496,8 @@ function primitives3D(p5, fn){
    *   // Set its detailX to 5.
    *   torus(30, 15, 5);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -12047,8 +11518,6 @@ function primitives3D(p5, fn){
    *   // Set its detailY to 3.
    *   torus(30, 15, 5, 3);
    * }
-   * </code>
-   * </div>
    */
   fn.torus = function(radius, tubeRadius, detailX, detailY) {
     this._assert3d('torus');
@@ -12077,8 +11546,6 @@ function primitives3D(p5, fn){
    * @param {Number} z z-coordinate of point
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    * }
@@ -12095,8 +11562,6 @@ function primitives3D(p5, fn){
    *   strokeWeight(1);
    *   point(0, -25);
    * }
-   * </code>
-   * </div>
    */
   Renderer3D.prototype.point = function(x, y, z = 0) {
     this.beginShape(POINTS);
@@ -12577,8 +12042,6 @@ function primitives3D(p5, fn){
    * @param {Number} z1 z-coordinate of second vertex
    * @chainable
    * @example
-   * <div>
-   * <code>
    * //draw a line
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
@@ -12592,8 +12055,6 @@ function primitives3D(p5, fn){
    *   fill(255, 0, 0);
    *   line(10, 10, 0, 60, 60, 20);
    * }
-   * </code>
-   * </div>
    */
   Renderer3D.prototype.line = function(...args) {
     if (args.length === 6) {
@@ -13147,9 +12608,6 @@ function primitives3D(p5, fn){
    * @chainable
    *
    * @example
-   *
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -13187,8 +12645,6 @@ function primitives3D(p5, fn){
    *     'A gray square with a jagged curve drawn in three segments. The curve is a sideways U shape with red segments on top and bottom, and a black segment on the right. The endpoints of all the segments are marked with dots.'
    *   );
    * }
-   * </code>
-   * </div>
    */
   fn.curveDetail = function(d) {
     if (!(this._renderer instanceof Renderer3D)) {
@@ -13251,8 +12707,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click the canvas to turn on the light.
    *
@@ -13284,11 +12738,8 @@ function light(p5, fn){
    * function doubleClicked() {
    *   isLit = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13311,11 +12762,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13337,11 +12785,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13363,30 +12808,24 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method ambientLight
    * @param  {Number}        gray  grayscale value between 0 and 255.
    * @param  {Number}        [alpha]
    * @chainable
    */
-
   /**
    * @method ambientLight
    * @param  {String}        value color as a CSS string.
    * @chainable
    */
-
   /**
    * @method ambientLight
    * @param  {Number[]}      values color as an array of RGBA, HSBA, or HSLA
    *                                 values.
    * @chainable
    */
-
   /**
    * @method ambientLight
    * @param  {p5.Color}      color color as a <a href="#/p5.Color">p5.Color</a> object.
@@ -13448,8 +12887,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13468,11 +12905,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click the canvas to add a point light.
    *
@@ -13509,11 +12943,8 @@ function light(p5, fn){
    * function doubleClicked() {
    *   isLit = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13545,11 +12976,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13580,11 +13008,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13615,29 +13040,23 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method specularColor
    * @param  {Number}        gray grayscale value between 0 and 255.
    * @chainable
    */
-
   /**
    * @method specularColor
    * @param  {String}        value color as a CSS string.
    * @chainable
    */
-
   /**
    * @method specularColor
    * @param  {Number[]}      values color as an array of RGBA, HSBA, or HSLA
    *                                 values.
    * @chainable
    */
-
   /**
    * @method specularColor
    * @param  {p5.Color}      color color as a <a href="#/p5.Color">p5.Color</a> object.
@@ -13708,8 +13127,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click to turn on the directional light.
    *
@@ -13740,11 +13157,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13770,11 +13184,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13801,10 +13212,7 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method directionalLight
    * @param  {Number}    v1
@@ -13814,7 +13222,6 @@ function light(p5, fn){
    *                               <a href="#/p5.Vector">p5.Vector</a> object.
    * @chainable
    */
-
   /**
    * @method directionalLight
    * @param  {p5.Color|Number[]|String} color color as a <a href="#/p5.Color">p5.Color</a> object,
@@ -13824,7 +13231,6 @@ function light(p5, fn){
    * @param  {Number}                   z
    * @chainable
    */
-
   /**
    * @method directionalLight
    * @param  {p5.Color|Number[]|String} color
@@ -13893,9 +13299,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   *
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click to turn on the point light.
    *
@@ -13931,11 +13334,8 @@ function light(p5, fn){
    * function doubleClicked() {
    *   isLit = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13961,11 +13361,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -13992,11 +13389,8 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -14044,10 +13438,7 @@ function light(p5, fn){
    *   sphere(10);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method pointLight
    * @param  {Number}     v1
@@ -14057,7 +13448,6 @@ function light(p5, fn){
    *                               <a href="#/p5.Vector">p5.Vector</a> object.
    * @chainable
    */
-
   /**
    * @method pointLight
    * @param  {p5.Color|Number[]|String} color color as a <a href="#/p5.Color">p5.Color</a> object,
@@ -14067,7 +13457,6 @@ function light(p5, fn){
    * @param  {Number}                   z
    * @chainable
    */
-
   /**
    * @method pointLight
    * @param  {p5.Color|Number[]|String} color
@@ -14101,8 +13490,6 @@ function light(p5, fn){
    * @param  {p5.Image}    img image to use as the light source.
    *
    * @example
-   * <div class="notest">
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let img;
@@ -14137,8 +13524,6 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    */
   fn.imageLight = function (img) {
     this._renderer.imageLight(img);
@@ -14157,8 +13542,6 @@ function light(p5, fn){
    * @param {p5.Image} img 360˚ image to use as the background.
    *
    * @example
-   * <div class="notest">
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let img;
@@ -14191,8 +13574,6 @@ function light(p5, fn){
    *   // Draw the sphere.
    *   sphere(30);
    * }
-   * </code>
-   * </div>
    */
   fn.panorama = function (img) {
     this.filter(this._renderer._getSphereMapping(img));
@@ -14212,8 +13593,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click to turn on the lights.
    *
@@ -14244,11 +13623,8 @@ function light(p5, fn){
    * function doubleClicked() {
    *   isLit = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -14270,8 +13646,6 @@ function light(p5, fn){
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
   fn.lights = function () {
     this._assert3d('lights');
@@ -14304,8 +13678,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click to change the falloff rate.
    *
@@ -14342,8 +13714,6 @@ function light(p5, fn){
    * function doubleClicked() {
    *   useFalloff = true;
    * }
-   * </code>
-   * </div>
    */
   fn.lightFalloff = function (
     constantAttenuation,
@@ -14405,8 +13775,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click to adjust the spotlight.
    *
@@ -14442,11 +13810,8 @@ function light(p5, fn){
    * function doubleClicked() {
    *   isLit = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click to adjust the spotlight.
    *
@@ -14486,8 +13851,6 @@ function light(p5, fn){
    * function doubleClicked() {
    *   isLit = true;
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method spotLight
@@ -14600,8 +13963,6 @@ function light(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -14640,8 +14001,6 @@ function light(p5, fn){
    *   sphere(20);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   fn.noLights = function (...args) {
     this._assert3d('noLights');
@@ -15135,8 +14494,6 @@ function material(p5, fn) {
    * @return {Promise<p5.Shader>} new shader created from the vertex and fragment shader files.
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * let mandelbrot;
@@ -15161,11 +14518,8 @@ function material(p5, fn) {
    *
    *   describe('A black fractal image on a magenta background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * let mandelbrot;
@@ -15192,8 +14546,6 @@ function material(p5, fn) {
    *   // Add a quad as a display surface for the shader.
    *   quad(-1, -1, 1, -1, 1, 1, -1, 1);
    * }
-   * </code>
-   * </div>
    */
   fn.loadShader = async function (
     vertFilename,
@@ -15623,6 +14975,7 @@ function material(p5, fn) {
    * In your function, you can use <a href="#/p5/filterColor">`filterColor`</a> with a function
    * that will be called for each pixel on the image to determine its final color. You can
    * read the color of the current pixel with `getTexture(canvasContent, coord)`.
+   * See <a href="#/p5/getTexture">getTexture()</a>.
    *
    * ```js example
    * async function setup() {
@@ -15813,8 +15166,6 @@ function material(p5, fn) {
    * @returns {p5.Shader} new shader object created from the fragment shader.
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * function setup() {
    *   let fragSrc = `precision highp float;
    *   void main() {
@@ -15826,11 +15177,8 @@ function material(p5, fn) {
    *   filter(s);
    *   describe('a yellow canvas');
    * }
-   * </code>
-   * </div>
    *
-   * <div modernizr='webgl'>
-   * <code>
+   * @example
    * let img, s;
    * async function setup() {
    *   img = await loadImage('assets/bricks.jpg');
@@ -15866,8 +15214,6 @@ function material(p5, fn) {
    *   filter(s);
    *   describe('a image of bricks tinted dark blue');
    * }
-   * </code>
-   * </div>
    */
   fn.createFilterShader = function (fragSrc, skipContextCheck = false) {
     // p5._validateParameters('buildFilterShader', arguments);
@@ -16104,7 +15450,7 @@ function material(p5, fn) {
    *
    */
   fn.shader = function (s) {
-    this._assert3d("shader");
+    this._assert3d('shader');
     // p5._validateParameters('shader', arguments);
 
     this._renderer.shader(s);
@@ -16134,8 +15480,6 @@ function material(p5, fn) {
    *
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * let animatedStrokeShader;
    *
    * let vertSrc = `
@@ -16228,13 +15572,8 @@ function material(p5, fn) {
    *   orbitControl();
    *   box(50);
    * }
-   * </code>
-   * </div>
-   *
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * let myShader;
    *
    * function setup() {
@@ -16273,8 +15612,6 @@ function material(p5, fn) {
    *   }
    *   endShape();
    * }
-   * </code>
-   * </div>
    */
   fn.strokeShader = function (s) {
     this._assert3d("strokeShader");
@@ -16304,8 +15641,6 @@ function material(p5, fn) {
    *                      to apply for images.
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * let img;
    * let imgShader;
    *
@@ -16365,12 +15700,8 @@ function material(p5, fn) {
    *   image(img, -width / 2, -height / 2, width, height);
    * }
    *
-   * </code>
-   * </div>
    *
    * @example
-   * <div modernizr='webgl'>
-   * <code>
    * let img;
    * let imgShader;
    *
@@ -16426,8 +15757,6 @@ function material(p5, fn) {
    *   imgShader.setUniform('uTexture', img);
    *   image(img, -width / 2, -height / 2, width, height);
    * }
-   * </code>
-   * </div>
    */
   fn.imageShader = function (s) {
     this._assert3d("imageShader");
@@ -17374,8 +16703,6 @@ function material(p5, fn) {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Create a string with the vertex shader program.
    * // The vertex shader is called for each vertex.
    * let vertSrc = `
@@ -17442,8 +16769,6 @@ function material(p5, fn) {
    *   box(width / 4);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   fn.resetShader = function () {
     this._renderer.resetShader();
@@ -17476,8 +16801,6 @@ function material(p5, fn) {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -17503,11 +16826,8 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box(50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let pg;
    *
    * function setup() {
@@ -17537,11 +16857,8 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box(50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let vid;
    *
    * function setup() {
@@ -17571,11 +16888,8 @@ function material(p5, fn) {
    *   // Draw the rectangle.
    *   rect(-40, -40, 80, 80);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let vid;
    *
    * function setup() {
@@ -17613,8 +16927,6 @@ function material(p5, fn) {
    *   vertex(-40, 40, 0, 1);
    *   endShape();
    * }
-   * </code>
-   * </div>
    */
   fn.texture = function (tex) {
     this._assert3d("texture");
@@ -17730,8 +17042,6 @@ function material(p5, fn) {
    * @param {(IMAGE|NORMAL)} mode either IMAGE or NORMAL.
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -17758,11 +17068,8 @@ function material(p5, fn) {
    *   vertex(-30, 30, 0, img.height);
    *   endShape();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -17792,8 +17099,6 @@ function material(p5, fn) {
    *   vertex(-30, 30, 0, 1);
    *   endShape();
    * }
-   * </code>
-   * </div>
    */
   fn.textureMode = function (mode) {
     if (mode !== IMAGE && mode !== NORMAL) {
@@ -17908,8 +17213,6 @@ function material(p5, fn) {
    * @param {(CLAMP|REPEAT|MIRROR)} [wrapY=wrapX] either CLAMP, REPEAT, or MIRROR
    *
    * @example
-   * <div>
-   * <code>
    * let img;
    *
    * async function setup() {
@@ -17947,11 +17250,8 @@ function material(p5, fn) {
    *   vertex(-30, 30, 0, 0, 2);
    *   endShape();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -17986,11 +17286,8 @@ function material(p5, fn) {
    *   vertex(-30, 30, 0, 0, 2);
    *   endShape();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -18027,11 +17324,8 @@ function material(p5, fn) {
    *   vertex(-30, 30, 0, 0, 2);
    *   endShape();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let img;
    *
    * async function setup() {
@@ -18068,8 +17362,6 @@ function material(p5, fn) {
    *   vertex(-30, 30, 0, 0, 2);
    *   endShape();
    * }
-   * </code>
-   * </div>
    */
   fn.textureWrap = function (wrapX, wrapY = wrapX) {
     this._renderer.states.setValue("textureWrapX", wrapX);
@@ -18093,8 +17385,6 @@ function material(p5, fn) {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18115,8 +17405,6 @@ function material(p5, fn) {
    *   // Draw the torus.
    *   torus(30);
    * }
-   * </code>
-   * </div>
    */
   fn.normalMaterial = function (...args) {
     this._assert3d("normalMaterial");
@@ -18165,8 +17453,6 @@ function material(p5, fn) {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18187,11 +17473,8 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18215,11 +17498,8 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18243,11 +17523,8 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18272,11 +17549,8 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18300,11 +17574,8 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18328,16 +17599,12 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method ambientMaterial
    * @param  {Number} gray grayscale value between 0 (black) and 255 (white).
    * @chainable
    */
-
   /**
    * @method ambientMaterial
    * @param  {p5.Color|Number[]|String} color
@@ -18401,8 +17668,6 @@ function material(p5, fn) {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    *
    * function setup() {
@@ -18426,16 +17691,12 @@ function material(p5, fn) {
    *   // Draw the box.
    *   box();
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method emissiveMaterial
    * @param  {Number} gray grayscale value between 0 (black) and 255 (white).
    * @chainable
    */
-
   /**
    * @method emissiveMaterial
    * @param  {p5.Color|Number[]|String} color
@@ -18498,8 +17759,6 @@ function material(p5, fn) {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click the canvas to apply a specular material.
    *
@@ -18538,11 +17797,8 @@ function material(p5, fn) {
    * function doubleClicked() {
    *   isGlossy = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click the canvas to apply a specular material.
    *
@@ -18583,11 +17839,8 @@ function material(p5, fn) {
    * function doubleClicked() {
    *   isGlossy = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click the canvas to apply a specular material.
    *
@@ -18630,11 +17883,8 @@ function material(p5, fn) {
    * function doubleClicked() {
    *   isGlossy = true;
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    * // Double-click the canvas to apply a specular material.
    *
@@ -18675,10 +17925,7 @@ function material(p5, fn) {
    * function doubleClicked() {
    *   isGlossy = true;
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method specularMaterial
    * @param  {Number}        v1      red or hue value in
@@ -18690,7 +17937,6 @@ function material(p5, fn) {
    * @param  {Number}        [alpha]
    * @chainable
    */
-
   /**
    * @method specularMaterial
    * @param  {p5.Color|Number[]|String} color
@@ -18729,8 +17975,6 @@ function material(p5, fn) {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -18768,8 +18012,6 @@ function material(p5, fn) {
    *   shininess(100);
    *   sphere(20);
    * }
-   * </code>
-   * </div>
    */
   fn.shininess = function (shine) {
     this._assert3d("shininess");
@@ -18801,8 +18043,6 @@ function material(p5, fn) {
    * @param {Number} metallic amount of metalness.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -18840,11 +18080,8 @@ function material(p5, fn) {
    *   metalness(50);
    *   sphere(20);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and drag the mouse to view the scene from different angles.
    *
    * let img;
@@ -18884,8 +18121,6 @@ function material(p5, fn) {
    *   metalness(50);
    *   sphere(20);
    * }
-   * </code>
-   * </div>
    */
   fn.metalness = function (metallic) {
     this._assert3d("metalness");
@@ -19038,10 +18273,7 @@ class Graphics {
    * values each time <a href="#/p5/draw">draw()</a> executes. `p5.Graphics`
    * objects must reset these values manually by calling `myGraphics.reset()`.
    *
-   *
    * @example
-   * <div>
-   * <code>
    * let pg;
    *
    * function setup() {
@@ -19078,11 +18310,8 @@ class Graphics {
    *     pg.reset();
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let pg;
    *
    * function setup() {
@@ -19110,11 +18339,8 @@ class Graphics {
    *   // Reset the p5.Graphics object automatically.
    *   pg.reset();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let pg;
    *
    * function setup() {
@@ -19151,11 +18377,8 @@ class Graphics {
    *     pg.reset();
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let pg;
    *
    * function setup() {
@@ -19187,8 +18410,6 @@ class Graphics {
    *   // Reset the p5.Graphics object automatically.
    *   pg.reset();
    * }
-   * </code>
-   * </div>
    */
   reset() {
     this._renderer.resetMatrix();
@@ -19218,8 +18439,6 @@ class Graphics {
    * collected.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to remove the p5.Graphics object.
    *
    * let pg;
@@ -19254,15 +18473,12 @@ class Graphics {
    *   pg.remove();
    *   pg = undefined;
    * }
-   * </code>
-   * </div>
    */
   remove() {
     this._renderer.remove();
     this._renderer = undefined;
   }
 
-
   /**
    * Creates a new <a href="#/p5.Framebuffer">p5.Framebuffer</a> object with
    * the same WebGL context as the graphics buffer.
@@ -19306,8 +18522,6 @@ class Graphics {
    * @return {p5.Framebuffer} new framebuffer.
    *
    * @example
-   * <div>
-   * <code>
    * // Click and hold a mouse button to change shapes.
    *
    * let pg;
@@ -19405,11 +18619,8 @@ class Graphics {
    *   // Start drawing to the box p5.Framebuffer.
    *   boxLayer.end();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click and hold a mouse button to change shapes.
    *
    * let pg;
@@ -19511,8 +18722,6 @@ class Graphics {
    *   // Start drawing to the box p5.Framebuffer.
    *   boxLayer.end();
    * }
-   * </code>
-   * </div>
    */
   createFramebuffer(options) {
     return new Framebuffer(this._renderer, options);
@@ -19572,8 +18781,6 @@ function graphics(p5, fn){
    * @param {HTMLCanvasElement} [canvas]     existing `&lt;canvas&gt;` element to use.
    *
    * @example
-   * <div>
-   * <code>
    * let pg;
    *
    * function setup() {
@@ -19595,11 +18802,8 @@ function graphics(p5, fn){
    *   // Display the p5.Graphics object.
    *   image(pg, 25, 25);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click the canvas to display the graphics buffer.
    *
    * let pg;
@@ -19628,8 +18832,6 @@ function graphics(p5, fn){
    *     image(pg, 25, 25);
    *   }
    * }
-   * </code>
-   * </div>
    */
   p5.Graphics = Graphics;
 
@@ -20676,8 +19878,6 @@ class Framebuffer {
    * @param {Number} height height of the framebuffer.
    *
    * @example
-   * <div>
-   * <code>
    * let myBuffer;
    *
    * function setup() {
@@ -20708,8 +19908,6 @@ class Framebuffer {
    * function mouseMoved() {
    *   myBuffer.resize(mouseX, mouseY);
    * }
-   * </code>
-   * </div>
    */
   resize(width, height) {
     this._autoSized = false;
@@ -20743,8 +19941,6 @@ class Framebuffer {
    * @returns {Number} current pixel density.
    *
    * @example
-   * <div>
-   * <code>
    * let myBuffer;
    *
    * function setup() {
@@ -20778,11 +19974,8 @@ class Framebuffer {
    * function mouseReleased() {
    *   myBuffer.pixelDensity(2);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myBuffer;
    * let myFont;
    *
@@ -20811,8 +20004,6 @@ class Framebuffer {
    *
    *   describe(`The text "Density: ${d}" written in black on a gray background.`);
    * }
-   * </code>
-   * </div>
    */
   pixelDensity(density) {
     if (density) {
@@ -20838,8 +20029,6 @@ class Framebuffer {
    * @returns {Boolean} current autosize setting.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle the autosizing mode.
    *
    * let myBuffer;
@@ -20880,8 +20069,6 @@ class Framebuffer {
    *   let isAuto = myBuffer.autoSized();
    *   myBuffer.autoSized(!isAuto);
    * }
-   * </code>
-   * </div>
    */
   autoSized(autoSized) {
     if (autoSized === undefined) {
@@ -21120,8 +20307,6 @@ class Framebuffer {
    * @returns {p5.Camera} new camera.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to toggle between cameras.
    *
    * let myBuffer;
@@ -21188,8 +20373,6 @@ class Framebuffer {
    *     usingCam1 = true;
    *   }
    * }
-   * </code>
-   * </div>
    */
   createCamera() {
     const cam = new FramebufferCamera(this);
@@ -21219,8 +20402,6 @@ class Framebuffer {
    * collected.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to remove the p5.Framebuffer object.
    *
    * let myBuffer;
@@ -21263,8 +20444,6 @@ class Framebuffer {
    *   // Delete the framebuffer from CPU memory.
    *   myBuffer = undefined;
    * }
-   * </code>
-   * </div>
    */
   remove() {
     this._deleteTextures();
@@ -21286,8 +20465,6 @@ class Framebuffer {
    * as an image or texture.
    *
    * @example
-   * <div>
-   * <code>
    * let myBuffer;
    *
    * function setup() {
@@ -21319,8 +20496,6 @@ class Framebuffer {
    *     image(myBuffer, -50, -50);
    *   }
    * }
-   * </code>
-   * </div>
    */
   begin() {
     this.prevFramebuffer = this.renderer.activeFramebuffer();
@@ -21417,8 +20592,6 @@ class Framebuffer {
    * or texture.
    *
    * @example
-   * <div>
-   * <code>
    * let myBuffer;
    *
    * function setup() {
@@ -21450,8 +20623,6 @@ class Framebuffer {
    *     image(myBuffer, -50, -50);
    *   }
    * }
-   * </code>
-   * </div>
    */
   end() {
     this.renderer.pop();
@@ -21491,8 +20662,6 @@ class Framebuffer {
    * @param {Function} callback function that draws to the framebuffer.
    *
    * @example
-   * <div>
-   * <code>
    * // Click the canvas to display the framebuffer.
    *
    * let myBuffer;
@@ -21526,8 +20695,6 @@ class Framebuffer {
    *   normalMaterial();
    *   torus(30);
    * }
-   * </code>
-   * </div>
    */
   draw(callback) {
     this.begin();
@@ -21543,8 +20710,6 @@ class Framebuffer {
    * <a href="#/p5.Framebuffer/pixels">myBuffer.pixels</a>.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -21576,8 +20741,6 @@ class Framebuffer {
    *
    *   describe('A pink rectangle above a gray rectangle.');
    * }
-   * </code>
-   * </div>
    */
   loadPixels() {
     this._update('colorTexture');
@@ -21673,8 +20836,6 @@ class Framebuffer {
    * @method updatePixels
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -21706,8 +20867,6 @@ class Framebuffer {
    *
    *   describe('A pink rectangle above a gray rectangle.');
    * }
-   * </code>
-   * </div>
    */
   updatePixels() {
     // Let renderer handle the pixel update process
@@ -21790,8 +20949,6 @@ function framebuffer(p5, fn){
    * @for p5.Framebuffer
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -21819,8 +20976,6 @@ function framebuffer(p5, fn){
    *
    *   describe('A white triangle on a gray background.');
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -21843,8 +20998,6 @@ function framebuffer(p5, fn){
    * @for p5.Framebuffer
    *
    * @example
-   * <div>
-   * <code>
    * // Note: A "uniform" is a global variable within a shader program.
    *
    * // Create a string with the vertex shader program.
@@ -21919,8 +21072,6 @@ function framebuffer(p5, fn){
    *   // Draw the plane.
    *   plane(myBuffer.width, myBuffer.height);
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -21940,8 +21091,6 @@ function framebuffer(p5, fn){
    * @for p5.Framebuffer
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -21973,8 +21122,6 @@ function framebuffer(p5, fn){
    *
    *   describe('A pink rectangle above a gray rectangle.');
    * }
-   * </code>
-   * </div>
    */
 
   /**
@@ -22049,8 +21196,6 @@ function rendering(p5, fn){
    * @return {p5.Renderer} new `p5.Renderer` that holds the canvas.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -22061,11 +21206,8 @@ function rendering(p5, fn){
    *
    *   describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 50);
    *
@@ -22076,11 +21218,8 @@ function rendering(p5, fn){
    *
    *   describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Use WebGL mode.
    *
    * function setup() {
@@ -22093,11 +21232,8 @@ function rendering(p5, fn){
    *
    *   describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   // Create a p5.Render object.
    *   let cnv = createCanvas(50, 50);
@@ -22112,8 +21248,6 @@ function rendering(p5, fn){
    *
    *   describe('A diagonal line drawn from top-left to bottom-right on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method createCanvas
@@ -22192,8 +21326,6 @@ function rendering(p5, fn){
    *                              to `false`.
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to resize the canvas.
    *
    * function setup() {
@@ -22215,11 +21347,8 @@ function rendering(p5, fn){
    * function doubleClicked() {
    *   resizeCanvas(50, 50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Resize the web browser to change the canvas size.
    *
    * function setup() {
@@ -22239,8 +21368,6 @@ function rendering(p5, fn){
    * function windowResized() {
    *   resizeCanvas(windowWidth, windowHeight);
    * }
-   * </code>
-   * </div>
    */
   fn.resizeCanvas = function (w, h, noRedraw) {
     // p5._validateParameters('resizeCanvas', arguments);
@@ -22269,13 +21396,9 @@ function rendering(p5, fn){
    * @method noCanvas
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   noCanvas();
    * }
-   * </code>
-   * </div>
    */
   fn.noCanvas = function () {
     if (this.canvas) {
@@ -22324,8 +21447,6 @@ function rendering(p5, fn){
    * @return {p5.Graphics} new graphics buffer.
    *
    * @example
-   * <div>
-   * <code>
    * //  Double-click to draw the contents of the graphics buffer.
    *
    * let pg;
@@ -22351,11 +21472,8 @@ function rendering(p5, fn){
    *     image(pg, 25, 25);
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * //  Double-click to draw the contents of the graphics buffer.
    *
    * let pg;
@@ -22385,8 +21503,6 @@ function rendering(p5, fn){
    *     image(pg, 25, 25);
    *   }
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method createGraphics
@@ -22450,8 +21566,6 @@ function rendering(p5, fn){
    * @return {p5.Framebuffer} new framebuffer.
    *
    * @example
-   * <div>
-   * <code>
    * let myBuffer;
    *
    * function setup() {
@@ -22497,11 +21611,8 @@ function rendering(p5, fn){
    *     }
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myBuffer;
    *
    * function setup() {
@@ -22551,8 +21662,6 @@ function rendering(p5, fn){
    *     }
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.createFramebuffer = function (options) {
     return new Framebuffer(this._renderer, options);
@@ -22581,8 +21690,6 @@ function rendering(p5, fn){
    *                         (none) and 1 (far clipping plane). Defaults to 1.
    *
    * @example
-   * <div>
-   * <code>
    * let previous;
    * let current;
    *
@@ -22635,8 +21742,6 @@ function rendering(p5, fn){
    *   // Display the current p5.Framebuffer.
    *   image(current, -50, -50);
    * }
-   * </code>
-   * </div>
    */
   fn.clearDepth = function (depth) {
     this._assert3d('clearDepth');
@@ -22656,8 +21761,6 @@ function rendering(p5, fn){
    * @property {CanvasRenderingContext2D|WebGLRenderingContext|WebGL2RenderingContext} drawingContext
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -22674,11 +21777,8 @@ function rendering(p5, fn){
    *
    *   describe("A white circle on a gray background. The circle's edges are shadowy.");
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -22697,8 +21797,6 @@ function rendering(p5, fn){
    *
    *   describe('A fiery sun drawn on a light blue background.');
    * }
-   * </code>
-   * </div>
    */
 }