RGB渐变生成


18

挑战

给定两个表示RGB值的大写十六进制字符串(长6个字符,XXXXXX和YYYYYY)(范围从000000FFFFFF包括)和一个正非零整数N,显示从XXXXXX到YYYYYY生成的N + 2种颜色的线性过渡这会导致颜色渐变。

输入值

FF3762
F08800
9

输出量

请注意,在我们的示例中,我请求了两种颜色之间的9个过渡步骤,因此从初始颜色到最终颜色将显示11行

FF3762
FD3F58
FC474E
FA4F44
F9573A
F75F31
F66727
F46F1D
F37713
F17F09
F08800

注意事项

虽然我已经进行了一个简单的线性过程,即在将中间颜色转换回十六进制之前导出中间值的整数值,但是您的方法可能会有所不同。请考虑可以采用多种方式对数字进行四舍五入的方法

测试中

为了使这一点有趣,我提供了一个片段来测试您的代码,其中包括一个按钮,为您提供两种随机颜色来测试您的代码。显示结果是可选的,但鼓励您!

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)您可以通过单击“您的两种颜色”按钮来访问两种随机颜色进行测试。2)临时步骤数将与PPCG用户名中的字符数(包括空格)相同,在“ WallyWest”的情况下将为9(根据我上面的示例)。3)用两种颜色和数字运行代码,一旦有了生成的列表,就可以选择将输出粘贴到textarea中,然后移开它,以获取生成的颜色渐变。

我的示例如下所示:

渐变色

我必须承认,这看起来很棒!

请注意:如前所述,使用代码段显示对输出的测试是可选的,但鼓励您!:)

输出量

列表输出必须采用N + 2组6位十六进制数字的形式,由换行符(\ n)分隔,如上面的示例所示。输出可以采用单独的行,空格/逗号分隔的列表,数组或最适合您的语言的形式... (感谢@nimi提醒),请记住,如果您打算使用代码段,但是您可以将每个“颜色”分开,具体取决于您。

规则

这是代码高尔夫球,因此最短的字节解决方案将成为赢家。自然没有漏洞。输入必须接受两个字符串和一个数字(正如我所说,这将等效于您在PPCG上用户名中的字母数,因此您得到的输出将始终至少为三行。



已记录,并已更新...感谢大家注意(+1)
WallyWest'9

出于好奇,像Illustrator这样的图像应用程序是否在某些可感知的色彩空间中使用线性渐变或渐变?我可以看到两者的用例(也许您稍后将进行感知转换,例如游戏的纹理)。
罗伯特·弗雷泽

Answers:


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

用于提示Ñ,然后B eginning色,然后Ë nding色。⎕IO←0在许多系统上默认为需求。

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

h[... ]索引到h中(当我们完成对方括号内容的评估时,它具有一个值)

N←⎕提示输入数字N(4)

1+N加1 (5)

(... 用那个来除...的结果

  ⍞⍞ 提示输入两个字符串[“ 7E0E7E”,“ FF3762”]

  (... )∘⍳¨在...中找到每个字符串的字符的索引。

   ⎕D,⎕A d igits随后 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∘+¨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],... ]

四舍五入[[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

梯度

在线尝试APL!


干得好!过渡看起来很棒!
WallyWest'9

@WallyWest谢谢。线性过渡可能与大多数情况不同:每个字母分别过渡。
ADAM

2

Pyth-35个字节

可怕地打高尔夫球,只是放弃了。

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

在这里在线尝试

例:

例


我计算了11行渐变,尽管您的PPCG名称只有8个字母...所以7cb472 93fb8a 8在测试代​​码时,您不应该输入并且仅收到10行输出吗?
WallyWest'9

@WallyWest完全错过了OP中有关用户名的那部分,我只用了9个cuz,就解决了。
Maltysen '16

@WallyWest更新
Maltysen

嘿@Maltysen,渐变似乎有点奇怪...您有两个引用93fb8a...您的代码是否输出了两行相同的值?
WallyWest'9

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

将输入内容当作两个字符串和一个数字,然后将起始字符串转换为每两个字符分割的字符串数组,并将其存储到中$x。然后$a,我们输出作为开始部分,并从循环++$n1(以确保正确的篱笆墙张贴)。

每次迭代时,都将helper $j设置为当前数字(以后用于确保我们在当前到达目的地的位置之间具有正确的步数),并基于循环计算下一步$x

每个内部循环只是一个分配。我们使用ormat运算符$x在与新字符串相等的适当位置进行设置。在这里指定了一个2位十六进制输出,并且输入是的右侧操作。PowerShell有一个本地的十六进制到十进制运算符,因此,冗长的parnes-nested表达式正在使用该运算符将当前的十六进制转换为数字,然后减去找到的差值(通过在此处动态拆分来完成,就像我们所做的那样,并使用取模选择合适的元素),除以剩余的步骤,然后转换为"{0:x2}"-fx2-f0x$b$a$j[int] (默认情况下,PowerShell会进行庄家的四舍五入),然后从当前十六进制中减去该步数,以获取下一个十六进制所需的内容。

计算结果将存储$x为三个十六进制元素。将其封装在括号中以在管道上创建副本,然后-join一起编辑为单个字符串。所有这些结果字符串都留在管道上,并Write-Output在程序执行时通过隐式输出。


我的两种颜色分别给了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'9

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

包含十六进制转换

猜猜我也在作弊...这是使用十六进制的脚本:

具有十六进制转换的新代码:

​    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步长的单色渐变


Err ...稍有无效,原始版本使用的是“(0 ..(1.0 / s))”,应该是“(1 ..(1.0 / s))”。
魔术章鱼缸

1
嗨@carusocomputing ...输入必须是两个十六进制字符串和一个整数...我不确定Groovy是否可以这种方式接收输入,但是您还没有确定简短的内容...请您更新一下您的代码基于“挑战”部分中提到的输入?
WallyWest'9

{s-> s.split("(?<=\\G.{2})").collect{Integer.parseInt(it,16)}}('FFFFFF') 结果为[255,255,255],如果您确实需要,可以使用该转换将62个字节添加到我的代码中。
魔术章鱼缸

1
沃利(Wally),我添加了更新版本,并将最终的字节数增加到199,其中包括转换。
魔术章鱼缸

1

R,68字节

有一个内置函数可以插入两种颜色:

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

@WallyWest抱歉,我错过了获得两种颜色并计算自己的用户名长度的部分。现在答案应该完全符合规范!
安德烈KOSTYRKA

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

感谢@ h-walters削减了5个字节!


提醒我puts语法又会做什么?
WallyWest'9

就像printf(),但是不做任何格式化,而是仅按原样打印给定的字符串,并添加换行符。
G. Sliepen '16

啊,所以没有办法打高尔夫球……C有点像这样,不是吗?
WallyWest'9

“所以没有打高尔夫球的方式”……当然可以!移至puts("")第一个for循环的第三部分(;后变为,前)... +0字节。但是,这允许您在第二个循环之后删除花括号... -2个字节。您可以通过从中删除3 j<3并将其替换为printf语句来保存另一个1字节(这是偷偷摸摸的... printf仅返回2,但仍然必须第三次求值)。
H沃尔特斯

......两个字节可以通过彼此(导致0)减去你的sscanf的返回值,并使用,而不是字面保存0j=0。一旦一切就绪,您的程序应短5个字节,并且至少要陌生50%。
H Walters

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编译,则“深度8”不是必需的)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.