Calculer un fondu de couleur

Donné deux couleurs et n étapes, comment peut-on calculer n couleurs, y compris les deux couleurs qui créent un effet de fondu?

Si possible, pseudo-code est préférable, mais ce sera probablement mis en œuvre en Java.

Merci!

OriginalL'auteur TT. | 2008-11-26

  1. 21

    Diviser chaque couleur dans ses composantes RVB et puis de calculer les différentes étapes nécessaires.

    oldRed = 120;
newRed = 200;
steps = 10;
redStepAmount = (newRed - oldRed) /steps;

currentRed = oldRed;
for (i = 0; i < steps; i++) {
   currentRed += redStepAmount;
}

    Évidemment étendre que pour le vert et le bleu.

    Le code ne sera jamais atteindre newRed, à la fois en raison de l'entier de la troncature et une-par-une erreur. Mieux restructurer comme currentRed = oldRed + ((i * (newRed - oldRed)) / (étapes - 1).
    ouais je pensais que comme je l'écrivais il - mais il y a quelques façons de contourner cela, et je pensais laisser un exercice pour le maître d'œuvre 🙂

    OriginalL'auteur nickf

  2. 11

    Il y a deux bonnes questions connexes, vous devez également examiner:

    Veuillez noter que vous êtes souvent mieux de faire cela dans l'espace de couleur HSV plutôt que de RVB - il génère plus de couleurs agréables à l'œil humain (moins de chance d'aller à l'encontre ou négatif propriétés optiques).

    Bonne chance!

    -Adam

    OriginalL'auteur Adam Davis

  3. 4

    Si vous voulez un mélange qui ressemble à la plupart sélecteur de couleur GUI widgets, vous voulez vraiment traduire de LGV ou HSV. À partir de là, vous êtes probablement très bien avec l'interpolation linéaire dans chaque dimension.

    Essayer de faire tout interpolations directement dans l'espace de couleurs RVB est une mauvaise idée. C'est trop non linéaire (et non, correction gamma n'aide pas dans ce cas).

    Je prie de différer. Il y a beaucoup d'activités qui fonctionnent mieux dans les autres espaces de couleurs, mais d'interpolation entre deux points de terminaison n'est pas l'un d'eux.
    je pense que pour de nombreuses situations, un linéaire de base RVB transformation est satisfaisante, par exemple: ma zone de texte est rouge et je veux qu'il à fondu bien au vert quand il a été rempli correctement. tout se passe en moins d'une seconde et est suffisant.
    Vrai, si c'est un temporelles effet, vous avez beaucoup plus de marge de manœuvre que d'un effet d'espace. @marc - Quel est le problème de l'interpolation dans le HSV? J'ai eu un peu de succès avec elle.
    Voici le code pour TSL traduction: stackoverflow.com/a/24687720/35690

    OriginalL'auteur Tom

  4. 4

    Pour ceux qui recherchent quelque chose qu'ils peuvent copier et coller. Rapidement à une fonction pour les couleurs RVB. Retourne une couleur unique qui est la quantité de ratio plus proche de rgbColor2.

    function fadeToColor(rgbColor1, rgbColor2, ratio) {
    var color1 = rgbColor1.substring(4, rgbColor1.length - 1).split(','),
        color2 = rgbColor2.substring(4, rgbColor2.length - 1).split(','),
        difference,
        newColor = [];

    for (var i = 0; i < color1.length; i++) {
        difference = color2[i] - color1[i];
        newColor.push(Math.floor(parseInt(color1[i], 10) + difference * ratio));
    }

    return 'rgb(' + newColor + ')';
}

    OriginalL'auteur Chris Dolphin

  5. 1

    La quesiton est ce que la transformation voulez-vous produire? Si vous transposer dans le HSV colourspace et donné

    FF0000 et 00FF00

    Il passera du rouge au jaune au vert.

    Toutefois, si vous définissez "noir", ou quelque autre de l'ombre comme étant le point médian de la fusion, vous avez à faire de l'ombre à celle de la couleur de premier ff0000->000000->00ff00 ou par l'intermédiaire blanche : ff0000 -> ffffff -> 00ff00.

    Transformer via HSV peut cependant être amusant, parce que vous avez à utiliser un peu de trigo pour la carte de la circulaire de la carte dans les composantes du vecteur.

    OriginalL'auteur Kent Fredric

  6. 1

    La meilleure chose à faire est de l'interpolation linéaire entre les composantes de couleur (voir nickf de réponse). Juste être conscient que l'œil est fortement non linéaire, donc il ne sera pas nécessairement vous êtes à la prise de mesures. Certains espaces de couleurs tenter de répondre à cette (CIE peut-être?), de sorte que vous pouvez transformer en un autre espace de couleur d'abord, interpoler, puis de les transformer en arrière RVB ou ce que vous êtes en utilisant.

    Le gamma est appliquée pour les valeurs de la couleur aide à contrer la non-linéarité, de sorte que la transformation vers un autre espace de couleur est probablement excessif.

    OriginalL'auteur Drew Hall

  7. 0

    Comment sur cette réponse

    - (UIColor *)colorFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor percent:(float)percent
{
    float dec = percent /100.f;
    CGFloat fRed, fBlue, fGreen, fAlpha;
    CGFloat tRed, tBlue, tGreen, tAlpha;
    CGFloat red, green, blue, alpha;

    if(CGColorGetNumberOfComponents(fromColor.CGColor) == 2) {
        [fromColor getWhite:&fRed alpha:&fAlpha];
        fGreen = fRed;
        fBlue = fRed;
    }
    else {
        [fromColor getRed:&fRed green:&fGreen blue:&fBlue alpha:&fAlpha];
    }
    if(CGColorGetNumberOfComponents(toColor.CGColor) == 2) {
        [toColor getWhite:&tRed alpha:&tAlpha];
        tGreen = tRed;
        tBlue = tRed;
    }
    else {
        [toColor getRed:&tRed green:&tGreen blue:&tBlue alpha:&tAlpha];
    }

    red = (dec * (tRed - fRed)) + fRed;
    green = (dec * (tGreen - fGreen)) + fGreen;
    blue = (dec * (tBlue - fBlue)) + fBlue;
    alpha = (dec * (tAlpha - fAlpha)) + fAlpha;

    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}

    OriginalL'auteur gbk