Erzeugung von RGB-Verläufen


18

Die Herausforderung

Wenn die beiden hexadezimalen Zeichenfolgen (jeweils 6 Zeichen lang, XXXXXX und YYYYYY) RGB-Werte (von 000000bis FFFFFFeinschließlich) und eine positive Ganzzahl N ungleich Null darstellen, wird ein linearer Übergang der von XXXXXX zu YYYYY erzeugten N + 2-Farben angezeigt das würde zu einem Farbverlauf führen.

Beispiel

Eingang

FF3762
F08800
9

Ausgabe

Bitte beachten Sie, dass ich in unserem Beispiel 9 Zwischenschritte zwischen den beiden Farben angefordert habe. Daher werden 11 Linien von der Anfangsfarbe bis zur Endfarbe angezeigt

FF3762
FD3F58
FC474E
FA4F44
F9573A
F75F31
F66727
F46F1D
F37713
F17F09
F08800

Vorbehalte

Während ich mit einem einfachen linearen Prozess gearbeitet habe, bei dem die ganzzahligen Werte für die Zwischenfarben abgeleitet wurden, bevor sie wieder in hexadezimal konvertiert wurden, variieren Ihre Methoden möglicherweise. Bitte beachten Sie die verschiedenen Möglichkeiten, wie Sie Ihre Zahlen entsprechend auf- / abrunden können .

Testen

Um dies interessant zu machen, habe ich ein Snippet bereitgestellt, mit dem Sie Ihren Code testen können, einschließlich einer Schaltfläche, mit der Sie zwei zufällige Farben zum Testen Ihres Codes erhalten. Die Anzeige Ihrer Ergebnisse ist optional, wird jedoch empfohlen!

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) Sie können auf zwei zufällige Farben für Ihren Test zugreifen, indem Sie auf die Schaltfläche "Ihre zwei Farben" klicken. 2) Die Anzahl der Zwischenschritte entspricht der Anzahl der Zeichen in Ihrem PPCG-Benutzernamen einschließlich Leerzeichen, im Fall von "WallyWest" sind es 9 (wie in meinem obigen Beispiel). 3) Führen Sie Ihren Code mit den beiden Farben und der Zahl aus. Sobald Sie Ihre generierte Liste erstellt haben, haben Sie die Möglichkeit, Ihre Ausgabe in den Textbereich einzufügen und von diesem wegzugehen, um den generierten Farbverlauf zu erhalten.

Mein Beispiel ist hier gezeigt:

Farbverläufe

Ich muss zugeben, das sieht ziemlich genial aus!

Bitte beachten Sie: Wie bereits erwähnt, ist es optional, das Testen Ihrer Ausgabe mit dem Snippet zu zeigen, aber es wird empfohlen! :)

Ausgabe

Die Listenausgabe muss in Form von N + 2 Gruppen von 6-stelligen Hex-Zahlen erfolgen, die durch Zeilenvorschübe (\ n) getrennt sind, wie in meinem obigen Beispiel gezeigt. Die Ausgabe kann in Form von separaten Linien, Raum / kommagetrennte Liste, ein Array oder was auch immer am besten für Ihre Sprache geeignet ist ... (Danke @nimi für die Heads - up) Bitte denken Sie daran, dass , wenn Sie planen Ihren Code testet mit Der Ausschnitt, wie auch immer Sie die einzelnen "Farben" trennen, liegt bei Ihnen.

Regeln

Das ist Code-Golf, also wird die kürzeste Lösung in Bytes zum Gewinner gekrönt. Natürlich keine Lücken . Die Eingabe muss die beiden Zeichenfolgen und eine Zahl akzeptieren (die, wie gesagt, der Anzahl der Buchstaben in Ihrem Benutzernamen bei PPCG entspricht, sodass die resultierende Ausgabe immer mindestens drei Zeilen lang ist.



Notiert und aktualisiert ... Vielen Dank für die Heads-up (+1)
WallyWest

Verwenden Bild-Apps wie Illustrator aus Neugierde lineare Verläufe oder Verläufe in einem bestimmten Wahrnehmungsfarbraum? Ich kann Anwendungsfälle für beide sehen (vielleicht wandeln Sie sich später zur Wahrnehmung, z. B. eine Textur für ein Spiel).
Robert Fraser

Antworten:


1

MATL , 31 Bytes

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

Dies verwendet eine lineare Interpolation mit Abrundung. Eingabeformat ist

9
FF3762
F08800

Probieren Sie es online!

Grafische Ausgabe, 31 Bytes

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

Dies ist das Ergebnis für Eingaben

5
FF3762
F08800

Bildbeschreibung hier eingeben

Probieren Sie es in MATL Online aus ! Der Dolmetscher ist derzeit experimentell. Wenn Sie keine Ausgabe erhalten, aktualisieren Sie die Seite und klicken Sie erneut auf "Ausführen".


4

JavaScript (ES6), 130 Byte

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 Bytes

Prompts für N , dann B eginning-Farbe, dann E nden-Farbe. Bedürfnisse, ⎕IO←0die auf vielen Systemen Standard sind.

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

h[... ]index in h (was einen Wert hat, wenn wir den Inhalt der Klammer ausgewertet haben)

N←⎕Eingabeaufforderung für numerisches N (4)

1+addiere eins zu N (5)

(... teile damit das Ergebnis von ...

  ⍞⍞ Eingabeaufforderung für zwei Zeichenfolgen ["7E0E7E", "FF3762"]

  (... )∘⍳¨finden Sie die Indizes der Zeichen der einzelnen Zeichenfolgen in ...

   ⎕D,⎕A D igits gefolgt von A lphabet

   h←zugeordnet zu h

  jetzt haben wir "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"

  E B←Ordnen Sie die Indizes E und B zu [[7,14,0,14,7,14], [15,15,3,7,6,2]]

  -/subtrahieren und schließe B von ein E ein [[-8, -1, -3,7,1,12]]

  das bisherige Ergebnis ist [[-1.6, -0.2, -0.6,1.4,0.2,2.4]]

(... multipliziere dies mit ...

  2+Nzwei plus N (6)

   erste ganze Zahlen [0,1,2,3,4,5]

 das ergibt uns [[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 ], ...]

B∘+¨addiere B zu jedem [[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], ... ]

abrunden [[15,15,3,7,6,2], [13,14,2,8,6,4], [11,14,1,9,6,6], ...]

Liste der Listen in Tabelle umwandeln

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

hier indizieren wir in h , geben

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

das ist das gleiche wie

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

und druckt als

FF3762
DE2864
BE1966
AE1B69
8E0C6B
7E0E7E

Gradient

TryAPL online!


Gute Arbeit! Der Übergang sieht gut aus!
WallyWest

@WallyWest Danke. Es handelt sich wahrscheinlich um einen anderen linearen Übergang als die meisten anderen: Jeder Buchstabe wird separat übertragen.
Adám

2

Pyth - 35 Bytes

Schrecklich golfen, einfach aufgegeben.

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

Probieren Sie es hier online aus .

Beispiel:

Beispiel


Ich zähle 11 Zeilen mit Farbverlauf, obwohl Ihr PPCG-Name nur 8 Buchstaben enthält. Sollten Sie also 7cb472 93fb8a 8beim Testen Ihres Codes nicht 10 Zeilen eingegeben und nur 10 Zeilen ausgegeben haben?
WallyWest

@WallyWest hat diesen Teil im OP bezüglich des Benutzernamens komplett verpasst. Ich habe gerade 9 verwendet, weil du das getan hast.
Maltysen

@WallyWest aktualisiert
Maltysen

Hey @Maltysen, der Farbverlauf scheint etwas seltsam zu sein ... Sie haben zwei Referenzen von 93fb8a... Hat Ihr Code zwei Zeilen mit demselben Wert ausgegeben?
WallyWest

2

PowerShell v2 +, 176 159 150 Bytes

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

Nimmt die Eingabe als zwei Zeichenfolgen und eine Zahl und konvertiert dann die Startzeichenfolge in ein Array von Zeichenfolgen, die auf jeweils zwei Zeichen aufgeteilt sind, speichert diese in $x. Wir geben dann $aals Startabschnitt aus und machen eine Schleife von ++$nbis 1(um eine ordnungsgemäße Absicherung zu gewährleisten).

Bei jeder Iteration wird der Helfer $jauf die aktuelle Nummer gesetzt (wird später verwendet, um sicherzustellen, dass wir die richtige Anzahl von Schritten zwischen der aktuellen Position und dem Ziel haben) und der nächste Schritt wird basierend auf einer Schleife berechnet$x .

Jede innere Schleife ist nur eine Aufgabe. Wir setzen mit dem Operator ormat $xan der entsprechenden Stelle einen neuen String gleich. Das hier gibt eine zweistellige hexadezimale Ausgabe an, und die Eingabe ist die rechte Seite des Operators. Powershell verfügt über einen native hexadezimal-Dezimal - Operator , so dass dieser lange Pars-verschachtelte Ausdruck ist , dass Operator unter Verwendung der aktuellen hex in Zahlen umwandeln, um den Unterschied zu finden Subtrahieren noch zu gehen (done durch dynamische Aufspaltung hier genauso wie wir taten , und mit modulo das richtige Element auswählen), dividieren durch (PowerShell rundet standardmäßig durch Banker) und diesen Schrittzähler vom aktuellen Hex abziehen, um das zu erhalten, was unser nächstes Hex sein muss."{0:x2}"-fx2-f0x$b$a$j verbleibenden Schritte und zu einem[int]

Das Ergebnis dieser Berechnung wird in $xdrei hexadezimale Elemente zurückgespeichert. Das wird in Parens gekapselt, um eine Kopie in der Pipeline zu erstellen, und -joinzu einer einzelnen Zeichenfolge zusammengefasst. Alle diese resultierenden Zeichenfolgen verbleiben in der Pipeline und werden implizit Write-Outputbei der Programmausführung ausgegeben .


Beispiel

Ich habe 0ba7c5 und 6c0e50 für meine beiden Farben erhalten, und TimmyD enthält 6 Zeichen.

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

Beispiel für einen Farbverlauf


1

Python 2, 189 Bytes

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)

Screenshot mit Farbverlauf


Wunderschönes Farbpaar, @AndrewEpstein ... Gute Arbeit mit dem Code!
WallyWest

1

[Groovy] Final Update (199 Bytes) - Gemäß Anforderung

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

Versuchen Sie das Finale hier: https://groovyconsole.appspot.com/script/5130696796405760


ALTE VERSIONEN UNTEN, ABGELEHNT VON OP


Groovy (123 Bytes)

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

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

Eingänge

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

Ausgabebeispiel

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

Ergebnisse in

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

Probieren Sie es selbst aus: https://groovyconsole.appspot.com/script/5184465357766656

Mit Hex Conversions enthalten

Ich schätze, ich betrüge auch irgendwie ... Hier ist das Skript mit hex:

Neuer Code mit Hex-Konvertierungen:

​    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 Zeichen beim Golfen:

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

Ausgabe für 000000 an FFFFFF und 16 (Benutzername Länge)

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

Einfarbiger Farbverlauf mit 1/16 Schritten


Err ... etwas ungültig, Originalversion verwendet "(0 .. (1.0 / s))", sollte "(1 .. (1.0 / s))" gewesen sein.
Magic Octopus Urn

1
Hi @carusocomputing ... Die Eingabe muss aus zwei hexadezimalen Zeichenfolgen und einer Ganzzahl bestehen ... Ich bin mir nicht sicher, ob Groovy Eingaben auf diese Weise verarbeiten kann, aber Sie haben den Auftrag noch nicht richtig verstanden ... Könnten Sie bitte aktualisieren Ihr Code basiert auf den im Abschnitt "Herausforderung" genannten Eingaben?
WallyWest

{s-> s.split("(?<=\\G.{2})").collect{Integer.parseInt(it,16)}}('FFFFFF') Ergebnisse in [255,255,255] Mit dieser Konvertierung kann ich meinem Code 62 Byte hinzufügen, wenn Sie dies wirklich möchten.
Magic Octopus Urn

1
Wally, ich habe eine aktualisierte Version hinzugefügt und meine endgültige Byteanzahl mit eingeschlossenen Konvertierungen auf 199 erhöht.
Magic Octopus Urn

1

R, 68 Bytes

Es gibt eine integrierte Funktion, die zwei Farben interpoliert:

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

Eingang:

d9e7a5
3ef951
15

Ausgabe: ein Vektor mit Werten

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

Für die Farbspezifikation in R ist ein Raute-Symbol erforderlich.

Farbverlauf

Zeichnen wir etwas wie eine Funktion:

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)


Tolle Antwort, aber die kurze Aufforderung, so viele Schritte wie möglich in Ihrem PPCG-Benutzernamen auszuführen, ergibt 15 ... Könnten Sie bitte Ihre Antwort basierend auf aktualisieren FF3762 F08800 15?
WallyWest

@WallyWest Entschuldigung, ich hatte diesen Teil verpasst, bei dem man zwei Farben erhält und seinen eigenen Benutzernamen zählt. Jetzt sollte die Antwort vollständig mit der Spezifikation übereinstimmen!
Andreï Kostyrka

1

C 175 169 168 Bytes

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

Danke an @ h-walters für das Abschneiden von 5 Bytes!


Erinnern Sie mich daran, was die putsSyntax noch einmal tut?
WallyWest

Es ist wie printf(), aber es wird keine Formatierung durchgeführt, sondern nur die angegebene Zeichenfolge wie sie ist gedruckt und eine neue Zeile hinzugefügt.
G. Sliepen

Ah, es gibt also keine Möglichkeit zum Golfen, die ... C ist so ein bisschen einschränkend, nicht wahr?
WallyWest

"Es gibt also keine Möglichkeit, das zu spielen" ... Sicher gibt es das! Bewegen Sie sich puts("")in den dritten Teil der ersten for - Schleife ( ;nachdem Sie a, Before) ... +0 Bytes. Auf diese Weise können Sie jedoch die geschweiften Klammern nach der zweiten Schleife entfernen ... -2 Bytes. Sie können ein weiteres Byte speichern, indem Sie 3 aus entfernen j<3und durch Ihre printfAnweisung ersetzen (dies ist hinterhältig ... printf gibt nur 2 zurück, muss jedoch noch das dritte Mal ausgewertet werden).
H Walters

... Sie können zwei weitere Bytes speichern, indem Sie Ihre sscanf-Rückgabewerte voneinander subtrahieren (was zu 0 führt) und diese anstelle des Literalen 0in verwenden j=0. Sobald hier alles eingerichtet ist, sollte Ihr Programm 5 Bytes kürzer und mindestens 50% fremd sein.
H Walters

1

sh + ImageMagick, 81 Bytes

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

Verwendung:

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

("-tiefe 8" ist nicht erforderlich, wenn Ihre IM mit 8bpp als Standard kompiliert wurde.)

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.