p5 2.2.1-rc.0 → 2.2.1

package/dist/shape/attributes.js

@@ -1,4 +1,4 @@
-import { p as CORNER, t as CORNERS, u as RADIUS, v as CENTER, w as ROUND, x as SQUARE, y as PROJECT, z as BEVEL, I as MITER } from '../constants-DEJVKr9Z.js';
+import { p as CORNER, t as CORNERS, u as RADIUS, v as CENTER, w as ROUND, x as SQUARE, y as PROJECT, z as BEVEL, I as MITER } from '../constants-DQyACdzq.js';
 
 /**
  * @module Shape
@@ -41,8 +41,6 @@ function attributes(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -60,11 +58,8 @@ function attributes(p5, fn){
    *
    *   describe('A white circle with a gray circle at its center. Both circles have black outlines.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -82,8 +77,6 @@ function attributes(p5, fn){
    *
    *   describe('A white circle with a gray circle at its top-left corner. Both circles have black outlines.');
    * }
-   * </code>
-   * </div>
    */
   fn.ellipseMode = function(m) {
     // p5._validateParameters('ellipseMode', arguments);
@@ -112,8 +105,6 @@ function attributes(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let heart;
    *
    * async function setup() {
@@ -134,11 +125,8 @@ function attributes(p5, fn){
    *   image(heart, 20, 60, 16, 16);
    *   image(heart, 40, 60, 32, 32);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -148,11 +136,8 @@ function attributes(p5, fn){
    *
    *   describe('A white circle on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -165,8 +150,6 @@ function attributes(p5, fn){
    *
    *   describe('A pixelated white circle on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   fn.noSmooth = function() {
     if (!this._renderer.isP3D) {
@@ -209,8 +192,6 @@ function attributes(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -226,11 +207,8 @@ function attributes(p5, fn){
    *
    *   describe('A small gray square drawn at the top-left corner of a white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -246,11 +224,8 @@ function attributes(p5, fn){
    *
    *   describe('A small gray square drawn at the center of a white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -262,11 +237,8 @@ function attributes(p5, fn){
    *
    *   describe('A white square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -282,8 +254,6 @@ function attributes(p5, fn){
    *
    *   describe('A small gray square drawn at the center of a white square.');
    * }
-   * </code>
-   * </div>
    */
   fn.rectMode = function(m) {
     // p5._validateParameters('rectMode', arguments);
@@ -313,8 +283,6 @@ function attributes(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * let heart;
    *
    * async function setup() {
@@ -336,11 +304,8 @@ function attributes(p5, fn){
    *   image(heart, 20, 60, 16, 16);
    *   image(heart, 40, 60, 32, 32);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -350,11 +315,8 @@ function attributes(p5, fn){
    *
    *   describe('A white circle on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -367,8 +329,6 @@ function attributes(p5, fn){
    *
    *   describe('A pixelated white circle on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   fn.smooth = function() {
     if (!this._renderer.isP3D) {
@@ -395,8 +355,6 @@ function attributes(p5, fn){
    * @param  {(ROUND|SQUARE|PROJECT)} cap either ROUND, SQUARE, or PROJECT
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -420,8 +378,6 @@ function attributes(p5, fn){
    *     'Three horizontal lines. The top line has rounded ends, the middle line has squared ends, and the bottom line has longer, squared ends.'
    *   );
    * }
-   * </code>
-   * </div>
    */
   fn.strokeCap = function(cap) {
     // p5._validateParameters('strokeCap', arguments);
@@ -450,8 +406,6 @@ function attributes(p5, fn){
    * @param  {(MITER|BEVEL|ROUND)} join either MITER, BEVEL, or ROUND
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -471,11 +425,8 @@ function attributes(p5, fn){
    *
    *   describe('A right-facing arrowhead shape with a pointed tip in center of canvas.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -495,11 +446,8 @@ function attributes(p5, fn){
    *
    *   describe('A right-facing arrowhead shape with a flat tip in center of canvas.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -519,8 +467,6 @@ function attributes(p5, fn){
    *
    *   describe('A right-facing arrowhead shape with a rounded tip in center of canvas.');
    * }
-   * </code>
-   * </div>
    */
   fn.strokeJoin = function(join) {
     // p5._validateParameters('strokeJoin', arguments);
@@ -545,8 +491,6 @@ function attributes(p5, fn){
    * @param  {Number} weight the weight of the stroke (in pixels).
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -565,11 +509,8 @@ function attributes(p5, fn){
    *
    *   describe('Three horizontal black lines. The top line is thin, the middle is medium, and the bottom is thick.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -586,8 +527,6 @@ function attributes(p5, fn){
    *
    *   describe('Two horizontal black lines. The top line is thin and the bottom is five times thicker than the top.');
    * }
-   * </code>
-   * </div>
    */
   fn.strokeWeight = function(w) {
     // p5._validateParameters('strokeWeight', arguments);

package/dist/shape/curves.js

@@ -39,8 +39,6 @@ function curves(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -72,11 +70,8 @@ function curves(p5, fn){
    *     'A gray square with three curves. A black s-curve has two straight, red lines that extend from its ends. The endpoints of all the curves are marked with dots.'
    *   );
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Click the mouse near the red dot in the top-left corner
    * // and drag to change the curve's shape.
    *
@@ -137,11 +132,8 @@ function curves(p5, fn){
    *     y2 = mouseY;
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -156,11 +148,8 @@ function curves(p5, fn){
    *
    *   describe('A red balloon in a blue sky.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -180,10 +169,7 @@ function curves(p5, fn){
    *   // Draw the balloon string.
    *   line(0, 0, 0, 0, 20, 0);
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method bezier
    * @param  {Number} x1
@@ -248,8 +234,6 @@ function curves(p5, fn){
    * @return {Number} coordinate of the point on the curve.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -291,11 +275,8 @@ function curves(p5, fn){
    *
    *   describe('A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -328,8 +309,6 @@ function curves(p5, fn){
    *   fill(255);
    *   circle(x, y, 5);
    * }
-   * </code>
-   * </div>
    */
   fn.bezierPoint = function(a, b, c, d, t) {
     // p5._validateParameters('bezierPoint', arguments);
@@ -377,8 +356,6 @@ function curves(p5, fn){
    * @return {Number} coordinate of a point on the tangent line.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -446,8 +423,6 @@ function curves(p5, fn){
    *     'A black s-curve on a gray square. The endpoints and center of the curve are marked with white circles. Red tangent lines extend from the white circles.'
    *   );
    * }
-   * </code>
-   * </div>
    */
   fn.bezierTangent = function(a, b, c, d, t) {
     // p5._validateParameters('bezierTangent', arguments);
@@ -489,9 +464,6 @@ function curves(p5, fn){
    * @chainable
    *
    * @example
-   *
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(200, 200);
    *   background(240);
@@ -509,30 +481,27 @@ function curves(p5, fn){
    *
    *   describe('A black spline passes smoothly through four points');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(200, 200);
    *   background(245);
-   * 
+   *
    *   // Ensure the curve includes both end spans p0->p1 and p2->p3
    *   splineProperty('ends', INCLUDE);
-   * 
+   *
    *   // Control / anchor points
    *   const p0 = createVector(30, 160);
    *   const p1 = createVector(60, 40);
    *   const p2 = createVector(140, 40);
    *   const p3 = createVector(170, 160);
-   * 
+   *
    *   // Draw the spline that passes through ALL four points (INCLUDE)
    *   noFill();
    *   stroke(0);
    *   strokeWeight(2);
    *   spline(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
-   * 
+   *
    *   // Draw markers + labels
    *   fill(255);
    *   stroke(0);
@@ -541,21 +510,18 @@ function curves(p5, fn){
    *   circle(p1.x, p1.y, r);
    *   circle(p2.x, p2.y, r);
    *   circle(p3.x, p3.y, r);
-   * 
+   *
    *   noStroke();
    *   fill(0);
    *   text('p0', p0.x - 14, p0.y + 14);
    *   text('p1', p1.x - 14, p1.y - 8);
    *   text('p2', p2.x + 4, p2.y - 8);
    *   text('p3', p3.x + 4, p3.y + 14);
-   * 
+   *
    *   describe('A black Catmull-Rom spline passes through p0, p1, p2, p3 with endpoints included.');
    * }
-   * </code>
-   * </div>
-   * 
-   * <div>
-   * <code>
+   *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -590,11 +556,8 @@ function curves(p5, fn){
    *     'A gray square with a 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>
    *
-   * <div>
-   * <code>
+   * @example
    * let x1 = 5;
    * let y1 = 26;
    * let isChanging = false;
@@ -655,11 +618,8 @@ function curves(p5, fn){
    *     y1 = mouseY;
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -677,11 +637,8 @@ function curves(p5, fn){
    *
    *   describe('A red balloon in a blue sky.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -704,10 +661,7 @@ function curves(p5, fn){
    *   // Draw the balloon string.
    *   line(0, 10, 0, 0, 30, 0);
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method spline
    * @param  {Number} x1
@@ -767,8 +721,6 @@ function curves(p5, fn){
    * @return {Number} coordinate of a point on the curve.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -809,11 +761,8 @@ function curves(p5, fn){
    *
    *   describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -846,47 +795,44 @@ function curves(p5, fn){
    *   fill(255);
    *   circle(x, y, 5);
    * }
-   * </code>
-   * </div>
-   * 
-   * <div>
-   * <code>
+   *
+   * @example
    * let p0, p1, p2, p3;
-   * 
+   *
    * function setup() {
    *   createCanvas(200, 200);
    *   splineProperty('ends', INCLUDE); // make endpoints part of the curve
-   * 
+   *
    *   // Four points forming a gentle arch
    *   p0 = createVector(30, 160);
    *   p1 = createVector(60, 50);
    *   p2 = createVector(140, 50);
    *   p3 = createVector(170, 160);
-   * 
+   *
    *   describe('Black spline through p0–p3. A red dot marks the location at parameter t on p1->p2 using splinePoint.');
    * }
-   * 
+   *
    * function draw() {
    *   background(245);
-   * 
+   *
    *   // Draw the spline for context
    *   noFill();
    *   stroke(0);
    *   strokeWeight(2);
    *   spline(p0.x, p0.y, p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
-   * 
+   *
    *   // Map mouse X to t in [0, 1] (span p1->p2)
    *   let t = constrain(map(mouseX, 0, width, 0, 1), 0, 1);
-   * 
+   *
    *   // Evaluate the curve point by axis (splinePoint works one axis at a time)
    *   let x = splinePoint(p0.x, p1.x, p2.x, p3.x, t);
    *   let y = splinePoint(p0.y, p1.y, p2.y, p3.y, t);
-   * 
+   *
    *   // Marker at the evaluated position
    *   noStroke();
    *   fill('red');
    *   circle(x, y, 8);
-   * 
+   *
    *   // Draw control/anchor points
    *   stroke(0);
    *   strokeWeight(1);
@@ -896,7 +842,7 @@ function curves(p5, fn){
    *   circle(p1.x, p1.y, r);
    *   circle(p2.x, p2.y, r);
    *   circle(p3.x, p3.y, r);
-   * 
+   *
    *   // Labels + UI hint
    *   noStroke();
    *   fill(20);
@@ -907,11 +853,7 @@ function curves(p5, fn){
    *   text('p3', p3.x + 4, p3.y + 14);
    *   text('t = ' + nf(t, 1, 2) + ' (p1→p2)', 8, 16);
    * }
-   * </code>
-   * </div>
-   * 
    */
-
   fn.splinePoint = function(a, b, c, d, t) {
     const s = this._renderer.states.splineProperties.tightness,
       t3 = t * t * t,
@@ -954,8 +896,6 @@ function curves(p5, fn){
    * @return {Number} coordinate of a point on the tangent line.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(120, 120);
    *   describe('A black spline on a gray canvas. A red dot moves along the curve on its own. A short line shows the tangent direction at the dot.');
@@ -994,11 +934,8 @@ function curves(p5, fn){
    *   fill('red');
    *   circle(px, py, 7);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1064,8 +1001,6 @@ function curves(p5, fn){
    *     'A black curve on a gray square. A white circle moves back and forth along the curve.'
    *   );
    * }
-   * </code>
-   * </div>
    */
   fn.splineTangent = function(a, b, c, d, t) {
     const s = this._renderer.states.splineProperties.tightness,