p5 2.0.1 → 2.0.3

package/types/webgl/light.d.ts

@@ -0,0 +1,1184 @@
+// This file is auto-generated from JSDoc documentation
+
+import p5 from 'p5';
+import { Color } from '../color/p5.Color';
+import { Vector } from '../math/p5.Vector';
+
+declare module 'p5' {
+/**
+ * Creates a light that shines from all directions.Ambient light does not come from one direction. Instead, 3D shapes are
+ * lit evenly from all sides. Ambient lights are almost always used in
+ * combination with other types of lights.There are three ways to call `ambientLight()` with optional parameters to
+ * set the light’s color.The first way to call `ambientLight()` has two parameters, `gray` and
+ * `alpha`. `alpha` is optional. Grayscale and alpha values between 0 and 255
+ * can be passed to set the ambient light’s color, as in `ambientLight(50)` or
+ * `ambientLight(50, 30)`.The second way to call `ambientLight()` has one parameter, color. A
+ * p5.Color object, an array of color values, or a
+ * CSS color string, as in `ambientLight('magenta')`, can be passed to set the
+ * ambient light’s color.The third way to call `ambientLight()` has four parameters, `v1`, `v2`,
+ * `v3`, and `alpha`. `alpha` is optional. RGBA, HSBA, or HSLA values can be
+ * passed to set the ambient light’s colors, as in `ambientLight(255, 0, 0)`
+ * or `ambientLight(255, 0, 0, 30)`. Color values will be interpreted using
+ * the current colorMode().
+ *
+ * @param red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param alpha (transparency) value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to turn on the light.
+ * 
+ * let isLit = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn against a gray background. The sphere appears to change color when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Control the light.
+ * if (isLit === true) {
+ * // Use a grayscale value of 80.
+ * ambientLight(80);
+ * }
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * 
+ * // Turn on the ambient light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A faded magenta sphere drawn against a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on the lights.
+ * // Use a p5.Color object.
+ * let c = color('orchid');
+ * ambientLight(c);
+ * 
+ * // Draw the sphere.
+ * sphere();
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A faded magenta sphere drawn against a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on the lights.
+ * // Use a CSS color string.
+ * ambientLight('#DA70D6');
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A faded magenta sphere drawn against a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on the lights.
+ * // Use RGB values
+ * ambientLight(218, 112, 214);
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ */
+function ambientLight(v1: number, v2: number, v3: number, alpha?: number): void;
+
+/**
+ * @param grayscale value between 0 and 255.
+ */
+function ambientLight(gray: number, alpha?: number): void;
+
+/**
+ * @param color as a CSS string.
+ */
+function ambientLight(value: string): void;
+
+/**
+ * @param color as an array of RGBA, HSBA, or HSLA
+ * values.
+ */
+function ambientLight(values: number[]): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object.
+ */
+function ambientLight(color: p5.Color): void;
+
+/**
+ * Sets the specular color for lights.`specularColor()` affects lights that bounce off a surface in a preferred
+ * direction. These lights include
+ * directionalLight(),
+ * pointLight(), and
+ * spotLight(). The function helps to create
+ * highlights on p5.Geometry objects that are
+ * styled with specularMaterial(). If a
+ * geometry does not use
+ * specularMaterial(), then
+ * `specularColor()` will have no effect.Note: `specularColor()` doesn’t affect lights that bounce in all
+ * directions, including ambientLight() and
+ * imageLight().There are three ways to call `specularColor()` with optional parameters to
+ * set the specular highlight color.The first way to call `specularColor()` has two optional parameters, `gray`
+ * and `alpha`. Grayscale and alpha values between 0 and 255, as in
+ * `specularColor(50)` or `specularColor(50, 80)`, can be passed to set the
+ * specular highlight color.The second way to call `specularColor()` has one optional parameter,
+ * `color`. A p5.Color object, an array of color
+ * values, or a CSS color string can be passed to set the specular highlight
+ * color.The third way to call `specularColor()` has four optional parameters, `v1`,
+ * `v2`, `v3`, and `alpha`. RGBA, HSBA, or HSLA values, as in
+ * `specularColor(255, 0, 0, 80)`, can be passed to set the specular highlight
+ * color. Color values will be interpreted using the current
+ * colorMode().
+ *
+ * @param red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A white sphere drawn on a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // No specular color.
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click the canvas to add a point light.
+ * 
+ * let isLit = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn on a gray background. A spotlight starts shining when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * specularColor(100);
+ * specularMaterial(255, 255, 255);
+ * 
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ * }
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * 
+ * // Turn on the point light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a specular highlight.
+ * // Use a p5.Color object.
+ * let c = color('dodgerblue');
+ * specularColor(c);
+ * 
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a specular highlight.
+ * // Use a CSS color string.
+ * specularColor('#1E90FF');
+ * 
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A black sphere drawn on a gray background. An area on the surface of the sphere is highlighted in blue.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a specular highlight.
+ * // Use RGB values.
+ * specularColor(30, 144, 255);
+ * 
+ * // Add a white point light from the top-right.
+ * pointLight(255, 255, 255, 30, -20, 40);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Add a white specular material.
+ * specularMaterial(255, 255, 255);
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ */
+function specularColor(v1: number, v2: number, v3: number): void;
+
+/**
+ * @param grayscale value between 0 and 255.
+ */
+function specularColor(gray: number): void;
+
+/**
+ * @param color as a CSS string.
+ */
+function specularColor(value: string): void;
+
+/**
+ * @param color as an array of RGBA, HSBA, or HSLA
+ * values.
+ */
+function specularColor(values: number[]): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object.
+ */
+function specularColor(color: p5.Color): void;
+
+/**
+ * Creates a light that shines in one direction.Directional lights don’t shine from a specific point. They’re like a sun
+ * that shines from somewhere offscreen. The light’s direction is set using
+ * three `(x, y, z)` values between -1 and 1. For example, setting a light’s
+ * direction as `(1, 0, 0)` will light p5.Geometry
+ * objects from the left since the light faces directly to the right. A
+ * maximum of 5 directional lights can be active at once.There are four ways to call `directionalLight()` with parameters to set the
+ * light’s color and direction.The first way to call `directionalLight()` has six parameters. The first
+ * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
+ * current colorMode(). The last three
+ * parameters, `x`, `y`, and `z`, set the light’s direction. For example,
+ * `directionalLight(255, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
+ * that shines to the right `(1, 0, 0)`.The second way to call `directionalLight()` has four parameters. The first
+ * three parameters, `v1`, `v2`, and `v3`, set the light’s color using the
+ * current colorMode(). The last parameter,
+ * `direction` sets the light’s direction using a
+ * p5.Vector object. For example,
+ * `directionalLight(255, 0, 0, lightDir)` creates a red `(255, 0, 0)` light
+ * that shines in the direction the `lightDir` vector points.The third way to call `directionalLight()` has four parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * last three parameters, `x`, `y`, and `z`, set the light’s direction. For
+ * example, `directionalLight(myColor, 1, 0, 0)` creates a light that shines
+ * to the right `(1, 0, 0)` with the color value of `myColor`.The fourth way to call `directionalLight()` has two parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * second parameter, `direction`, sets the light’s direction using a
+ * p5.Vector object. For example,
+ * `directionalLight(myColor, lightDir)` creates a light that shines in the
+ * direction the `lightDir` vector points with the color value of `myColor`.
+ *
+ * @param red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param x-component of the light's direction between -1 and 1.
+ * @param y-component of the light's direction between -1 and 1.
+ * @param z-component of the light's direction between -1 and 1.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the directional light.
+ * 
+ * let isLit = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a red directional light from above.
+ * // Use RGB values and XYZ directions.
+ * directionalLight(255, 0, 0, 0, 1, 0);
+ * }
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a red directional light from above.
+ * // Use a p5.Color object and XYZ directions.
+ * let c = color(255, 0, 0);
+ * directionalLight(c, 0, 1, 0);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a red directional light from above.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightDir = createVector(0, 1, 0);
+ * directionalLight(c, lightDir);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ */
+function directionalLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): void;
+
+/**
+ * @param direction of the light as a
+ * <a href="#/p5.Vector">p5.Vector</a> object.
+ */
+function directionalLight(v1: number, v2: number, v3: number, direction: p5.Vector): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object,
+ * an array of color values, or as a CSS string.
+ */
+function directionalLight(color: p5.Color | number[] | string, x: number, y: number, z: number): void;
+
+/**
+ */
+function directionalLight(color: p5.Color | number[] | string, direction: p5.Vector): void;
+
+/**
+ * Creates a light that shines from a point in all directions.Point lights are like light bulbs that shine in all directions. They can be
+ * placed at different positions to achieve different lighting effects. A
+ * maximum of 5 point lights can be active at once.There are four ways to call `pointLight()` with parameters to set the
+ * light’s color and position.The first way to call `pointLight()` has six parameters. The first three
+ * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
+ * colorMode(). The last three parameters, `x`,
+ * `y`, and `z`, set the light’s position. For example,
+ * `pointLight(255, 0, 0, 50, 0, 0)` creates a red `(255, 0, 0)` light that
+ * shines from the coordinates `(50, 0, 0)`.The second way to call `pointLight()` has four parameters. The first three
+ * parameters, `v1`, `v2`, and `v3`, set the light’s color using the current
+ * colorMode(). The last parameter, position sets
+ * the light’s position using a p5.Vector object.
+ * For example, `pointLight(255, 0, 0, lightPos)` creates a red `(255, 0, 0)`
+ * light that shines from the position set by the `lightPos` vector.The third way to call `pointLight()` has four parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * last three parameters, `x`, `y`, and `z`, set the light’s position. For
+ * example, `directionalLight(myColor, 50, 0, 0)` creates a light that shines
+ * from the coordinates `(50, 0, 0)` with the color value of `myColor`.The fourth way to call `pointLight()` has two parameters. The first
+ * parameter, `color`, sets the light’s color using a
+ * p5.Color object or an array of color values. The
+ * second parameter, `position`, sets the light’s position using a
+ * p5.Vector object. For example,
+ * `directionalLight(myColor, lightPos)` creates a light that shines from the
+ * position set by the `lightPos` vector with the color value of `myColor`.
+ *
+ * @param red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param x-coordinate of the light.
+ * @param y-coordinate of the light.
+ * @param z-coordinate of the light.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the point light.
+ * 
+ * let isLit = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn on a gray background. A red light starts shining from above when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Control the light.
+ * if (isLit === true) {
+ * // Add a red point light from above.
+ * // Use RGB values and XYZ coordinates.
+ * pointLight(255, 0, 0, 0, -150, 0);
+ * }
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * 
+ * // Turn on the point light when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a red point light from above.
+ * // Use a p5.Color object and XYZ directions.
+ * let c = color(255, 0, 0);
+ * pointLight(c, 0, -150, 0);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn on a gray background. The top of the sphere appears bright red. The color gets darker toward the bottom.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a red point light from above.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightPos = createVector(0, -150, 0);
+ * pointLight(c, lightPos);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('Four spheres arranged in a square and drawn on a gray background. The spheres appear bright red toward the center of the square. The color gets darker toward the corners of the square.');
+ * }
+ * 
+ * function draw() {
+ * background(200);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Add a red point light that points to the center of the scene.
+ * // Use a p5.Color object and a p5.Vector object.
+ * let c = color(255, 0, 0);
+ * let lightPos = createVector(0, 0, 65);
+ * pointLight(c, lightPos);
+ * 
+ * // Style the spheres.
+ * noStroke();
+ * 
+ * // Draw a sphere up and to the left.
+ * push();
+ * translate(-25, -25, 25);
+ * sphere(10);
+ * pop();
+ * 
+ * // Draw a box up and to the right.
+ * push();
+ * translate(25, -25, 25);
+ * sphere(10);
+ * pop();
+ * 
+ * // Draw a sphere down and to the left.
+ * push();
+ * translate(-25, 25, 25);
+ * sphere(10);
+ * pop();
+ * 
+ * // Draw a box down and to the right.
+ * push();
+ * translate(25, 25, 25);
+ * sphere(10);
+ * pop();
+ * }
+ * </code>
+ * </div>
+ */
+function pointLight(v1: number, v2: number, v3: number, x: number, y: number, z: number): void;
+
+/**
+ * @param position of the light as a
+ * <a href="#/p5.Vector">p5.Vector</a> object.
+ */
+function pointLight(v1: number, v2: number, v3: number, position: p5.Vector): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object,
+ * an array of color values, or a CSS string.
+ */
+function pointLight(color: p5.Color | number[] | string, x: number, y: number, z: number): void;
+
+/**
+ */
+function pointLight(color: p5.Color | number[] | string, position: p5.Vector): void;
+
+/**
+ * Creates an ambient light from an image.`imageLight()` simulates a light shining from all directions. The effect is
+ * like placing the sketch at the center of a giant sphere that uses the image
+ * as its texture. The image's diffuse light will be affected by
+ * fill() and the specular reflections will be
+ * affected by specularMaterial() and
+ * shininess().The parameter, `img`, is the p5.Image object to
+ * use as the light source.
+ *
+ * @param image to use as the light source.
+ * @example <div class="notest">
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * let img;
+ * 
+ * async function setup() {
+ * // Load an image and create a p5.Image object.
+ * img = await loadImage('assets/outdoor_spheremap.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape.');
+ * }
+ * 
+ * function draw() {
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Draw the image as a panorama (360˚ background).
+ * panorama(img);
+ * 
+ * // Add a soft ambient light.
+ * ambientLight(50);
+ * 
+ * // Add light from the image.
+ * imageLight(img);
+ * 
+ * // Style the sphere.
+ * specularMaterial(20);
+ * shininess(100);
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ */
+function imageLight(img: p5.image): void;
+
+/**
+ * Creates an immersive 3D background.`panorama()` transforms images containing 360˚ content, such as maps or
+ * HDRIs, into immersive 3D backgrounds that surround a sketch. Exploring the
+ * space requires changing the camera's perspective with functions such as
+ * orbitControl() or
+ * camera().
+ *
+ * @param 360˚ image to use as the background.
+ * @example <div class="notest">
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * let img;
+ * 
+ * async function setup() {
+ * // Load an image and create a p5.Image object.
+ * img = await loadImage('assets/outdoor_spheremap.jpg');
+ * 
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere floating above a landscape. The surface of the sphere reflects the landscape. The full landscape is viewable in 3D as the user drags the mouse.');
+ * }
+ * 
+ * function draw() {
+ * // Add the panorama.
+ * panorama(img);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Use the image as a light source.
+ * imageLight(img);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * specularMaterial(50);
+ * shininess(200);
+ * metalness(100);
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * </code>
+ * </div>
+ */
+function panorama(img: p5.Image): void;
+
+/**
+ * Places an ambient and directional light in the scene.
+ * The lights are set to ambientLight(128, 128, 128) and
+ * directionalLight(128, 128, 128, 0, 0, -1).Note: lights need to be called (whether directly or indirectly)
+ * within draw() to remain persistent in a looping program.
+ * Placing them in setup() will cause them to only have an effect
+ * the first time through the loop.
+ *
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to turn on the lights.
+ * 
+ * let isLit = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A white box drawn against a gray background. The quality of the light changes when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(50);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Control the lights.
+ * if (isLit === true) {
+ * lights();
+ * }
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * 
+ * // Turn on the lights when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A white box drawn against a gray background.');
+ * }
+ * 
+ * function draw() {
+ * background(50);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on the lights.
+ * ambientLight(128, 128, 128);
+ * directionalLight(128, 128, 128, 0, 0, -1);
+ * 
+ * // Draw the box.
+ * box();
+ * }
+ * </code>
+ * </div>
+ */
+function lights(): void;
+
+/**
+ * Sets the falloff rate for pointLight()
+ * and spotLight().A light’s falloff describes the intensity of its beam at a distance. For
+ * example, a lantern has a slow falloff, a flashlight has a medium falloff,
+ * and a laser pointer has a sharp falloff.`lightFalloff()` has three parameters, `constant`, `linear`, and
+ * `quadratic`. They’re numbers used to calculate falloff at a distance, `d`,
+ * as follows:`falloff = 1 / (constant + d * linear + (d * d) * quadratic)`Note: `constant`, `linear`, and `quadratic` should always be set to values
+ * greater than 0.
+ *
+ * @param constant value for calculating falloff.
+ * @param linear value for calculating falloff.
+ * @param quadratic value for calculating falloff.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to change the falloff rate.
+ * 
+ * let useFalloff = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A sphere drawn against a gray background. The intensity of the light changes when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(50);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Set the light falloff.
+ * if (useFalloff === true) {
+ * lightFalloff(2, 0, 0);
+ * }
+ * 
+ * // Add a white point light from the front.
+ * pointLight(255, 255, 255, 0, 0, 100);
+ * 
+ * // Style the sphere.
+ * noStroke();
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * 
+ * // Change the falloff value when the user double-clicks.
+ * function doubleClicked() {
+ * useFalloff = true;
+ * }
+ * </code>
+ * </div>
+ */
+function lightFalloff(constant: number, linear: number, quadratic: number): void;
+
+/**
+ * Creates a light that shines from a point in one direction.Spot lights are like flashlights that shine in one direction creating a
+ * cone of light. The shape of the cone can be controlled using the angle and
+ * concentration parameters. A maximum of 5 spot lights can be active at once.There are eight ways to call `spotLight()` with parameters to set the
+ * light’s color, position, direction. For example,
+ * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0)` creates a red `(255, 0, 0)` light
+ * at the origin `(0, 0, 0)` that points to the right `(1, 0, 0)`.The `angle` parameter is optional. It sets the radius of the light cone.
+ * For example, `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16)` creates a
+ * red `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
+ * `(1, 0, 0)` with an angle of `PI / 16` radians. By default, `angle` is
+ * `PI / 3` radians.The `concentration` parameter is also optional. It focuses the light
+ * towards the center of the light cone. For example,
+ * `spotLight(255, 0, 0, 0, 0, 0, 1, 0, 0, PI / 16, 50)` creates a red
+ * `(255, 0, 0)` light at the origin `(0, 0, 0)` that points to the right
+ * `(1, 0, 0)` with an angle of `PI / 16` radians at concentration of 50. By
+ * default, `concentration` is 100.
+ *
+ * @param red or hue value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param green or saturation value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param blue, brightness, or lightness value in the current
+ * <a href="#/p5/colorMode">colorMode()</a>.
+ * @param x-coordinate of the light.
+ * @param y-coordinate of the light.
+ * @param z-coordinate of the light.
+ * @param x-component of light direction between -1 and 1.
+ * @param y-component of light direction between -1 and 1.
+ * @param z-component of light direction between -1 and 1.
+ * @param angle of the light cone. Defaults to `PI / 3`.
+ * @param concentration of the light. Defaults to 100.
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to adjust the spotlight.
+ * 
+ * let isLit = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(50);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on the lights.
+ * lights();
+ * 
+ * // Control the spotlight.
+ * if (isLit === true) {
+ * // Add a red spot light that shines into the screen.
+ * // Set its angle to PI / 32 radians.
+ * spotLight(255, 0, 0, 0, 0, 100, 0, 0, -1, PI / 32);
+ * }
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * 
+ * // Turn on the spotlight when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ * </code>
+ * </div>
+ * 
+ * <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * // Double-click to adjust the spotlight.
+ * 
+ * let isLit = false;
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('A white sphere drawn on a gray background. A red spotlight starts shining when the user double-clicks.');
+ * }
+ * 
+ * function draw() {
+ * background(50);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on the lights.
+ * lights();
+ * 
+ * // Control the spotlight.
+ * if (isLit === true) {
+ * // Add a red spot light that shines into the screen.
+ * // Set its angle to PI / 3 radians (default).
+ * // Set its concentration to 1000.
+ * let c = color(255, 0, 0);
+ * let position = createVector(0, 0, 100);
+ * let direction = createVector(0, 0, -1);
+ * spotLight(c, position, direction, PI / 3, 1000);
+ * }
+ * 
+ * // Draw the sphere.
+ * sphere(30);
+ * }
+ * 
+ * // Turn on the spotlight when the user double-clicks.
+ * function doubleClicked() {
+ * isLit = true;
+ * }
+ * </code>
+ * </div>
+ */
+function spotLight(v1: number, v2: number, v3: number, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
+
+/**
+ * @param color as a <a href="#/p5.Color">p5.Color</a> object,
+ * an array of color values, or a CSS string.
+ * @param position of the light as a <a href="#/p5.Vector">p5.Vector</a> object.
+ * @param direction of light as a <a href="#/p5.Vector">p5.Vector</a> object.
+ */
+function spotLight(color: p5.Color | number[] | string, position: p5.Vector, direction: p5.Vector, angle?: number, concentration?: number): void;
+
+/**
+ */
+function spotLight(v1: number, v2: number, v3: number, position: p5.Vector, direction: p5.Vector, angle?: number, concentration?: number): void;
+
+/**
+ */
+function spotLight(color: p5.Color | number[] | string, x: number, y: number, z: number, direction: p5.Vector, angle?: number, concentration?: number): void;
+
+/**
+ */
+function spotLight(color: p5.Color | number[] | string, position: p5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
+
+/**
+ */
+function spotLight(v1: number, v2: number, v3: number, x: number, y: number, z: number, direction: p5.Vector, angle?: number, concentration?: number): void;
+
+/**
+ */
+function spotLight(v1: number, v2: number, v3: number, position: p5.Vector, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
+
+/**
+ */
+function spotLight(color: p5.Color | number[] | string, x: number, y: number, z: number, rx: number, ry: number, rz: number, angle?: number, concentration?: number): void;
+
+/**
+ * Removes all lights from the sketch.Calling `noLights()` removes any lights created with
+ * lights(),
+ * ambientLight(),
+ * directionalLight(),
+ * pointLight(), or
+ * spotLight(). These functions may be called
+ * after `noLights()` to create a new lighting scheme.
+ *
+ * @example <div>
+ * <code>
+ * // Click and drag the mouse to view the scene from different angles.
+ * 
+ * function setup() {
+ * createCanvas(100, 100, WEBGL);
+ * 
+ * describe('Two spheres drawn against a gray background. The top sphere is white and the bottom sphere is red.');
+ * }
+ * 
+ * function draw() {
+ * background(50);
+ * 
+ * // Enable orbiting with the mouse.
+ * orbitControl();
+ * 
+ * // Turn on the lights.
+ * lights();
+ * 
+ * // Style the spheres.
+ * noStroke();
+ * 
+ * // Draw the top sphere.
+ * push();
+ * translate(0, -25, 0);
+ * sphere(20);
+ * pop();
+ * 
+ * // Turn off the lights.
+ * noLights();
+ * 
+ * // Add a red directional light that points into the screen.
+ * directionalLight(255, 0, 0, 0, 0, -1);
+ * 
+ * // Draw the bottom sphere.
+ * push();
+ * translate(0, 25, 0);
+ * sphere(20);
+ * pop();
+ * }
+ * </code>
+ * </div>
+ */
+function noLights(): void;
+
+}
+
+export default function light(p5: any, fn: any): void;