RGB Degradeler Üretimi


18

Meydan okuma

İki büyük onaltılık dizeleri verilen (her ikisi de 6 karakter uzunluğunda XXXXXX ve YYYYYY) (arasında değişen RGB değerleri temsil 000000etmek FFFFFFdahil) ve pozitif sıfır olmayan N tamsayıdır XXXXXX gelen yyyyyy için oluşturulan N + 2 renk doğrusal bir geçiş görüntülemek renk gradyanı ile sonuçlanacaktır.

Misal

Giriş

FF3762
F08800
9

Çıktı

Örneğimizde, iki renk arasında 9 ara adım istedim, bu nedenle başlangıç ​​renginden son renge kadar 11 satır görüntülenecek

FF3762
FD3F58
FC474E
FA4F44
F9573A
F75F31
F66727
F46F1D
F37713
F17F09
F08800

Uyarılar

Ara renkler için tamsayı değerlerini onaltılık biçime dönüştürmeden önce türetmek için basit bir doğrusal işleme devam ederken, yöntemleriniz değişebilir. Lütfen numaralarınızı buna göre yukarı / aşağı yuvarlamanın çeşitli yollarını göz önünde bulundurun .

Test yapmak

Bunu ilginç hale getirmek için, kodunuzu test etmek için iki rastgele renk sağlamak için bir düğme dahil olmak üzere kodunuzun test edilmesine izin veren bir snippet sağladım. Sonuçlarınızı görüntülemek isteğe bağlıdır, ancak teşvik edilir!

c1=()=>('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);

$("#col").click(function(){
  alert("Your two colors are: "+c1()+" and "+c1()+".");
});
        
$("#colors").blur(function(){
  $("#test").empty();
	var colArr = $("#colors").val().split("\n");
	for(c in colArr){
  	$("#test").append('<div class="tester" style="background-color:#'+colArr[c]+';">'+colArr[c]+'</div>')
  }
  
});
.tester{height: 20px;
width: 60px;padding: 4px;border: 1px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="col">Your two colors</button><br />
<textarea id="colors"></textarea>
<div id="test">

</div>

1) "İki rengin" düğmesine tıklayarak testiniz için iki rastgele renge erişebilirsiniz. 2) Ara adım sayısı, PPCG kullanıcı adınızdaki boşluklar dahil karakter sayısı ile aynı olacaktır, "WallyWest" durumunda 9 olacaktır (yukarıdaki örneğime göre). 3) Kodunuzu iki renk ve sayı ile çalıştırın ve oluşturduğunuz listeyi oluşturduktan sonra, çıktınızı metin alanına yapıştırma ve oluşturulan renk gradyanınızı elde etmek için sekmeden uzaklaştırma seçeneğiniz vardır.

Örneğim burada gösteriliyor:

Renk Geçişleri

İtiraf etmeliyim ki, bu harika görünüyor!

Lütfen dikkat: Bahsettiğim gibi, snippet'i kullanarak çıktılarınızı test etmenizi göstermek isteğe bağlıdır, ancak teşvik edilir! :)

Çıktı

Liste çıktısı, yukarıdaki örneğimde gösterildiği gibi, satır beslemeleri (\ n) ile ayrılmış 6 basamaklı onaltılık sayıların N + 2 setleri biçiminde olmalıdır. Çıktı, ayrı satırlar, boşluk / virgülle ayrılmış liste, bir dizi veya diliniz için en uygun olanı şeklinde olabilir ... (Başlıklar için teşekkürler @nimi) Lütfen kodunuzu test etmeyi planlıyorsanız, snippet, ancak her "renk" ayrı size kalmış.

kurallar

Bu kod golfüdür, bu nedenle bayttaki en kısa çözüm kazananı taçlandırır. Doğal olarak boşluk yok . Giriş, iki dizeyi ve bir sayıyı kabul etmelidir (söylediğim gibi, PPCG'deki kullanıcı adınızdaki harf sayısına eşit olacaktır, bu nedenle elde edilen çıktınız her zaman en az üç satır uzunluğunda olacaktır.



Kaydetti ve güncellendi ... Heads up için teşekkürler (+1)
WallyWest

Meraktan, Illustrator gibi görüntü uygulamaları bazı algısal renk uzaylarında doğrusal degradeler veya degradeler kullanıyor mu? Her ikisi için de kullanım durumlarını görebiliyorum (belki daha sonra algılanacak dönüşümü yapıyorsunuz, örneğin bir oyunun dokusu).
Robert Fraser

Yanıtlar:


1

MATL , 31 bayt

2+1yhjjh2e!1ZA3e!b:1&Ynk8W5Y2Za

Bu, yuvarlama ile doğrusal enterpolasyon kullanır. Girdi biçimi:

9
FF3762
F08800

Çevrimiçi deneyin!

Grafik çıkışı, 31 bayt

2+1yhjjh2e!1ZA3e!b:t2YG1&Ynk2ZG

Bu girdilerin sonucudur

5
FF3762
F08800

resim açıklamasını buraya girin

MATL Online'da deneyin ! Tercüman şu anda deneyseldir. Çıktı almazsanız sayfayı yenileyin ve tekrar "Çalıştır" a basın.


4

JavaScript (ES6), 130 bayt

g=
(f,t,n)=>[...Array(++n+1)].map((_,i)=>f.replace(/../g,(e,j)=>((`0x${e}`*(n-i)+`0x${t[j]+t[j+1]}`*i)/n|256).toString(16).slice(1)))
;
p=_=>g(f.value,t.value,+n.value).map(e=>o.insertRow().insertCell().appendChild(document.createTextNode(e)).parentNode.bgColor=e);
<input id=f value=e14f09><input id=t value=9a04f6><input id=n value=4 type=number><input type=button onclick=p() value=Go!><table id=o bgcolor=black cellpadding=4>


3

Dyalog APL , 44 bayt

İçin İstemler N , o zaman B daha sonra, eginning renkli e nding renkli. ⎕IO←0Birçok sistemde varsayılan olan ihtiyaçlar .

h[↑⌊B∘+¨(⍳2+N)×(-/E B←(h←⎕D,⎕A)∘⍳¨⍞⍞)÷1+N←⎕]

h[... ]dizine h (parantezin içeriğini değerlendirmeyi bitirdiğimizde değeri olan)

N←⎕sayısal N istemi (4)

1+N'ye bir tane ekle (5)

(... bunun sonucunu bölmek için kullanın ...

  ⍞⍞ karakter dizesi istemi ["7E0E7E", "FF3762"]

  (... )∘⍳¨her bir dizenin karakterlerinin indekslerini ...

   ⎕D,⎕A D igits ardından A lphabet

   h←h'ye atanmış

  şimdi "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ" var

  E B←endeksleri E ve B'ye atamak [[7,14,0,14,7,14], [15,15,3,7,6,2]]

  -/B'yi E'den çıkarın ve içine alın [[-8, -1, -3,7,1,12]]

  şimdiye kadar sonuç [[-1.6, -0.2, -0.6,1.4,0.2,2.4]]

(... ile çarpın ...

  2+Niki artı N (6)

   ilk tamsayılar [0,1,2,3,4,5]

 bu bize [[0,0,0,0,0,0], [- 1,6, -0,2, -0,6,1,4,0,2,2,4], [- 3,2, -0,4, -1,2,2,8,0,4,4,8 ], ...]

B∘+¨her birine B ekleyin [[15,15,3,7,6,2], [13.4,14.8,2.4,8.4,6.2,4.4], [11.8,14.6,1.8,9.8,6.4,6.8], ... ]

aşağıya doğru [[15,15,3,7,6,2], [13,14,2,8,6,4], [11,14,1,9,6,6], ...]

listelerin listesini tablo haline getir

[[15,15, 3, 7, 6, 2]
 [13,14, 2, 8, 6, 4]
 [11,14, 1, 9, 6, 6]
 [10,14, 1,11, 6, 9]
 [ 8,14, 0,12, 6,11]
 [ 7,14, 0,14, 7,14]]

burada h dizin , vererek

[["F","F","3","7","6","2]
 ["D","E","2","8","6","4]
 ["B","E","1","9","6","6]
 ["A","E","1","B","6","9]
 ["8","E","0","C","6","B]
 ["7","E","0","E","7","E]]

ki aynı

[["FF3762"]
 ["DE2864"]
 ["BE1966"]
 ["AE1B69"]
 ["8E0C6B"]
 ["7E0E7E"]]

ve yazdırır

FF3762
DE2864
BE1966
AE1B69
8E0C6B
7E0E7E

meyil

TryAPL çevrimiçi!


İyi iş! Geçiş harika görünüyor!
WallyWest

@WallyWest Teşekkürler. Muhtemelen çoğundan farklı bir doğrusal geçiştir: Her harf ayrı olarak geçiş yapar.
Adám

2

Pyth - 35 bayt

Korkunç golf, sadece pes etti.

j++hQsMCm.HMsM:F+dc-FdvzCmiR16cd2Qe

Burada çevrimiçi deneyin .

Misal:

misal


11 satır eğim sayıyorum, ancak PPCG adınızın yalnızca 8 harfi var ... 7cb472 93fb8a 8Kodunuzu test ederken yalnızca 10 satır çıktı girip almamalısınız ?
WallyWest

@WallyWest OP'de kullanıcı adı ile ilgili kısmı tamamen kaçırdı, sadece 9 cuz kullandım, tamir ettim.
Maltysen

@WallyWest güncellendi
Maltysen

Hey @Maltysen, degrade biraz tuhaf görünüyor ... iki referansınız var 93fb8a... Kodunuz aynı değerde iki satır çıktı mı?
WallyWest

2

PowerShell V2 +, 176 159 , 150 bayt

param($a,$b,$n)$x=$a-split'(..)'-ne'';$a;++$n..1|%{$j=$_;-join($x=$x|%{"{0:x2}"-f(+"0x$_"-[int]((+"0x$_"-"0x$(($b-split'(..)'-ne'')[$i++%3])")/$j))})}

Girdiyi iki dize ve bir sayı olarak alır, ardından başlangıç ​​dizesini her iki karakterde bölünmüş bir dize dizisine dönüştürür ve depolar $x. Daha sonra $abaşlangıç ​​bölümümüz olarak çıktı alırız ve ' ++$ne 1doğru döngü yaparız (doğru çit korumasını sağlamak için).

Her yineleme, yardımcıyı $jgeçerli sayıya ayarlar (daha sonra şu anda hedefimize ulaştığımız yer arasında doğru sayıda adım olmasını sağlamak için kullanılır) ve bir sonraki adımı bir döngü üzerinden hesaplar $x.

Her iç döngü sadece bir ödevdir. Ormat operatörünü kullanarak $xyeni bir dizeye eşit uygun bir yerde ayar yapıyoruz. Burada iki basamaklı onaltılık çıkışını belirtir ve giriş sağ tarafı operatörü. PowerShell'de yerel bir onaltılıdan onluya işleç vardır , bu nedenle bu uzun parens iç içe ifadesi, geçerli onaltılı sayılara dönüştürmek için o operatörü kullanır, henüz gidecek farkı bulmak için çıkarır ( tıpkı bizim yaptığımız gibi dinamik olarak bölünerek yapılır , ve doğru öğeyi seçmek için modulo kullanarak), kalan adımlara bölünerek ,"{0:x2}"-fx2-f0x$b$a$j[int] (PowerShell varsayılan olarak bankacının yuvarlamasını yapar) ve bir sonraki onaltılı sayımızın ne olması gerektiğini öğrenmek için bu onaltılı sayımı mevcut onaltılıdan çıkarır.

Bu hesaplamanın sonucu, $xüç altıgen eleman olarak saklanır . Bu, boru hattında bir kopya oluşturmak için parens içinde kapsüllenir ve -joinbirlikte tek bir dize halinde düzenlenir. Ortaya çıkan tüm dizeler ardışık düzende bırakılır ve örtük yoluyla çıktı Write-Outputprogram yürütüldüğünde gerçekleşir.


Misal

İki renk için 0ba7c5 ve 6c0e50 verildi ve TimmyD'de 6 karakter var.

PS C:\Tools\Scripts\golfing> .\rgb-gradients-generation.ps1 '0ba7c5' '6c0e50' 6
0ba7c5
1991b4
277ba3
356592
434f82
513971
5f2361
6c0e50

Gradyan Örneği


1

Python 2, 189 bayt

w='[int(%s[i:i+2],16)for i in range(0,6,2)]'
def f(a,b,n):
 l=lambda x,y:'%02x'%int((x*(n-i)+y*i)/n);c,d,e=eval(w%'a');f,g,h=eval(w%'b');n+=1
 for i in range(n+1):print l(c,f)+l(d,g)+l(e,h)

gradient ekran görüntüsü


Muhteşem renk çifti, @AndrewEpstein ... Kod ile iyi iş çıkardın!
WallyWest

1

[Groovy] Nihai Güncelleme (199 Bayt) - İsteğe bağlı olarak

Sigara golf

def g(a,b,n){
  (0..(1.0/n)).collect{
    c->
    x={s->s.split("(?<=\\G.{2})").collect{Integer.parseInt(it,16)}};
    (0..2).collect {
      (int)(x(a).get(it)*n*c+x(b).get(it)*(1-n*c))
    }.collect {
      String.format("%X", it)
    }.join()
  }
}
g('FFFFFF','000000',1/10​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​)​​​​​​​​​​​​​​

Golf

g(a,b,n){(0..(1.0/n)).collect{c->x={s->s.split("(?<=\\G.{2})").collect{Integer.parseInt(it,16)}};(0..2).collect {(int)(x(a).get(it)*n*c+x(b).get(it)*(1-n*c))}.collect{String.format("%X",it)}.join()}}

Finali burada deneyin: https://groovyconsole.appspot.com/script/5130696796405760


AŞAĞIDAKİ ESKİ VERSİYONLAR


Groovy (123 Bayt)

Golf

def g(r,g,b,r2,g2,b2,s){(1..(1.0/s)).collect{c->[(int)(r*s*c+r2*(1-s*c)),(int)(g*s*c+g2*(1-s*c)),(int)(b*s*c+b2*(1-s*c))]}}

Sigara golf

def g(r,g,b,r2,g2,b2,s){
  (1..(1.0/s)).collect {
    c ->
    [(int)(r*s*c+r2*(1-s*c)),(int)(g*s*c+g2*(1-s*c)),(int)(b*s*c+b2*(1-s*c))]
  }
}

Girdiler

r,g,b -> Starting RGB Color
r2,g2,b2 -> Ending RGB Color
s -> Gradient step

Çıktı Örneği

(00,00,00,255,255,255,.5)

sonuç

[
  [255, 255, 255]
  [127, 127, 127]
  [0, 0, 0]
]

Kendiniz deneyin: https://groovyconsole.appspot.com/script/5184465357766656

Onaltılık Dönüşümler Dahil

Sanırım ben de hile yapıyorum ... İşte hex kullanarak komut dosyası:

Onaltılık dönüşümleri olan yeni kod:

​    def g(r,g,b,r2,g2,b2,s){
      (0..(1.0/s)).collect {
        c ->
        String.format("%X", ((int)(r*s*c+r2*(1-s*c)))) +  String.format("%X", ((int)(g*s*c+g2*(1-s*c)))) + "" +  String.format("%X", ((int)(b*s*c+b2*(1-s*c))))
      }
    }

    g(126,34,166,218,26,33,0.0625)​

Golf yaparken 188 karakter:

def g(r,g,b,r2,g2,b2,s){(0..(1.0/s)).collect {c->String.format("%X",((int)(r*s*c+r2*(1-s*c))))+String.format("%X",((int)(g*s*c+g2*(1-s*c))))+String.format("%X",((int)(b*s*c+b2*(1-s*c))))}}

000000 - FFFFFF ve 16 arası çıkış (Kullanıcı Adı Uzunluğu)

g(00,00,00,255,255,255,0.0625).each{println it}​

1/16 Basamaklı Tek Renkli Gradyan


Hata ... biraz geçersiz, orijinal sürüm kullanılmış "(0 .. (1.0 / s))", "(1 .. (1.0 / s))" olmalıdır.
Sihirli Ahtapot Urn

1
Merhaba @ carusocomputing ... Girdinin iki onaltılık dize ve bir tamsayı olması gerekir ... Groovy bu şekilde girdi alabilir emin değilim, ama kısa bir çivi çivilenmiş değil mi ... lütfen güncelleme bölümünde belirtilen girdiye dayanarak kodunuz mu?
WallyWest

{s-> s.split("(?<=\\G.{2})").collect{Integer.parseInt(it,16)}}('FFFFFF') Sonuçlar [255,255,255] Gerçekten istiyorsan bu dönüşümü kullanarak koduma 62 bayt ekleyebilirim.
Sihirli Ahtapot Urn

1
Wally, güncellenmiş bir sürüm ekledim ve son bayt sayımı dönüşümleri dahil ederek 199'a çıkardım.
Sihirli Ahtapot Urn

1

R, 68 bayt

İki rengi enterpolasyonlayan yerleşik bir işlev vardır:

a=scan(,'')
colorRampPalette(paste0("#",a[1:2]))(as.numeric(a[3])+2)

Giriş:

d9e7a5
3ef951
15

Çıktı: değerleri olan bir vektör

"#D9E7A5" "#CFE89F" "#C5E99A" "#BBEA95" "#B2EB90" "#A8EC8A" "#9EED85" "#95EE80"
"#8BF07B" "#81F175" "#78F270" "#6EF36B" "#64F466" "#5BF560" "#51F65B" "#47F756"
"#3EF951"

R'deki renk özellikleri bir karma sembolü gerektirir.

Renk rampası

Bir işlev gibi bir şey çizelim:

filled.contour(outer(1:20, 1:20, function(x,y) sin(sqrt(x*y)/3)),
    col = colorRampPalette(paste0("#",a[1:2]))(as.numeric(a[3])+2))

sin (sqrt (x * y) / 3)


Harika bir yanıt, ancak kısa bilgi, PPCG kullanıcı adınızda olduğu kadar çok adımı kullanmayı ister, bu da alanı saymak 15 olur ... Lütfen cevabınızı dayanarak güncelleyebilir misiniz FF3762 F08800 15?
WallyWest

@WallyWest Üzgünüm, iki renk alan ve kendi kullanıcı adı uzunluğunu sayılan kısmı kaçırmıştım. Şimdi cevap şartname ile tam uyumlu olmalıdır!
Andreï Kostyrka

1

Cı, 175 169 168 bayt

i;j;x[6];f(a,b,n)char*a,*b;{char*f="%2x%2x%02x";for(n++;i<=n;i++,puts(""))for(j=sscanf(a,f,x,x+1,x+2)-sscanf(b,f,x+3,x+4,x+5);j++<printf(f+6,x[j]+(x[j+3]-x[j])*i/n););}

Ungolfed:

int i, j;
int x[3], y[3];

f(char *a, char *b, int n) {
  sscanf(a, "%2x%2x%2x", &x[0], &x[1], &x[2]);
  sscanf(b, "%2x%2x%2x", &y[0], &y[1], &y[2]);

  for(i = 0, n++; i <= n; i++) {
    for(j = 0; j < 3; j++)
      printf("%02x", x[j] + (y[j] - x[j]) * i / n);
    puts("");
  }
}

5 baytlık tıraş için @ h-walters'a teşekkürler!


putsSözdiziminin tekrar ne yaptığını hatırlatıyor musun ?
WallyWest

Bu gibidir printf(), ancak herhangi bir biçimlendirme yapmaz, bunun yerine verilen dizeyi olduğu gibi yazdırır ve bir satırsonu ekler.
G. Sliepen

Ah, bu yüzden golf oynamanın bir yolu yok ... C biraz kısıtlayıcı, değil mi?
WallyWest

“yani golf oynamanın bir yolu yok” ... Tabii ki var! Taşı puts("")döngünün ilk üçüncü bölümünde (içine ;bir olduktan sonra ,önce) ... 0 bayt. Ancak, bu ikinci döngüden sonra kıvırcık parantezleri kaldırmanıza izin verir ... -2 bayt. Başka bir 1 baytı 3'ü kaldırarak j<3ve ifadenizle değiştirerek kaydedebilirsiniz printf(bu sinsidir ... printf sadece 2 döndürür, ancak yine de üçüncü kez değerlendirmek zorundadır).
H Walters

... sscanf dönüş değerlerinizi birbirinden çıkararak (0 ile sonuçlanır) ve literal 0in yerine bunu kullanarak iki bayt daha kaydedilebilir j=0. Buradaki her şey yerine getirildikten sonra programınız 5 byte daha kısa ve en az% 50 yabancı olmalıdır.
H Walters

1

sh + ImageMagick, 81 bayt

convert -size 1x$((2+$3)) gradient:#$1-#$2 -depth 8 txt:-|grep -o "[A-F0-9]\{6\}"

kullanımı:

> ./grad.sh FF3762 F08800 9
FF3762
FE3F58
FC474E
FB4F45
F9573B
F86031
F66827
F5701D
F37814
F2800A
F08800

(IM'niz varsayılan olarak 8bpp ile derlenmişse "-depth 8" gerekli değildir)

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.