p5 2.2.1-rc.0 → 2.2.1

package/dist/math/p5.Vector.js

@@ -1,4 +1,4 @@
-import { q as TWO_PI } from '../constants-DEJVKr9Z.js';
+import { q as TWO_PI } from '../constants-DQyACdzq.js';
 
 /**
  * @module Math
@@ -261,16 +261,13 @@ class Vector {
    * @return {String} string representation of the vector.
    *
    * @example
-   * <div class = "norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   let v = createVector(20, 30);
    *
    *   // Prints 'vector[20, 30, 0]'.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    */
   toString() {
     return `vector[${this._values.join(', ')}]`;
@@ -293,8 +290,6 @@ class Vector {
    * @param {Number} [z] z component of the vector.
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -326,8 +321,6 @@ class Vector {
    *
    *   describe('Four black dots arranged in a square on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param {p5.Vector|Number[]} value vector to set.
@@ -351,8 +344,6 @@ class Vector {
    * @return {p5.Vector} copy of the <a href="#/p5.Vector">p5.Vector</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100 ,100);
    *
@@ -370,8 +361,6 @@ class Vector {
    *
    *   describe('A black point drawn in the middle of a gray square.');
    * }
-   * </code>
-   * </div>
    */
   copy() {
     if (this.isPInst) {
@@ -404,8 +393,6 @@ class Vector {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -437,11 +424,8 @@ class Vector {
    *
    *   describe('Four black dots arranged in a square on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -465,11 +449,8 @@ class Vector {
    *
    *   describe('Three black dots in a diagonal line from top left to bottom right.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -508,8 +489,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {p5.Vector|Number[]} value The vector to add
@@ -550,8 +529,7 @@ class Vector {
    * @chainable
    *
    * @example
-   * <div class='norender'>
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(3, 4, 5);
@@ -562,11 +540,9 @@ class Vector {
    *   // Prints 'p5.Vector Object : [1, 0, 1]'.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(3, 4, 5);
@@ -577,11 +553,9 @@ class Vector {
    *   // Prints 'p5.Vector Object : [1, 1, 5]'.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(3, 4, 5);
@@ -592,11 +566,9 @@ class Vector {
    *   // Prints 'p5.Vector Object : [1, 1, 1]'.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v1 = createVector(3, 4, 5);
@@ -608,11 +580,9 @@ class Vector {
    *   // Prints 'p5.Vector Object : [1, 1, 1]'.
    *   print(v1.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class='norender'>
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(3, 4, 5);
@@ -624,11 +594,9 @@ class Vector {
    *   // Prints 'p5.Vector Object : [1, 1, 1]'.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v1 = createVector(3, 4, 5);
@@ -640,8 +608,6 @@ class Vector {
    *   // Prints 'p5.Vector Object : [1, 1, 1]'.
    *   print(v3.toString());
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param {p5.Vector | Number[]}  value  divisor vector.
@@ -723,8 +689,6 @@ class Vector {
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -756,11 +720,8 @@ class Vector {
    *
    *   describe('Four black dots arranged in a square on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -781,11 +742,8 @@ class Vector {
    *
    *   describe('Three black dots in a diagonal line from top left to bottom right.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -824,8 +782,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {p5.Vector|Number[]} value the vector to subtract
@@ -868,8 +824,6 @@ class Vector {
    * @param  {Number} n The number to multiply with the vector
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -889,11 +843,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   strokeWeight(5);
    *
@@ -908,11 +859,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -933,11 +881,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -958,11 +903,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -985,11 +927,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1024,8 +963,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {Number} x number to multiply with the x component of the vector.
@@ -1102,8 +1039,6 @@ class Vector {
    * @param  {Number}    n The number to divide the vector by
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1123,11 +1058,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1147,11 +1079,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1172,11 +1101,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1197,11 +1123,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1224,11 +1147,8 @@ class Vector {
    *
    *   describe('Two black dots drawn on a gray square. One dot is in the top left corner and the other is in the bottom center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function draw() {
    *   background(200);
    *
@@ -1259,8 +1179,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {Number} x number to divide with the x component of the vector.
@@ -1341,8 +1259,6 @@ class Vector {
    * @return {Number} magnitude of the vector.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1364,8 +1280,6 @@ class Vector {
    *
    *   describe('A diagonal black line extends from the top left corner of a gray square. The number 50 is written at the end of the line.');
    * }
-   * </code>
-   * </div>
    */
   mag() {
     return Math.sqrt(this.magSq());
@@ -1376,8 +1290,6 @@ class Vector {
    *
    * @return {Number} squared magnitude of the vector.
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1399,8 +1311,6 @@ class Vector {
    *
    *   describe('A diagonal black line extends from the top left corner of a gray square. The number 2500 is written at the end of the line.');
    * }
-   * </code>
-   * </div>
    */
   magSq() {
     return this._values.reduce(
@@ -1433,8 +1343,7 @@ class Vector {
    * @return {Number}     dot product.
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v1 = createVector(3, 4);
@@ -1446,11 +1355,9 @@ class Vector {
    *   // Prints "9" to the console.
    *   print(dp);
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v1 = createVector(1, 0);
@@ -1462,11 +1369,8 @@ class Vector {
    *   // Prints "0" to the console.
    *   print(dp);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1506,8 +1410,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {p5.Vector} v <a href="#/p5.Vector">p5.Vector</a> to be dotted.
@@ -1536,8 +1438,7 @@ class Vector {
    * @return {p5.Vector}   cross product as a <a href="#/p5.Vector">p5.Vector</a>.
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v1 = createVector(1, 0);
@@ -1549,11 +1450,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [0, 0, 4]" to the console.
    *   print(cp.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v1 = createVector(1, 0);
@@ -1565,8 +1464,6 @@ class Vector {
    *   // Prints "p5.Vector Object : [0, 0, 4]" to the console.
    *   print(cp.toString());
    * }
-   * </code>
-   * </div>
    */
   cross(v) {
     const x = this.y * v.z - this.z * v.y;
@@ -1596,8 +1493,7 @@ class Vector {
    * @return {Number}      distance.
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1613,11 +1509,9 @@ class Vector {
    *   // Prints "1.414..." to the console.
    *   print(d);
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1633,11 +1527,8 @@ class Vector {
    *   // Prints "1.414..." to the console.
    *   print(d);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1683,8 +1574,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   dist(v) {
     return v.copy().sub(this).mag();
@@ -1701,8 +1590,7 @@ class Vector {
    * @return {p5.Vector} normalized <a href="#/p5.Vector">p5.Vector</a>.
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1717,11 +1605,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1738,11 +1624,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [0.445..., 0.890..., 0.089...]" to the console.
    *   print(v1.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1787,8 +1670,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   normalize() {
     const len = this.mag();
@@ -1809,8 +1690,7 @@ class Vector {
    * @chainable
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(10, 20, 2);
@@ -1821,11 +1701,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v0 = createVector(10, 20, 2);
@@ -1836,11 +1714,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [2.227..., 4.454..., 0.445...]" to the console.
    *   print(v1.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1883,8 +1758,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   limit(max) {
     const mSq = this.magSq();
@@ -1906,8 +1779,7 @@ class Vector {
    * @chainable
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(3, 4, 0);
@@ -1921,11 +1793,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [6, 8, 0]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v0 = createVector(3, 4, 0);
@@ -1939,11 +1809,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [6, 8, 0]" to the console.
    *   print(v1.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1980,8 +1847,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   setMag(n) {
     return this.normalize().mult(n);
@@ -2003,8 +1868,7 @@ class Vector {
    * @return {Number} angle of rotation.
    *
    * @example
-   * <div class = "norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(1, 1);
@@ -2018,11 +1882,9 @@ class Vector {
    *   // Prints "45" to the console.
    *   print(v.heading());
    * }
-   * </code>
-   * </div>
    *
-   * <div class = "norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(1, 1);
@@ -2036,11 +1898,8 @@ class Vector {
    *   // Prints "45" to the console.
    *   print(p5.Vector.heading(v));
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2085,8 +1944,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   heading() {
     const h = Math.atan2(this.y, this.x);
@@ -2107,8 +1964,7 @@ class Vector {
    * @param  {Number}    angle angle of rotation.
    * @chainable
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(0, 1);
@@ -2122,11 +1978,9 @@ class Vector {
    *   // Prints "3.141..." to the console.
    *   print(v.heading());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Use degrees.
    *   angleMode(DEGREES);
@@ -2143,11 +1997,8 @@ class Vector {
    *   // Prints "180" to the console.
    *   print(v.heading());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2185,8 +2036,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   setHeading(a) {
     if (this.isPInst) a = this._toRadians(a);
@@ -2213,8 +2062,7 @@ class Vector {
    * @param  {Number}    angle angle of rotation.
    * @chainable
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(1, 0);
@@ -2228,11 +2076,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [0, 1, 0]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Use degrees.
    *   angleMode(DEGREES);
@@ -2249,11 +2095,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [0, 1, 0]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v0 = createVector(1, 0);
@@ -2266,11 +2110,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [0, 1, 0]" to the console.
    *   print(v1.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Use degrees.
    *   angleMode(DEGREES);
@@ -2287,11 +2129,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [0, 1, 0]" to the console.
    *   print(v1.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let v0;
    * let v1;
    *
@@ -2329,8 +2168,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   rotate(a) {
     let newHeading = this.heading() + a;
@@ -2355,8 +2192,7 @@ class Vector {
    * @param  {p5.Vector}    value x, y, and z components of a <a href="#/p5.Vector">p5.Vector</a>.
    * @return {Number}       angle between the vectors.
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v0 = createVector(1, 0);
@@ -2368,11 +2204,9 @@ class Vector {
    *   // Prints "-1.570..." to the console.
    *   print(v1.angleBetween(v0));
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Use degrees.
    *   angleMode(DEGREES);
@@ -2386,11 +2220,9 @@ class Vector {
    *   // Prints "-90" to the console.
    *   print(v1.angleBetween(v0));
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v0 = createVector(1, 0);
@@ -2402,11 +2234,9 @@ class Vector {
    *   // Prints "-1.570..." to the console.
    *   print(p5.Vector.angleBetween(v1, v0));
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Use degrees.
    *   angleMode(DEGREES);
@@ -2421,11 +2251,8 @@ class Vector {
    *   // Prints "-90" to the console.
    *   print(p5.Vector.angleBetween(v1, v0));
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2474,8 +2301,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   angleBetween(v) {
     const magSqMult = this.magSq() * v.magSq();
@@ -2514,8 +2339,7 @@ class Vector {
    * @chainable
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v0 = createVector(1, 1, 1);
@@ -2527,11 +2351,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [2, 2, 2]" to the console.
    *   print(v0.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(1, 1, 1);
@@ -2542,11 +2364,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [2, 2, 2]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v0 = createVector(1, 1, 1);
@@ -2558,11 +2378,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [2, 2, 2]" to the console.
    *   print(v2.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2603,8 +2420,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param  {p5.Vector} v  <a href="#/p5.Vector">p5.Vector</a> to lerp toward.
@@ -2644,8 +2459,7 @@ class Vector {
    * @return {p5.Vector}
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v0 = createVector(3, 0);
@@ -2674,11 +2488,9 @@ class Vector {
    *   // Prints "0.785..." to the console.
    *   print(v0.heading());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v0 = createVector(3, 0);
@@ -2707,11 +2519,8 @@ class Vector {
    *   // Prints "0.785..." to the console.
    *   print(v3.heading());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2753,8 +2562,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   slerp(v, amt) {
     // edge cases.
@@ -2840,8 +2647,7 @@ class Vector {
    *                                    to reflect about.
    * @chainable
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a normal vector.
    *   let n = createVector(0, 1);
@@ -2854,11 +2660,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [4, -6, 0]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a normal vector.
    *   let n = createVector(0, 1);
@@ -2872,11 +2676,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [4, -6, 0]" to the console.
    *   print(v1.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2927,8 +2728,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   reflect(surfaceNormal) {
     const surfaceNormalCopy = Vector.normalize(surfaceNormal);
@@ -2940,8 +2739,7 @@ class Vector {
    *
    * @return {Number[]} array with the vector's components.
    * @example
-   * <div class = "norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = createVector(20, 30);
@@ -2949,8 +2747,6 @@ class Vector {
    *   // Prints "[20, 30, 0]" to the console.
    *   print(v.array());
    * }
-   * </code>
-   * </div>
    */
   array() {
     return [this.x || 0, this.y || 0, this.z || 0];
@@ -2977,8 +2773,7 @@ class Vector {
    * @param {Number} [z] z component of the vector.
    * @return {Boolean} whether the vectors are equal.
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v0 = createVector(10, 20, 30);
@@ -2991,11 +2786,9 @@ class Vector {
    *   // Prints "false" to the console.
    *   print(v0.equals(v2));
    * }
-   * </code>
-   * </div>
    *
-   * <div class = "norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v0 = createVector(5, 10, 20);
@@ -3008,11 +2801,9 @@ class Vector {
    *   // Prints "false" to the console.
    *   print(v0.equals(v2.x, v2.y, v2.z));
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create p5.Vector objects.
    *   let v0 = createVector(10, 20, 30);
@@ -3025,8 +2816,6 @@ class Vector {
    *   // Prints "false" to the console.
    *   print(p5.Vector.equals(v0, v2));
    * }
-   * </code>
-   * </div>
    */
   /**
    * @param {p5.Vector|Array} value vector to compare.
@@ -3088,8 +2877,7 @@ class Vector {
    * @return {p5.Vector}       new <a href="#/p5.Vector">p5.Vector</a> object.
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = p5.Vector.fromAngle(0);
@@ -3097,11 +2885,9 @@ class Vector {
    *   // Prints "p5.Vector Object : [1, 0, 0]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div class="norender">
-   * <code>
+   * @example
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = p5.Vector.fromAngle(0, 30);
@@ -3109,11 +2895,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [30, 0, 0]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -3146,8 +2929,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   static fromAngle(angle, length) {
     if (typeof length === 'undefined') {
@@ -3167,8 +2948,7 @@ class Vector {
    * @return {p5.Vector}          new <a href="#/p5.Vector">p5.Vector</a> object.
    *
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = p5.Vector.fromAngles(0, 0);
@@ -3176,11 +2956,8 @@ class Vector {
    *   // Prints "p5.Vector Object : [0, -1, 0]" to the console.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -3208,8 +2985,6 @@ class Vector {
    *   // Draw the sphere.
    *   sphere(35);
    * }
-   * </code>
-   * </div>
    */
   static fromAngles(theta, phi, length) {
     if (typeof length === 'undefined') {
@@ -3233,8 +3008,7 @@ class Vector {
    * @static
    * @return {p5.Vector} new <a href="#/p5.Vector">p5.Vector</a> object.
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = p5.Vector.random2D();
@@ -3243,11 +3017,8 @@ class Vector {
    *   // where x and y are small random numbers.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -3287,8 +3058,6 @@ class Vector {
    *   triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   static random2D() {
     return this.fromAngle(Math.random() * TWO_PI);
@@ -3300,8 +3069,7 @@ class Vector {
    * @static
    * @return {p5.Vector} new <a href="#/p5.Vector">p5.Vector</a> object.
    * @example
-   * <div class="norender">
-   * <code>
+   * // META:norender
    * function setup() {
    *   // Create a p5.Vector object.
    *   let v = p5.Vector.random3D();
@@ -3310,8 +3078,6 @@ class Vector {
    *   // where x, y, and z are small random numbers.
    *   print(v.toString());
    * }
-   * </code>
-   * </div>
    */
   static random3D() {
     const angle = Math.random() * TWO_PI;
@@ -3840,8 +3606,6 @@ function vector(p5, fn) {
    * @param {Number} [y] y component of the vector.
    * @param {Number} [z] z component of the vector.
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -3862,11 +3626,8 @@ function vector(p5, fn) {
    *
    *   describe('Two black dots on a gray square, one at the top left and the other at the bottom right.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let pos;
    * let vel;
    *
@@ -3896,8 +3657,6 @@ function vector(p5, fn) {
    *   strokeWeight(5);
    *   point(pos);
    * }
-   * </code>
-   * </div>
    */
   p5.Vector = Vector;