``LAB` - Also known as CIE Lab, this color mode defines colors with Lightness, Alpha, and Beta.
* It is widely used in professional color measurement contexts due to its perceptual uniformity.
*
* `LCH` - A more intuitive representation of the CIE Lab color space using Lightness, Chroma, and Hue.
* This mode separates the color's chromatic intensity (chroma) from its lightness,
* simplifying color selection and manipulation.
*
* `OKLAB` - A variant of the CIE Lab color space that corrects for non-uniformities inherent in LAB.
* The adjustment provides a more perceptually accurate and uniform representation,
* which is particularly beneficial for smooth color transitions.
*
* `OKLCH` - An easier-to-use representation of OKLAB, expressing colors in terms of Lightness, Chroma, and Hue.
* This mode retains the perceptual benefits of OKLAB while offering a more intuitive format for color manipulation.
*
* 
*
* The numbers can be passed individually, as in
* `applyMatrix(2, 0, 0, 0, 2, 0)`. They can also be passed in an array, as in
* `applyMatrix([2, 0, 0, 0, 2, 0])`.
*
* In 3D mode, the parameters `a`, `b`, `c`, `d`, `e`, `f`, `g`, `h`, `i`,
* `j`, `k`, `l`, `m`, `n`, `o`, and `p` correspond to elements in the
* following transformation matrix:
*
* 
*
* The numbers can be passed individually, as in
* `applyMatrix(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1)`. They can
* also be passed in an array, as in
* `applyMatrix([2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1])`.
*
* By default, transformations accumulate. The
* push() and pop() functions
* can be used to isolate transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `applyMatrix()` inside the draw() function won't
* cause shapes to transform continuously.
* @param arr an array containing the elements of the transformation matrix. Its length should be either 6 (2D) or 16 (3D).
*/
applyMatrix(arr: number[]): void;
applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number): void;
applyMatrix(a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number, j: number, k: number, l: number, m: number, n: number, o: number, p: number): void;
/**
* Clears all transformations applied to the coordinate system.
*/
resetMatrix(): void;
/**
* Rotates the coordinate system.
*
* By default, the positive x-axis points to the right and the positive y-axis
* points downward. The `rotate()` function changes this orientation by
* rotating the coordinate system about the origin. Everything drawn after
* `rotate()` is called will appear to be rotated.
*
* The first parameter, `angle`, is the amount to rotate. For example, calling
* `rotate(1)` rotates the coordinate system clockwise 1 radian which is
* nearly 57˚. `rotate()` interprets angle values using the current
* angleMode().
*
* The second parameter, `axis`, is optional. It's used to orient 3D rotations
* in WebGL mode. If a p5.Vector is passed, as in
* `rotate(QUARTER_PI, myVector)`, then the coordinate system will rotate
* `QUARTER_PI` radians about `myVector`. If an array of vector components is
* passed, as in `rotate(QUARTER_PI, [1, 0, 0])`, then the coordinate system
* will rotate `QUARTER_PI` radians about a vector with the components
* `[1, 0, 0]`.
*
* By default, transformations accumulate. For example, calling `rotate(1)`
* twice has the same effect as calling `rotate(2)` once. The
* push() and pop() functions
* can be used to isolate transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `rotate(1)` inside the draw() function won't cause
* shapes to spin.
* @param angle angle of rotation in the current angleMode().
* @param axis axis to rotate about in 3D.
*/
rotate(angle: number, axis?: p5.Vector | number[]): void;
/**
* Rotates the coordinate system about the x-axis in WebGL mode.
*
* The parameter, `angle`, is the amount to rotate. For example, calling
* `rotateX(1)` rotates the coordinate system about the x-axis by 1 radian.
* `rotateX()` interprets angle values using the current
* angleMode().
*
* By default, transformations accumulate. For example, calling `rotateX(1)`
* twice has the same effect as calling `rotateX(2)` once. The
* push() and pop() functions
* can be used to isolate transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `rotateX(1)` inside the draw() function won't cause
* shapes to spin.
* @param angle angle of rotation in the current angleMode().
*/
rotateX(angle: number): void;
/**
* Rotates the coordinate system about the y-axis in WebGL mode.
*
* The parameter, `angle`, is the amount to rotate. For example, calling
* `rotateY(1)` rotates the coordinate system about the y-axis by 1 radian.
* `rotateY()` interprets angle values using the current
* angleMode().
*
* By default, transformations accumulate. For example, calling `rotateY(1)`
* twice has the same effect as calling `rotateY(2)` once. The
* push() and pop() functions
* can be used to isolate transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `rotateY(1)` inside the draw() function won't cause
* shapes to spin.
* @param angle angle of rotation in the current angleMode().
*/
rotateY(angle: number): void;
/**
* Rotates the coordinate system about the z-axis in WebGL mode.
*
* The parameter, `angle`, is the amount to rotate. For example, calling
* `rotateZ(1)` rotates the coordinate system about the z-axis by 1 radian.
* `rotateZ()` interprets angle values using the current
* angleMode().
*
* By default, transformations accumulate. For example, calling `rotateZ(1)`
* twice has the same effect as calling `rotateZ(2)` once. The
* push() and pop() functions
* can be used to isolate transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `rotateZ(1)` inside the draw() function won't cause
* shapes to spin.
* @param angle angle of rotation in the current angleMode().
*/
rotateZ(angle: number): void;
/**
* Scales the coordinate system.
*
* By default, shapes are drawn at their original scale. A rectangle that's 50
* pixels wide appears to take up half the width of a 100 pixel-wide canvas.
* The `scale()` function can shrink or stretch the coordinate system so that
* shapes appear at different sizes. There are two ways to call `scale()` with
* parameters that set the scale factor(s).
*
* The first way to call `scale()` uses numbers to set the amount of scaling.
* The first parameter, `s`, sets the amount to scale each axis. For example,
* calling `scale(2)` stretches the x-, y-, and z-axes by a factor of 2. The
* next two parameters, `y` and `z`, are optional. They set the amount to
* scale the y- and z-axes. For example, calling `scale(2, 0.5, 1)` stretches
* the x-axis by a factor of 2, shrinks the y-axis by a factor of 0.5, and
* leaves the z-axis unchanged.
*
* The second way to call `scale()` uses a p5.Vector
* object to set the scale factors. For example, calling `scale(myVector)`
* uses the x-, y-, and z-components of `myVector` to set the amount of
* scaling along the x-, y-, and z-axes. Doing so is the same as calling
* `scale(myVector.x, myVector.y, myVector.z)`.
*
* By default, transformations accumulate. For example, calling `scale(1)`
* twice has the same effect as calling `scale(2)` once. The
* push() and pop() functions
* can be used to isolate transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `scale(2)` inside the draw() function won't cause
* shapes to grow continuously.
* @param s amount to scale along the positive x-axis.
* @param y amount to scale along the positive y-axis. Defaults to `s`.
* @param z amount to scale along the positive z-axis. Defaults to `y`.
*/
scale(s: number | p5.Vector | number[], y?: number, z?: number): void;
scale(scales: p5.Vector | number[]): void;
/**
* Shears the x-axis so that shapes appear skewed.
*
* By default, the x- and y-axes are perpendicular. The `shearX()` function
* transforms the coordinate system so that x-coordinates are translated while
* y-coordinates are fixed.
*
* The first parameter, `angle`, is the amount to shear. For example, calling
* `shearX(1)` transforms all x-coordinates using the formula
* `x = x + y * tan(angle)`. `shearX()` interprets angle values using the
* current angleMode().
*
* By default, transformations accumulate. For example, calling
* `shearX(1)` twice has the same effect as calling `shearX(2)` once. The
* push() and
* pop() functions can be used to isolate
* transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `shearX(1)` inside the draw() function won't
* cause shapes to shear continuously.
* @param angle angle to shear by in the current angleMode().
*/
shearX(angle: number): void;
/**
* Shears the y-axis so that shapes appear skewed.
*
* By default, the x- and y-axes are perpendicular. The `shearY()` function
* transforms the coordinate system so that y-coordinates are translated while
* x-coordinates are fixed.
*
* The first parameter, `angle`, is the amount to shear. For example, calling
* `shearY(1)` transforms all y-coordinates using the formula
* `y = y + x * tan(angle)`. `shearY()` interprets angle values using the
* current angleMode().
*
* By default, transformations accumulate. For example, calling
* `shearY(1)` twice has the same effect as calling `shearY(2)` once. The
* push() and
* pop() functions can be used to isolate
* transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `shearY(1)` inside the draw() function won't
* cause shapes to shear continuously.
* @param angle angle to shear by in the current angleMode().
*/
shearY(angle: number): void;
/**
* Translates the coordinate system.
*
* By default, the origin `(0, 0)` is at the sketch's top-left corner in 2D
* mode and center in WebGL mode. The `translate()` function shifts the origin
* to a different position. Everything drawn after `translate()` is called
* will appear to be shifted. There are two ways to call `translate()` with
* parameters that set the origin's position.
*
* The first way to call `translate()` uses numbers to set the amount of
* translation. The first two parameters, `x` and `y`, set the amount to
* translate along the positive x- and y-axes. For example, calling
* `translate(20, 30)` translates the origin 20 pixels along the x-axis and 30
* pixels along the y-axis. The third parameter, `z`, is optional. It sets the
* amount to translate along the positive z-axis. For example, calling
* `translate(20, 30, 40)` translates the origin 20 pixels along the x-axis,
* 30 pixels along the y-axis, and 40 pixels along the z-axis.
*
* The second way to call `translate()` uses a
* p5.Vector object to set the amount of
* translation. For example, calling `translate(myVector)` uses the x-, y-,
* and z-components of `myVector` to set the amount to translate along the x-,
* y-, and z-axes. Doing so is the same as calling
* `translate(myVector.x, myVector.y, myVector.z)`.
*
* By default, transformations accumulate. For example, calling
* `translate(10, 0)` twice has the same effect as calling
* `translate(20, 0)` once. The push() and
* pop() functions can be used to isolate
* transformations within distinct drawing groups.
*
* Note: Transformations are reset at the beginning of the draw loop. Calling
* `translate(10, 0)` inside the draw() function won't
* cause shapes to move continuously.
* @param x amount to translate along the positive x-axis.
* @param y amount to translate along the positive y-axis.
* @param z amount to translate along the positive z-axis.
*/
translate(x: number, y: number, z?: number): void;
translate(vector: p5.Vector): void;
/**
* Begins a drawing group that contains its own styles and transformations.
*
* By default, styles such as fill() and
* transformations such as rotate() are applied to
* all drawing that follows. The `push()` and pop()
* functions can limit the effect of styles and transformations to a specific
* group of shapes, images, and text. For example, a group of shapes could be
* translated to follow the mouse without affecting the rest of the sketch:
*
* `// Begin the drawing group.
* push();
*
* // Translate the origin to the mouse's position.
* translate(mouseX, mouseY);
*
* // Style the face.
* noStroke();
* fill('green');
*
* // Draw the face.
* circle(0, 0, 60);
*
* // Style the eyes.
* fill('white');
*
* // Draw the left eye.
* ellipse(-20, -20, 30, 20);
*
* // Draw the right eye.
* ellipse(20, -20, 30, 20);
*
* // End the drawing group.
* pop();
*
* // Draw a bug.
* let x = random(0, 100);
* let y = random(0, 100);
* text('🦟', x, y);`In the code snippet above, the bug's position isn't affected by
* `translate(mouseX, mouseY)` because that transformation is contained
* between `push()` and pop(). The bug moves around
* the entire canvas as expected.
*
* Note: `push()` and pop() are always called as a
* pair. Both functions are required to begin and end a drawing group.
*
* `push()` and pop() can also be nested to create
* subgroups. For example, the code snippet above could be changed to give
* more detail to the frog’s eyes:
*
* `// Begin the drawing group.
* push();
*
* // Translate the origin to the mouse's position.
* translate(mouseX, mouseY);
*
* // Style the face.
* noStroke();
* fill('green');
*
* // Draw a face.
* circle(0, 0, 60);
*
* // Style the eyes.
* fill('white');
*
* // Draw the left eye.
* push();
* translate(-20, -20);
* ellipse(0, 0, 30, 20);
* fill('black');
* circle(0, 0, 8);
* pop();
*
* // Draw the right eye.
* push();
* translate(20, -20);
* ellipse(0, 0, 30, 20);
* fill('black');
* circle(0, 0, 8);
* pop();
*
* // End the drawing group.
* pop();
*
* // Draw a bug.
* let x = random(0, 100);
* let y = random(0, 100);
* text('🦟', x, y);`In this version, the code to draw each eye is contained between its own
* `push()` and pop() functions. Doing so makes it
* easier to add details in the correct part of a drawing.
*
* `push()` and pop() contain the effects of the
* following functions:
*
* - fill()
*
* - noFill()
*
* - noStroke()
*
* - stroke()
*
* - tint()
*
* - noTint()
*
* - strokeWeight()
*
* - strokeCap()
*
* - strokeJoin()
*
* - imageMode()
*
* - rectMode()
*
* - ellipseMode()
*
* - colorMode()
*
* - textAlign()
*
* - textFont()
*
* - textSize()
*
* - textLeading()
*
* - applyMatrix()
*
* - resetMatrix()
*
* - rotate()
*
* - scale()
*
* - shearX()
*
* - shearY()
*
* - translate()
*
* In WebGL mode, `push()` and pop() contain the
* effects of a few additional styles:
*
* - setCamera()
*
* - ambientLight()
*
* - directionalLight()
*
* - pointLight() texture()
*
* - specularMaterial()
*
* - shininess()
*
* - normalMaterial()
*
* - shader()
*/
push(): void;
/**
* Ends a drawing group that contains its own styles and transformations.
*
* By default, styles such as fill() and
* transformations such as rotate() are applied to
* all drawing that follows. The push() and `pop()`
* functions can limit the effect of styles and transformations to a specific
* group of shapes, images, and text. For example, a group of shapes could be
* translated to follow the mouse without affecting the rest of the sketch:
*
* `// Begin the drawing group.
* push();
*
* // Translate the origin to the mouse's position.
* translate(mouseX, mouseY);
*
* // Style the face.
* noStroke();
* fill('green');
*
* // Draw the face.
* circle(0, 0, 60);
*
* // Style the eyes.
* fill('white');
*
* // Draw the left eye.
* ellipse(-20, -20, 30, 20);
*
* // Draw the right eye.
* ellipse(20, -20, 30, 20);
*
* // End the drawing group.
* pop();
*
* // Draw a bug.
* let x = random(0, 100);
* let y = random(0, 100);
* text('🦟', x, y);`In the code snippet above, the bug's position isn't affected by
* `translate(mouseX, mouseY)` because that transformation is contained
* between push() and `pop()`. The bug moves around
* the entire canvas as expected.
*
* Note: push() and `pop()` are always called as a
* pair. Both functions are required to begin and end a drawing group.
*
* push() and `pop()` can also be nested to create
* subgroups. For example, the code snippet above could be changed to give
* more detail to the frog’s eyes:
*
* `// Begin the drawing group.
* push();
*
* // Translate the origin to the mouse's position.
* translate(mouseX, mouseY);
*
* // Style the face.
* noStroke();
* fill('green');
*
* // Draw a face.
* circle(0, 0, 60);
*
* // Style the eyes.
* fill('white');
*
* // Draw the left eye.
* push();
* translate(-20, -20);
* ellipse(0, 0, 30, 20);
* fill('black');
* circle(0, 0, 8);
* pop();
*
* // Draw the right eye.
* push();
* translate(20, -20);
* ellipse(0, 0, 30, 20);
* fill('black');
* circle(0, 0, 8);
* pop();
*
* // End the drawing group.
* pop();
*
* // Draw a bug.
* let x = random(0, 100);
* let y = random(0, 100);
* text('🦟', x, y);`In this version, the code to draw each eye is contained between its own
* push() and `pop()` functions. Doing so makes it
* easier to add details in the correct part of a drawing.
*
* push() and `pop()` contain the effects of the
* following functions:
*
* - fill()
*
* - noFill()
*
* - noStroke()
*
* - stroke()
*
* - tint()
*
* - noTint()
*
* - strokeWeight()
*
* - strokeCap()
*
* - strokeJoin()
*
* - imageMode()
*
* - rectMode()
*
* - ellipseMode()
*
* - colorMode()
*
* - textAlign()
*
* - textFont()
*
* - textSize()
*
* - textLeading()
*
* - applyMatrix()
*
* - resetMatrix()
*
* - rotate()
*
* - scale()
*
* - shearX()
*
* - shearY()
*
* - translate()
*
* In WebGL mode, push() and `pop()` contain the
* effects of a few additional styles:
*
* - setCamera()
*
* - ambientLight()
*
* - directionalLight()
*
* - pointLight() texture()
*
* - specularMaterial()
*
* - shininess()
*
* - normalMaterial()
*
* - shader()
*/
pop(): void;
/**
* Stores a value in the web browser's local storage.
*
* Web browsers can save small amounts of data using the built-in
* localStorage object.
* Data stored in `localStorage` can be retrieved at any point, even after
* refreshing a page or restarting the browser. Data are stored as key-value
* pairs.
*
* `storeItem()` makes it easy to store values in `localStorage` and
* getItem() makes it easy to retrieve them.
*
* The first parameter, `key`, is the name of the value to be stored as a
* string.
*
* The second parameter, `value`, is the value to be stored. Values can have
* any type.
*
* Note: Sensitive data such as passwords or personal information shouldn't be
* stored in `localStorage`.
* @param key name of the value.
* @param value value to be stored.
*/
storeItem(key: string, value: string | number | boolean | object | any[]): void;
/**
* Returns a value in the web browser's local storage.
*
* Web browsers can save small amounts of data using the built-in
* localStorage object.
* Data stored in `localStorage` can be retrieved at any point, even after
* refreshing a page or restarting the browser. Data are stored as key-value
* pairs.
*
* storeItem() makes it easy to store values in
* `localStorage` and `getItem()` makes it easy to retrieve them.
*
* The first parameter, `key`, is the name of the value to be stored as a
* string.
*
* The second parameter, `value`, is the value to be retrieved a string. For
* example, calling `getItem('size')` retrieves the value with the key `size`.
*
* Note: Sensitive data such as passwords or personal information shouldn't be
* stored in `localStorage`.
* @param key name of the value.
* @returns stored item.
*/
getItem(key: string): string | number | boolean | object | any[];
/**
* Removes all items in the web browser's local storage.
*
* Web browsers can save small amounts of data using the built-in
* localStorage object.
* Data stored in `localStorage` can be retrieved at any point, even after
* refreshing a page or restarting the browser. Data are stored as key-value
* pairs. Calling `clearStorage()` removes all data from `localStorage`.
*
* Note: Sensitive data such as passwords or personal information shouldn't be
* stored in `localStorage`.
*/
clearStorage(): void;
/**
* Removes an item from the web browser's local storage.
*
* Web browsers can save small amounts of data using the built-in
* localStorage object.
* Data stored in `localStorage` can be retrieved at any point, even after
* refreshing a page or restarting the browser. Data are stored as key-value
* pairs.
*
* storeItem() makes it easy to store values in
* `localStorage` and `removeItem()` makes it easy to delete them.
*
* The parameter, `key`, is the name of the value to remove as a string. For
* example, calling `removeItem('size')` removes the item with the key `size`.
*
* Note: Sensitive data such as passwords or personal information shouldn't be
* stored in `localStorage`.
* @param key name of the value to remove.
*/
removeItem(key: string): 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 selectors CSS selector string of element to search for.
* @param container CSS selector string, p5.Element, or
* HTMLElement to search within.
* @returns p5.Element containing the element.
*/
select(selectors: string, container?: string | p5.Element | HTMLElement): p5.Element | null;
/**
* 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 selectors CSS selector string of element to search for.
* @param container CSS selector string, p5.Element, or
* HTMLElement to search within.
* @returns array of p5.Elements containing any elements found.
*/
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 tag for the new element.
* @param content HTML content to insert into the element.
* @returns new p5.Element object.
*/
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().
*/
removeElements(): void;
/**
* Helpers for create methods.
*/
addElement(): void;
addElement(): void;
/**
* Creates a `<div></div>` element.
*
* `<div></div>` 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 `<div></div>`.
* @param html inner HTML for the new `<div></div>` element.
* @returns new p5.Element object.
*/
createDiv(html?: string): p5.Element;
/**
* Creates a paragraph element.
*
* `<p></p>` 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 `<p></p>`.
* @param html inner HTML for the new `<p></p>` element.
* @returns new p5.Element object.
*/
createP(html?: string): p5.Element;
/**
* Creates a `<span></span>` element.
*
* `<span></span>` elements are commonly used as containers
* for inline elements. For example, a `<span></span>`
* 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 `<span></span>`.
* @param html inner HTML for the new `<span></span>` element.
* @returns new p5.Element object.
*/
createSpan(html?: string): p5.Element;
/**
* Creates an `<img>` 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 src relative path or URL for the image.
* @param alt alternate text for the image.
* @returns new p5.Element object.
*/
createImg(src: string, alt: string): p5.Element;
createImg(src: string, alt: string, crossOrigin?: string, successCallback?: Function): p5.Element;
/**
* Creates an `<a></a>` 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 href URL of linked page.
* @param html inner HTML of link element to display.
* @param target target where the new link should open,
* either `'_blank'`, `'_self'`, `'_parent'`, or `'_top'`.
* @returns new p5.Element object.
*/
createA(href: string, html: string, target?: string): p5.Element;
/**
* Creates a slider `<input></input>` 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 min minimum value of the slider.
* @param max maximum value of the slider.
* @param value default value of the slider.
* @param step size for each step in the slider's range.
* @returns new p5.Element object.
*/
createSlider(min: number, max: number, value?: number, step?: number): p5.Element;
/**
* Creates a `<button></button>` 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 label displayed on the button.
* @param value value of the button.
* @returns new p5.Element object.
*/
createButton(label: string, value?: string): p5.Element;
/**
* Creates a checkbox `<input></input>` 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 label displayed after the checkbox.
* @param value value of the checkbox. Checked is `true` and unchecked is `false`.
* @returns new p5.Element object.
*/
createCheckbox(label?: string, value?: boolean): p5.Element;
/**
* Creates a dropdown menu `<select></select>` 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 `<select></select>` 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:
*
* - `mySelect.option(name, [value])` adds an option to the menu. The first paremeter, `name`, is a string that sets the option's name and value. The second parameter, `value`, is optional. If provided, it sets the value that corresponds to the key `name`. If an option with `name` already exists, its value is changed to `value`.
*
* - `mySelect.value()` returns the currently-selected option's value.
*
* - `mySelect.selected()` returns the currently-selected option.
*
* - `mySelect.selected(option)` selects the given option by default.
*
* - `mySelect.disable()` marks the whole dropdown element as disabled.
*
* - `mySelect.disable(option)` marks a given option as disabled.
*
* - `mySelect.enable()` marks the whole dropdown element as enabled.
*
* - `mySelect.enable(option)` marks a given option as enabled.
* @param multiple support multiple selections.
* @returns new p5.Element object.
*/
createSelect(multiple?: boolean): p5.Element;
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: `<input name="food"></input>`.
* If an existing `<div></div>` or `<span></span>`
* 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:
*
* - `myRadio.option(value, [label])` adds an option to the menu. The first paremeter, `value`, is a string that sets the option's value and label. The second parameter, `label`, is optional. If provided, it sets the label displayed for the `value`. If an option with `value` already exists, its label is changed and its value is returned.
*
* - `myRadio.value()` returns the currently-selected option's value.
*
* - `myRadio.selected()` returns the currently-selected option.
*
* - `myRadio.selected(value)` selects the given option and returns it as an `HTMLInputElement`.
*
* - `myRadio.disable(shouldDisable)` enables the entire radio button if `true` is passed and disables it if `false` is passed.
* @param containerElement container HTML Element, either a `<div></div>`
* or `<span></span>`.
* @returns new p5.Element object.
*/
createRadio(containerElement?: object): p5.Element;
createRadio(name?: string): p5.Element;
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:
*
* - `myPicker.value()` returns the current color as a hex string in the format `'#rrggbb'`.
*
* - `myPicker.color()` returns the current color as a p5.Color object.
* @param value default color as a CSS color string.
* @returns new p5.Element object.
*/
createColorPicker(value?: string | p5.Color): p5.Element;
/**
* Creates a text `<input></input>` 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 value default value of the input box. Defaults to an empty string `''`.
* @param type type of input. Defaults to `'text'`.
* @returns new p5.Element object.
*/
createInput(value?: string, type?: string): p5.Element;
createInput(value?: string): p5.Element;
/**
* Creates an `<input></input>` 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 callback function to call once the file loads.
* @param multiple allow multiple files to be selected.
* @returns The new input element.
*/
createFileInput(callback: (input: p5.File) => any, multiple?: boolean): p5.Element;
/**
* Creates a `<video>` element for simple audio/video playback.
*
* `createVideo()` returns a new
* p5.MediaElement object. Videos are shown by
* default. They can be hidden by calling `video.hide()` and drawn to the
* canvas using image().
*
* The first parameter, `src`, is the path the video. If a single string is
* passed, as in `'assets/topsecret.mp4'`, a single video is loaded. An array
* of strings can be used to load the same video in different formats. For
* example, `['assets/topsecret.mp4', 'assets/topsecret.ogv', 'assets/topsecret.webm']`.
* This is useful for ensuring that the video can play across different browsers with
* different capabilities. See
* MDN
* for more information about supported formats.
*
* The second parameter, `callback`, is optional. It's a function to call once
* the video is ready to play.
* @param src path to a video file, or an array of paths for
* supporting different browsers.
* @param callback function to call once the video is ready to play.
* @returns new p5.MediaElement object.
*/
createVideo(src?: string | string[], callback?: (video: p5.MediaElement
*
* The fourth and fifth parameters, `dw` and `dh`, are optional. They set the
* the width and height to draw the destination image. By default, `image()`
* draws the full source image at its original size.
*
* The sixth and seventh parameters, `sx` and `sy`, are also optional.
* These coordinates define the top left corner of a subsection to draw from
* the source image.
*
* The eighth and ninth parameters, `sw` and `sh`, are also optional.
* They define the width and height of a subsection to draw from the source
* image. By default, `image()` draws the full subsection that begins at
* `(sx, sy)` and extends to the edges of the source image.
*
* The ninth parameter, `fit`, is also optional. It enables a subsection of
* the source image to be drawn without affecting its aspect ratio. If
* `CONTAIN` is passed, the full subsection will appear within the destination
* rectangle. If `COVER` is passed, the subsection will completely cover the
* destination rectangle. This may have the effect of zooming into the
* subsection.
*
* The tenth and eleventh paremeters, `xAlign` and `yAlign`, are also
* optional. They determine how to align the fitted subsection. `xAlign` can
* be set to either `LEFT`, `RIGHT`, or `CENTER`. `yAlign` can be set to
* either `TOP`, `BOTTOM`, or `CENTER`. By default, both `xAlign` and `yAlign`
* are set to `CENTER`.
* @param img image to display.
* @param x x-coordinate of the top-left corner of the image.
* @param y y-coordinate of the top-left corner of the image.
* @param width width to draw the image.
* @param height height to draw the image.
*/
image(img: p5.Image | p5.Element | p5.Texture | p5.Framebuffer | p5.FramebufferTexture | p5.Renderer | p5.Graphics, x: number, y: number, width?: number, height?: number): void;
image(img: p5.Image | p5.Element | p5.Texture | p5.Framebuffer | p5.FramebufferTexture, dx: number, dy: number, dWidth: number, dHeight: number, sx: number, sy: number, sWidth?: number, sHeight?: number, fit?: typeof p5.CONTAIN | typeof p5.COVER, xAlign?: typeof p5.LEFT | typeof p5.RIGHT | typeof p5.CENTER, yAlign?: typeof p5.TOP | typeof p5.BOTTOM | typeof p5.CENTER): void;
/**
* Tints images using a color.
*
* The version of `tint()` with one parameter interprets it one of four ways.
* If the parameter is a number, it's interpreted as a grayscale value. If the
* parameter is a string, it's interpreted as a CSS color string. An array of
* `[R, G, B, A]` values or a p5.Color object can
* also be used to set the tint color.
*
* The version of `tint()` with two parameters uses the first one as a
* grayscale value and the second as an alpha value. For example, calling
* `tint(255, 128)` will make an image 50% transparent.
*
* The version of `tint()` with three parameters interprets them as RGB or
* HSB values, depending on the current
* colorMode(). The optional fourth parameter
* sets the alpha value. For example, `tint(255, 0, 0, 100)` will give images
* a red tint and make them transparent.
* @param v1 red or hue value.
* @param v2 green or saturation value.
* @param v3 blue or brightness.
*/
tint(v1: number, v2: number, v3: number, alpha?: number): void;
tint(value: string): void;
tint(gray: number, alpha?: number): void;
tint(values: number[]): void;
tint(color: p5.Color): void;
/**
* Removes the current tint set by tint().
*
* `noTint()` restores images to their original colors.
*/
noTint(): void;
/**
* Changes the location from which images are drawn when
* image() is called.
*
* By default, the first
* two parameters of image() are the x- and
* y-coordinates of the image's upper-left corner. The next parameters are
* its width and height. This is the same as calling `imageMode(CORNER)`.
*
* `imageMode(CORNERS)` also uses the first two parameters of
* image() as the x- and y-coordinates of the image's
* top-left corner. The third and fourth parameters are the coordinates of its
* bottom-right corner.
*
* `imageMode(CENTER)` uses the first two parameters of
* image() as the x- and y-coordinates of the image's
* center. The next parameters are its width and height.
* @param mode either CORNER, CORNERS, or CENTER.
*/
imageMode(mode: typeof p5.CORNER | typeof p5.CORNERS | typeof p5.CENTER): void;
/**
* Copies a region of pixels from one image to another.
*
* The first parameter, `srcImage`, is the
* p5.Image object to blend.
*
* The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
* to blend from the source image. `(sx, sy)` is the top-left corner of the
* region. `sw` and `sh` are the regions width and height.
*
* The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
* of the canvas to blend into. `(dx, dy)` is the top-left corner of the
* region. `dw` and `dh` are the regions width and height.
*
* The tenth parameter, `blendMode`, sets the effect used to blend the images'
* colors. The options are `BLEND`, `DARKEST`, `LIGHTEST`, `DIFFERENCE`,
* `MULTIPLY`, `EXCLUSION`, `SCREEN`, `REPLACE`, `OVERLAY`, `HARD_LIGHT`,
* `SOFT_LIGHT`, `DODGE`, `BURN`, `ADD`, or `NORMAL`
* @param srcImage source image.
* @param sx x-coordinate of the source's upper-left corner.
* @param sy y-coordinate of the source's upper-left corner.
* @param sw source image width.
* @param sh source image height.
* @param dx x-coordinate of the destination's upper-left corner.
* @param dy y-coordinate of the destination's upper-left corner.
* @param dw destination image width.
* @param dh destination image height.
* @param blendMode the blend mode. either
* BLEND, DARKEST, LIGHTEST, DIFFERENCE,
* MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT,
* SOFT_LIGHT, DODGE, BURN, ADD or NORMAL.
*/
blend(srcImage: p5.Image, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: typeof p5.BLEND | typeof p5.DARKEST | typeof p5.LIGHTEST | typeof p5.DIFFERENCE | typeof p5.MULTIPLY | typeof p5.EXCLUSION | typeof p5.SCREEN | typeof p5.REPLACE | typeof p5.OVERLAY | typeof p5.HARD_LIGHT | typeof p5.SOFT_LIGHT | typeof p5.DODGE | typeof p5.BURN | typeof p5.ADD | typeof p5.NORMAL): void;
blend(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number, blendMode: typeof p5.BLEND | typeof p5.DARKEST | typeof p5.LIGHTEST | typeof p5.DIFFERENCE | typeof p5.MULTIPLY | typeof p5.EXCLUSION | typeof p5.SCREEN | typeof p5.REPLACE | typeof p5.OVERLAY | typeof p5.HARD_LIGHT | typeof p5.SOFT_LIGHT | typeof p5.DODGE | typeof p5.BURN | typeof p5.ADD | typeof p5.NORMAL): void;
/**
* Copies pixels from a source image to a region of the canvas.
*
* The first parameter, `srcImage`, is the
* p5.Image object to blend. The source image can be
* the canvas itself or a
* p5.Image object. `copy()` will scale pixels from
* the source region if it isn't the same size as the destination region.
*
* The next four parameters, `sx`, `sy`, `sw`, and `sh` determine the region
* to copy from the source image. `(sx, sy)` is the top-left corner of the
* region. `sw` and `sh` are the region's width and height.
*
* The next four parameters, `dx`, `dy`, `dw`, and `dh` determine the region
* of the canvas to copy into. `(dx, dy)` is the top-left corner of the
* region. `dw` and `dh` are the region's width and height.
* @param srcImage source image.
* @param sx x-coordinate of the source's upper-left corner.
* @param sy y-coordinate of the source's upper-left corner.
* @param sw source image width.
* @param sh source image height.
* @param dx x-coordinate of the destination's upper-left corner.
* @param dy y-coordinate of the destination's upper-left corner.
* @param dw destination image width.
* @param dh destination image height.
*/
copy(srcImage: p5.Image | p5.Element, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
copy(sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
/**
* Applies an image filter to the canvas.
*
* The preset options are:
*
* `INVERT`
* Inverts the colors in the image. No parameter is used.
*
* `GRAY`
* Converts the image to grayscale. No parameter is used.
*
* `THRESHOLD`
* Converts the image to black and white. Pixels with a grayscale value
* above a given threshold are converted to white. The rest are converted to
* black. The threshold must be between 0.0 (black) and 1.0 (white). If no
* value is specified, 0.5 is used.
*
* `OPAQUE`
* Sets the alpha channel to entirely opaque. No parameter is used.
*
* `POSTERIZE`
* Limits the number of colors in the image. Each color channel is limited to
* the number of colors specified. Values between 2 and 255 are valid, but
* results are most noticeable with lower values. The default value is 4.
*
* `BLUR`
* Blurs the image. The level of blurring is specified by a blur radius. Larger
* values increase the blur. The default value is 4. A gaussian blur is used
* in `P2D` mode. A box blur is used in `WEBGL` mode.
*
* `ERODE`
* Reduces the light areas. No parameter is used.
*
* `DILATE`
* Increases the light areas. No parameter is used.
*
* `filter()` uses WebGL in the background by default because it's faster.
* This can be disabled in `P2D` mode by adding a `false` argument, as in
* `filter(BLUR, false)`. This may be useful to keep computation off the GPU
* or to work around a lack of WebGL support.
*
* In WebgL mode, `filter()` can also use custom shaders. See
* createFilterShader() for more
* information.
* @param filterType either THRESHOLD, GRAY, OPAQUE, INVERT,
* POSTERIZE, BLUR, ERODE, DILATE or BLUR.
* @param filterParam parameter unique to each filter.
* @param useWebGL flag to control whether to use fast
* WebGL filters (GPU) or original image
* filters (CPU); defaults to `true`.
*/
filter(filterType: typeof p5.THRESHOLD | typeof p5.GRAY | typeof p5.OPAQUE | typeof p5.INVERT | typeof p5.POSTERIZE | typeof p5.BLUR | typeof p5.ERODE | typeof p5.DILATE | typeof p5.BLUR, filterParam?: number, useWebGL?: boolean): void;
filter(filterType: typeof p5.THRESHOLD | typeof p5.GRAY | typeof p5.OPAQUE | typeof p5.INVERT | typeof p5.POSTERIZE | typeof p5.BLUR | typeof p5.ERODE | typeof p5.DILATE | typeof p5.BLUR, filterParam?: number, useWebGL?: boolean): void;
filter(shaderFilter: p5.Shader): void;
/**
* Gets a pixel or a region of pixels from the canvas.
*
* `get()` is easy to use but it's not as fast as
* pixels. Use pixels
* to read many pixel values.
*
* The version of `get()` with no parameters returns the entire canvas.
*
* The version of `get()` with two parameters interprets them as
* coordinates. It returns an array with the `[R, G, B, A]` values of the
* pixel at the given point.
*
* The version of `get()` with four parameters interprets them as coordinates
* and dimensions. It returns a subsection of the canvas as a
* p5.Image object. The first two parameters are the
* coordinates for the upper-left corner of the subsection. The last two
* parameters are the width and height of the subsection.
*
* Use p5.Image.get() to work directly with
* p5.Image objects.
* @param x x-coordinate of the pixel.
* @param y y-coordinate of the pixel.
* @param w width of the subsection to be returned.
* @param h height of the subsection to be returned.
* @returns subsection as a p5.Image object.
*/
get(x: number, y: number, w: number, h: number): p5.Image;
get(): p5.Image;
get(x: number, y: number): number[];
/**
* Loads the current value of each pixel on the canvas into the
* pixels array.
*
* `loadPixels()` must be called before reading from or writing to
* pixels.
*/
loadPixels(): void;
/**
* Sets the color of a pixel or draws an image to the canvas.
*
* `set()` is easy to use but it's not as fast as
* pixels. Use pixels
* to set many pixel values.
*
* `set()` interprets the first two parameters as x- and y-coordinates. It
* interprets the last parameter as a grayscale value, a `[R, G, B, A]` pixel
* array, a p5.Color object, or a
* p5.Image object. If an image is passed, the first
* two parameters set the coordinates for the image's upper-left corner,
* regardless of the current imageMode().
*
* updatePixels() must be called after using
* `set()` for changes to appear.
* @param x x-coordinate of the pixel.
* @param y y-coordinate of the pixel.
* @param c grayscale value | pixel array |
* p5.Color object | p5.Image to copy.
*/
set(x: number, y: number, c: number | number[] | object): void;
/**
* Updates the canvas with the RGBA values in the
* pixels array.
*
* `updatePixels()` only needs to be called after changing values in the
* pixels array. Such changes can be made directly
* after calling loadPixels() or by calling
* set().
* @param x x-coordinate of the upper-left corner of region
* to update.
* @param y y-coordinate of the upper-left corner of region
* to update.
* @param w width of region to update.
* @param h height of region to update.
*/
updatePixels(x?: number, y?: number, w?: number, h?: number): void;
updatePixels(): void;
/**
* Loads a JSON file to create an `Object`.
*
* JavaScript Object Notation
* (JSON)
* is a standard format for sending data between applications. The format is
* based on JavaScript objects which have keys and values. JSON files store
* data in an object with strings as keys. Values can be strings, numbers,
* Booleans, arrays, `null`, or other objects.
*
* The first parameter, `path`, is a string with the path to the file.
* Paths to local files should be relative, as in
* `loadJSON('assets/data.json')`. URLs such as
* `'https://example.com/data.json'` may be blocked due to browser security.
* The `path` parameter can also be defined as a `Request`
* object for more advanced usage.
*
* The second parameter, `successCallback`, is optional. If a function is
* passed, as in `loadJSON('assets/data.json', handleData)`, then the
* `handleData()` function will be called once the data loads. The object
* created from the JSON data will be passed to `handleData()` as its only argument.
* The return value of the `handleData()` function will be used as the final return
* value of `loadJSON('assets/data.json', handleData)`.
*
* The third parameter, `failureCallback`, is also optional. If a function is
* passed, as in `loadJSON('assets/data.json', handleData, handleFailure)`,
* then the `handleFailure()` function will be called if an error occurs while
* loading. The `Error` object will be passed to `handleFailure()` as its only
* argument. The return value of the `handleFailure()` function will be used as the
* final return value of `loadJSON('assets/data.json', handleData, handleFailure)`.
*
* This function returns a `Promise` and should be used in an `async` setup with
* `await`. See the examples for the usage syntax.
* @param path path of the JSON file to be loaded.
* @param successCallback function to call once the data is loaded. Will be passed the object.
* @param errorCallback function to call if the data fails to load. Will be passed an `Error` event object.
* @returns object containing the loaded data.
*/
loadJSON(path: string | Request, successCallback?: Function, errorCallback?: Function): Promise