AppleSauce Fader

11

À l'époque, tous les 1337 enfants utilisaient des faders de texte dans les salons de discussion. Je ne sais pas pour vous les gars, mais je veux me sentir cool comme ils l'ont fait. Le seul problème est que leurs anciens scripts et applications étaient fortement couplés au logiciel pour lequel ils étaient conçus, donc je ne peux pas simplement utiliser cette fonctionnalité étonnante où je veux. Je veux également que la solution soit facilement portable, vous devrez donc rendre le code aussi petit que possible pour qu'il tienne sur ma disquette (je préfère ne porter qu'une seule disquette mais si votre code source est trop gros) Je peux en porter plus d'un : P ).

Contribution

  • Une liste de couleurs (rgb, hex, noms, etc.)
  • Texte à formater

Votre programme doit s'attendre à ce que la liste des couleurs contienne au moins 2 couleurs.
Le texte à mettre en forme peut être d'une longueur supérieure à zéro et les caractères seront limités en ascii imprimable. (Astuce: les entrées de texte plus longues peuvent vous obliger à réutiliser des couleurs intermédiaires pour des caractères consécutifs)

Production

Le texte de sortie ne doit pas différer du texte d'entrée d'une manière autre que la police et / ou le balisage / le style (Remarque: si votre sortie contient un balisage html, vous devrez coder html l'entrée). Vous pouvez produire du texte avec un balisage / style (balises de style html, couleurs de console, etc.) ou une image du texte décoloré. Tous les hexagones de couleur doivent être présents dans la sortie, sauf si l'entrée ne contient pas suffisamment de caractères pour répondre à cette exigence. Si tel est le cas, consultez les règles de priorité pour déterminer les hexs de couleur qui devraient être présents dans votre sortie. L'ordre ou ces couleurs dans votre sortie doivent toujours être de l'ordre d'entrée.

Règles de priorité des couleurs

  1. Dans le cas où l'entrée est un caractère, la première couleur sera utilisée
  2. Dans le cas où il n'y a que deux caractères, la première et la dernière couleur seront utilisées
  3. Dans le cas où il y a plus de trois couleurs et plus de couleurs que de caractères, la première et la dernière couleur doivent être priorisées, puis les autres couleurs dans leur ordre d'entrée.
  4. Dans le cas où il y a plus de caractères que de couleurs, les caractères devraient s'estomper d'une couleur à l'autre en utilisant des couleurs intermédiaires

Exemples (règles de priorité 1-3 respectivement):
# Couleurs | Couleur 0 | ... | Couleur n | Texte
3 ff0000 0000ff ffff00 M-> -> ->seulement en premier
3 ff0000 0000ff ffff00 hiignorer 2e
4 ff0000 0000ff ffff00 0fff00 supignorer 3e

Pour être clair, la couleur du texte doit s'estomper d'un hex de couleur au suivant. Le fondu ne doit pas être parfaitement uniforme, mais il ne devrait pas y avoir de changement de couleur brusque à moins qu'il n'y ait pas assez de caractères pour bien disparaître. Généralement, ce fondu est obtenu en choisissant des couleurs intermédiaires pour chacun des caractères en incrémentant / décrémentant les valeurs RVB d'un certain intervalle déterminé par le nombre de caractères avec lesquels vous devez travailler et la différence entre les couleurs. Par exemple, si nous avions besoin d'une seule couleur entre rouge(# ff0000) et noir(# 000000), nous pourrions choisir # 800000car elle se trouve en plein milieu. La sortie optimale sera plutôt jolie.

Exemple (règle de priorité 4):
3 ff0000 ff7f00 f0ff00 To be or not to be, that is the question...-> -OU-Être ou ne pas

<span style="color:#ff0000;">T</span><span style="color:#ff0600;">o</span><span style="color:#ff0c00;"> </span><span style="color:#ff1200;">b</span><span style="color:#ff1800;">e</span><span style="color:#ff1e00;"> </span><span style="color:#ff2400;">o</span><span style="color:#ff2a00;">r</span><span style="color:#ff3000;"> </span><span style="color:#ff3600;">n</span><span style="color:#ff3c00;">o</span><span style="color:#ff4300;">t</span><span style="color:#ff4900;"> </span><span style="color:#ff4f00;">t</span><span style="color:#ff5500;">o</span><span style="color:#ff5b00;"> </span><span style="color:#ff6100;">b</span><span style="color:#ff6700;">e</span><span style="color:#ff6d00;">,</span><span style="color:#ff7300;"> </span><span style="color:#ff7900;">t</span><span style="color:#ff7f00;">h</span><span style="color:#fe8500;">a</span><span style="color:#fe8b00;">t</span><span style="color:#fd9100;"> </span><span style="color:#fc9700;">i</span><span style="color:#fb9d00;">s</span><span style="color:#fba400;"> </span><span style="color:#faaa00;">t</span><span style="color:#f9b000;">h</span><span style="color:#f9b600;">e</span><span style="color:#f8bc00;"> </span><span style="color:#f7c200;">q</span><span style="color:#f6c800;">u</span><span style="color:#f6ce00;">e</span><span style="color:#f5d400;">s</span><span style="color:#f4da00;">t</span><span style="color:#f4e100;">i</span><span style="color:#f3e700;">o</span><span style="color:#f2ed00;">n</span><span style="color:#f1f300;">.</span><span style="color:#f1f900;">.</span><span style="color:#f0ff00;">.</span> 

Dans votre réponse, veuillez spécifier comment votre sortie doit être affichée (en html, dans une console, en tant qu'image, etc.).

* Tous les arrière-plans noirs sont uniquement destinés à l'accentuation des couleurs et ne sont pas requis

Notation

Il s'agit de , donc la réponse la plus courte (en octets) l'emporte.
Si vous parvenez à ajouter un fondu à des personnages individuels, je penserai toujours que vous êtes cool (mais pas de bonus à marquer car cela ne sera pas juste pour certaines langues)

Poussée
la source
@LeakyNun Dans l'espace RVB, il est assez proche, l'autre option étant # 7f0000.
Neil
Pas vraiment. Essayez de faire la moyenne du rouge et du vert de cette manière et voyez si vous obtenez du jaune. Pour le faire correctement, prenez le carré de la racine au lieu de la moyenne directe.
Leaky Nun
La moyenne de 000000et ff0000devrait être b40000( 255*sqrt((0+1)/2))
Leaky Nun
1
@LeakyNun Je n'ai jamais dit qu'il fallait faire la moyenne des couleurs. J'ai décrit une méthode facile de décoloration qui est parfois utilisée pour des défis comme celui-ci. Dans ce cas, nous avons fait la moyenne des rouges des deux couleurs (et arrondis). J'ai également noté dans le défi que le fondu ne doit pas être parfaitement uniforme. C'est à vous de décider comment vous souhaitez implémenter ce fondu.
Poke

Réponses:

3

JavaScript (ES6), 290 octets

h=a=>f(a,a.shift());f=
(a,w)=>[...w].map((c,i)=>{l=w.length-1;m=a.length-1;s=o.appendChild(document.createElement('span'));s.textContent=c;s.style.color=`#${i?i-l?a[r=l%m,n=l/m|0,i<r*n+r?++n:i-=r,k=i/n|0,k++].replace(/./g,(c,d)=>((parseInt(c,16)*(n-i%n)+i%n*parseInt(a[k][d],16))/n|0).toString(16)):a[m]:a[0]}`;})
<textarea rows=10 cols=40 oninput="o.textContent='';h(this.value.split`\n`)">Type the text here and the colours on subsequent lines.
FF0000
00FF00
0000FF</textarea><div id=o>

Neil
la source
1
C'est vraiment cool de voir cela se produire en temps réel avec l'extrait de code. : D
AdmBorkBork
1

Pyth, 126 octets

Moyenne quadratique obligatoire au lieu de la moyenne arithmétique directe.

L%"<span style=\"color:#%s\">%s</span>",smt.H+256s*255@d2ebhbMm+hG*-eGhGcdHH=Q^RL2Q+smsyMC,hdCgRlhdCedC,ctlQPzC,QtQy,ez?tlzeQh

Essayez-le en ligne!

Exemple de sortie:

échantillon

Leaky Nun
la source
1

Java, 702 662 caractères

Deux fonctions jouées au golf:

import java.awt.*;String f(Color C,char c){return"<span style=\"color:#"+Integer.toHexString(C.getRGB()).substring(2)+";\">"+c+"</span>";}String c(String t,String[]h){String r="";int l=h.length,e=t.length(),i=0,s=0,g=1,c=-1,p,q,u;double d,m=0,v;char[]T=t.toCharArray();Color C[]=new Color[l],H[],a,b;for(;i<l;)C[i]=Color.decode(h[i++]);if(l>e){H=java.util.Arrays.copyOfRange(C,0,e);H[e-1]=C[l-1];H[0]=C[0];C=H;l=e;}d=--e/(l-1.);for(;++c<e;){a=C[s];b=C[g];p=b.getRed()-a.getRed();q=b.getGreen()-a.getGreen();u=b.getBlue()-a.getBlue();v=m/d;r+=f(new Color(a.getRGB()+((int)(v*p)<<16|(int)(v*q)<<8|(int)(v*u))),T[c]);if(++m>d){m-=d;s=g++;}}return r+f(C[l-1],T[e]);}

Comme personne ne peut lire ceci: voici les deux fonctions dans cette version non golfée d'une classe:

import java.awt.*;

public class Q80554 {

    static String format(Color color, char character) {
        return "<span style=\"color:#" + Integer.toHexString(color.getRGB()).substring(2) + ";\">" + character + "</span>";
    }

    static String colorizeB(String text, String[] hexColors) {
        String result = "";
        int colorsLength = hexColors.length, textLength = text.length(), i, currentStartColorPos = 0, currentGoalColorPos = 1, currentCharPos = -1, diffColorRed, diffColorGreen, diffColorBlue;
        double difference, goneDifference = 0, relativeChange;
        char[] textArray = text.toCharArray();
        Color colors[] = new Color[colorsLength], changer[], currentStartColor, currentGoalColor;

        for (i = 0; i < colorsLength;)
            colors[i] = Color.decode(hexColors[i++]);

        if (colorsLength > textLength) {
            changer = Arrays.copyOfRange(colors, 0, textLength);
            changer[textLength - 1] = colors[colorsLength - 1];
            changer[0] = colors[0];

            colors = changer;
            colorsLength = textLength;
        }

        // fade
        difference = --textLength / (colorsLength - 1.); // space between colors    

        for (; ++currentCharPos < textLength;) {
            currentStartColor = colors[currentStartColorPos];
            currentGoalColor = colors[currentGoalColorPos];

            diffColorRed = currentGoalColor.getRed() - currentStartColor.getRed();
            diffColorGreen = currentGoalColor.getGreen() - currentStartColor.getGreen();
            diffColorBlue = currentGoalColor.getBlue() - currentStartColor.getBlue();

            relativeChange = goneDifference / difference;

            result += format(new Color(currentStartColor.getRGB() + ((int) (relativeChange * diffColorRed) << 16 | (int) (relativeChange * diffColorGreen) << 8 | (int) (relativeChange * diffColorBlue))), textArray[currentCharPos]);

            if (++goneDifference > difference) {
                goneDifference -= difference;
                currentStartColorPos = currentGoalColorPos++;                   
            }
        }

        // last character always has last color
        return result + format(colors[colorsLength - 1], textArray[textLength]);
    }
}

Ici, vous avez une limite supérieure pour votre propre code. L'utilisation consiste à appeler colorize(ou c dans la version golfée) et à passer le texte et un tableau de codes de couleur hexadécimaux. La fonction renverra une chaîne avec des balises HTML comme l'OP l'a fait, vous avez donc besoin d'un moyen de rendre le HTML.

L'algorithme est plus facile car la question ressemble. Le premier caractère obtient toujours la première couleur, le dernier toujours la dernière. Si nous avons plus de couleurs que de caractères dans le texte, nous itérons simplement le texte et les couleurs et les appliquons. La partie amusante est celle avec les fondus: j'ai commencé par découvrir à quelle distance se trouvent les couleurs sur le texte. Je calcule essentiellement la différence de rouge, de vert et de bleu entre deux couleurs données, puis j'ajoute une partie de cette différence à la première couleur, en fonction de l'emplacement du caractère entre les couleurs. S'il laisse l'intervalle de deux couleurs, nous partons de nouveau avec les deux couleurs suivantes. Ceci est répété pour tous, sauf le dernier caractère, qui, nous le savons, est toujours la dernière couleur. Cela donne une très belle décoloration.

Cette question était très amusante! Merci!

Mises à jour

Maintenant, je ne gère pas tous les cas spécialement. Au lieu de cela, je coupe les couleurs s'il y en a deux et applique la fonction de fondu à chaque chaîne. S'il y avait plus de couleurs que de texte, les couleurs seront rognées et la fonction de fondu fonctionnera exactement comme un simple mappage.

Frozn
la source