AppleSauce Fader


11

Ai tempi, tutti i 1337 bambini usavano i fader di testo nelle chat room. Non so voi ragazzi, ma voglio sentirmi forte come hanno fatto loro. L'unico problema è che i loro vecchi script e applicazioni erano fortemente accoppiati al software per cui erano stati creati, quindi non posso semplicemente usare questa straordinaria funzionalità dove voglio. Voglio anche che la soluzione sia facilmente trasportabile, quindi dovrai rendere il codice il più piccolo possibile in modo che si adatti al mio disco floppy (preferirei portare solo un floppy ma se il tuo codice sorgente è troppo grande Posso trasportarne più di uno : P ).

Ingresso

  • Un elenco di colori (rgb, hex, nomi, ecc.)
  • Testo da formattare

Il tuo programma dovrebbe aspettarsi che l'elenco dei colori contenga almeno 2 colori.
Il testo da formattare può avere una lunghezza maggiore di zero e i caratteri saranno limitati agli ascii stampabili. (Suggerimento: input di testo più lunghi potrebbero richiedere il riutilizzo di colori intermedi per caratteri consecutivi)

Produzione

Il testo di output non dovrebbe differire dal testo di input in alcun modo diverso da font e / o markup / stile (Nota: se il tuo output contiene markup html, dovrai codificare html nell'input). È possibile produrre testo con markup / stile (tag di stile html, colori della console, ecc.) O un'immagine del testo sbiadito. Tutti gli esagoni di colore devono essere presenti nell'output a meno che l'input non contenga caratteri sufficienti per soddisfare questo requisito. In tal caso, consultare le regole di priorità per determinare quali esagoni di colore devono essere presenti nell'output. L'ordine o questi colori nell'output devono comunque essere in ordine di input.

Regole di priorità dei colori

  1. Nel caso in cui l'input sia un carattere, verrà utilizzato il primo colore
  2. Nel caso in cui siano presenti solo due caratteri, verranno utilizzati il ​​primo e l'ultimo colore
  3. Nel caso in cui siano presenti più di tre colori e più colori rispetto ai caratteri, è necessario dare priorità al primo e all'ultimo colore, quindi al resto dei colori nel loro ordine immesso.
  4. Nel caso in cui ci siano più caratteri che colori, i caratteri dovrebbero sfumare da un colore all'altro usando colori intermedi

Esempi (rispettivamente le regole di priorità 1-3):
# Colori | Colore 0 | ... | Colore n | Testo
3 ff0000 0000ff ffff00 M-> -> ->solo il primo
3 ff0000 0000ff ffff00 hiignora 2 °
4 ff0000 0000ff ffff00 0fff00 supignora 3a

Per essere chiari, il colore del testo dovrebbe sfumare da un esagono di colore al successivo. La dissolvenza non deve essere perfettamente uniforme, ma non dovrebbe essere un brusco cambio di colore a meno che non ci siano abbastanza personaggi da sfumare bene. Generalmente questa dissolvenza si ottiene scegliendo i colori intermedi per ciascuno dei caratteri aumentando / decrementando i valori rgb di un intervallo determinato dal numero di caratteri con cui lavorare e dalla differenza tra i colori. Ad esempio, se avessimo bisogno di un singolo colore tra rosso(# ff0000) e nero(# 000000), potremmo scegliere # 800000come si trova proprio nel mezzo. L'output ottimale apparirà piuttosto carino.

Esempio (regola di priorità 4):
3 ff0000 ff7f00 f0ff00 To be or not to be, that is the question...-> -OR-essere o no

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

Nella tua risposta specifica come deve essere visualizzato il tuo output (come html, in una console, come immagine, ecc.).

* Tutti gli sfondi neri sono solo per enfasi del colore e non sono richiesti

punteggio

Questo è , quindi vince la risposta più breve (in byte).
Se riesci ad aggiungere dissolvenza ai singoli personaggi, penserò per sempre che sei forte (ma nessun bonus da segnare in quanto questo non sarà giusto per alcuni lang)



@LeakyNun Nello spazio RGB è abbastanza vicino, l'altra opzione è # 7f0000.
Neil,

Non proprio. Cerca in media rosso e verde in questo modo e vedi se diventi giallo. Per farlo nel modo giusto, prendi il root-mean-square invece della media diretta.
Leaky Nun,

La media di 000000e ff0000dovrebbe essere b40000( 255*sqrt((0+1)/2))
Leaky Nun

1
@LeakyNun Non ho mai detto che hai bisogno di fare una media dei colori. Ho descritto un metodo semplice di dissolvenza che a volte viene utilizzato per sfide come questa. In questo caso abbiamo calcolato la media dei rossi dei due colori (e arrotondati). Ho anche notato nella sfida che la dissolvenza non deve essere perfettamente uniforme. Sta a te decidere come implementare questa dissolvenza.
Colpisce

Risposte:


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>


1
È davvero bello vederlo accadere in tempo reale con lo snippet di codice. : D
AdmBorkBork,

1

Pyth, 126 byte

Media quadrata media radice obbligatoria invece della media aritmetica diretta.

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

Provalo online!

Uscita campione:

campione


1

Java, 702 662 caratteri

Due funzioni giocate a 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]);}

Dato che nessuno può leggere questo: qui ci sono entrambe le funzioni nella versione ungolfed in una 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]);
    }
}

Qui hai un limite superiore per il tuo codice. L'utilizzo è chiamando colorize(o c nella versione golfed) e passa il testo e una matrice di codici colore esadecimali. La funzione restituirà una stringa con tag HTML come ha fatto l'OP, quindi è necessario un modo per eseguire il rendering dell'HTML.

L'algoritmo è più semplice come appare la domanda. Il primo personaggio ottiene sempre il primo colore, l'ultimo sempre l'ultimo. Se nel testo sono presenti più colori che caratteri, è sufficiente scorrere il testo e i colori e applicarli. La parte divertente è quella con le dissolvenze: ho iniziato scoprendo a che distanza sono i colori sul testo. Fondamentalmente calcolo la differenza di rosso, verde e blu tra due colori dati e quindi aggiungo una parte di questa differenza al primo colore, a seconda di dove si trova il carattere tra i colori. Se lascia l'intervallo di due colori, partiamo da nuovi con i due colori successivi. Questo si ripete per tutti tranne l'ultimo personaggio, che sappiamo essere sempre l'ultimo colore. Questo dà uno sbiadimento molto bello.

Questa domanda è stata molto divertente! Grazie!

aggiornamenti

Ora non gestisco tutti i casi appositamente. Invece, taglio i colori se ce ne sono due e applico la funzione di dissolvenza su ogni stringa. Se c'erano più colori del testo, i colori verranno tagliati e la funzione di dissolvenza funzionerà esattamente come una semplice mappatura.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.