@tsparticles/engine/esm/Utils/ColorUtils.js

Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

import { clamp, getRandom, getRandomInRange, getRangeValue, mix, randomInRangeValue, setRangeValue, } from "./MathUtils.js";
import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime, defaultVelocity, double, hMax, hMin, hPhase, half, identity, lFactor, lMax, lMin, midColorValue, millisecondsToSeconds, percentDenominator, phaseNumerator, randomColorValue, rgbMax, sMax, sMin, sNormalizedOffset, sextuple, triple, } from "../Core/Utils/Constants.js";
import { isArray, isString } from "./TypeUtils.js";
import { AlterType } from "../Enums/Types/AlterType.js";
import { AnimationStatus } from "../Enums/AnimationStatus.js";
import { itemFromArray } from "./Utils.js";
const styleCache = new Map(), maxCacheSize = 1000, firstIndex = 0, rgbFixedPrecision = 2, hslFixedPrecision = 2;
function getCachedStyle(key, generator) {
    let cached = styleCache.get(key);
    if (!cached) {
        cached = generator();
        if (styleCache.size >= maxCacheSize) {
            const keysToDelete = [...styleCache.keys()].slice(firstIndex, maxCacheSize * half);
            keysToDelete.forEach(k => styleCache.delete(k));
        }
        styleCache.set(key, cached);
    }
    return cached;
}
function stringToRgba(pluginManager, input) {
    if (!input) {
        return;
    }
    for (const manager of pluginManager.colorManagers.values()) {
        if (manager.accepts(input)) {
            return manager.parseString(input);
        }
    }
    return undefined;
}
export function rangeColorToRgb(pluginManager, input, index, useIndex = true) {
    if (!input) {
        return;
    }
    const color = isString(input) ? { value: input } : input;
    if (isString(color.value)) {
        return colorToRgb(pluginManager, color.value, index, useIndex);
    }
    if (isArray(color.value)) {
        const value = itemFromArray(color.value, index, useIndex);
        if (!value) {
            return;
        }
        return rangeColorToRgb(pluginManager, {
            value,
        });
    }
    for (const manager of pluginManager.colorManagers.values()) {
        const res = manager.handleRangeColor(color);
        if (res) {
            return res;
        }
    }
    return undefined;
}
export function colorToRgb(pluginManager, input, index, useIndex = true) {
    if (!input) {
        return;
    }
    const color = isString(input) ? { value: input } : input;
    if (isString(color.value)) {
        return color.value === randomColorValue ? getRandomRgbColor() : stringToRgb(pluginManager, color.value);
    }
    if (isArray(color.value)) {
        const value = itemFromArray(color.value, index, useIndex);
        if (!value) {
            return;
        }
        return colorToRgb(pluginManager, {
            value,
        });
    }
    for (const manager of pluginManager.colorManagers.values()) {
        const res = manager.handleColor(color);
        if (res) {
            return res;
        }
    }
    return undefined;
}
export function colorToHsl(pluginManager, color, index, useIndex = true) {
    const rgb = colorToRgb(pluginManager, color, index, useIndex);
    return rgb ? rgbToHsl(rgb) : undefined;
}
export function rangeColorToHsl(pluginManager, color, index, useIndex = true) {
    const rgb = rangeColorToRgb(pluginManager, color, index, useIndex);
    return rgb ? rgbToHsl(rgb) : undefined;
}
export function rgbToHsl(color) {
    const r1 = color.r / rgbMax, g1 = color.g / rgbMax, b1 = color.b / rgbMax, max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1), res = {
        h: hMin,
        l: (max + min) * half,
        s: sMin,
    };
    if (max !== min) {
        res.s = res.l < half ? (max - min) / (max + min) : (max - min) / (double - max - min);
        if (r1 === max) {
            res.h = (g1 - b1) / (max - min);
        }
        else if (g1 === max) {
            res.h = double + (b1 - r1) / (max - min);
        }
        else {
            res.h = double * double + (r1 - g1) / (max - min);
        }
    }
    res.l *= lMax;
    res.s *= sMax;
    res.h *= hPhase;
    if (res.h < hMin) {
        res.h += hMax;
    }
    if (res.h >= hMax) {
        res.h -= hMax;
    }
    return res;
}
export function stringToAlpha(pluginManager, input) {
    return stringToRgba(pluginManager, input)?.a;
}
export function stringToRgb(pluginManager, input) {
    return stringToRgba(pluginManager, input);
}
export function hslToRgb(hsl) {
    const h = ((hsl.h % hMax) + hMax) % hMax, s = Math.max(sMin, Math.min(sMax, hsl.s)), l = Math.max(lMin, Math.min(lMax, hsl.l)), hNormalized = h / hMax, sNormalized = s / sMax, lNormalized = l / lMax;
    if (s === sMin) {
        const grayscaleValue = Math.round(lNormalized * rgbMax);
        return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
    }
    const channel = (temp1, temp2, temp3) => {
        const temp3Min = 0, temp3Max = 1;
        if (temp3 < temp3Min) {
            temp3++;
        }
        if (temp3 > temp3Max) {
            temp3--;
        }
        if (temp3 * sextuple < temp3Max) {
            return temp1 + (temp2 - temp1) * sextuple * temp3;
        }
        if (temp3 * double < temp3Max) {
            return temp2;
        }
        if (temp3 * triple < temp3Max * double) {
            const temp3Offset = double / triple;
            return temp1 + (temp2 - temp1) * (temp3Offset - temp3) * sextuple;
        }
        return temp1;
    }, temp1 = lNormalized < half
        ? lNormalized * (sNormalizedOffset + sNormalized)
        : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * channel(temp2, temp1, hNormalized - phaseThird));
    return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
}
export function hslaToRgba(hsla) {
    const rgbResult = hslToRgb(hsla);
    return {
        a: hsla.a,
        b: rgbResult.b,
        g: rgbResult.g,
        r: rgbResult.r,
    };
}
export function getRandomRgbColor(min) {
    const fixedMin = min ?? defaultRgbMin, fixedMax = rgbMax + identity, getRgbInRangeValue = () => Math.floor(getRandomInRange(fixedMin, fixedMax));
    return {
        b: getRgbInRangeValue(),
        g: getRgbInRangeValue(),
        r: getRgbInRangeValue(),
    };
}
export function getStyleFromRgb(color, hdr, opacity) {
    const op = opacity ?? defaultOpacity, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
    return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
}
function getHdrStyleFromRgb(color, opacity) {
    return `color(display-p3 ${(color.r / rgbMax).toString()} ${(color.g / rgbMax).toString()} ${(color.b / rgbMax).toString()} / ${(opacity ?? defaultOpacity).toString()})`;
}
function getSdrStyleFromRgb(color, opacity) {
    return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
}
export function getStyleFromHsl(color, hdr, opacity) {
    const op = opacity ?? defaultOpacity, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
    return getCachedStyle(key, () => (hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity)));
}
function getHdrStyleFromHsl(color, opacity) {
    return getHdrStyleFromRgb(hslToRgb(color), opacity);
}
function getSdrStyleFromHsl(color, opacity) {
    return `hsla(${color.h.toString()}, ${color.s.toString()}%, ${color.l.toString()}%, ${(opacity ?? defaultOpacity).toString()})`;
}
export function colorMix(color1, color2, size1, size2) {
    let rgb1 = color1, rgb2 = color2;
    if (!("r" in rgb1)) {
        rgb1 = hslToRgb(color1);
    }
    if (!("r" in rgb2)) {
        rgb2 = hslToRgb(color2);
    }
    return {
        b: mix(rgb1.b, rgb2.b, size1, size2),
        g: mix(rgb1.g, rgb2.g, size1, size2),
        r: mix(rgb1.r, rgb2.r, size1, size2),
    };
}
export function getLinkColor(p1, p2, linkColor) {
    if (linkColor === randomColorValue) {
        return getRandomRgbColor();
    }
    else if (linkColor === midColorValue) {
        const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
        if (sourceColor && destColor && p2) {
            return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());
        }
        else {
            const hslColor = sourceColor ?? destColor;
            if (hslColor) {
                return hslToRgb(hslColor);
            }
        }
    }
    else {
        return linkColor;
    }
    return undefined;
}
export function getLinkRandomColor(pluginManager, optColor, blink, consent) {
    const color = isString(optColor) ? optColor : optColor.value;
    if (color === randomColorValue) {
        if (consent) {
            return rangeColorToRgb(pluginManager, {
                value: color,
            });
        }
        if (blink) {
            return randomColorValue;
        }
        return midColorValue;
    }
    else if (color === midColorValue) {
        return midColorValue;
    }
    else {
        return rangeColorToRgb(pluginManager, {
            value: color,
        });
    }
}
export function getHslFromAnimation(animation) {
    return animation === undefined
        ? undefined
        : {
            h: animation.h.value,
            s: animation.s.value,
            l: animation.l.value,
        };
}
export function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
    const resColor = {
        h: {
            enable: false,
            value: hsl.h,
            min: hMin,
            max: hMax,
        },
        s: {
            enable: false,
            value: hsl.s,
            min: sMin,
            max: sMax,
        },
        l: {
            enable: false,
            value: hsl.l,
            min: lMin,
            max: lMax,
        },
    };
    if (animationOptions) {
        setColorAnimation(resColor.h, animationOptions.h, reduceFactor);
        setColorAnimation(resColor.s, animationOptions.s, reduceFactor);
        setColorAnimation(resColor.l, animationOptions.l, reduceFactor);
    }
    return resColor;
}
function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
    colorValue.enable = colorAnimation.enable;
    colorValue.min = colorAnimation.min;
    colorValue.max = colorAnimation.max;
    if (colorValue.enable) {
        colorValue.velocity = (getRangeValue(colorAnimation.speed) / percentDenominator) * reduceFactor;
        colorValue.decay = decayOffset - getRangeValue(colorAnimation.decay);
        colorValue.status = AnimationStatus.increasing;
        colorValue.loops = defaultLoops;
        colorValue.maxLoops = getRangeValue(colorAnimation.count);
        colorValue.time = defaultTime;
        colorValue.delayTime = getRangeValue(colorAnimation.delay) * millisecondsToSeconds;
        if (!colorAnimation.sync) {
            colorValue.velocity *= getRandom();
            colorValue.value *= getRandom();
        }
        colorValue.initialValue = colorValue.value;
        colorValue.offset = setRangeValue(colorAnimation.offset);
    }
    else {
        colorValue.velocity = defaultVelocity;
    }
}
export function updateColorValue(data, decrease, delta) {
    const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
    if (!data.enable ||
        ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
        return;
    }
    data.time ??= 0;
    if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
        data.time += delta.value;
    }
    if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
        return;
    }
    const offset = data.offset ? randomInRangeValue(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
    if (!decrease || data.status === AnimationStatus.increasing) {
        data.value += velocity;
        if (data.value > max) {
            data.loops ??= 0;
            data.loops++;
            if (decrease) {
                data.status = AnimationStatus.decreasing;
            }
            else {
                data.value -= max;
            }
        }
    }
    else {
        data.value -= velocity;
        if (data.value < min) {
            data.loops ??= 0;
            data.loops++;
            data.status = AnimationStatus.increasing;
        }
    }
    if (data.velocity && decay !== identity) {
        data.velocity *= decay;
    }
    data.value = clamp(data.value, min, max);
}
export function updateColor(color, delta) {
    if (!color) {
        return;
    }
    const { h, s, l } = color;
    updateColorValue(h, false, delta);
    updateColorValue(s, true, delta);
    updateColorValue(l, true, delta);
}
export function alterHsl(color, type, value) {
    return {
        h: color.h,
        s: color.s,
        l: color.l + (type === AlterType.darken ? -lFactor : lFactor) * value,
    };
}