AppleSauce Fader

11

Früher verwendeten alle 1337 Kinder Text-Fader in Chatrooms. Ich weiß nichts über euch, aber ich möchte mich cool fühlen wie sie. Das einzige Problem ist, dass ihre alten Skripte und Anwendungen stark an die Software gekoppelt waren, für die sie entwickelt wurden, sodass ich diese erstaunliche Funktionalität nicht einfach nutzen kann, wo immer ich will. Ich möchte auch, dass die Lösung leicht portierbar ist, damit Sie den Code so klein wie möglich machen müssen, damit er auf meine Diskette passt (ich würde lieber nur eine Diskette bei mir haben, aber wenn Ihr Quellcode zu groß ist Ich kann mehr als eine tragen : P ).

Eingang

  • Eine Liste der Farben (RGB, Hex, Namen usw.)
  • Zu formatierender Text

Ihr Programm sollte erwarten, dass die Liste der Farben mindestens 2 Farben enthält.
Der zu formatierende Text kann eine beliebige Länge größer als Null haben und die Zeichen sind auf druckbare ASCII beschränkt. (Hinweis: Bei längeren Texteingaben müssen Sie möglicherweise Zwischenfarben für aufeinanderfolgende Zeichen wiederverwenden.)

Ausgabe

Der Ausgabetext sollte sich in keiner anderen Weise als Schriftart und / oder Markup / Styling vom Eingabetext unterscheiden (Hinweis: Wenn Ihre Ausgabe HTML-Markup enthält, müssen Sie die Eingabe in HTML codieren). Sie können Text mit Markup / Styling (HTML-Stil-Tags, Konsolenfarben usw.) oder ein Bild des ausgeblendeten Textes ausgeben. Alle Farbfelder sollten in der Ausgabe vorhanden sein, es sei denn, die Eingabe enthält nicht genügend Zeichen, um diese Anforderung zu erfüllen. Wenn dies der Fall ist, konsultieren Sie die Prioritätsregeln, um zu bestimmen, welche Farbfelder in Ihrer Ausgabe vorhanden sein sollen. Die Reihenfolge oder diese Farben in Ihrer Ausgabe sollten weiterhin die Eingabereihenfolge sein.

Farbprioritätsregeln

  1. Für den Fall, dass die Eingabe ein Zeichen ist, wird die erste Farbe verwendet
  2. Falls nur zwei Zeichen vorhanden sind, werden die erste und die letzte Farbe verwendet
  3. Falls es mehr als drei Farben und mehr Farben als Zeichen gibt, sollten die erste und die letzte Farbe priorisiert werden, dann die restlichen Farben in ihrer eingegebenen Reihenfolge.
  4. Falls mehr Zeichen als Farben vorhanden sind, sollten die Zeichen mithilfe von Zwischenfarben von einer Farbe zur nächsten ausgeblendet werden

Beispiele (Prioritätsregeln 1-3):
# Farben | Farbe 0 | ... | Farbe n | Text
3 ff0000 0000ff ffff00 M-> -> ->nur zuerst
3 ff0000 0000ff ffff00 hi2. ignorieren
4 ff0000 0000ff ffff00 0fff00 sup3. ignorieren

Um klar zu sein, sollte die Textfarbe von einem Hex-Farbfeld zum nächsten verblassen. Das Überblenden muss nicht perfekt gleichmäßig sein, aber es sollte kein abrupter Farbwechsel sein, es sei denn, es gibt nicht genügend Zeichen, um gut auszublenden. Im Allgemeinen wird diese Überblendung erreicht, indem Zwischenfarben für jedes der Zeichen ausgewählt werden, indem die RGB-Werte um ein Intervall erhöht / verringert werden, das durch die Anzahl der Zeichen, mit denen Sie arbeiten müssen, und den Unterschied zwischen den Farben bestimmt wird. Wenn wir zum Beispiel eine einzelne Farbe zwischen rot(# ff0000) und schwarz(# 000000) benötigen, können wir wählen, # 800000wie sie genau in der Mitte sitzt. Die optimale Ausgabe sieht ziemlich hübsch aus.

Beispiel (Prioritätsregel 4):
3 ff0000 ff7f00 f0ff00 To be or not to be, that is the question...-> -OR-Sein oder nicht sein

<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> 

Bitte geben Sie in Ihrer Antwort an, wie Ihre Ausgabe angezeigt werden soll (als HTML, in einer Konsole, als Bild usw.).

* Alle schwarzen Hintergründe dienen nur der Farbbetonung und sind nicht erforderlich

Wertung

Dies ist , daher gewinnt die kürzeste Antwort (in Bytes).
Wenn Sie es schaffen, einzelnen Charakteren Fade hinzuzufügen, werde ich für immer denken, dass Sie cool sind (aber kein Bonus, um zu punkten, da dies für einige langs nicht fair ist)

Sack
quelle
@LeakyNun Im RGB-Bereich ist es nahe genug, die andere Option ist # 7f0000.
Neil
Nicht wirklich. Versuchen Sie auf diese Weise, Rot und Grün zu mitteln, und prüfen Sie, ob Sie gelb werden. Um es richtig zu machen, nehmen Sie den quadratischen Mittelwert anstelle des direkten Durchschnitts.
Undichte Nonne
Der Durchschnitt von 000000und ff0000sollte b40000( 255*sqrt((0+1)/2)) sein
Leaky Nun
1
@LeakyNun Ich habe nie gesagt, dass Sie die Farben mitteln müssen. Ich habe eine einfache Methode zum Verblassen beschrieben, die manchmal für solche Herausforderungen eingesetzt wird. In diesem Fall haben wir die Rottöne der beiden Farben gemittelt (und gerundet). Ich habe auch in der Herausforderung festgestellt, dass die Überblendung nicht perfekt gleichmäßig sein muss. Es liegt an Ihnen, wie Sie diese Überblendung implementieren möchten.
Poke

Antworten:

3

JavaScript (ES6), 290 Byte

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
quelle
1
Es ist wirklich cool zu sehen, wie es mit dem Code-Snippet in Echtzeit passiert. : D
AdmBorkBork
1

Pyth, 126 Bytes

Obligatorischer quadratischer Mittelwert anstelle des direkten arithmetischen Mittelwerts.

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

Probieren Sie es online aus!

Beispielausgabe:

Stichprobe

Undichte Nonne
quelle
1

Java, 702 662 Zeichen

Zwei Funktionen golfen:

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]);}

Da kann das niemand lesen: Hier sind beide Funktionen in der ungolfed Version in einer Klasse:

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]);
    }
}

Hier haben Sie eine Obergrenze für Ihren eigenen Code. Die Verwendung erfolgt durch Aufrufen colorize(oder c in der Golfversion) und Übergeben des Textes und einer Reihe von Hex-Farbcodes. Die Funktion gibt einen String mit HTML-Tags zurück, wie es das OP getan hat. Sie benötigen also eine Möglichkeit, den HTML-Code zu rendern.

Der Algorithmus ist einfacher, wie die Frage aussieht. Das erste Zeichen erhält immer die erste Farbe, das letzte immer die letzte. Wenn der Text mehr Farben als Zeichen enthält, durchlaufen wir einfach den Text und die Farben und wenden diese an. Der lustige Teil ist der mit den Überblendungen: Ich begann damit, herauszufinden, in welcher Entfernung die Farben auf dem Text sind. Grundsätzlich berechne ich den Rot-, Grün- und Blauunterschied zwischen zwei bestimmten Farben und füge dann einen Teil dieses Unterschieds zur ersten Farbe hinzu, je nachdem, wo sich das Zeichen zwischen den Farben befindet. Wenn das Intervall zweier Farben verlassen wird, beginnen wir mit den nächsten beiden Farben von neu. Dies wird für alle außer dem letzten Zeichen wiederholt, von dem wir wissen, dass es immer die letzte Farbe ist. Dies ergibt ein sehr schönes Ausbleichen.

Diese Frage hat sehr viel Spaß gemacht! Vielen Dank!

Aktualisierung

Jetzt behandle ich nicht alle Fälle speziell. Stattdessen schneide ich die Farben, wenn es zwei sind, und wende die Überblendfunktion auf jede Zeichenfolge an. Wenn mehr Farben als Text vorhanden sind, werden die Farben zugeschnitten und die Überblendfunktion funktioniert genau wie eine einfache Zuordnung.

Frozn
quelle