p5 2.0.1 → 2.0.3

package/package.json

@@ -23,7 +23,7 @@
       "node ./utils/sample-linter.mjs"
     ]
   },
-  "version": "2.0.1",
+  "version": "2.0.3",
   "dependencies": {
     "@davepagurek/bezier-path": "^0.0.2",
     "@japont/unicode-range": "^1.0.0",
@@ -51,7 +51,6 @@
     "@vitest/browser": "^2.1.5",
     "all-contributors-cli": "^6.19.0",
     "concurrently": "^8.2.2",
-    "dayjs": "^1.11.10",
     "documentation": "^14.0.3",
     "eslint": "^8.54.0",
     "glob": "^11.0.1",

package/types/accessibility/color_namer.d.ts

@@ -0,0 +1,8 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+
+declare module 'p5' {
+}
+
+export default function color_namer(p5: any, fn: any): void;

package/types/accessibility/describe.d.ts

@@ -0,0 +1,184 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+
+declare module 'p5' {
+/**
+ * Creates a screen reader-accessible description of the canvas.The first parameter, `text`, is the description of the canvas.The second parameter, `display`, is optional. It determines how the
+ * description is displayed. If `LABEL` is passed, as in
+ * `describe('A description.', LABEL)`, the description will be visible in
+ * a div element next to the canvas. If `FALLBACK` is passed, as in
+ * `describe('A description.', FALLBACK)`, the description will only be
+ * visible to screen readers. This is the default mode.Read
+ * Writing accessible canvas descriptions
+ * to learn more about making sketches accessible.
+ *
+ * @param description of the canvas.
+ * @param either LABEL or FALLBACK.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * background('pink');
+ * 
+ * // Draw a heart.
+ * fill('red');
+ * noStroke();
+ * circle(67, 67, 20);
+ * circle(83, 67, 20);
+ * triangle(91, 73, 75, 95, 59, 73);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A pink square with a red heart in the bottom-right corner.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * background('pink');
+ * 
+ * // Draw a heart.
+ * fill('red');
+ * noStroke();
+ * circle(67, 67, 20);
+ * circle(83, 67, 20);
+ * triangle(91, 73, 75, 95, 59, 73);
+ * 
+ * // Add a general description of the canvas
+ * // and display it for debugging.
+ * describe('A pink square with a red heart in the bottom-right corner.', LABEL);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * 
+ * function setup(){
+ * createCanvas(100, 100);
+ * };
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // The expression
+ * // frameCount % 100
+ * // causes x to increase from 0
+ * // to 99, then restart from 0.
+ * let x = frameCount % 100;
+ * 
+ * // Draw the circle.
+ * fill(0, 255, 0);
+ * circle(x, 50, 40);
+ * 
+ * // Add a general description of the canvas.
+ * describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * 
+ * function setup(){
+ * createCanvas(100, 100);
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // The expression
+ * // frameCount % 100
+ * // causes x to increase from 0
+ * // to 99, then restart from 0.
+ * let x = frameCount % 100;
+ * 
+ * // Draw the circle.
+ * fill(0, 255, 0);
+ * circle(x, 50, 40);
+ * 
+ * // Add a general description of the canvas
+ * // and display it for debugging.
+ * describe(`A green circle at (${x}, 50) moves from left to right on a gray square.`, LABEL);
+ * }
+ * </code>
+ * </div>
+ */
+function describe(text: string, display?: FALLBACK | LABEL): void;
+
+/**
+ * Creates a screen reader-accessible description of elements in the canvas.Elements are shapes or groups of shapes that create meaning together. For
+ * example, a few overlapping circles could make an "eye" element.The first parameter, `name`, is the name of the element.The second parameter, `text`, is the description of the element.The third parameter, `display`, is optional. It determines how the
+ * description is displayed. If `LABEL` is passed, as in
+ * `describe('A description.', LABEL)`, the description will be visible in
+ * a div element next to the canvas. Using `LABEL` creates unhelpful
+ * duplicates for screen readers. Only use `LABEL` during development. If
+ * `FALLBACK` is passed, as in `describe('A description.', FALLBACK)`, the
+ * description will only be visible to screen readers. This is the default
+ * mode.Read
+ * Writing accessible canvas descriptions
+ * to learn more about making sketches accessible.
+ *
+ * @param name of the element.
+ * @param description of the element.
+ * @param either LABEL or FALLBACK.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * background('pink');
+ * 
+ * // Describe the first element
+ * // and draw it.
+ * describeElement('Circle', 'A yellow circle in the top-left corner.');
+ * noStroke();
+ * fill('yellow');
+ * circle(25, 25, 40);
+ * 
+ * // Describe the second element
+ * // and draw it.
+ * describeElement('Heart', 'A red heart in the bottom-right corner.');
+ * fill('red');
+ * circle(66.6, 66.6, 20);
+ * circle(83.2, 66.6, 20);
+ * triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red heart and yellow circle over a pink background.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * background('pink');
+ * 
+ * // Describe the first element
+ * // and draw it. Display the
+ * // description for debugging.
+ * describeElement('Circle', 'A yellow circle in the top-left corner.', LABEL);
+ * noStroke();
+ * fill('yellow');
+ * circle(25, 25, 40);
+ * 
+ * // Describe the second element
+ * // and draw it. Display the
+ * // description for debugging.
+ * describeElement('Heart', 'A red heart in the bottom-right corner.', LABEL);
+ * fill('red');
+ * circle(66.6, 66.6, 20);
+ * circle(83.2, 66.6, 20);
+ * triangle(91.2, 72.6, 75, 95, 58.6, 72.6);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red heart and yellow circle over a pink background.');
+ * }
+ * </code>
+ * </div>
+ */
+function describeElement(name: string, text: string, display?: FALLBACK | LABEL): void;
+
+}
+
+export default function describe(p5: any, fn: any): void;

package/types/accessibility/gridOutput.d.ts

@@ -0,0 +1,8 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+
+declare module 'p5' {
+}
+
+export default function gridOutput(p5: any, fn: any): void;

package/types/accessibility/outputs.d.ts

@@ -0,0 +1,235 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+
+declare module 'p5' {
+/**
+ * Creates a screen reader-accessible description of shapes on the canvas.`textOutput()` adds a general description, list of shapes, and
+ * table of shapes to the web page. The general description includes the
+ * canvas size, canvas color, and number of shapes. For example,
+ * `Your output is a, 100 by 100 pixels, gray canvas containing the following 2 shapes:`.A list of shapes follows the general description. The list describes the
+ * color, location, and area of each shape. For example,
+ * `a red circle at middle covering 3% of the canvas`. Each shape can be
+ * selected to get more details.`textOutput()` uses its table of shapes as a list. The table describes the
+ * shape, color, location, coordinates and area. For example,
+ * `red circle location = middle area = 3%`. This is different from
+ * gridOutput(), which uses its table as a grid.The `display` parameter is optional. It determines how the description is
+ * displayed. If `LABEL` is passed, as in `textOutput(LABEL)`, the description
+ * will be visible in a div element next to the canvas. Using `LABEL` creates
+ * unhelpful duplicates for screen readers. Only use `LABEL` during
+ * development. If `FALLBACK` is passed, as in `textOutput(FALLBACK)`, the
+ * description will only be visible to screen readers. This is the default
+ * mode.Read
+ * Writing accessible canvas descriptions
+ * to learn more about making sketches accessible.
+ *
+ * @param either FALLBACK or LABEL.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * // Add the text description.
+ * textOutput();
+ * 
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * // Add the text description and
+ * // display it for debugging.
+ * textOutput(LABEL);
+ * 
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * 
+ * function setup(){
+ * createCanvas(100, 100);
+ * }
+ * 
+ * function draw() {
+ * // Add the text description.
+ * textOutput();
+ * 
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * 
+ * function setup(){
+ * createCanvas(100, 100);
+ * }
+ * 
+ * function draw() {
+ * // Add the text description and
+ * // display it for debugging.
+ * textOutput(LABEL);
+ * 
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ * </code>
+ * </div>
+ */
+function textOutput(display?: FALLBACK | LABEL): void;
+
+/**
+ * Creates a screen reader-accessible description of shapes on the canvas.`gridOutput()` adds a general description, table of shapes, and list of
+ * shapes to the web page. The general description includes the canvas size,
+ * canvas color, and number of shapes. For example,
+ * `gray canvas, 100 by 100 pixels, contains 2 shapes:  1 circle 1 square`.`gridOutput()` uses its table of shapes as a grid. Each shape in the grid
+ * is placed in a cell whose row and column correspond to the shape's location
+ * on the canvas. The grid cells describe the color and type of shape at that
+ * location. For example, `red circle`. These descriptions can be selected
+ * individually to get more details. This is different from
+ * textOutput(), which uses its table as a list.A list of shapes follows the table. The list describes the color, type,
+ * location, and area of each shape. For example,
+ * `red circle, location = middle, area = 3 %`.The `display` parameter is optional. It determines how the description is
+ * displayed. If `LABEL` is passed, as in `gridOutput(LABEL)`, the description
+ * will be visible in a div element next to the canvas. Using `LABEL` creates
+ * unhelpful duplicates for screen readers. Only use `LABEL` during
+ * development. If `FALLBACK` is passed, as in `gridOutput(FALLBACK)`, the
+ * description will only be visible to screen readers. This is the default
+ * mode.Read
+ * Writing accessible canvas descriptions
+ * to learn more about making sketches accessible.
+ *
+ * @param either FALLBACK or LABEL.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * // Add the grid description.
+ * gridOutput();
+ * 
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * // Add the grid description and
+ * // display it for debugging.
+ * gridOutput(LABEL);
+ * 
+ * // Draw a couple of shapes.
+ * background(200);
+ * fill(255, 0, 0);
+ * circle(20, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle and a blue square on a gray background.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * }
+ * 
+ * function draw() {
+ * // Add the grid description.
+ * gridOutput();
+ * 
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * 
+ * function setup(){
+ * createCanvas(100, 100);
+ * }
+ * 
+ * function draw() {
+ * // Add the grid description and
+ * // display it for debugging.
+ * gridOutput(LABEL);
+ * 
+ * // Draw a moving circle.
+ * background(200);
+ * let x = frameCount * 0.1;
+ * fill(255, 0, 0);
+ * circle(x, 20, 20);
+ * fill(0, 0, 255);
+ * square(50, 50, 50);
+ * 
+ * // Add a general description of the canvas.
+ * describe('A red circle moves from left to right above a blue square.');
+ * }
+ * </code>
+ * </div>
+ */
+function gridOutput(display?: FALLBACK | LABEL): void;
+
+}
+
+export default function outputs(p5: any, fn: any): void;

package/types/accessibility/textOutput.d.ts

@@ -0,0 +1,8 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+
+declare module 'p5' {
+}
+
+export default function textOutput(p5: any, fn: any): void;

package/types/color/color_conversion.d.ts

@@ -0,0 +1,47 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+
+declare module 'p5' {
+/**
+ * Convert an HSBA array to HSLA.
+ *
+ */
+function _hsbaToHSLA(hsba: any): void;
+
+/**
+ * Convert an HSBA array to RGBA.
+ *
+ */
+function _hsbaToRGBA(hsba: any): void;
+
+/**
+ * Convert an HSLA array to HSBA.
+ *
+ */
+function _hslaToHSBA(hsla: any): void;
+
+/**
+ * Convert an HSLA array to RGBA.We need to change basis from HSLA to something that can be more easily be
+ * projected onto RGBA. We will choose hue and brightness as our first two
+ * components, and pick a convenient third one ('zest') so that we don't need
+ * to calculate formal HSBA saturation.
+ *
+ */
+function _hslaToRGBA(hsla: any): void;
+
+/**
+ * Convert an RGBA array to HSBA.
+ *
+ */
+function _rgbaToHSBA(rgba: any): void;
+
+/**
+ * Convert an RGBA array to HSLA.
+ *
+ */
+function _rgbaToHSLA(rgba: any): void;
+
+}
+
+export default function color_conversion(p5: any, fn: any): void;