From bb42e22d32769fa92ef4833cfb257739f007a4d6 Mon Sep 17 00:00:00 2001
From: aLyonsGH <52976155+aLyonsGH@users.noreply.github.com>
Date: Sun, 16 May 2021 14:44:29 -0400
Subject: [PATCH 1/4] Add files via upload
---
creating_reading.js | 556 ++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 556 insertions(+)
create mode 100644 creating_reading.js
diff --git a/creating_reading.js b/creating_reading.js
new file mode 100644
index 0000000000..d168a6ab2a
--- /dev/null
+++ b/creating_reading.js
@@ -0,0 +1,556 @@
+/**
+ * @module Color
+ * @submodule Creating & Reading
+ * @for p5
+ * @requires core
+ * @requires constants
+ */
+
+import p5 from '../core/main';
+import * as constants from '../core/constants';
+import './p5.Color';
+import '../core/friendly_errors/validate_params';
+import '../core/friendly_errors/file_errors';
+import '../core/friendly_errors/fes_core';
+
+/**
+ * Extracts the alpha value from a color or pixel array.
+ *
+ * @method alpha
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the alpha value
+ *
+ * @example
+ *
+ *
+ * noStroke();
+ * let c = color(0, 126, 255, 102);
+ * fill(c);
+ * rect(15, 15, 35, 70);
+ * let value = alpha(c); // Sets 'value' to 102
+ * fill(value);
+ * rect(50, 15, 35, 70);
+ *
+ *
+ *
+ * @alt
+ * Left half of canvas light blue and right half light charcoal grey.
+ */
+p5.prototype.alpha = function(c) {
+ p5._validateParameters('alpha', arguments);
+ return this.color(c)._getAlpha();
+};
+
+/**
+ * Extracts the blue value from a color or pixel array.
+ *
+ * @method blue
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the blue value
+ * @example
+ *
+ *
+ * let c = color(175, 100, 220);
+ * fill(c);
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ * let blueValue = blue(c);
+ * fill(0, 0, blueValue);
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ *
+ * @alt
+ * Left half of canvas light purple and right half a royal blue.
+ */
+p5.prototype.blue = function(c) {
+ p5._validateParameters('blue', arguments);
+ return this.color(c)._getBlue();
+};
+
+/**
+ * Extracts the HSB brightness value from a color or pixel array.
+ *
+ * @method brightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the brightness value
+ *
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // Sets 'value' to 255
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color('hsb(60, 100%, 50%)');
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = brightness(c); // A 'value' of 50% is 127.5
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ * Left half of canvas salmon pink and the right half with it's brightness colored white.
+ * Left half of canvas olive colored and the right half with it's brightness color gray.
+ */
+p5.prototype.brightness = function(c) {
+ p5._validateParameters('brightness', arguments);
+ return this.color(c)._getBrightness();
+};
+
+/**
+ * Creates colors for storing in variables of the color datatype. The
+ * parameters are interpreted as RGB or HSB values depending on the
+ * current colorMode(). The default mode is RGB values from 0 to 255
+ * and, therefore, the function call color(255, 204, 0) will return a
+ * bright yellow color.
+ *
+ * Note that if only one value is provided to color(), it will be interpreted
+ * as a grayscale value. Add a second value, and it will be used for alpha
+ * transparency. When three values are specified, they are interpreted as
+ * either RGB or HSB values. Adding a fourth value applies alpha
+ * transparency.
+ *
+ * If a single string argument is provided, RGB, RGBA and Hex CSS color
+ * strings and all named color strings are supported. In this case, an alpha
+ * number value as a second argument is not supported, the RGBA form should be
+ * used.
+ *
+ * @method color
+ * @param {Number} gray number specifying value between white and black.
+ * @param {Number} [alpha] alpha value relative to current color range
+ * (default is 0-255)
+ * @return {p5.Color} resulting color
+ *
+ * @example
+ *
+ *
+ * let c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * rect(30, 20, 55, 55);
+ *
+ *
+ *
+ *
+ *
+ * let c = color(255, 204, 0);
+ * fill(c);
+ * noStroke();
+ * ellipse(25, 25, 80, 80); // Draw left circle
+ * // Using only one value generates a grayscale value.
+ * c = color(65);
+ * fill(c);
+ * ellipse(75, 75, 80, 80);
+ *
+ *
+ *
+ *
+ *
+ * // You can use named SVG & CSS colors
+ * let c = color('magenta');
+ * fill(c);
+ * noStroke();
+ * rect(20, 20, 60, 60);
+ *
+ *
+ *
+ *
+ *
+ * // Example of hex color codes
+ * noStroke();
+ * let c = color('#0f0');
+ * fill(c);
+ * rect(0, 10, 45, 80);
+ * c = color('#00ff00');
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ *
+ *
+ *
+ *
+ *
+ * // RGB and RGBA color strings are also supported
+ * // these all set to the same color (solid blue)
+ * let c;
+ * noStroke();
+ * c = color('rgb(0,0,255)');
+ * fill(c);
+ * rect(10, 10, 35, 35); // Draw rectangle
+ * c = color('rgb(0%, 0%, 100%)');
+ * fill(c);
+ * rect(55, 10, 35, 35); // Draw rectangle
+ * c = color('rgba(0, 0, 255, 1)');
+ * fill(c);
+ * rect(10, 55, 35, 35); // Draw rectangle
+ * c = color('rgba(0%, 0%, 100%, 1)');
+ * fill(c);
+ * rect(55, 55, 35, 35); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * // HSL color can also be specified by value
+ * let c = color('hsl(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw rectangle
+ * c = color('hsla(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * // HSB color can also be specified
+ * let c = color('hsb(160, 100%, 50%)');
+ * noStroke();
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw rectangle
+ * c = color('hsba(160, 100%, 50%, 0.5)');
+ * fill(c);
+ * rect(55, 10, 45, 80); // Draw rectangle
+ *
+ *
+ *
+ *
+ *
+ * noStroke();
+ * let c = color(50, 55, 100);
+ * fill(c);
+ * rect(0, 10, 45, 80); // Draw left rect
+ * colorMode(HSB, 100);
+ * c = color(50, 55, 100);
+ * fill(c);
+ * rect(55, 10, 45, 80);
+ *
+ *
+ *
+ * @alt
+ * Yellow rect in middle right of canvas, with 55 pixel width and height.
+ * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.
+ * Bright fuchsia rect in middle of canvas, 60 pixel width and height.
+ * Two bright green rects on opposite sides of the canvas, both 45x80.
+ * Four blue rects in each corner of the canvas, each are 35x35.
+ * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
+ * Dark green rect on left and lighter green rect on right of canvas, both 45x80.
+ * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
+ */
+
+/**
+ * @method color
+ * @param {Number} v1 red or hue value relative to
+ * the current color range
+ * @param {Number} v2 green or saturation value
+ * relative to the current color range
+ * @param {Number} v3 blue or brightness value
+ * relative to the current color range
+ * @param {Number} [alpha]
+ * @return {p5.Color}
+ */
+
+/**
+ * @method color
+ * @param {String} value a color string
+ * @return {p5.Color}
+ */
+
+/**
+ * @method color
+ * @param {Number[]} values an array containing the red,green,blue &
+ * and alpha components of the color
+ * @return {p5.Color}
+ */
+
+/**
+ * @method color
+ * @param {p5.Color} color
+ * @return {p5.Color}
+ */
+p5.prototype.color = function() {
+ p5._validateParameters('color', arguments);
+ if (arguments[0] instanceof p5.Color) {
+ return arguments[0]; // Do nothing if argument is already a color object.
+ }
+
+ const args = arguments[0] instanceof Array ? arguments[0] : arguments;
+ return new p5.Color(this, args);
+};
+
+/**
+ * Extracts the green value from a color or pixel array.
+ *
+ * @method green
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the green value
+ * @example
+ *
+ *
+ * let c = color(20, 75, 200); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let greenValue = green(c); // Get green in 'c'
+ * print(greenValue); // Print "75.0"
+ * fill(0, greenValue, 0); // Use 'greenValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ *
+ * @alt
+ * blue rect on left and green on right, both with black outlines & 35x60.
+ */
+p5.prototype.green = function(c) {
+ p5._validateParameters('green', arguments);
+ return this.color(c)._getGreen();
+};
+
+/**
+ * Extracts the hue value from a color or pixel array.
+ *
+ * Hue exists in both HSB and HSL. This function will return the
+ * HSB-normalized hue when supplied with an HSB color object (or when supplied
+ * with a pixel array while the color mode is HSB), but will default to the
+ * HSL-normalized hue otherwise. (The values will only be different if the
+ * maximum hue setting for each system is different.)
+ *
+ * @method hue
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the hue
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = hue(c); // Sets 'value' to "0"
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ * salmon pink rect on left and black on right, both 35x60.
+ */
+p5.prototype.hue = function(c) {
+ p5._validateParameters('hue', arguments);
+ return this.color(c)._getHue();
+};
+
+/**
+ * Blends two colors to find a third color somewhere between them. The amt
+ * parameter is the amount to interpolate between the two values where 0.0
+ * is equal to the first color, 0.1 is very near the first color, 0.5 is halfway
+ * in between, etc. An amount below 0 will be treated as 0. Likewise, amounts
+ * above 1 will be capped at 1. This is different from the behavior of lerp(),
+ * but necessary because otherwise numbers outside the range will produce
+ * strange and unexpected colors.
+ *
+ * The way that colors are interpolated depends on the current color mode.
+ *
+ * @method lerpColor
+ * @param {p5.Color} c1 interpolate from this color
+ * @param {p5.Color} c2 interpolate to this color
+ * @param {Number} amt number between 0 and 1
+ * @return {p5.Color} interpolated color
+ *
+ * @example
+ *
+ *
+ * colorMode(RGB);
+ * stroke(255);
+ * background(51);
+ * let from = color(218, 165, 32);
+ * let to = color(72, 61, 139);
+ * colorMode(RGB); // Try changing to HSB.
+ * let interA = lerpColor(from, to, 0.33);
+ * let interB = lerpColor(from, to, 0.66);
+ * fill(from);
+ * rect(10, 20, 20, 60);
+ * fill(interA);
+ * rect(30, 20, 20, 60);
+ * fill(interB);
+ * rect(50, 20, 20, 60);
+ * fill(to);
+ * rect(70, 20, 20, 60);
+ *
+ *
+ *
+ * @alt
+ * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60
+ */
+
+p5.prototype.lerpColor = function(c1, c2, amt) {
+ p5._validateParameters('lerpColor', arguments);
+ const mode = this._colorMode;
+ const maxes = this._colorMaxes;
+ let l0, l1, l2, l3;
+ let fromArray, toArray;
+
+ if (mode === constants.RGB) {
+ fromArray = c1.levels.map(level => level / 255);
+ toArray = c2.levels.map(level => level / 255);
+ } else if (mode === constants.HSB) {
+ c1._getBrightness(); // Cache hsba so it definitely exists.
+ c2._getBrightness();
+ fromArray = c1.hsba;
+ toArray = c2.hsba;
+ } else if (mode === constants.HSL) {
+ c1._getLightness(); // Cache hsla so it definitely exists.
+ c2._getLightness();
+ fromArray = c1.hsla;
+ toArray = c2.hsla;
+ } else {
+ throw new Error(`${mode}cannot be used for interpolation.`);
+ }
+
+ // Prevent extrapolation.
+ amt = Math.max(Math.min(amt, 1), 0);
+
+ // Define lerp here itself if user isn't using math module.
+ // Maintains the definition as found in math/calculation.js
+ if (typeof this.lerp === 'undefined') {
+ this.lerp = (start, stop, amt) => amt * (stop - start) + start;
+ }
+
+ // Perform interpolation.
+ l0 = this.lerp(fromArray[0], toArray[0], amt);
+ l1 = this.lerp(fromArray[1], toArray[1], amt);
+ l2 = this.lerp(fromArray[2], toArray[2], amt);
+ l3 = this.lerp(fromArray[3], toArray[3], amt);
+
+ // Scale components.
+ l0 *= maxes[mode][0];
+ l1 *= maxes[mode][1];
+ l2 *= maxes[mode][2];
+ l3 *= maxes[mode][3];
+
+ return this.color(l0, l1, l2, l3);
+};
+
+/**
+ * Extracts the HSL lightness value from a color or pixel array.
+ *
+ * @method lightness
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the lightness
+ *
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSL);
+ * let c = color(156, 100, 50, 1);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = lightness(c); // Sets 'value' to 50
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ * light pastel green rect on left and dark grey rect on right, both 35x60.
+ */
+p5.prototype.lightness = function(c) {
+ p5._validateParameters('lightness', arguments);
+ return this.color(c)._getLightness();
+};
+
+/**
+ * Extracts the red value from a color or pixel array.
+ *
+ * @method red
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the red value
+ * @example
+ *
+ *
+ * let c = color(255, 204, 0); // Define color 'c'
+ * fill(c); // Use color variable 'c' as fill color
+ * rect(15, 20, 35, 60); // Draw left rectangle
+ *
+ * let redValue = red(c); // Get red in 'c'
+ * print(redValue); // Print "255.0"
+ * fill(redValue, 0, 0); // Use 'redValue' in new fill
+ * rect(50, 20, 35, 60); // Draw right rectangle
+ *
+ *
+ *
+ *
+ *
+ * colorMode(RGB, 255); // Sets the range for red, green, and blue to 255
+ * let c = color(127, 255, 0);
+ * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1
+ * let myColor = red(c);
+ * print(myColor); // 0.4980392156862745
+ *
+ *
+ *
+ * @alt
+ * yellow rect on left and red rect on right, both with black outlines and 35x60.
+ * grey canvas
+ */
+p5.prototype.red = function(c) {
+ p5._validateParameters('red', arguments);
+ return this.color(c)._getRed();
+};
+
+/**
+ * Extracts the saturation value from a color or pixel array.
+ *
+ * Saturation is scaled differently in HSB and HSL. This function will return
+ * the HSB saturation when supplied with an HSB color object (or when supplied
+ * with a pixel array while the color mode is HSB), but will default to the
+ * HSL saturation otherwise.
+ *
+ * @method saturation
+ * @param {p5.Color|Number[]|String} color p5.Color object, color components,
+ * or CSS color
+ * @return {Number} the saturation value
+ * @example
+ *
+ *
+ * noStroke();
+ * colorMode(HSB, 255);
+ * let c = color(0, 126, 255);
+ * fill(c);
+ * rect(15, 20, 35, 60);
+ * let value = saturation(c); // Sets 'value' to 126
+ * fill(value);
+ * rect(50, 20, 35, 60);
+ *
+ *
+ *
+ * @alt
+ *deep pink rect on left and grey rect on right, both 35x60.
+ */
+p5.prototype.saturation = function(c) {
+ p5._validateParameters('saturation', arguments);
+ return this.color(c)._getSaturation();
+};
+
+export default p5;
From 077872eb1f3f1dcd9dbeb9d178f813a1c0819061 Mon Sep 17 00:00:00 2001
From: aLyonsGH <52976155+aLyonsGH@users.noreply.github.com>
Date: Sun, 16 May 2021 15:17:22 -0400
Subject: [PATCH 2/4] Update .all-contributorsrc
---
.all-contributorsrc | 9 +++++++++
1 file changed, 9 insertions(+)
diff --git a/.all-contributorsrc b/.all-contributorsrc
index 8c449a587c..e8ee226631 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -2598,6 +2598,15 @@
"contributions": [
"bug"
]
+ },
+ {
+ "login": "aLyonsGH",
+ "name": "Alex Lyons",
+ "avatar_url": "https://avatars.githubusercontent.com/u/52976155?s=400&u=e1dde38fbd983995c459ec3d1f999193bd1e132e&v=4",
+ "profile": "https://github.com/aLyonsGH",
+ "contributions": [
+ "docs"
+ ]
}
],
"repoType": "github",
From eb2725156970f858a55239475dab9982cf846489 Mon Sep 17 00:00:00 2001
From: aLyonsGH <52976155+aLyonsGH@users.noreply.github.com>
Date: Mon, 17 May 2021 18:11:31 -0400
Subject: [PATCH 3/4] Moved fix to proper file
Fixed file accidentally added to root, now fix is added here on line 364
---
src/color/creating_reading.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js
index 3b24243d4d..d168a6ab2a 100644
--- a/src/color/creating_reading.js
+++ b/src/color/creating_reading.js
@@ -361,7 +361,7 @@ p5.prototype.hue = function(c) {
/**
* Blends two colors to find a third color somewhere between them. The amt
* parameter is the amount to interpolate between the two values where 0.0
- * equal to the first color, 0.1 is very near the first color, 0.5 is halfway
+ * is equal to the first color, 0.1 is very near the first color, 0.5 is halfway
* in between, etc. An amount below 0 will be treated as 0. Likewise, amounts
* above 1 will be capped at 1. This is different from the behavior of lerp(),
* but necessary because otherwise numbers outside the range will produce
From dab3755b5b70ac33750f83def9ae6d2ceef6ce12 Mon Sep 17 00:00:00 2001
From: aLyonsGH <52976155+aLyonsGH@users.noreply.github.com>
Date: Mon, 17 May 2021 18:12:14 -0400
Subject: [PATCH 4/4] Delete Accidental Duplicate
Oops! Moved the change to the proper file location.
---
creating_reading.js | 556 --------------------------------------------
1 file changed, 556 deletions(-)
delete mode 100644 creating_reading.js
diff --git a/creating_reading.js b/creating_reading.js
deleted file mode 100644
index d168a6ab2a..0000000000
--- a/creating_reading.js
+++ /dev/null
@@ -1,556 +0,0 @@
-/**
- * @module Color
- * @submodule Creating & Reading
- * @for p5
- * @requires core
- * @requires constants
- */
-
-import p5 from '../core/main';
-import * as constants from '../core/constants';
-import './p5.Color';
-import '../core/friendly_errors/validate_params';
-import '../core/friendly_errors/file_errors';
-import '../core/friendly_errors/fes_core';
-
-/**
- * Extracts the alpha value from a color or pixel array.
- *
- * @method alpha
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the alpha value
- *
- * @example
- *
- *
- * noStroke();
- * let c = color(0, 126, 255, 102);
- * fill(c);
- * rect(15, 15, 35, 70);
- * let value = alpha(c); // Sets 'value' to 102
- * fill(value);
- * rect(50, 15, 35, 70);
- *
- *
- *
- * @alt
- * Left half of canvas light blue and right half light charcoal grey.
- */
-p5.prototype.alpha = function(c) {
- p5._validateParameters('alpha', arguments);
- return this.color(c)._getAlpha();
-};
-
-/**
- * Extracts the blue value from a color or pixel array.
- *
- * @method blue
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the blue value
- * @example
- *
- *
- * let c = color(175, 100, 220);
- * fill(c);
- * rect(15, 20, 35, 60); // Draw left rectangle
- * let blueValue = blue(c);
- * fill(0, 0, blueValue);
- * rect(50, 20, 35, 60); // Draw right rectangle
- *
- *
- *
- * @alt
- * Left half of canvas light purple and right half a royal blue.
- */
-p5.prototype.blue = function(c) {
- p5._validateParameters('blue', arguments);
- return this.color(c)._getBlue();
-};
-
-/**
- * Extracts the HSB brightness value from a color or pixel array.
- *
- * @method brightness
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the brightness value
- *
- * @example
- *
- *
- * noStroke();
- * colorMode(HSB, 255);
- * let c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = brightness(c); // Sets 'value' to 255
- * fill(value);
- * rect(50, 20, 35, 60);
- *
- *
- *
- *
- *
- * noStroke();
- * colorMode(HSB, 255);
- * let c = color('hsb(60, 100%, 50%)');
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = brightness(c); // A 'value' of 50% is 127.5
- * fill(value);
- * rect(50, 20, 35, 60);
- *
- *
- *
- * @alt
- * Left half of canvas salmon pink and the right half with it's brightness colored white.
- * Left half of canvas olive colored and the right half with it's brightness color gray.
- */
-p5.prototype.brightness = function(c) {
- p5._validateParameters('brightness', arguments);
- return this.color(c)._getBrightness();
-};
-
-/**
- * Creates colors for storing in variables of the color datatype. The
- * parameters are interpreted as RGB or HSB values depending on the
- * current colorMode(). The default mode is RGB values from 0 to 255
- * and, therefore, the function call color(255, 204, 0) will return a
- * bright yellow color.
- *
- * Note that if only one value is provided to color(), it will be interpreted
- * as a grayscale value. Add a second value, and it will be used for alpha
- * transparency. When three values are specified, they are interpreted as
- * either RGB or HSB values. Adding a fourth value applies alpha
- * transparency.
- *
- * If a single string argument is provided, RGB, RGBA and Hex CSS color
- * strings and all named color strings are supported. In this case, an alpha
- * number value as a second argument is not supported, the RGBA form should be
- * used.
- *
- * @method color
- * @param {Number} gray number specifying value between white and black.
- * @param {Number} [alpha] alpha value relative to current color range
- * (default is 0-255)
- * @return {p5.Color} resulting color
- *
- * @example
- *
- *
- * let c = color(255, 204, 0);
- * fill(c);
- * noStroke();
- * rect(30, 20, 55, 55);
- *
- *
- *
- *
- *
- * let c = color(255, 204, 0);
- * fill(c);
- * noStroke();
- * ellipse(25, 25, 80, 80); // Draw left circle
- * // Using only one value generates a grayscale value.
- * c = color(65);
- * fill(c);
- * ellipse(75, 75, 80, 80);
- *
- *
- *
- *
- *
- * // You can use named SVG & CSS colors
- * let c = color('magenta');
- * fill(c);
- * noStroke();
- * rect(20, 20, 60, 60);
- *
- *
- *
- *
- *
- * // Example of hex color codes
- * noStroke();
- * let c = color('#0f0');
- * fill(c);
- * rect(0, 10, 45, 80);
- * c = color('#00ff00');
- * fill(c);
- * rect(55, 10, 45, 80);
- *
- *
- *
- *
- *
- * // RGB and RGBA color strings are also supported
- * // these all set to the same color (solid blue)
- * let c;
- * noStroke();
- * c = color('rgb(0,0,255)');
- * fill(c);
- * rect(10, 10, 35, 35); // Draw rectangle
- * c = color('rgb(0%, 0%, 100%)');
- * fill(c);
- * rect(55, 10, 35, 35); // Draw rectangle
- * c = color('rgba(0, 0, 255, 1)');
- * fill(c);
- * rect(10, 55, 35, 35); // Draw rectangle
- * c = color('rgba(0%, 0%, 100%, 1)');
- * fill(c);
- * rect(55, 55, 35, 35); // Draw rectangle
- *
- *
- *
- *
- *
- * // HSL color can also be specified by value
- * let c = color('hsl(160, 100%, 50%)');
- * noStroke();
- * fill(c);
- * rect(0, 10, 45, 80); // Draw rectangle
- * c = color('hsla(160, 100%, 50%, 0.5)');
- * fill(c);
- * rect(55, 10, 45, 80); // Draw rectangle
- *
- *
- *
- *
- *
- * // HSB color can also be specified
- * let c = color('hsb(160, 100%, 50%)');
- * noStroke();
- * fill(c);
- * rect(0, 10, 45, 80); // Draw rectangle
- * c = color('hsba(160, 100%, 50%, 0.5)');
- * fill(c);
- * rect(55, 10, 45, 80); // Draw rectangle
- *
- *
- *
- *
- *
- * noStroke();
- * let c = color(50, 55, 100);
- * fill(c);
- * rect(0, 10, 45, 80); // Draw left rect
- * colorMode(HSB, 100);
- * c = color(50, 55, 100);
- * fill(c);
- * rect(55, 10, 45, 80);
- *
- *
- *
- * @alt
- * Yellow rect in middle right of canvas, with 55 pixel width and height.
- * Yellow ellipse in top left of canvas, black ellipse in bottom right,both 80x80.
- * Bright fuchsia rect in middle of canvas, 60 pixel width and height.
- * Two bright green rects on opposite sides of the canvas, both 45x80.
- * Four blue rects in each corner of the canvas, each are 35x35.
- * Bright sea green rect on left and darker rect on right of canvas, both 45x80.
- * Dark green rect on left and lighter green rect on right of canvas, both 45x80.
- * Dark blue rect on left and light teal rect on right of canvas, both 45x80.
- */
-
-/**
- * @method color
- * @param {Number} v1 red or hue value relative to
- * the current color range
- * @param {Number} v2 green or saturation value
- * relative to the current color range
- * @param {Number} v3 blue or brightness value
- * relative to the current color range
- * @param {Number} [alpha]
- * @return {p5.Color}
- */
-
-/**
- * @method color
- * @param {String} value a color string
- * @return {p5.Color}
- */
-
-/**
- * @method color
- * @param {Number[]} values an array containing the red,green,blue &
- * and alpha components of the color
- * @return {p5.Color}
- */
-
-/**
- * @method color
- * @param {p5.Color} color
- * @return {p5.Color}
- */
-p5.prototype.color = function() {
- p5._validateParameters('color', arguments);
- if (arguments[0] instanceof p5.Color) {
- return arguments[0]; // Do nothing if argument is already a color object.
- }
-
- const args = arguments[0] instanceof Array ? arguments[0] : arguments;
- return new p5.Color(this, args);
-};
-
-/**
- * Extracts the green value from a color or pixel array.
- *
- * @method green
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the green value
- * @example
- *
- *
- * let c = color(20, 75, 200); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * let greenValue = green(c); // Get green in 'c'
- * print(greenValue); // Print "75.0"
- * fill(0, greenValue, 0); // Use 'greenValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- *
- *
- *
- * @alt
- * blue rect on left and green on right, both with black outlines & 35x60.
- */
-p5.prototype.green = function(c) {
- p5._validateParameters('green', arguments);
- return this.color(c)._getGreen();
-};
-
-/**
- * Extracts the hue value from a color or pixel array.
- *
- * Hue exists in both HSB and HSL. This function will return the
- * HSB-normalized hue when supplied with an HSB color object (or when supplied
- * with a pixel array while the color mode is HSB), but will default to the
- * HSL-normalized hue otherwise. (The values will only be different if the
- * maximum hue setting for each system is different.)
- *
- * @method hue
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the hue
- * @example
- *
- *
- * noStroke();
- * colorMode(HSB, 255);
- * let c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = hue(c); // Sets 'value' to "0"
- * fill(value);
- * rect(50, 20, 35, 60);
- *
- *
- *
- * @alt
- * salmon pink rect on left and black on right, both 35x60.
- */
-p5.prototype.hue = function(c) {
- p5._validateParameters('hue', arguments);
- return this.color(c)._getHue();
-};
-
-/**
- * Blends two colors to find a third color somewhere between them. The amt
- * parameter is the amount to interpolate between the two values where 0.0
- * is equal to the first color, 0.1 is very near the first color, 0.5 is halfway
- * in between, etc. An amount below 0 will be treated as 0. Likewise, amounts
- * above 1 will be capped at 1. This is different from the behavior of lerp(),
- * but necessary because otherwise numbers outside the range will produce
- * strange and unexpected colors.
- *
- * The way that colors are interpolated depends on the current color mode.
- *
- * @method lerpColor
- * @param {p5.Color} c1 interpolate from this color
- * @param {p5.Color} c2 interpolate to this color
- * @param {Number} amt number between 0 and 1
- * @return {p5.Color} interpolated color
- *
- * @example
- *
- *
- * colorMode(RGB);
- * stroke(255);
- * background(51);
- * let from = color(218, 165, 32);
- * let to = color(72, 61, 139);
- * colorMode(RGB); // Try changing to HSB.
- * let interA = lerpColor(from, to, 0.33);
- * let interB = lerpColor(from, to, 0.66);
- * fill(from);
- * rect(10, 20, 20, 60);
- * fill(interA);
- * rect(30, 20, 20, 60);
- * fill(interB);
- * rect(50, 20, 20, 60);
- * fill(to);
- * rect(70, 20, 20, 60);
- *
- *
- *
- * @alt
- * 4 rects one tan, brown, brownish purple, purple, with white outlines & 20x60
- */
-
-p5.prototype.lerpColor = function(c1, c2, amt) {
- p5._validateParameters('lerpColor', arguments);
- const mode = this._colorMode;
- const maxes = this._colorMaxes;
- let l0, l1, l2, l3;
- let fromArray, toArray;
-
- if (mode === constants.RGB) {
- fromArray = c1.levels.map(level => level / 255);
- toArray = c2.levels.map(level => level / 255);
- } else if (mode === constants.HSB) {
- c1._getBrightness(); // Cache hsba so it definitely exists.
- c2._getBrightness();
- fromArray = c1.hsba;
- toArray = c2.hsba;
- } else if (mode === constants.HSL) {
- c1._getLightness(); // Cache hsla so it definitely exists.
- c2._getLightness();
- fromArray = c1.hsla;
- toArray = c2.hsla;
- } else {
- throw new Error(`${mode}cannot be used for interpolation.`);
- }
-
- // Prevent extrapolation.
- amt = Math.max(Math.min(amt, 1), 0);
-
- // Define lerp here itself if user isn't using math module.
- // Maintains the definition as found in math/calculation.js
- if (typeof this.lerp === 'undefined') {
- this.lerp = (start, stop, amt) => amt * (stop - start) + start;
- }
-
- // Perform interpolation.
- l0 = this.lerp(fromArray[0], toArray[0], amt);
- l1 = this.lerp(fromArray[1], toArray[1], amt);
- l2 = this.lerp(fromArray[2], toArray[2], amt);
- l3 = this.lerp(fromArray[3], toArray[3], amt);
-
- // Scale components.
- l0 *= maxes[mode][0];
- l1 *= maxes[mode][1];
- l2 *= maxes[mode][2];
- l3 *= maxes[mode][3];
-
- return this.color(l0, l1, l2, l3);
-};
-
-/**
- * Extracts the HSL lightness value from a color or pixel array.
- *
- * @method lightness
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the lightness
- *
- * @example
- *
- *
- * noStroke();
- * colorMode(HSL);
- * let c = color(156, 100, 50, 1);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = lightness(c); // Sets 'value' to 50
- * fill(value);
- * rect(50, 20, 35, 60);
- *
- *
- *
- * @alt
- * light pastel green rect on left and dark grey rect on right, both 35x60.
- */
-p5.prototype.lightness = function(c) {
- p5._validateParameters('lightness', arguments);
- return this.color(c)._getLightness();
-};
-
-/**
- * Extracts the red value from a color or pixel array.
- *
- * @method red
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the red value
- * @example
- *
- *
- * let c = color(255, 204, 0); // Define color 'c'
- * fill(c); // Use color variable 'c' as fill color
- * rect(15, 20, 35, 60); // Draw left rectangle
- *
- * let redValue = red(c); // Get red in 'c'
- * print(redValue); // Print "255.0"
- * fill(redValue, 0, 0); // Use 'redValue' in new fill
- * rect(50, 20, 35, 60); // Draw right rectangle
- *
- *
- *
- *
- *
- * colorMode(RGB, 255); // Sets the range for red, green, and blue to 255
- * let c = color(127, 255, 0);
- * colorMode(RGB, 1); // Sets the range for red, green, and blue to 1
- * let myColor = red(c);
- * print(myColor); // 0.4980392156862745
- *
- *
- *
- * @alt
- * yellow rect on left and red rect on right, both with black outlines and 35x60.
- * grey canvas
- */
-p5.prototype.red = function(c) {
- p5._validateParameters('red', arguments);
- return this.color(c)._getRed();
-};
-
-/**
- * Extracts the saturation value from a color or pixel array.
- *
- * Saturation is scaled differently in HSB and HSL. This function will return
- * the HSB saturation when supplied with an HSB color object (or when supplied
- * with a pixel array while the color mode is HSB), but will default to the
- * HSL saturation otherwise.
- *
- * @method saturation
- * @param {p5.Color|Number[]|String} color p5.Color object, color components,
- * or CSS color
- * @return {Number} the saturation value
- * @example
- *
- *
- * noStroke();
- * colorMode(HSB, 255);
- * let c = color(0, 126, 255);
- * fill(c);
- * rect(15, 20, 35, 60);
- * let value = saturation(c); // Sets 'value' to 126
- * fill(value);
- * rect(50, 20, 35, 60);
- *
- *
- *
- * @alt
- *deep pink rect on left and grey rect on right, both 35x60.
- */
-p5.prototype.saturation = function(c) {
- p5._validateParameters('saturation', arguments);
- return this.color(c)._getSaturation();
-};
-
-export default p5;