RGBグラデーション生成


18

チャレンジ

RGB値(範囲は両端000000FFFFFF含む)を表す2つの大文字の16進文字列(6文字、XXXXXXおよびYYYYYYの両方)、およびゼロ以外の正の整数Nを指定すると、XXXXXXからYYYYYYに生成されたN + 2色の線形遷移を表示しますそれは色のグラデーションになります。

入力

FF3762
F08800
9

出力

この例では、2つの色の間に9つの中間ステップを要求していることに注意してください。したがって、初期色から最終色まで11行が表示されます。

FF3762
FD3F58
FC474E
FA4F44
F9573A
F75F31
F66727
F46F1D
F37713
F17F09
F08800

注意事項

16進数に戻す前に中間色の整数値を導出する単純な線形プロセスを使用しましたが、方法は異なる場合があります。それに応じて番号を切り上げ/切り捨てるさまざまな方法を検討しください。

テスト中

これを面白くするために、コードをテストするための2つのランダムな色を提供するボタンを含む、コードのテストを可能にするスニペットを提供しました。結果の表示はオプションですが、推奨されています!

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)[Your two colors]ボタンをクリックして、テスト用の2つのランダムな色にアクセスできます。2)暫定ステップの数は、スペースを含むPPCGユーザー名の文字数と同じになります。「WallyWest」の場合は9です(上記の例のように)。3)2つの色と番号を使用してコードを実行し、生成されたリストを取得したら、テキストエリアに出力を貼り付け、タブを離れて生成された色のグラデーションを取得するオプションがあります。

私の例を次に示します。

勾配

私は認めなければならない、それはかなり素晴らしいですね!

注:前述したように、スニペットを使用して出力のテストを表示することはオプションですが、お勧めします!:)

出力

リスト出力は、上記の例に示すように、ラインフィード(\ n)で区切られた6桁の16進数のN + 2セットの形式である必要があります。出力が...スペース/カンマは、配列のリストを区切ったり最良のあなたの言語に適しているものは何でも、別の行の形態にすることができる(ヘッドのおかげで@nimiアップ)あなたとあなたのコードをテストする予定がある場合ことを、覚えておいてくださいスニペットですが、各「色」を分けるのはあなた次第です。

ルール

これはコードゴルフであるため、バイト単位の最短ソリューションが勝者に選ばれます。抜け穴ありません、当然。入力は、2つの文字列と数字(PPCGのユーザー名の文字数と同じになるため、結果の出力は常に3行以上になります)を受け入れる必要があります。



注目され、更新されました...ヘッドアップをありがとう(+1)
WallyWest

好奇心から、Illustratorなどの画像アプリは線形グラデーションまたは知覚的な色空間のグラデーションを使用しますか?私は両方のユースケースを見ることができます(おそらくゲームのテクスチャなど、後で知覚に変換しているでしょう)。
ロバートフレイザー

回答:


1

MATL、31バイト

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

これは、切り捨てによる線形補間を使用します。入力形式は

9
FF3762
F08800

オンラインでお試しください!

グラフィカル出力、31バイト

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

これは入力の結果です

5
FF3762
F08800

ここに画像の説明を入力してください

MATL Online試しください!インタプリタは現在実験的です。出力が表示されない場合はページを更新し、もう一度「実行」を押してください。


4

JavaScript(ES6)、130バイト

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 バイト

プロンプトN、次にB eginning色、次にE nding色。⎕IO←0多くのシステムでデフォルトであるニーズ。

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

h[... h]へのインデックス(ブラケットのコンテンツの評価が終了すると値を持ちます)

N←⎕数値Nのプロンプト(4)

1+Nに1を追加(5)

(...結果を分割するために使用します...

  ⍞⍞ 2つの文字列のプロンプト["7E0E7E"、 "FF3762"]

  (... )∘⍳¨各文字列の文字のインデックスを検索します...

   ⎕D,⎕A D igitsの後にA lphabet

   h← に割り当てられた hに

  現在、「0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ」があります

  E B←EBにインデックスを割り当てます[[7,14,0,14,7,14]、[15,15,3,7,6,2]]

  -/EからBを減算して囲みます [[-8、-1、-3,7,1,12]]

  これまでの結果は[[-1.6、-0.2、-0.6,1.4,0.2,2.4]]です

(... これを掛けます...

  2+N2プラスN(6)

   最初の整数[0,1,2,3,4,5]

 これにより、[[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∘+¨各[[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]、...にBを追加します]

切り捨て[[15,15,3,7,6,2]、[13,14,2,8,6,4]、[11,14,1,9,6,6]、...]

リストのリストを表にする

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

ここでhにインデックスを付けて、

[["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]]

と同じです

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

として印刷

FF3762
DE2864
BE1966
AE1B69
8E0C6B
7E0E7E

勾配

TryAPLオンライン!


よくやった!移行は素晴らしいですね!
WallyWest

@WallyWestありがとう。これはおそらく、ほとんどの場合とは異なる線形移行です。各文字は個別に移行されます。
アダム

2

Pyth-35バイト

恐ろしくゴルフをし、ただあきらめた。

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

こちらからオンラインでお試しください

例:

例


PPCGの名前は8文字しかありませんが、11行のグラデーションを数えます... 7cb472 93fb8a 8コードをテストするときに、入力して10行の出力のみを受け取るべきではありませんか?
WallyWest

@WallyWestはOPでユーザー名に関する部分を完全に見落としていました。
マルティセン

@WallyWest更新
Maltysen

ちょっと@Maltysen、勾配が少し奇妙に思えます...あなたは2つの参照を持って93fb8aいます...あなたのコードは同じ値の2行を出力しましたか?
WallyWest

2

PowerShell v2 +、176 159 150バイト

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

入力を2つの文字列と数値として受け取り、開始文字列を2文字ごとに分割された文字列の配列に変換し、それをに格納し$xます。次に$a、開始セクションとして出力し、++$nto からループします1(適切なフェンスポストを確保するため)。

反復ごとに、ヘルパー$jを現在の数に設定し(後で目的地までの間に正しい数のステップを確保するために後で使用)、ループスルーに基づいて次のステップを計算します$x

各内部ループは単なる割り当てです。ormat演算子を使用$xして、新しい文字列に等しい適切な場所に設定しています。ここでは、2桁の16進数の出力を指定し、入力の右側である演算子。PowerShellにはネイティブの16進数から10進数の演算子があるため、この長い括弧でネストされた式は、その演算子を使用して現在の16進数を数値に変換し、減算してまだ変化を見つけません(ここでのように、ここで動的に分割します)モジュロを使用して適切な要素を選択します)、残りのステップで分割し、にキャストします"{0:x2}"-fx2-f0x$b$a$j[int] (PowerShellはデフォルトでバンカーの丸めを行います)、現在のヘックスからそのステップ数を減算して、次のヘックスに必要なものを取得します。

その計算の結果は、$x3つの16進数要素として格納されます。それは括弧でカプセル化されてパイプライン上にコピーを作成-joinし、1つの文字列にまとめられます。これらの結果の文字列はすべてパイプラインに残り、暗黙的な出力Write-Outputはプログラムの実行時に発生します。


2色に0ba7c56c0e50が与えられ、TimmyDには6文字が含まれています。

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

勾配の例


1

Python 2、189バイト

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)

グラデーションのスクリーンショット


ゴージャスな色のペア、@ AndrewEpstein ...コードを使って素敵な仕事を!
-WallyWest

1

[Groovy]最終更新(199バイト)-リクエストごと

ノンゴルフ

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

ゴルフ

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()}}

ここでファイナルをお試しください: https //groovyconsole.appspot.com/script/5130696796405760


以下の古いバージョン、OPにより拒否


Groovy(123バイト)

ゴルフ

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

ノンゴルフ

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

インプット

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

出力例

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

結果として

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

自分で試してください: https //groovyconsole.appspot.com/script/5184465357766656

16進変換が含まれている場合

私も浮気のようなものだと思う...これは、hexを使用したスクリプトです。

16進変換を使用した新しいコード:

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

ゴルフ時の188文字:

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および16(ユーザー名の長さ)の出力

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

1/16ステップの単色グラデーション


エラー...わずかに無効、元のバージョンは「(0 ..(1.0 / s))」を使用していましたが、「(1 ..(1.0 / s))」でした。
魔法のタコUr

1
こんにちは、@ carusocomputing ...入力は2つの16進文字列と整数である必要があります... Groovyがこの方法で入力を受け取ることができるかどうかはわかりませんが、簡単な説明はありません...更新してくださいチャレンジセクションで言及された入力に基づいてあなたのコードは?
WallyWest

{s-> s.split("(?<=\\G.{2})").collect{Integer.parseInt(it,16)}}('FFFFFF') [255,255,255]の結果本当に必要な場合は、その変換を使用してコードに62バイトを追加できます。
魔法のタコUr

1
ウォーリー、更新バージョンを追加し、変換を含めて最終バイト数を199に増やしました。
魔法のタコ

1

R、68バイト

2つの色を補間する組み込み関数があります。

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

入力:

d9e7a5
3ef951
15

出力:値を持つベクトル

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

Rの色指定にはハッシュ記号が必要です。

カラーランプ

関数のようなものをプロットしましょう:

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)


すばらしい答えですが、PPCGユーザー名に含まれる数のステップを使用するように簡単に求められます。スペースを数えると15になります...に基づいて答えを更新してくださいFF3762 F08800 15
WallyWest

@WallyWest申し訳ありませんが、2つの色を取得して自分のユーザー名の長さをカウントする部分を見逃していました。これで、答えは仕様に完全に準拠するはずです!
アンドレイKostyrka 16

1

C、175の 169 168バイト

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

ゴルフをしていない:

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バイトを削る@ h-waltersに感謝します!


puts構文が再び何をするかを思い出してください?
WallyWest

に似printf()ていますが、書式設定は行わず、代わりに指定された文字列をそのまま出力し、改行を追加します。
G.スリーペン16

ああ、だからゴルフをする方法はありません... Cはそのように少し制限されていますよね?
WallyWest

「だからそれをゴルフする方法はありません」…確かにあります!移動puts("")ループの最初の第3の部分(に;なってから,前)... +0バイト。ただし、これにより、2番目のループ... -2バイトの後に中括弧を削除できます。から3を削除j<3してprintfステートメントに置き換えることで、さらに1バイトを保存できます(これは卑劣です... printfは2のみを返しますが、3回目の評価が必要です)。
H・ウォルターズ

... sscanfの戻り値を互いに減算し(結果は0)、リテラルの代わりにそれを使用することにより、さらに2バイトを節約できます。 0におけるj=0。ここにすべてが揃ったら、プログラムは5バイト短くなり、少なくとも50%は見知らぬ人になるはずです。
H・ウォルターズ

1

sh + ImageMagick、81バイト

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

使用法:

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

(IMがデフォルトとして8bppでコンパイルされている場合、「-depth 8」は不要です)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.