p5 2.2.1-rc.0 → 2.2.1

package/dist/data/local_storage.js

@@ -34,8 +34,6 @@ function storage(p5, fn){
    * @param {String|Number|Boolean|Object|Array} value value to be stored.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -64,11 +62,8 @@ function storage(p5, fn){
    *   // Display the score.
    *   text(`${name}: ${score}`, 50, 50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -90,9 +85,8 @@ function storage(p5, fn){
    *   // Draw the circle.
    *   circle(p.x, p.y, 30);
    * }
-   * </code>
-   * </div>
    *
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -117,8 +111,6 @@ function storage(p5, fn){
    *   // Draw the circle.
    *   circle(50, 50, 30);
    * }
-   * </code>
-   * </div>
    */
   fn.storeItem = function(key, value) {
     if (typeof key !== 'string') {
@@ -186,8 +178,6 @@ function storage(p5, fn){
    * @return {String|Number|Boolean|Object|Array} stored item.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -216,11 +206,8 @@ function storage(p5, fn){
    *   // Display the score.
    *   text(`${name}: ${score}`, 50, 50);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -242,11 +229,8 @@ function storage(p5, fn){
    *   // Draw the circle.
    *   circle(p.x, p.y, 30);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -271,8 +255,6 @@ function storage(p5, fn){
    *   // Draw the circle.
    *   circle(50, 50, 30);
    * }
-   * </code>
-   * </div>
    */
   fn.getItem = function(key) {
     let value = localStorage.getItem(key);
@@ -320,8 +302,6 @@ function storage(p5, fn){
    * @for p5
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to clear localStorage.
    *
    * function setup() {
@@ -359,8 +339,6 @@ function storage(p5, fn){
    * function doubleClicked() {
    *   clearStorage();
    * }
-   * </code>
-   * </div>
    */
   fn.clearStorage = function () {
     const keys = Object.keys(localStorage);
@@ -394,8 +372,6 @@ function storage(p5, fn){
    * @for p5
    *
    * @example
-   * <div>
-   * <code>
    * // Double-click to remove an item from localStorage.
    *
    * function setup() {
@@ -433,8 +409,6 @@ function storage(p5, fn){
    * function doubleClicked() {
    *   removeItem('score');
    * }
-   * </code>
-   * </div>
    */
   fn.removeItem = function(key) {
     if (typeof key !== 'string') {

package/dist/dom/dom.js

@@ -1,10 +1,10 @@
 import { Element } from './p5.Element.js';
 import { MediaElement } from './p5.MediaElement.js';
 import { File } from './p5.File.js';
-import '../creating_reading-CgHCHxqN.js';
+import '../creating_reading-ZXzcZEsb.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
-import '../constants-DEJVKr9Z.js';
+import '../constants-DQyACdzq.js';
 import '../io/p5.XML.js';
 
 /**
@@ -47,8 +47,6 @@ function dom(p5, fn){
    * @return {p5.Element|null} <a href="#/p5.Element">p5.Element</a> containing the element.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *   background(200);
@@ -59,11 +57,8 @@ function dom(p5, fn){
    *
    *   describe('A gray square with a dashed pink border.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   let cnv = createCanvas(100, 100);
    *
@@ -80,11 +75,8 @@ function dom(p5, fn){
    *
    *   describe('A gray square with a dashed pink border.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   let cnv = createCanvas(100, 100);
    *
@@ -101,8 +93,6 @@ function dom(p5, fn){
    *
    *   describe('A gray square with a dashed pink border.');
    * }
-   * </code>
-   * </div>
    */
   fn.select = function (e, p) {
     // p5._validateParameters('select', arguments);
@@ -135,8 +125,6 @@ function dom(p5, fn){
    * @return {p5.Element[]} array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -155,11 +143,8 @@ function dom(p5, fn){
    *
    *   describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   // Create three buttons and position them.
    *   let b1 = createButton('1');
@@ -195,8 +180,6 @@ function dom(p5, fn){
    *   btn.style('background', 'deeppink');
    *   btn.style('color', 'white');
    * }
-   * </code>
-   * </div>
    */
   fn.selectAll = function (e, p) {
     // p5._validateParameters('selectAll', arguments);
@@ -277,8 +260,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -289,11 +270,8 @@ function dom(p5, fn){
    *
    *   describe('A gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -308,8 +286,6 @@ function dom(p5, fn){
    *
    *   describe('The text "p5*js" written in pink in the middle of a gray square.');
    * }
-   * </code>
-   * </div>
    */
   fn.createElement = function (tag, content) {
     // p5._validateParameters('createElement', arguments);
@@ -331,8 +307,6 @@ function dom(p5, fn){
    * @method removeElements
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -350,11 +324,8 @@ function dom(p5, fn){
    * function mousePressed() {
    *   removeElements();
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let slider;
    *
    * function setup() {
@@ -383,8 +354,6 @@ function dom(p5, fn){
    * function doubleClicked() {
    *   removeElements();
    * }
-   * </code>
-   * </div>
    */
   fn.removeElements = function (e) {
     // p5._validateParameters('removeElements', arguments);
@@ -421,8 +390,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -434,11 +401,8 @@ function dom(p5, fn){
    *
    *   describe('A gray square with the text "p5*js" written in its center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -450,8 +414,6 @@ function dom(p5, fn){
    *
    *   describe('A gray square with the text "p5*js" written in its center.');
    * }
-   * </code>
-   * </div>
    */
   fn.createDiv = function (html = '') {
     let elt = document.createElement('div');
@@ -472,8 +434,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -485,8 +445,6 @@ function dom(p5, fn){
    *
    *   describe('A gray square displaying the text "Tell me a story." written in black.');
    * }
-   * </code>
-   * </div>
    */
   fn.createP = function (html = '') {
     let elt = document.createElement('p');
@@ -510,8 +468,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -523,11 +479,8 @@ function dom(p5, fn){
    *
    *   describe('A gray square with the text "p5*js" written in its center.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   background(200);
    *
@@ -556,8 +509,6 @@ function dom(p5, fn){
    *
    *   describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
    * }
-   * </code>
-   * </div>
    */
   fn.createSpan = function (html = '') {
     let elt = document.createElement('span');
@@ -591,8 +542,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -606,8 +555,6 @@ function dom(p5, fn){
    *
    *   describe('A gray square with a magenta asterisk in its center.');
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method createImg
@@ -663,8 +610,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -676,11 +621,8 @@ function dom(p5, fn){
    *
    *   describe('The text "p5*js" written at the center of a gray square.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   background(200);
    *
@@ -691,8 +633,6 @@ function dom(p5, fn){
    *
    *   describe('The text "p5*js" written at the center of a gray square.');
    * }
-   * </code>
-   * </div>
    */
   fn.createA = function (href, html, target) {
     // p5._validateParameters('createA', arguments);
@@ -727,8 +667,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * let slider;
    *
    * function setup() {
@@ -747,11 +685,8 @@ function dom(p5, fn){
    *   let g = slider.value();
    *   background(g);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let slider;
    *
    * function setup() {
@@ -771,11 +706,8 @@ function dom(p5, fn){
    *   let g = slider.value();
    *   background(g);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let slider;
    *
    * function setup() {
@@ -796,11 +728,8 @@ function dom(p5, fn){
    *   let g = slider.value();
    *   background(g);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let slider;
    *
    * function setup() {
@@ -821,8 +750,6 @@ function dom(p5, fn){
    *   let g = slider.value();
    *   background(g);
    * }
-   * </code>
-   * </div>
    */
   fn.createSlider = function (min, max, value, step) {
     // p5._validateParameters('createSlider', arguments);
@@ -856,8 +783,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -878,11 +803,8 @@ function dom(p5, fn){
    *   let g = random(255);
    *   background(g);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let button;
    *
    * function setup() {
@@ -912,8 +834,6 @@ function dom(p5, fn){
    *   let c = random(['red', 'green', 'blue', 'yellow']);
    *   button.value(c);
    * }
-   * </code>
-   * </div>
    */
   fn.createButton = function (label, value) {
     // p5._validateParameters('createButton', arguments);
@@ -942,8 +862,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * let checkbox;
    *
    * function setup() {
@@ -964,11 +882,8 @@ function dom(p5, fn){
    *     background(0);
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let checkbox;
    *
    * function setup() {
@@ -990,11 +905,8 @@ function dom(p5, fn){
    *     background(0);
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let checkbox;
    *
    * function setup() {
@@ -1016,8 +928,6 @@ function dom(p5, fn){
    *     background(0);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.createCheckbox = function (...args) {
     // p5._validateParameters('createCheckbox', args);
@@ -1100,8 +1010,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * let mySelect;
    *
    * function setup() {
@@ -1128,11 +1036,8 @@ function dom(p5, fn){
    *   let c = mySelect.selected();
    *   background(c);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let mySelect;
    *
    * function setup() {
@@ -1162,11 +1067,8 @@ function dom(p5, fn){
    *   let c = mySelect.selected();
    *   background(c);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let mySelect;
    *
    * function setup() {
@@ -1193,11 +1095,8 @@ function dom(p5, fn){
    *   let c = mySelect.selected();
    *   background(c);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Hold CTRL to select multiple options on Windows and Linux.
    * // Hold CMD to select multiple options on macOS.
    * let mySelect;
@@ -1236,8 +1135,6 @@ function dom(p5, fn){
    *     circle(x, 50, 20);
    *   }
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method createSelect
@@ -1245,7 +1142,6 @@ function dom(p5, fn){
    *                          a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" target="_blank">HTMLSelectElement</a>.
    * @return {p5.Element}
    */
-
   fn.createSelect = function (...args) {
     // p5._validateParameters('createSelect', args);
     let self;
@@ -1379,8 +1275,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * let style = document.createElement('style');
    * style.innerHTML = `
    * .p5-radio label {
@@ -1421,11 +1315,8 @@ function dom(p5, fn){
    *   let g = myRadio.value();
    *   background(g);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myRadio;
    *
    * function setup() {
@@ -1455,11 +1346,8 @@ function dom(p5, fn){
    *   let c = myRadio.value();
    *   background(c);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myRadio;
    *
    * function setup() {
@@ -1499,8 +1387,6 @@ function dom(p5, fn){
    * function disableRadio() {
    *   myRadio.disable(true);
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method createRadio
@@ -1691,8 +1577,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * let myPicker;
    *
    * function setup() {
@@ -1710,11 +1594,8 @@ function dom(p5, fn){
    *   let c = myPicker.color();
    *   background(c);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myPicker;
    *
    * function setup() {
@@ -1735,8 +1616,6 @@ function dom(p5, fn){
    *   // Display the current color as a hex string.
    *   text(c, 25, 55);
    * }
-   * </code>
-   * </div>
    */
   fn.createColorPicker = function (value) {
     // p5._validateParameters('createColorPicker', arguments);
@@ -1796,8 +1675,6 @@ function dom(p5, fn){
    * @return {p5.Element} new <a href="#/p5.Element">p5.Element</a> object.
    *
    * @example
-   * <div>
-   * <code>
    * let myInput;
    *
    * function setup() {
@@ -1818,11 +1695,8 @@ function dom(p5, fn){
    *   let msg = myInput.value();
    *   text(msg, 25, 55);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let myInput;
    *
    * function setup() {
@@ -1844,8 +1718,6 @@ function dom(p5, fn){
    *   let msg = myInput.value();
    *   text(msg, 25, 55);
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method createInput
@@ -1880,8 +1752,6 @@ function dom(p5, fn){
    * @return {p5.Element} The new input element.
    *
    * @example
-   * <div>
-   * <code>
    * // Use the file input to select an image to
    * // load and display.
    * let input;
@@ -1916,11 +1786,8 @@ function dom(p5, fn){
    *     img = null;
    *   }
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * // Use the file input to select multiple images
    * // to load and display.
    * let input;
@@ -1959,8 +1826,6 @@ function dom(p5, fn){
    *     images.push(img);
    *   }
    * }
-   * </code>
-   * </div>
    */
   fn.createFileInput = function (callback, multiple = false) {
     // p5._validateParameters('createFileInput', arguments);

package/dist/dom/index.js

@@ -2,10 +2,10 @@ import dom$1 from './dom.js';
 import element from './p5.Element.js';
 import media from './p5.MediaElement.js';
 import file from './p5.File.js';
-import '../creating_reading-CgHCHxqN.js';
+import '../creating_reading-ZXzcZEsb.js';
 import 'colorjs.io/fn';
 import '../color/color_spaces/hsb.js';
-import '../constants-DEJVKr9Z.js';
+import '../constants-DQyACdzq.js';
 import '../io/p5.XML.js';
 
 function dom(p5){