light.js

/**
 * @module 3D
 * @submodule Lights
 * @for p5
 * @requires core
 */

import { RendererGL } from './p5.RendererGL';
import { Vector } from '../math/p5.Vector';
import { Color } from '../color/p5.Color';

function light(p5, fn){
  /**
   * 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
   * <a href="#/p5.Color">p5.Color</a> 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 <a href="#/p5/colorMode">colorMode()</a>.
   *
   * @method ambientLight
   * @param  {Number}        v1 red or hue value in the current
   *                            <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}        v2 green or saturation value in the current
   *                            <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}        v3 blue, brightness, or lightness value in the current
   *                            <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}        [alpha] alpha (transparency) value in the current
   *                                 <a href="#/p5/colorMode">colorMode()</a>.
   * @chainable
   *
   * @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>
   */

  /**
   * @method ambientLight
   * @param  {Number}        gray  grayscale value between 0 and 255.
   * @param  {Number}        [alpha]
   * @chainable
   */

  /**
   * @method ambientLight
   * @param  {String}        value color as a CSS string.
   * @chainable
   */

  /**
   * @method ambientLight
   * @param  {Number[]}      values color as an array of RGBA, HSBA, or HSLA
   *                                 values.
   * @chainable
   */

  /**
   * @method ambientLight
   * @param  {p5.Color}      color color as a <a href="#/p5.Color">p5.Color</a> object.
   * @chainable
   */
  fn.ambientLight = function (v1, v2, v3, a) {
    this._assert3d('ambientLight');
    // p5._validateParameters('ambientLight', arguments);

    this._renderer.ambientLight(...arguments);

    return this;
  };

  /**
   * Sets the specular color for lights.
   *
   * `specularColor()` affects lights that bounce off a surface in a preferred
   * direction. These lights include
   * <a href="#/p5/directionalLight">directionalLight()</a>,
   * <a href="#/p5/pointLight">pointLight()</a>, and
   * <a href="#/p5/spotLight">spotLight()</a>. The function helps to create
   * highlights on <a href="#/p5.Geometry">p5.Geometry</a> objects that are
   * styled with <a href="#/p5/specularMaterial">specularMaterial()</a>. If a
   * geometry does not use
   * <a href="#/p5/specularMaterial">specularMaterial()</a>, then
   * `specularColor()` will have no effect.
   *
   * Note: `specularColor()` doesn’t affect lights that bounce in all
   * directions, including <a href="#/p5/ambientLight">ambientLight()</a> and
   * <a href="#/p5/imageLight">imageLight()</a>.
   *
   * 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 <a href="#/p5.Color">p5.Color</a> 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
   * <a href="#/p5/colorMode">colorMode()</a>.
   *
   * @method specularColor
   * @param  {Number}        v1 red or hue value in the current
   *                            <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}        v2 green or saturation value in the current
   *                            <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}        v3 blue, brightness, or lightness value in the current
   *                            <a href="#/p5/colorMode">colorMode()</a>.
   * @chainable
   *
   * @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>
   */

  /**
   * @method specularColor
   * @param  {Number}        gray grayscale value between 0 and 255.
   * @chainable
   */

  /**
   * @method specularColor
   * @param  {String}        value color as a CSS string.
   * @chainable
   */

  /**
   * @method specularColor
   * @param  {Number[]}      values color as an array of RGBA, HSBA, or HSLA
   *                                 values.
   * @chainable
   */

  /**
   * @method specularColor
   * @param  {p5.Color}      color color as a <a href="#/p5.Color">p5.Color</a> object.
   * @chainable
   */
  fn.specularColor = function (v1, v2, v3) {
    this._assert3d('specularColor');
    // p5._validateParameters('specularColor', arguments);

    this._renderer.specularColor(...arguments);

    return this;
  };

  /**
   * 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 <a href="#/p5.Geometry">p5.Geometry</a>
   * 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 <a href="#/p5/colorMode">colorMode()</a>. 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 <a href="#/p5/colorMode">colorMode()</a>. The last parameter,
   * `direction` sets the light’s direction using a
   * <a href="#/p5.Geometry">p5.Geometry</a> 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
   * <a href="#/p5.Color">p5.Color</a> 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
   * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
   * second parameter, `direction`, sets the light’s direction using a
   * <a href="#/p5.Color">p5.Color</a> object. For example,
   * `directionalLight(myColor, lightDir)` creates a light that shines in the
   * direction the `lightDir` vector points with the color value of `myColor`.
   *
   * @method directionalLight
   * @param  {Number}    v1 red or hue value in the current
   *                        <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    v2 green or saturation value in the current
   *                        <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    v3 blue, brightness, or lightness value in the current
   *                        <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    x  x-component of the light's direction between -1 and 1.
   * @param  {Number}    y  y-component of the light's direction between -1 and 1.
   * @param  {Number}    z  z-component of the light's direction between -1 and 1.
   * @chainable
   *
   * @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>
   */

  /**
   * @method directionalLight
   * @param  {Number}    v1
   * @param  {Number}    v2
   * @param  {Number}    v3
   * @param  {p5.Vector} direction direction of the light as a
   *                               <a href="#/p5.Vector">p5.Vector</a> object.
   * @chainable
   */

  /**
   * @method directionalLight
   * @param  {p5.Color|Number[]|String} color color as a <a href="#/p5.Color">p5.Color</a> object,
   *                                           an array of color values, or as a CSS string.
   * @param  {Number}                   x
   * @param  {Number}                   y
   * @param  {Number}                   z
   * @chainable
   */

  /**
   * @method directionalLight
   * @param  {p5.Color|Number[]|String} color
   * @param  {p5.Vector}                direction
   * @chainable
   */
  fn.directionalLight = function (v1, v2, v3, x, y, z) {
    this._assert3d('directionalLight');
    // p5._validateParameters('directionalLight', arguments);

    //@TODO: check parameters number
    this._renderer.directionalLight(...arguments);

    return this;
  };

  /**
   * 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
   * <a href="#/p5/colorMode">colorMode()</a>. 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
   * <a href="#/p5/colorMode">colorMode()</a>. The last parameter, position sets
   * the light’s position using a <a href="#/p5.Vector">p5.Vector</a> 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
   * <a href="#/p5.Color">p5.Color</a> 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
   * <a href="#/p5.Color">p5.Color</a> object or an array of color values. The
   * second parameter, `position`, sets the light’s position using a
   * <a href="#/p5.Vector">p5.Vector</a> 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`.
   *
   * @method pointLight
   * @param  {Number}    v1 red or hue value in the current
   *                        <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    v2 green or saturation value in the current
   *                        <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    v3 blue, brightness, or lightness value in the current
   *                        <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    x  x-coordinate of the light.
   * @param  {Number}    y  y-coordinate of the light.
   * @param  {Number}    z  z-coordinate of the light.
   * @chainable
   *
   * @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>
   */

  /**
   * @method pointLight
   * @param  {Number}     v1
   * @param  {Number}     v2
   * @param  {Number}     v3
   * @param  {p5.Vector}  position position of the light as a
   *                               <a href="#/p5.Vector">p5.Vector</a> object.
   * @chainable
   */

  /**
   * @method pointLight
   * @param  {p5.Color|Number[]|String} color color as a <a href="#/p5.Color">p5.Color</a> object,
   *                                          an array of color values, or a CSS string.
   * @param  {Number}                   x
   * @param  {Number}                   y
   * @param  {Number}                   z
   * @chainable
   */

  /**
   * @method pointLight
   * @param  {p5.Color|Number[]|String} color
   * @param  {p5.Vector}                position
   * @chainable
   */
  fn.pointLight = function (v1, v2, v3, x, y, z) {
    this._assert3d('pointLight');
    // p5._validateParameters('pointLight', arguments);

    //@TODO: check parameters number
    this._renderer.pointLight(...arguments);

    return this;
  };

  /**
   * 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
   * <a href="#/p5/fill">fill()</a> and the specular reflections will be
   * affected by <a href="#/p5/specularMaterial">specularMaterial()</a> and
   * <a href="#/p5/shininess">shininess()</a>.
   *
   * The parameter, `img`, is the <a href="#/p5.Image">p5.Image</a> object to
   * use as the light source.
   *
   * @method imageLight
   * @param  {p5.image}    img 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>
   */
  fn.imageLight = function (img) {
    this._renderer.imageLight(img);
  };

  /**
   * 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
   * <a href="#/p5/orbitControl">orbitControl()</a> or
   * <a href="#/p5/camera">camera()</a>.
   *
   * @method panorama
   * @param {p5.Image} img 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>
   */
  fn.panorama = function (img) {
    this.filter(this._renderer._getSphereMapping(img));
  };

  /**
   * 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.
   *
   * @method lights
   * @chainable
   *
   * @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>
   */
  fn.lights = function () {
    this._assert3d('lights');
    // Both specify gray by default.
    this._renderer.lights();
    return this;
  };

  /**
   * Sets the falloff rate for <a href="#/p5/pointLight">pointLight()</a>
   * and <a href="#/p5/spotLight">spotLight()</a>.
   *
   * 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.
   *
   * @method lightFalloff
   * @param {Number} constant  constant value for calculating falloff.
   * @param {Number} linear    linear value for calculating falloff.
   * @param {Number} quadratic quadratic value for calculating falloff.
   * @chainable
   *
   * @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>
   */
  fn.lightFalloff = function (
    constantAttenuation,
    linearAttenuation,
    quadraticAttenuation
  ) {
    this._assert3d('lightFalloff');
    // p5._validateParameters('lightFalloff', arguments);

    this._renderer.lightFalloff(
      constantAttenuation,
      linearAttenuation,
      quadraticAttenuation
    );

    return this;
  };

  /**
   * 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.
   *
   * @method spotLight
   * @param  {Number}    v1               red or hue value in the current
   *                                      <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    v2               green or saturation value in the current
   *                                      <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    v3               blue, brightness, or lightness value in the current
   *                                      <a href="#/p5/colorMode">colorMode()</a>.
   * @param  {Number}    x                x-coordinate of the light.
   * @param  {Number}    y                y-coordinate of the light.
   * @param  {Number}    z                z-coordinate of the light.
   * @param  {Number}    rx               x-component of light direction between -1 and 1.
   * @param  {Number}    ry               y-component of light direction between -1 and 1.
   * @param  {Number}    rz               z-component of light direction between -1 and 1.
   * @param  {Number}    [angle]          angle of the light cone. Defaults to `PI / 3`.
   * @param  {Number}    [concentration]  concentration of the light. Defaults to 100.
   * @chainable
   *
   * @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>
   */
  /**
   * @method spotLight
   * @param  {p5.Color|Number[]|String} color     color as a <a href="#/p5.Color">p5.Color</a> object,
   *                                              an array of color values, or a CSS string.
   * @param  {p5.Vector}                position  position of the light as a <a href="#/p5.Vector">p5.Vector</a> object.
   * @param  {p5.Vector}                direction direction of light as a <a href="#/p5.Vector">p5.Vector</a> object.
   * @param  {Number}                   [angle]
   * @param  {Number}                   [concentration]
   */
  /**
   * @method spotLight
   * @param  {Number}     v1
   * @param  {Number}     v2
   * @param  {Number}     v3
   * @param  {p5.Vector}  position
   * @param  {p5.Vector}  direction
   * @param  {Number}     [angle]
   * @param  {Number}     [concentration]
   */
  /**
   * @method spotLight
   * @param  {p5.Color|Number[]|String} color
   * @param  {Number}                   x
   * @param  {Number}                   y
   * @param  {Number}                   z
   * @param  {p5.Vector}                direction
   * @param  {Number}                   [angle]
   * @param  {Number}                   [concentration]
   */
  /**
   * @method spotLight
   * @param  {p5.Color|Number[]|String} color
   * @param  {p5.Vector}                position
   * @param  {Number}                   rx
   * @param  {Number}                   ry
   * @param  {Number}                   rz
   * @param  {Number}                   [angle]
   * @param  {Number}                   [concentration]
   */
  /**
   * @method spotLight
   * @param  {Number}     v1
   * @param  {Number}     v2
   * @param  {Number}     v3
   * @param  {Number}     x
   * @param  {Number}     y
   * @param  {Number}     z
   * @param  {p5.Vector}  direction
   * @param  {Number}     [angle]
   * @param  {Number}     [concentration]
   */
  /**
   * @method spotLight
   * @param  {Number}     v1
   * @param  {Number}     v2
   * @param  {Number}     v3
   * @param  {p5.Vector}  position
   * @param  {Number}     rx
   * @param  {Number}     ry
   * @param  {Number}     rz
   * @param  {Number}     [angle]
   * @param  {Number}     [concentration]
   */
  /**
   * @method spotLight
   * @param  {p5.Color|Number[]|String} color
   * @param  {Number}                   x
   * @param  {Number}                   y
   * @param  {Number}                   z
   * @param  {Number}                   rx
   * @param  {Number}                   ry
   * @param  {Number}                   rz
   * @param  {Number}                   [angle]
   * @param  {Number}                   [concentration]
   */
  fn.spotLight = function (
    v1,
    v2,
    v3,
    x,
    y,
    z,
    nx,
    ny,
    nz,
    angle,
    concentration
  ) {
    this._assert3d('spotLight');
    // p5._validateParameters('spotLight', arguments);

    this._renderer.spotLight(...arguments);

    return this;
  };

  /**
   * Removes all lights from the sketch.
   *
   * Calling `noLights()` removes any lights created with
   * <a href="#/p5/lights">lights()</a>,
   * <a href="#/p5/ambientLight">ambientLight()</a>,
   * <a href="#/p5/directionalLight">directionalLight()</a>,
   * <a href="#/p5/pointLight">pointLight()</a>, or
   * <a href="#/p5/spotLight">spotLight()</a>. These functions may be called
   * after `noLights()` to create a new lighting scheme.
   *
   * @method noLights
   * @chainable
   *
   * @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>
   */
  fn.noLights = function (...args) {
    this._assert3d('noLights');
    // p5._validateParameters('noLights', args);

    this._renderer.noLights();

    return this;
  };


  RendererGL.prototype.ambientLight = function(v1, v2, v3, a) {
    const color = this._pInst.color(...arguments);

    this.states.setValue('ambientLightColors', [...this.states.ambientLightColors]);
    this.states.ambientLightColors.push(
      color._array[0],
      color._array[1],
      color._array[2]
    );

    this.states.setValue('enableLighting', true);
  }

  RendererGL.prototype.specularColor = function(v1, v2, v3) {
    const color = this._pInst.color(...arguments);

    this.states.setValue('specularColors', [
      color._array[0],
      color._array[1],
      color._array[2]
    ]);
  }

  RendererGL.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
    let color;
    if (v1 instanceof Color) {
      color = v1;
    } else {
      color = this._pInst.color(v1, v2, v3);
    }

    let _x, _y, _z;
    const v = arguments[arguments.length - 1];
    if (typeof v === 'number') {
      _x = arguments[arguments.length - 3];
      _y = arguments[arguments.length - 2];
      _z = arguments[arguments.length - 1];
    } else {
      _x = v.x;
      _y = v.y;
      _z = v.z;
    }

    // normalize direction
    const l = Math.sqrt(_x * _x + _y * _y + _z * _z);
    this.states.setValue('directionalLightDirections', [...this.states.directionalLightDirections]);
    this.states.directionalLightDirections.push(_x / l, _y / l, _z / l);

    this.states.setValue('directionalLightDiffuseColors', [...this.states.directionalLightDiffuseColors]);
    this.states.directionalLightDiffuseColors.push(
      color._array[0],
      color._array[1],
      color._array[2]
    );

    this.states.setValue('directionalLightSpecularColors', [...this.states.directionalLightSpecularColors]);
    Array.prototype.push.apply(
      this.states.directionalLightSpecularColors,
      this.states.specularColors
    );

    this.states.setValue('enableLighting', true);
  }

  RendererGL.prototype.pointLight = function(v1, v2, v3, x, y, z) {
    let color;
    if (v1 instanceof Color) {
      color = v1;
    } else {
      color = this._pInst.color(v1, v2, v3);
    }

    let _x, _y, _z;
    const v = arguments[arguments.length - 1];
    if (typeof v === 'number') {
      _x = arguments[arguments.length - 3];
      _y = arguments[arguments.length - 2];
      _z = arguments[arguments.length - 1];
    } else {
      _x = v.x;
      _y = v.y;
      _z = v.z;
    }

    this.states.setValue('pointLightPositions', [...this.states.pointLightPositions]);
    this.states.pointLightPositions.push(_x, _y, _z);

    this.states.setValue('pointLightDiffuseColors', [...this.states.pointLightDiffuseColors]);
    this.states.pointLightDiffuseColors.push(
      color._array[0],
      color._array[1],
      color._array[2]
    );

    this.states.setValue('pointLightSpecularColors', [...this.states.pointLightSpecularColors]);
    Array.prototype.push.apply(
      this.states.pointLightSpecularColors,
      this.states.specularColors
    );

    this.states.setValue('enableLighting', true);
  }

  RendererGL.prototype.imageLight = function(img) {
    // activeImageLight property is checked by _setFillUniforms
    // for sending uniforms to the fillshader
    this.states.setValue('activeImageLight', img);
    this.states.setValue('enableLighting', true);
  }

  RendererGL.prototype.lights = function() {
    const grayColor = this._pInst.color('rgb(128,128,128)');
    this.ambientLight(grayColor);
    this.directionalLight(grayColor, 0, 0, -1);
  }

  RendererGL.prototype.lightFalloff = function(
    constantAttenuation,
    linearAttenuation,
    quadraticAttenuation
  ) {
    if (constantAttenuation < 0) {
      constantAttenuation = 0;
      console.warn(
        'Value of constant argument in lightFalloff() should be never be negative. Set to 0.'
      );
    }

    if (linearAttenuation < 0) {
      linearAttenuation = 0;
      console.warn(
        'Value of linear argument in lightFalloff() should be never be negative. Set to 0.'
      );
    }

    if (quadraticAttenuation < 0) {
      quadraticAttenuation = 0;
      console.warn(
        'Value of quadratic argument in lightFalloff() should be never be negative. Set to 0.'
      );
    }

    if (
      constantAttenuation === 0 &&
      (linearAttenuation === 0 && quadraticAttenuation === 0)
    ) {
      constantAttenuation = 1;
      console.warn(
        'Either one of the three arguments in lightFalloff() should be greater than zero. Set constant argument to 1.'
      );
    }

    this.states.setValue('constantAttenuation', constantAttenuation);
    this.states.setValue('linearAttenuation', linearAttenuation);
    this.states.setValue('quadraticAttenuation', quadraticAttenuation);
  }

  RendererGL.prototype.spotLight = function(
    v1,
    v2,
    v3,
    x,
    y,
    z,
    nx,
    ny,
    nz,
    angle,
    concentration
  ) {
    let color, position, direction;
    const length = arguments.length;

    switch (length) {
      case 11:
      case 10:
        color = this._pInst.color(v1, v2, v3);
        position = new Vector(x, y, z);
        direction = new Vector(nx, ny, nz);
        break;

      case 9:
        if (v1 instanceof Color) {
          color = v1;
          position = new Vector(v2, v3, x);
          direction = new Vector(y, z, nx);
          angle = ny;
          concentration = nz;
        } else if (x instanceof Vector) {
          color = this._pInst.color(v1, v2, v3);
          position = x;
          direction = new Vector(y, z, nx);
          angle = ny;
          concentration = nz;
        } else if (nx instanceof Vector) {
          color = this._pInst.color(v1, v2, v3);
          position = new Vector(x, y, z);
          direction = nx;
          angle = ny;
          concentration = nz;
        } else {
          color = this._pInst.color(v1, v2, v3);
          position = new Vector(x, y, z);
          direction = new Vector(nx, ny, nz);
        }
        break;

      case 8:
        if (v1 instanceof Color) {
          color = v1;
          position = new Vector(v2, v3, x);
          direction = new Vector(y, z, nx);
          angle = ny;
        } else if (x instanceof Vector) {
          color = this._pInst.color(v1, v2, v3);
          position = x;
          direction = new Vector(y, z, nx);
          angle = ny;
        } else {
          color = this._pInst.color(v1, v2, v3);
          position = new Vector(x, y, z);
          direction = nx;
          angle = ny;
        }
        break;

      case 7:
        if (v1 instanceof Color && v2 instanceof Vector) {
          color = v1;
          position = v2;
          direction = new Vector(v3, x, y);
          angle = z;
          concentration = nx;
        } else if (v1 instanceof Color && y instanceof Vector) {
          color = v1;
          position = new Vector(v2, v3, x);
          direction = y;
          angle = z;
          concentration = nx;
        } else if (x instanceof Vector && y instanceof Vector) {
          color = this._pInst.color(v1, v2, v3);
          position = x;
          direction = y;
          angle = z;
          concentration = nx;
        } else if (v1 instanceof Color) {
          color = v1;
          position = new Vector(v2, v3, x);
          direction = new Vector(y, z, nx);
        } else if (x instanceof Vector) {
          color = this._pInst.color(v1, v2, v3);
          position = x;
          direction = new Vector(y, z, nx);
        } else {
          color = this._pInst.color(v1, v2, v3);
          position = new Vector(x, y, z);
          direction = nx;
        }
        break;

      case 6:
        if (x instanceof Vector && y instanceof Vector) {
          color = this._pInst.color(v1, v2, v3);
          position = x;
          direction = y;
          angle = z;
        } else if (v1 instanceof Color && y instanceof Vector) {
          color = v1;
          position = new Vector(v2, v3, x);
          direction = y;
          angle = z;
        } else if (v1 instanceof Color && v2 instanceof Vector) {
          color = v1;
          position = v2;
          direction = new Vector(v3, x, y);
          angle = z;
        }
        break;

      case 5:
        if (
          v1 instanceof Color &&
          v2 instanceof Vector &&
          v3 instanceof Vector
        ) {
          color = v1;
          position = v2;
          direction = v3;
          angle = x;
          concentration = y;
        } else if (x instanceof Vector && y instanceof Vector) {
          color = this._pInst.color(v1, v2, v3);
          position = x;
          direction = y;
        } else if (v1 instanceof Color && y instanceof Vector) {
          color = v1;
          position = new Vector(v2, v3, x);
          direction = y;
        } else if (v1 instanceof Color && v2 instanceof Vector) {
          color = v1;
          position = v2;
          direction = new Vector(v3, x, y);
        }
        break;

      case 4:
        color = v1;
        position = v2;
        direction = v3;
        angle = x;
        break;

      case 3:
        color = v1;
        position = v2;
        direction = v3;
        break;

      default:
        console.warn(
          `Sorry, input for spotlight() is not in prescribed format. Too ${
            length < 3 ? 'few' : 'many'
          } arguments were provided`
        );
        return;
    }
    this.states.setValue('spotLightDiffuseColors', [
      color._array[0],
      color._array[1],
      color._array[2]
    ]);

    this.states.setValue('spotLightSpecularColors', [
      ...this.states.specularColors
    ]);

    this.states.setValue('spotLightPositions', [position.x, position.y, position.z]);
    direction.normalize();
    this.states.setValue('spotLightDirections', [
      direction.x,
      direction.y,
      direction.z
    ]);

    if (angle === undefined) {
      angle = Math.PI / 3;
    }

    if (concentration !== undefined && concentration < 1) {
      concentration = 1;
      console.warn(
        'Value of concentration needs to be greater than 1. Setting it to 1'
      );
    } else if (concentration === undefined) {
      concentration = 100;
    }

    angle = this._pInst._toRadians(angle);
    this.states.setValue('spotLightAngle', [Math.cos(angle)]);
    this.states.setValue('spotLightConc', [concentration]);

    this.states.setValue('enableLighting', true);
  }

  RendererGL.prototype.noLights = function() {
    this.states.setValue('activeImageLight', null);
    this.states.setValue('enableLighting', false);

    this.states.setValue('ambientLightColors', []);
    this.states.setValue('specularColors', [1, 1, 1]);

    this.states.setValue('directionalLightDirections', []);
    this.states.setValue('directionalLightDiffuseColors', []);
    this.states.setValue('directionalLightSpecularColors', []);

    this.states.setValue('pointLightPositions', []);
    this.states.setValue('pointLightDiffuseColors', []);
    this.states.setValue('pointLightSpecularColors', []);

    this.states.setValue('spotLightPositions', []);
    this.states.setValue('spotLightDirections', []);
    this.states.setValue('spotLightDiffuseColors', []);
    this.states.setValue('spotLightSpecularColors', []);
    this.states.setValue('spotLightAngle', []);
    this.states.setValue('spotLightConc', []);

    this.states.setValue('constantAttenuation', 1);
    this.states.setValue('linearAttenuation', 0);
    this.states.setValue('quadraticAttenuation', 0);
    this.states.setValue('_useShininess', 1);
    this.states.setValue('_useMetalness', 0);
  }
}

export default light;

if(typeof p5 !== 'undefined'){
  light(p5, p5.prototype);
}