// Die Lineare Interpolation wie in meinem Beitrag beschrieben.
// Interpoliert zwischen beleibig-dimensionalen "Vektor"-Arrays a und b.
// Gibt einen Vektor (bzw. ein Array) mit dem interpolierten Wert zurück.
function lerp(t, a, b) {
return a.map((_, i) => a[i] + t * (b[i] - a[i]));
}
// Erzeugt einen einzelnen Farbcode aus einem RGB-Array mit 3 Elementen jeweils zwischen 0 und 1.
function rgb_to_color_code(rgb) {
return "#"
+ Math.round(rgb[0] * 255).toString(16).padStart(2, "0")
+ Math.round(rgb[1] * 255).toString(16).padStart(2, "0")
+ Math.round(rgb[2] * 255).toString(16).padStart(2, "0");
}
// Generiert den farbigen Text. Dazu wird die aktuelle t-Position im Text (text_t) bestimmt und
// falls diese in einem neuen Farbintervall von text_colors liegt, die aktuellen Farben, zwischen
// denen interpoliert (a und b) wird, angepasst.
function make_color_text(text, text_colors) {
if (!text_colors || !text_colors[0])
return "$" + text + "$";
// Start-Farbe. Diese ist erstmal null, da auch möglich ist, erst bei einer späteren
// Textposition mit Farben zu beginnen. Farbcodes werden nur erzeugt, wenn eine
// Startfarbe gesetzt ist.
let a_t = null;
let a = null;
let b_t = text_colors[0][0];
let b = text_colors[0][1];
return "$" + text.split("").reduce(
(result, c, i) => {
// Aktuelle t-Position im Text (t = 0 für Anfang und t = 1 für Ende des Texts).
const text_t = i / (text.length - 1);
// Falls eine nächste Farbe angegeben wurde und t-Position im Text größer/gleich
// der in text_colors angegebenen t-Position ist ...
while (text_colors[1] && text_t >= text_colors[0][0])
{
// ... dann wird das Array ein Element nach vorne verschoben, die
// vorherige End-Farbe zur neuen Start-Farbe und das nun erste Element
// im Array zur neuen End-Farbe.
text_colors.shift();
a_t = b_t;
a = b;
b_t = text_colors[0][0];
b = text_colors[0][1];
} // das ist übrigens eine while-Schleife für den Fall, dass mehr Farben definiert wurden,
// als es Buchstaben im Text gibt. In dem Fall werden dann einfach Farben übersprungen.
if (a)
{
const t = (text_t - a_t) / (b_t - a_t);
return result + "\\color{" + rgb_to_color_code(lerp(t, a, b)) + "}{" + c + "}";
}
else
return result + c;
},
""
) + "$";
}
const text = "Einen Farbverlauf (schwarz-rot-gold) programmieren:";
// Array mit [t, farbe]-Paaren für beliebige Farbverläufe mit beliebig vielen Farben.
// t = 0 repräsentiert den Textanfang und t = 1 für das Ende des Textes.
const text_colors = [
[0, [0, 0, 0]],
[0.5, [1, 0, 0]],
[1, [1, 1, 0]]
];
console.log(make_color_text(text, text_colors));
To embed this program on your website, copy the following code and paste it into your website's HTML: