p5 2.0.0 → 2.0.2

package/types/dom/dom.d.ts

@@ -0,0 +1,1295 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+import { Color } from '../color/p5.Color';
+
+declare module 'p5' {
+/**
+ * Helper function for select and selectAll
+ *
+ */
+function _getContainer(p: any): void;
+
+/**
+ * Helper function for getElement and getElements.
+ *
+ */
+function _wrapElement(elt: any): void;
+
+/**
+ * Searches the page for the first element that matches the given
+ * CSS selector string.The selector string can be an ID, class, tag name, or a combination.
+ * `select()` returns a p5.Element object if it
+ * finds a match and `null` if not.The second parameter, `container`, is optional. It specifies a container to
+ * search within. `container` can be CSS selector string, a
+ * p5.Element object, or an
+ * HTMLElement object.
+ *
+ * @param CSS selector string of element to search for.
+ * @param CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
+ * @return <a href="#/p5.Element">p5.Element</a> containing the element.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * background(200);
+ * 
+ * // Select the canvas by its tag.
+ * let cnv = select('canvas');
+ * cnv.style('border', '5px deeppink dashed');
+ * 
+ * describe('A gray square with a dashed pink border.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * 
+ * // Add a class attribute to the canvas.
+ * cnv.class('pinkborder');
+ * 
+ * background(200);
+ * 
+ * // Select the canvas by its class.
+ * cnv = select('.pinkborder');
+ * 
+ * // Style its border.
+ * cnv.style('border', '5px deeppink dashed');
+ * 
+ * describe('A gray square with a dashed pink border.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * let cnv = createCanvas(100, 100);
+ * 
+ * // Set the canvas' ID.
+ * cnv.id('mycanvas');
+ * 
+ * background(200);
+ * 
+ * // Select the canvas by its ID.
+ * cnv = select('#mycanvas');
+ * 
+ * // Style its border.
+ * cnv.style('border', '5px deeppink dashed');
+ * 
+ * describe('A gray square with a dashed pink border.');
+ * }
+ * </code>
+ * </div>
+ */
+function select(selectors: string, container?: string | p5.Element | HTMLElement): p5.Element | any;
+
+/**
+ * Searches the page for all elements that matches the given
+ * CSS selector string.The selector string can be an ID, class, tag name, or a combination.
+ * `selectAll()` returns an array of p5.Element
+ * objects if it finds any matches and an empty array if none are found.The second parameter, `container`, is optional. It specifies a container to
+ * search within. `container` can be CSS selector string, a
+ * p5.Element object, or an
+ * HTMLElement object.
+ *
+ * @param CSS selector string of element to search for.
+ * @param CSS selector string, <a href="#/p5.Element">p5.Element</a>, or
+ * <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank">HTMLElement</a> to search within.
+ * @return array of <a href="#/p5.Element">p5.Element</a>s containing any elements found.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create three buttons.
+ * createButton('1');
+ * createButton('2');
+ * createButton('3');
+ * 
+ * // Select the buttons by their tag.
+ * let buttons = selectAll('button');
+ * 
+ * // Position the buttons.
+ * for (let i = 0; i < 3; i += 1) {
+ * buttons[i].position(0, i * 30);
+ * }
+ * 
+ * describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3".');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * // Create three buttons and position them.
+ * let b1 = createButton('1');
+ * b1.position(0, 0);
+ * let b2 = createButton('2');
+ * b2.position(0, 30);
+ * let b3 = createButton('3');
+ * b3.position(0, 60);
+ * 
+ * // Add a class attribute to each button.
+ * b1.class('btn');
+ * b2.class('btn btn-pink');
+ * b3.class('btn');
+ * 
+ * // Select the buttons by their class.
+ * let buttons = selectAll('.btn');
+ * let pinkButtons = selectAll('.btn-pink');
+ * 
+ * // Style the selected buttons.
+ * buttons.forEach(setFont);
+ * pinkButtons.forEach(setColor);
+ * 
+ * describe('Three buttons stacked vertically. The buttons are labeled, "1", "2", and "3". Buttons "1" and "3" are gray. Button "2" is pink.');
+ * }
+ * 
+ * // Set a button's font to Comic Sans MS.
+ * function setFont(btn) {
+ * btn.style('font-family', 'Comic Sans MS');
+ * }
+ * 
+ * // Set a button's background and font color.
+ * function setColor(btn) {
+ * btn.style('background', 'deeppink');
+ * btn.style('color', 'white');
+ * }
+ * </code>
+ * </div>
+ */
+function selectAll(selectors: string, container?: string | p5.Element | HTMLElement): p5.Element[];
+
+/**
+ * Creates a new p5.Element object.The first parameter, `tag`, is a string an HTML tag such as `'h5'`.The second parameter, `content`, is optional. It's a string that sets the
+ * HTML content to insert into the new element. New elements have no content
+ * by default.
+ *
+ * @param tag for the new element.
+ * @param HTML content to insert into the element.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create an h5 element with nothing in it.
+ * createElement('h5');
+ * 
+ * describe('A gray square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create an h5 element with the content "p5*js".
+ * let h5 = createElement('h5', 'p5*js');
+ * 
+ * // Set the element's style and position.
+ * h5.style('color', 'deeppink');
+ * h5.position(30, 15);
+ * 
+ * describe('The text "p5*js" written in pink in the middle of a gray square.');
+ * }
+ * </code>
+ * </div>
+ */
+function createElement(tag: string, content?: string): p5.Element;
+
+/**
+ * Removes all elements created by p5.js, including any event handlers.There are two exceptions:
+ * canvas elements created by createCanvas()
+ * and p5.Render objects created by
+ * createGraphics().
+ *
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create a paragraph element and place
+ * // it in the middle of the canvas.
+ * let p = createP('p5*js');
+ * p.position(25, 25);
+ * 
+ * describe('A gray square with the text "p5*js" written in its center. The text disappears when the mouse is pressed.');
+ * }
+ * 
+ * // Remove all elements when the mouse is pressed.
+ * function mousePressed() {
+ * removeElements();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let slider;
+ * 
+ * function setup() {
+ * createCanvas(200, 200);
+ * 
+ * // Create a paragraph element and place
+ * // it at the top of the canvas.
+ * let p = createP('p5*js');
+ * p.position(25, 25);
+ * 
+ * // Create a slider element and place it
+ * // beneath the canvas.
+ * slider = createSlider(0, 255, 200);
+ * slider.position(0, 100);
+ * 
+ * describe('A gray square with the text "p5*js" written in its center and a range slider beneath it. The square changes color when the slider is moved. The text and slider disappear when the square is double-clicked.');
+ * }
+ * 
+ * function draw() {
+ * // Use the slider value to change the background color.
+ * let g = slider.value();
+ * background(g);
+ * }
+ * 
+ * // Remove all elements when the mouse is double-clicked.
+ * function doubleClicked() {
+ * removeElements();
+ * }
+ * </code>
+ * </div>
+ */
+function removeElements(): void;
+
+/**
+ * Helpers for create methods.
+ *
+ */
+function addElement(elt: any, pInst: any, media: any): void;
+
+/**
+ * Creates a `&lt;div&gt;&lt;/div&gt;` element.`&lt;div&gt;&lt;/div&gt;` elements are commonly used as containers for
+ * other elements.The parameter `html` is optional. It accepts a string that sets the
+ * inner HTML of the new `&lt;div&gt;&lt;/div&gt;`.
+ *
+ * @param inner HTML for the new `&lt;div&gt;&lt;/div&gt;` element.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create a div element and set its position.
+ * let div = createDiv('p5*js');
+ * div.position(25, 35);
+ * 
+ * describe('A gray square with the text "p5*js" written in its center.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create an h3 element within the div.
+ * let div = createDiv('<h3>p5*js</h3>');
+ * div.position(20, 5);
+ * 
+ * describe('A gray square with the text "p5*js" written in its center.');
+ * }
+ * </code>
+ * </div>
+ */
+function createDiv(html?: string): p5.Element;
+
+/**
+ * Creates a paragraph element.`&lt;p&gt;&lt;/p&gt;` elements are commonly used for paragraph-length text.The parameter `html` is optional. It accepts a string that sets the
+ * inner HTML of the new `&lt;p&gt;&lt;/p&gt;`.
+ *
+ * @param inner HTML for the new `&lt;p&gt;&lt;/p&gt;` element.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create a paragraph element and set its position.
+ * let p = createP('Tell me a story.');
+ * p.position(5, 0);
+ * 
+ * describe('A gray square displaying the text "Tell me a story." written in black.');
+ * }
+ * </code>
+ * </div>
+ */
+function createP(html?: string): p5.Element;
+
+/**
+ * Creates a `&lt;span&gt;&lt;/span&gt;` element.`&lt;span&gt;&lt;/span&gt;` elements are commonly used as containers
+ * for inline elements. For example, a `&lt;span&gt;&lt;/span&gt;`
+ * can hold part of a sentence that's a
+ * different style.The parameter `html` is optional. It accepts a string that sets the
+ * inner HTML of the new `&lt;span&gt;&lt;/span&gt;`.
+ *
+ * @param inner HTML for the new `&lt;span&gt;&lt;/span&gt;` element.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create a span element and set its position.
+ * let span = createSpan('p5*js');
+ * span.position(25, 35);
+ * 
+ * describe('A gray square with the text "p5*js" written in its center.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * background(200);
+ * 
+ * // Create a div element as a container.
+ * let div = createDiv();
+ * 
+ * // Place the div at the center.
+ * div.position(25, 35);
+ * 
+ * // Create a span element.
+ * let s1 = createSpan('p5');
+ * 
+ * // Create a second span element.
+ * let s2 = createSpan('*');
+ * 
+ * // Set the second span's font color.
+ * s2.style('color', 'deeppink');
+ * 
+ * // Create a third span element.
+ * let s3 = createSpan('js');
+ * 
+ * // Add all the spans to the container div.
+ * s1.parent(div);
+ * s2.parent(div);
+ * s3.parent(div);
+ * 
+ * describe('A gray square with the text "p5*js" written in black at its center. The asterisk is pink.');
+ * }
+ * </code>
+ * </div>
+ */
+function createSpan(html?: string): p5.Element;
+
+/**
+ * Creates an `&lt;img&gt;` element that can appear outside of the canvas.The first parameter, `src`, is a string with the path to the image file.
+ * `src` should be a relative path, as in `'assets/image.png'`, or a URL, as
+ * in `'https://example.com/image.png'`.The second parameter, `alt`, is a string with the
+ * alternate text
+ * for the image. An empty string `''` can be used for images that aren't displayed.The third parameter, `crossOrigin`, is optional. It's a string that sets the
+ * crossOrigin property
+ * of the image. Use `'anonymous'` or `'use-credentials'` to fetch the image
+ * with cross-origin access.The fourth parameter, `callback`, is also optional. It sets a function to
+ * call after the image loads. The new image is passed to the callback
+ * function as a p5.Element object.
+ *
+ * @param relative path or URL for the image.
+ * @param alternate text for the image.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * let img = createImg(
+ * '/assets/cat.jpg',
+ * 'image of a cat'
+ * );
+ * img.position(0, 10);
+ * 
+ * describe('A gray square with a magenta asterisk in its center.');
+ * }
+ * </code>
+ * </div>
+ */
+function createImg(src: string, alt: string): p5.Element;
+
+/**
+ * @param crossOrigin property to use when fetching the image.
+ * @param function to call once the image loads. The new image will be passed
+ * to the function as a <a href="#/p5.Element">p5.Element</a> object.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ */
+function createImg(src: string, alt: string, crossOrigin?: string, successCallback?: Function): p5.Element;
+
+/**
+ * Creates an `&lt;a&gt;&lt;/a&gt;` element that links to another web page.The first parmeter, `href`, is a string that sets the URL of the linked
+ * page.The second parameter, `html`, is a string that sets the inner HTML of the
+ * link. It's common to use text, images, or buttons as links.The third parameter, `target`, is optional. It's a string that tells the
+ * web browser where to open the link. By default, links open in the current
+ * browser tab. Passing `'_blank'` will cause the link to open in a new
+ * browser tab. MDN describes a few
+ * other options.
+ *
+ * @param URL of linked page.
+ * @param inner HTML of link element to display.
+ * @param target where the new link should open,
+ * either `'_blank'`, `'_self'`, `'_parent'`, or `'_top'`.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create an anchor element that links to p5js.org.
+ * let a = createA('https://p5js.org/', 'p5*js');
+ * a.position(25, 35);
+ * 
+ * describe('The text "p5*js" written at the center of a gray square.');
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * function setup() {
+ * background(200);
+ * 
+ * // Create an anchor tag that links to p5js.org.
+ * // Open the link in a new tab.
+ * let a = createA('https://p5js.org/', 'p5*js', '_blank');
+ * a.position(25, 35);
+ * 
+ * describe('The text "p5*js" written at the center of a gray square.');
+ * }
+ * </code>
+ * </div>
+ */
+function createA(href: string, html: string, target?: string): p5.Element;
+
+/**
+ * Creates a slider `&lt;input&gt;&lt;/input&gt;` element.Range sliders are useful for quickly selecting numbers from a given range.The first two parameters, `min` and `max`, are numbers that set the
+ * slider's minimum and maximum.The third parameter, `value`, is optional. It's a number that sets the
+ * slider's default value.The fourth parameter, `step`, is also optional. It's a number that sets the
+ * spacing between each value in the slider's range. Setting `step` to 0
+ * allows the slider to move smoothly from `min` to `max`.
+ *
+ * @param minimum value of the slider.
+ * @param maximum value of the slider.
+ * @param default value of the slider.
+ * @param size for each step in the slider's range.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * let slider;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a slider and place it at the top of the canvas.
+ * slider = createSlider(0, 255);
+ * slider.position(10, 10);
+ * slider.size(80);
+ * 
+ * describe('A dark gray square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ * 
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let slider;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a slider and place it at the top of the canvas.
+ * // Set its default value to 0.
+ * slider = createSlider(0, 255, 0);
+ * slider.position(10, 10);
+ * slider.size(80);
+ * 
+ * describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ * 
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let slider;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a slider and place it at the top of the canvas.
+ * // Set its default value to 0.
+ * // Set its step size to 50.
+ * slider = createSlider(0, 255, 0, 50);
+ * slider.position(10, 10);
+ * slider.size(80);
+ * 
+ * describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ * 
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let slider;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a slider and place it at the top of the canvas.
+ * // Set its default value to 0.
+ * // Set its step size to 0 so that it moves smoothly.
+ * slider = createSlider(0, 255, 0, 0);
+ * slider.position(10, 10);
+ * slider.size(80);
+ * 
+ * describe('A black square with a range slider at the top. The square changes color when the slider is moved.');
+ * }
+ * 
+ * function draw() {
+ * // Use the slider as a grayscale value.
+ * let g = slider.value();
+ * background(g);
+ * }
+ * </code>
+ * </div>
+ */
+function createSlider(min: number, max: number, value?: number, step?: number): p5.Element;
+
+/**
+ * Creates a `&lt;button&gt;&lt;/button&gt;` element.The first parameter, `label`, is a string that sets the label displayed on
+ * the button.The second parameter, `value`, is optional. It's a string that sets the
+ * button's value. See
+ * MDN
+ * for more details.
+ *
+ * @param label displayed on the button.
+ * @param value of the button.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create a button and place it beneath the canvas.
+ * let button = createButton('click me');
+ * button.position(0, 100);
+ * 
+ * // Call repaint() when the button is pressed.
+ * button.mousePressed(repaint);
+ * 
+ * describe('A gray square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+ * }
+ * 
+ * // Change the background color.
+ * function repaint() {
+ * let g = random(255);
+ * background(g);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let button;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * background(200);
+ * 
+ * // Create a button and set its value to 0.
+ * // Place the button beneath the canvas.
+ * button = createButton('click me', 'red');
+ * button.position(0, 100);
+ * 
+ * // Call randomColor() when the button is pressed.
+ * button.mousePressed(randomColor);
+ * 
+ * describe('A red square with a button that says "click me" beneath it. The square changes color when the button is clicked.');
+ * }
+ * 
+ * function draw() {
+ * // Use the button's value to set the background color.
+ * let c = button.value();
+ * background(c);
+ * }
+ * 
+ * // Set the button's value to a random color.
+ * function randomColor() {
+ * let c = random(['red', 'green', 'blue', 'yellow']);
+ * button.value(c);
+ * }
+ * </code>
+ * </div>
+ */
+function createButton(label: string, value?: string): p5.Element;
+
+/**
+ * Creates a checkbox `&lt;input&gt;&lt;/input&gt;` element.Checkboxes extend the p5.Element class with a
+ * `checked()` method. Calling `myBox.checked()` returns `true` if it the box
+ * is checked and `false` if not.The first parameter, `label`, is optional. It's a string that sets the label
+ * to display next to the checkbox.The second parameter, `value`, is also optional. It's a boolean that sets the
+ * checkbox's value.
+ *
+ * @param label displayed after the checkbox.
+ * @param value of the checkbox. Checked is `true` and unchecked is `false`.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * let checkbox;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a checkbox and place it beneath the canvas.
+ * checkbox = createCheckbox();
+ * checkbox.position(0, 70);
+ * 
+ * describe('A black square with a checkbox beneath it. The square turns white when the box is checked.');
+ * }
+ * 
+ * function draw() {
+ * // Use the checkbox to set the background color.
+ * if (checkbox.checked()) {
+ * background(255);
+ * } else {
+ * background(0);
+ * }
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let checkbox;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a checkbox and place it beneath the canvas.
+ * // Label the checkbox "white".
+ * checkbox = createCheckbox(' white');
+ * checkbox.position(0, 70);
+ * 
+ * describe('A black square with a checkbox labeled "white" beneath it. The square turns white when the box is checked.');
+ * }
+ * 
+ * function draw() {
+ * // Use the checkbox to set the background color.
+ * if (checkbox.checked()) {
+ * background(255);
+ * } else {
+ * background(0);
+ * }
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let checkbox;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a checkbox and place it beneath the canvas.
+ * // Label the checkbox "white" and set its value to true.
+ * checkbox = createCheckbox(' white', true);
+ * checkbox.position(0, 70);
+ * 
+ * describe('A white square with a checkbox labeled "white" beneath it. The square turns black when the box is unchecked.');
+ * }
+ * 
+ * function draw() {
+ * // Use the checkbox to set the background color.
+ * if (checkbox.checked()) {
+ * background(255);
+ * } else {
+ * background(0);
+ * }
+ * }
+ * </code>
+ * </div>
+ */
+function createCheckbox(label?: string, value?: boolean): p5.Element;
+
+/**
+ * Creates a dropdown menu `&lt;select&gt;&lt;/select&gt;` element.The parameter is optional. If `true` is passed, as in
+ * `let mySelect = createSelect(true)`, then the dropdown will support
+ * multiple selections. If an existing `&lt;select&gt;&lt;/select&gt;` element
+ * is passed, as in `let mySelect = createSelect(otherSelect)`, the existing
+ * element will be wrapped in a new p5.Element
+ * object.Dropdowns extend the p5.Element class with a few
+ * helpful methods for managing options:
+ *
+ * @param support multiple selections.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * let mySelect;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a dropdown and place it beneath the canvas.
+ * mySelect = createSelect();
+ * mySelect.position(0, 100);
+ * 
+ * // Add color options.
+ * mySelect.option('red');
+ * mySelect.option('green');
+ * mySelect.option('blue');
+ * mySelect.option('yellow');
+ * 
+ * // Set the selected option to "red".
+ * mySelect.selected('red');
+ * 
+ * describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+ * }
+ * 
+ * function draw() {
+ * // Use the selected value to paint the background.
+ * let c = mySelect.selected();
+ * background(c);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let mySelect;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a dropdown and place it beneath the canvas.
+ * mySelect = createSelect();
+ * mySelect.position(0, 100);
+ * 
+ * // Add color options.
+ * mySelect.option('red');
+ * mySelect.option('green');
+ * mySelect.option('blue');
+ * mySelect.option('yellow');
+ * 
+ * // Set the selected option to "red".
+ * mySelect.selected('red');
+ * 
+ * // Disable the "yellow" option.
+ * mySelect.disable('yellow');
+ * 
+ * describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+ * }
+ * 
+ * function draw() {
+ * // Use the selected value to paint the background.
+ * let c = mySelect.selected();
+ * background(c);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let mySelect;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a dropdown and place it beneath the canvas.
+ * mySelect = createSelect();
+ * mySelect.position(0, 100);
+ * 
+ * // Add color options with names and values.
+ * mySelect.option('one', 'red');
+ * mySelect.option('two', 'green');
+ * mySelect.option('three', 'blue');
+ * mySelect.option('four', 'yellow');
+ * 
+ * // Set the selected option to "one".
+ * mySelect.selected('one');
+ * 
+ * describe('A red square with a dropdown menu beneath it. The square changes color when a new color is selected.');
+ * }
+ * 
+ * function draw() {
+ * // Use the selected value to paint the background.
+ * let c = mySelect.selected();
+ * background(c);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Hold CTRL to select multiple options on Windows and Linux.
+ * // Hold CMD to select multiple options on macOS.
+ * let mySelect;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a dropdown and allow multiple selections.
+ * // Place it beneath the canvas.
+ * mySelect = createSelect(true);
+ * mySelect.position(0, 100);
+ * 
+ * // Add color options.
+ * mySelect.option('red');
+ * mySelect.option('green');
+ * mySelect.option('blue');
+ * mySelect.option('yellow');
+ * 
+ * describe('A gray square with a dropdown menu beneath it. Colorful circles appear when their color is selected.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Use the selected value(s) to draw circles.
+ * let colors = mySelect.selected();
+ * for (let i = 0; i < colors.length; i += 1) {
+ * // Calculate the x-coordinate.
+ * let x = 10 + i * 20;
+ * 
+ * // Access the color.
+ * let c = colors[i];
+ * 
+ * // Draw the circle.
+ * fill(c);
+ * circle(x, 50, 20);
+ * }
+ * }
+ * </code>
+ * </div>
+ */
+function createSelect(multiple?: boolean): p5.Element;
+
+/**
+ * @param select element to wrap, either as a <a href="#/p5.Element">p5.Element</a> or
+ * a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement" target="_blank">HTMLSelectElement</a>.
+ */
+function createSelect(existing: object): p5.Element;
+
+/**
+ * Creates a radio button element.The parameter is optional. If a string is passed, as in
+ * `let myRadio = createSelect('food')`, then each radio option will
+ * have `"food"` as its `name` parameter: `&lt;input name="food"&gt;&lt;/input&gt;`.
+ * If an existing `&lt;div&gt;&lt;/div&gt;` or `&lt;span&gt;&lt;/span&gt;`
+ * element is passed, as in `let myRadio = createSelect(container)`, it will
+ * become the radio button's parent element.Radio buttons extend the p5.Element class with a few
+ * helpful methods for managing options:
+ *
+ * @param container HTML Element, either a `&lt;div&gt;&lt;/div&gt;`
+ * or `&lt;span&gt;&lt;/span&gt;`.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * let style = document.createElement('style');
+ * style.innerHTML = `
+ * .p5-radio label {
+ * display: flex;
+ * align-items: center;
+ * }
+ * .p5-radio input {
+ * margin-right: 5px;
+ * }
+ * `;
+ * document.head.appendChild(style);
+ * 
+ * let myRadio;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a radio button element and place it
+ * // in the top-left corner.
+ * myRadio = createRadio();
+ * myRadio.position(0, 0);
+ * myRadio.class('p5-radio');
+ * myRadio.size(60);
+ * 
+ * // Add a few color options.
+ * myRadio.option('red');
+ * myRadio.option('yellow');
+ * myRadio.option('blue');
+ * 
+ * // Choose a default option.
+ * myRadio.selected('yellow');
+ * 
+ * describe('A yellow square with three color options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option.');
+ * }
+ * 
+ * function draw() {
+ * // Set the background color using the radio button.
+ * let g = myRadio.value();
+ * background(g);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let myRadio;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a radio button element and place it
+ * // in the top-left corner.
+ * myRadio = createRadio();
+ * myRadio.position(0, 0);
+ * myRadio.size(50);
+ * 
+ * // Add a few color options.
+ * // Color values are labeled with
+ * // emotions they evoke.
+ * myRadio.option('red', 'love');
+ * myRadio.option('yellow', 'joy');
+ * myRadio.option('blue', 'trust');
+ * 
+ * // Choose a default option.
+ * myRadio.selected('yellow');
+ * 
+ * describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
+ * }
+ * 
+ * function draw() {
+ * // Set the background color using the radio button.
+ * let c = myRadio.value();
+ * background(c);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let myRadio;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a radio button element and place it
+ * // in the top-left corner.
+ * myRadio = createRadio();
+ * myRadio.position(0, 0);
+ * myRadio.size(50);
+ * 
+ * // Add a few color options.
+ * myRadio.option('red');
+ * myRadio.option('yellow');
+ * myRadio.option('blue');
+ * 
+ * // Choose a default option.
+ * myRadio.selected('yellow');
+ * 
+ * // Create a button and place it beneath the canvas.
+ * let btn = createButton('disable');
+ * btn.position(0, 100);
+ * 
+ * // Call disableRadio() when btn is pressed.
+ * btn.mousePressed(disableRadio);
+ * 
+ * describe('A yellow square with three options listed, "red", "yellow", and "blue". The square changes color when the user selects a new option. A "disable" button beneath the canvas disables the color options when pressed.');
+ * }
+ * 
+ * function draw() {
+ * // Set the background color using the radio button.
+ * let c = myRadio.value();
+ * background(c);
+ * }
+ * 
+ * // Disable myRadio.
+ * function disableRadio() {
+ * myRadio.disable(true);
+ * }
+ * </code>
+ * </div>
+ */
+function createRadio(containerElement?: object): p5.Element;
+
+/**
+ * @param name parameter assigned to each option's `&lt;input&gt;&lt;/input&gt;` element.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ */
+function createRadio(name?: string): p5.Element;
+
+/**
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ */
+function createRadio(): p5.Element;
+
+/**
+ * Creates a color picker element.The parameter, `value`, is optional. If a color string or
+ * p5.Color object is passed, it will set the default
+ * color.Color pickers extend the p5.Element class with a
+ * couple of helpful methods for managing colors:
+ *
+ * @param default color as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" target="_blank">CSS color string</a>.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * let myPicker;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a color picker and set its position.
+ * myPicker = createColorPicker('deeppink');
+ * myPicker.position(0, 100);
+ * 
+ * describe('A pink square with a color picker beneath it. The square changes color when the user picks a new color.');
+ * }
+ * 
+ * function draw() {
+ * // Use the color picker to paint the background.
+ * let c = myPicker.color();
+ * background(c);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let myPicker;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create a color picker and set its position.
+ * myPicker = createColorPicker('deeppink');
+ * myPicker.position(0, 100);
+ * 
+ * describe('A number with the format "#rrggbb" is displayed on a pink canvas. The background color and number change when the user picks a new color.');
+ * }
+ * 
+ * function draw() {
+ * // Use the color picker to paint the background.
+ * let c = myPicker.value();
+ * background(c);
+ * 
+ * // Display the current color as a hex string.
+ * text(c, 25, 55);
+ * }
+ * </code>
+ * </div>
+ */
+function createColorPicker(value?: string | p5.Color): p5.Element;
+
+/**
+ * Creates a text `&lt;input&gt;&lt;/input&gt;` element.Call `myInput.size()` to set the length of the text box.The first parameter, `value`, is optional. It's a string that sets the
+ * input's default value. The input is blank by default.The second parameter, `type`, is also optional. It's a string that
+ * specifies the type of text being input. See MDN for a full
+ * list of options.
+ * The default is `'text'`.
+ *
+ * @param default value of the input box. Defaults to an empty string `''`.
+ * @param type of input. Defaults to `'text'`.
+ * @return new <a href="#/p5.Element">p5.Element</a> object.
+ * @example <div>
+ * <code>
+ * let myInput;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create an input element and place it
+ * // beneath the canvas.
+ * myInput = createInput();
+ * myInput.position(0, 100);
+ * 
+ * describe('A gray square with a text box beneath it. The text in the square changes when the user types something new in the input bar.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Use the input to display a message.
+ * let msg = myInput.value();
+ * text(msg, 25, 55);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * let myInput;
+ * 
+ * function setup() {
+ * createCanvas(100, 100);
+ * 
+ * // Create an input element and place it
+ * // beneath the canvas. Set its default
+ * // text to "hello!".
+ * myInput = createInput('hello!');
+ * myInput.position(0, 100);
+ * 
+ * describe('The text "hello!" written at the center of a gray square. A text box beneath the square also says "hello!". The text in the square changes when the user types something new in the input bar.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Use the input to display a message.
+ * let msg = myInput.value();
+ * text(msg, 25, 55);
+ * }
+ * </code>
+ * </div>
+ */
+function createInput(value?: string, type?: string): p5.Element;
+
+/**
+ */
+function createInput(value?: string): p5.Element;
+
+/**
+ * Creates an `&lt;input&gt;&lt;/input&gt;` element of type `'file'`.`createFileInput()` allows users to select local files for use in a sketch.
+ * It returns a p5.File object.The first parameter, `callback`, is a function that's called when the file
+ * loads. The callback function should have one parameter, `file`, that's a
+ * p5.File object.The second parameter, `multiple`, is optional. It's a boolean value that
+ * allows loading multiple files if set to `true`. If `true`, `callback`
+ * will be called once per file.
+ *
+ * @param function to call once the file loads.
+ * @param allow multiple files to be selected.
+ * @return new <a href="#/p5.File">p5.File</a> object.
+ * @example <div>
+ * <code>
+ * // Use the file input to select an image to
+ * // load and display.
+ * let input;
+ * let img;
+ * 
+ * function setup() {
+ * createCanvas(200, 200);
+ * 
+ * // Create a file input and place it beneath
+ * // the canvas.
+ * input = createFileInput(handleImage);
+ * input.position(0, 100);
+ * 
+ * describe('A gray square with a file input beneath it. If the user selects an image file to load, it is displayed on the square.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Draw the image if loaded.
+ * if (img) {
+ * image(img, 0, 0, width, height);
+ * }
+ * }
+ * 
+ * // Create an image if the file is an image.
+ * function handleImage(file) {
+ * if (file.type === 'image') {
+ * img = createImg(file.data, '');
+ * img.hide();
+ * } else {
+ * img = null;
+ * }
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Use the file input to select multiple images
+ * // to load and display.
+ * let input;
+ * let images = [];
+ * 
+ * function setup() {
+ * // Create a file input and place it beneath
+ * // the canvas. Allow it to load multiple files.
+ * input = createFileInput(handleImage, true);
+ * input.position(0, 100);
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Draw the images if loaded. Each image
+ * // is drawn 20 pixels lower than the
+ * // previous image.
+ * for (let i = 0; i < images.length; i += 1) {
+ * // Calculate the y-coordinate.
+ * let y = i * 20;
+ * 
+ * // Draw the image.
+ * image(img, 0, y, 100, 100);
+ * }
+ * 
+ * describe('A gray square with a file input beneath it. If the user selects multiple image files to load, they are displayed on the square.');
+ * }
+ * 
+ * // Create an image if the file is an image,
+ * // then add it to the images array.
+ * function handleImage(file) {
+ * if (file.type === 'image') {
+ * let img = createImg(file.data, '');
+ * img.hide();
+ * images.push(img);
+ * }
+ * }
+ * </code>
+ * </div>
+ */
+function createFileInput(callback: Function, multiple?: boolean): p5.File;
+
+}
+
+export default function dom(p5: any, fn: any): void;