From 7f99565e051577de20cd3f3879a7d75e4465ee99 Mon Sep 17 00:00:00 2001 From: RandomGamingDev Date: Thu, 11 Apr 2024 07:35:58 -0400 Subject: [PATCH 1/6] added paletteLerp --- src/color/creating_reading.js | 47 +++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 1a8665aad6..29584b710b 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -1068,6 +1068,53 @@ p5.prototype.lerpColor = function(c1, c2, amt) { return this.color(l0, l1, l2, l3); }; +/** + * Blends multiple colors to find a color between them. + * + * The `amt` parameter specifies the amount to interpolate between the values + * values. 0 is equal to the first color, 0.5 is halfway in the list, 1 is the + * last color of the list, and so on. Negative numbers are set + * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of + * lerp. It's necessary because numbers outside of the + * interval [0, 1] it will attempt to access colors outside of the list. + * + * The way that colors are interpolated depends on the current + * colorMode(). + * + * @method paletteLerp + * @param {p5.Color[]} colors interpolate from this color. + * @param {Number} amt number between 0 and 1. + * @return {p5.Color} interpolated color. + * + * @example + *
+ * + * function setup() { + * createCanvas(400, 400); + * } + * + * function draw() { + * // This example goes from red to yellow and then to green + * const palette = [color("red"), color("yellow"), color("green")]; + * const lerp_color = paletteLerp(palette, (millis() / 2000) % 1); + * background(lerp_color); + * } + * + *
+ */ +p5.prototype.paletteLerp = function(colors, amt) { + amt = this.constrain(amt, 0, 1); + const last_color_ind = colors.length - 1; + + const from_index = Math.floor(last_color_ind * amt); + if (from_index === last_color_ind) + return colors[last_color_ind]; + + const from = colors[from_index]; + const to = colors[from_index + 1]; + return lerpColor(from, to, amt * last_color_ind - from_index); +}; + /** * Gets the lightness value of a color. * From 6a06a20f4654ecd6090aa4ecc89cdaa5b65a25f8 Mon Sep 17 00:00:00 2001 From: RandomGamingDev Date: Thu, 11 Apr 2024 08:16:16 -0400 Subject: [PATCH 2/6] added this. --- src/color/creating_reading.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 29584b710b..1ce8ed1124 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -1095,7 +1095,7 @@ p5.prototype.lerpColor = function(c1, c2, amt) { * * function draw() { * // This example goes from red to yellow and then to green - * const palette = [color("red"), color("yellow"), color("green")]; + * const palette = [color('red'), color('yellow'), color('green')]; * const lerp_color = paletteLerp(palette, (millis() / 2000) % 1); * background(lerp_color); * } @@ -1112,7 +1112,7 @@ p5.prototype.paletteLerp = function(colors, amt) { const from = colors[from_index]; const to = colors[from_index + 1]; - return lerpColor(from, to, amt * last_color_ind - from_index); + return this.lerpColor(from, to, amt * last_color_ind - from_index); }; /** From 5b024aac0408478fa110e54d700ee79813524386 Mon Sep 17 00:00:00 2001 From: RandomGamingDev Date: Sun, 11 Aug 2024 01:13:44 -0400 Subject: [PATCH 3/6] changed it to use color stops --- src/color/creating_reading.js | 52 ++++++++++++++++++++--------------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 1ce8ed1124..17e27f9585 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -1071,20 +1071,18 @@ p5.prototype.lerpColor = function(c1, c2, amt) { /** * Blends multiple colors to find a color between them. * - * The `amt` parameter specifies the amount to interpolate between the values - * values. 0 is equal to the first color, 0.5 is halfway in the list, 1 is the - * last color of the list, and so on. Negative numbers are set - * to 0. Numbers greater than 1 are set to 1. This differs from the behavior of - * lerp. It's necessary because numbers outside of the - * interval [0, 1] it will attempt to access colors outside of the list. + * The `amt` parameter specifies the amount to interpolate between the color + * stops which are colors at each `amt` value "location" with `amt` values + * that are between 2 color stops interpolating between them based on its relative + * distance to both. * * The way that colors are interpolated depends on the current * colorMode(). * * @method paletteLerp - * @param {p5.Color[]} colors interpolate from this color. - * @param {Number} amt number between 0 and 1. - * @return {p5.Color} interpolated color. + * @param {[p5.Color, Number][]} colors_stops color stops to interpolate from + * @param {Number} amt number to use to interpolate relative to color stops + * @return {p5.Color} interpolated color. * * @example *
@@ -1094,25 +1092,35 @@ p5.prototype.lerpColor = function(c1, c2, amt) { * } * * function draw() { - * // This example goes from red to yellow and then to green - * const palette = [color('red'), color('yellow'), color('green')]; - * const lerp_color = paletteLerp(palette, (millis() / 2000) % 1); - * background(lerp_color); + * // The background goes from white to red to green to blue fill + * background(lerpPalette(millis() / 10000 % 1, [ + * ["white", 0], + * ["red", 0.05], + * ["green", 0.25], + * ["blue", 1] + * ])); * } * *
*/ -p5.prototype.paletteLerp = function(colors, amt) { - amt = this.constrain(amt, 0, 1); - const last_color_ind = colors.length - 1; +p5.prototype.paletteLerp = function(color_stops, amt) { + const first_color_stop = color_stops[0]; + if (amt < first_color_stop[1]) + return color(first_color_stop[0]); - const from_index = Math.floor(last_color_ind * amt); - if (from_index === last_color_ind) - return colors[last_color_ind]; + for (let i = 1; i < color_stops.length; i++) { + const color_stop = color_stops[i]; + if (amt < color_stop[1]) { + const prev_color_stop = color_stops[i - 1]; + return lerpColor( + color(prev_color_stop[0]), + color(color_stop[0]), + (amt - prev_color_stop[1]) / (color_stop[1] - prev_color_stop[1]) + ); + } + } - const from = colors[from_index]; - const to = colors[from_index + 1]; - return this.lerpColor(from, to, amt * last_color_ind - from_index); + return color(color_stops[color_stops.length - 1][0]); }; /** From 993b468236907e502b5e2e3e9690e94c0f4d48a2 Mon Sep 17 00:00:00 2001 From: RandomGamingDev Date: Sun, 11 Aug 2024 01:18:50 -0400 Subject: [PATCH 4/6] swapped to single quotes --- src/color/creating_reading.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 17e27f9585..8275602715 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -1094,10 +1094,10 @@ p5.prototype.lerpColor = function(c1, c2, amt) { * function draw() { * // The background goes from white to red to green to blue fill * background(lerpPalette(millis() / 10000 % 1, [ - * ["white", 0], - * ["red", 0.05], - * ["green", 0.25], - * ["blue", 1] + * ['white', 0], + * ['red', 0.05], + * ['green', 0.25], + * ['blue', 1] * ])); * } * From ef31f19c56bb77dd62ca598c1f116a9fc640b689 Mon Sep 17 00:00:00 2001 From: RandomGamingDev Date: Sun, 11 Aug 2024 01:23:50 -0400 Subject: [PATCH 5/6] old and new name swap mistake fixed for paletteLerp --- 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 8275602715..621d871316 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -1093,7 +1093,7 @@ p5.prototype.lerpColor = function(c1, c2, amt) { * * function draw() { * // The background goes from white to red to green to blue fill - * background(lerpPalette(millis() / 10000 % 1, [ + * background(paletteLerp(millis() / 10000 % 1, [ * ['white', 0], * ['red', 0.05], * ['green', 0.25], From f5d13324fc94087efa47debb99f5c8f8a72cd7b7 Mon Sep 17 00:00:00 2001 From: RandomGamingDev Date: Sun, 11 Aug 2024 01:48:31 -0400 Subject: [PATCH 6/6] fixed parameter mismatch --- src/color/creating_reading.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/color/creating_reading.js b/src/color/creating_reading.js index 621d871316..77dea3b48b 100644 --- a/src/color/creating_reading.js +++ b/src/color/creating_reading.js @@ -1093,12 +1093,12 @@ p5.prototype.lerpColor = function(c1, c2, amt) { * * function draw() { * // The background goes from white to red to green to blue fill - * background(paletteLerp(millis() / 10000 % 1, [ + * background(paletteLerp([ * ['white', 0], * ['red', 0.05], * ['green', 0.25], * ['blue', 1] - * ])); + * ], millis() / 10000 % 1)); * } * * @@ -1106,21 +1106,21 @@ p5.prototype.lerpColor = function(c1, c2, amt) { p5.prototype.paletteLerp = function(color_stops, amt) { const first_color_stop = color_stops[0]; if (amt < first_color_stop[1]) - return color(first_color_stop[0]); + return this.color(first_color_stop[0]); for (let i = 1; i < color_stops.length; i++) { const color_stop = color_stops[i]; if (amt < color_stop[1]) { const prev_color_stop = color_stops[i - 1]; - return lerpColor( - color(prev_color_stop[0]), - color(color_stop[0]), + return this.lerpColor( + this.color(prev_color_stop[0]), + this.color(color_stop[0]), (amt - prev_color_stop[1]) / (color_stop[1] - prev_color_stop[1]) ); } } - return color(color_stops[color_stops.length - 1][0]); + return this.color(color_stops[color_stops.length - 1][0]); }; /**