AppleSauce Fader

11

Kembali pada hari itu, semua anak-anak 1337 menggunakan fader teks di chatroom. Saya tidak tahu tentang kalian, tapi saya ingin merasa keren seperti mereka. Satu-satunya masalah adalah bahwa skrip dan aplikasi lama mereka sangat digabungkan dengan perangkat lunak yang mereka buat, jadi saya tidak bisa memanfaatkan fungsionalitas luar biasa ini di mana pun saya inginkan. Saya juga ingin solusinya mudah dibawa-bawa sehingga Anda harus membuat kode sekecil mungkin agar cocok dengan floppy disk saya (saya lebih suka hanya membawa satu floppy tetapi jika kode sumber Anda terlalu besar Saya dapat membawa lebih dari satu : P ).

Memasukkan

  • Daftar warna (rgb, hex, nama, dll)
  • Teks ke format

Program Anda harus mengharapkan daftar warna mengandung setidaknya 2 warna.
Teks ke format bisa lebih panjang dari nol dan karakter akan terbatas pada ascii yang dapat dicetak. (Petunjuk: Input teks yang lebih panjang mungkin mengharuskan Anda menggunakan kembali warna antara untuk karakter yang berurutan)

Keluaran

Teks keluaran tidak boleh berbeda dari teks input dengan cara apa pun selain font dan / atau markup / gaya (Catatan: jika output Anda berisi markup html maka Anda harus menyandikan input html). Anda dapat menampilkan teks dengan markup / gaya (tag gaya html, warna konsol, dll.) Atau gambar teks pudar. Semua heksa warna harus ada dalam output kecuali input tidak mengandung cukup karakter untuk memenuhi persyaratan ini. Jika demikian, bacalah aturan prioritas untuk menentukan heksa warna mana yang harus ada dalam output Anda. Urutan atau warna-warna ini dalam output Anda masih harus urutan input.

Aturan Prioritas Warna

  1. Jika input adalah satu karakter, warna pertama akan digunakan
  2. Jika hanya ada dua karakter, warna pertama dan terakhir akan digunakan
  3. Jika ada lebih dari tiga warna dan lebih banyak warna daripada karakter, warna pertama dan terakhir harus diprioritaskan, kemudian warna lainnya dalam urutan yang dimasukkan.
  4. Jika ada lebih banyak karakter daripada warna, karakter harus memudar dari satu warna ke warna berikutnya menggunakan warna antara

Contoh (Aturan prioritas 1-3 masing-masing):
# Warna | Warna 0 | ... | Warna n | Teks
3 ff0000 0000ff ffff00 M-> -> ->hanya dulu
3 ff0000 0000ff ffff00 hiabaikan 2nd
4 ff0000 0000ff ffff00 0fff00 supabaikan ke-3

Agar jelas, warna teks harus memudar dari satu hex warna ke yang berikutnya. Fade tidak harus seragam sempurna tetapi seharusnya tidak menjadi perubahan warna yang tiba-tiba kecuali tidak ada cukup karakter untuk memudar dengan baik. Secara umum fade ini dicapai dengan memilih warna antara untuk masing-masing karakter dengan menambah / mengurangi nilai rgb dengan beberapa interval yang ditentukan oleh jumlah karakter yang harus Anda kerjakan dan perbedaan antara warna. Sebagai contoh jika kita membutuhkan satu warna antara merah(# ff0000) dan hitam(# 000000), kita dapat memilih # 800000karena ia berada tepat di tengah. Output optimal akan terlihat lebih cantik.

Contoh (Aturan prioritas 4):
3 ff0000 ff7f00 f0ff00 To be or not to be, that is the question...-> -OR-menjadi atau tidak

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

Dalam jawaban Anda, harap tentukan bagaimana output Anda harus ditampilkan (sebagai html, di konsol, sebagai gambar, dll.).

* Semua latar belakang hitam hanya untuk penekanan warna dan tidak diperlukan

Mencetak gol

Ini adalah , jadi jawaban tersingkat (dalam byte) menang.
Jika Anda berhasil menambahkan fade ke masing-masing karakter maka saya akan selamanya berpikir Anda keren (tapi tidak ada bonus untuk dinilai karena ini tidak adil untuk beberapa permainan)

Menyodok
sumber
@ LeakyNun Di ruang RGB cukup dekat, pilihan lainnya adalah # 7f0000.
Neil
Tidak juga. Coba rata-rata merah dan hijau dengan cara ini dan lihat apakah Anda mendapatkan kuning. Untuk melakukannya dengan cara yang benar, ambil akar-mean-kuadrat daripada rata-rata langsung.
Leaky Nun
Rata-rata 000000dan ff0000seharusnya b40000( 255*sqrt((0+1)/2))
Leaky Nun
1
@ LeakyNun Saya tidak pernah mengatakan Anda perlu rata-rata warna. Saya menggambarkan metode memudar yang mudah yang kadang-kadang digunakan untuk tantangan seperti ini. Dalam hal ini kita rata-rata merah dari dua warna (dan bulat). Saya juga mencatat dalam tantangan bahwa pudar tidak harus seragam sempurna. Terserah Anda bagaimana Anda ingin menerapkan fade ini.
Poke

Jawaban:

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
sumber
1
Itu sangat keren untuk melihat itu terjadi secara real time dengan potongan kode. : D
AdmBorkBork
1

Pyth, 126 byte

Rata-rata rata-rata akar-kuadrat wajib bukannya rata-rata aritmatika langsung.

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

Cobalah online!

Output sampel:

Sampel

Biarawati Bocor
sumber
1

Java, 702 662 karakter

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

Karena tidak ada yang bisa membaca ini: di sini ada dua fungsi dalam versi yang tidak diklik di kelas:

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

Di sini Anda memiliki batas atas untuk kode Anda sendiri. Penggunaan adalah dengan memanggil colorize(atau c dalam versi golf) dan meneruskan teks dan array kode warna hex. Fungsi ini akan mengembalikan String dengan tag-HTML seperti OP, sehingga Anda perlu beberapa cara untuk merender HTML.

Algoritma lebih mudah seperti pertanyaannya. Karakter pertama selalu mendapatkan warna pertama, yang terakhir selalu yang terakhir. Jika kita memiliki lebih banyak warna daripada karakter dalam teks, kita hanya beralih pada teks dan warna dan menerapkannya. Bagian yang menyenangkan adalah bagian yang pudar: Saya mulai dengan mencari tahu pada jarak berapa warna pada teks. Saya pada dasarnya menghitung perbedaan merah, hijau dan biru antara dua warna yang diberikan dan kemudian menambahkan bagian dari perbedaan ini ke warna pertama, tergantung di mana char berada di antara warna. Jika meninggalkan interval dua warna, kita mulai dari yang baru dengan dua warna berikutnya. Ini diulang untuk semua kecuali karakter terakhir, yang kita tahu selalu warna terakhir. Ini memberikan pudar yang sangat indah.

Pertanyaan itu sangat menyenangkan! Terima kasih!

Pembaruan

Sekarang saya tidak menangani semua kasing khusus. Alih-alih, saya memotong warna jika ada dua dan menerapkan fungsi fade ke setiap string. Jika ada lebih banyak warna daripada teks maka warna akan dipangkas dan fungsi fading akan bekerja persis seperti pemetaan sederhana.

Frozn
sumber