Erstellen Sie einen programmierten Farbauswähler

Question

Wie würde man einen deterministischen Javascript HTML-Farbauswähler erstellen, der anhand der gewünschten Anzahl an Farben ein Array von HTML-Hex-Farbcodes zurückgibt, also:

    function createColours(numColours) {
        return [/* Farben-Array der Größe numColours */]     
    }

Die Farben selbst können zufällig ausgewählt / generiert werden, aber die Methode muss garantieren, dass die ausgewählten Farben bei jedem Aufruf gleich sind und immer in der gleichen Reihenfolge erscheinen.

Beispiel: Wenn die Serie von Farben, die von der Funktion festgelegt wurde, mit den folgenden 8 Farben beginnt:

    "#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00", "#795800", "#FFD245", "#6EFFAD", etc, etc

Die Funktion würde bei separaten Methodenaufrufen auf dem Client mit den folgenden konstanten Antworten reagieren:

    ["#47092E", "#CC2A43"] == createColours(2);
    ["#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00"] == createColours(5);
    ["#47092E"] == createColours(1);        
    ["#47092E", "#CC2A43", "#00C66B", "#BC1300", "#667E00", "#795800", "#FFD245", "#6EFFAD", #und 49 weitere#] == createColours(57);     

Hinweis: Die Farben sind nicht im Voraus als Variable definiert; die Methode könnte nach 345 Farben gefragt werden, die alle auf geeignete Weise generiert werden müssten.

Das zu lösende Problem ist - in erster Linie - wie man eine Funktion innerhalb der Methode erstellen würde, um die n HEX-Farbwerte konsistent bei jedem Aufruf gleich zu generieren und dabei die Reihenfolge beizubehalten

Answer 1

Sie müssen einen Pseudo-Zufallszahlengenerator (PRNG) mit einem festen Startwert verwenden. Die Methode Math.random in Javascript ist ein PRNG, aber Sie können den Startwert nicht wie in anderen Sprachen festlegen.

Ein PRNG ist relativ einfach zu erstellen - es gibt viele Codes im Internet. Mit einem festen Startwert generiert es immer dieselbe Sequenz von Zufallszahlen, was Sie verlangen.

Ob diese Farben angenehm aussehen oder nicht, ist eine völlig andere Frage...

Eine Javascript-Implementierung mit Startwertmöglichkeit:
http://www.erikoest.dk/rng2.htm

Sie finden auch C-Implementierungen (einfach in Javascript umzuwandeln) und weitere Details zum Erstellen Ihres eigenen PRNG vom Typ Lehmer hier:
http://www.google.com/search?q=Lehmer%20random%20number%20generator

Ein weiterer mit Code (Mersenne Twister):
http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/VERSIONS/JAVASCRIPT/java-script.html

Diese Frage behandelt verschiedene Arten von PRNGs in Javascript:
Seedable JavaScript random number generator

Wenn Sie dem PRNG zu Beginn der Funktion denselben Startwert geben, wird er bei jedem aufeinanderfolgenden Aufruf immer dieselbe Zahlenfolge zurückgeben.

Wandeln Sie diese Nummer in eine Farbe um, und Sie sind fertig.

-Adam

Answer 2

Jedes Paar einer hexadezimalen Farbe stellt einen RGB-Wert dar. Bei #AABBCC kann man deduzieren, dass AA Rot repräsentiert, BB Grün und CC Blau. Um den 'Wert' für Rot zu erhalten, müsste man zunächst A von hexadezimal in ein dezimales Format umwandeln.

A repräsentiert 10 im Dezimalsystem. Wenn man die Wertepaare der hexadezimalen Farbe multipliziert, erhält man jeden Wert für RBG. Also, wenn man die zuvor genannte hexadezimale Farbe in RGB umwandelt, erhält man Rot = A_A, Grün = B_B und Blau = C*C oder Rot = 10*10 = 100, Grün = 11*11 = 121 und Blau = 12*12 = 144.

Also ist #AABBCC ein RGB-Wert von (100,121,144). Ich denke, das sollte genug Information sein, um den Prozess umzukehren... da man hexadezimale Werte mit einer Länge von mehr als 2 Hex-Zeichen für jede Farbe nicht benötigt, wird man keinen ausgefallenen Algorithmus zum Umwandeln von Dezimal in Hexadezimal und zurück brauchen. RGB reicht nur von 0 - 255, also kann man entweder zwischen den Basen mit einer eingebauten Funktion umwandeln oder eine Tabelle aus den Ressourcen auf der Seite erstellen:

Wikipedia Seite für Hexadezimal

Answer 3

Unter Verwendung der oben angegebenen Antworten und des RNG-Codes hier bin ich schließlich (unter der Annahme der Verwendung der Prototype-Bibliothek zur Klassenerstellung) auf folgendes gestoßen:

    var ColourPicker = Class.create({
        initialize: function() {
            this.hash = '#';
            this.rngRed = new RNG(5872323); // die Verwendung desselben Seeds garantiert immer die gleiche Reihenfolge der Zahlenantwort
            this.rngGreen = new RNG(332233);
            this.rngBlue = new RNG(3442178);
        },
        numberToHex: function(number, padding) {
            var hex = number.toString(16);
            return hex;
        },
        createColours: function(numColours) {
            var colours = [];
            for (var i = numColours - colours.length; i-- > 0;) {
                var r = this.rngRed.nextRange(5,240);
                var g = this.rngGreen.nextRange(10,250);
                var b = this.rngBlue.nextRange(0,230);
                colours.push(this.hash + this.numberToHex(r) + this.numberToHex(g) + this.numberToHex(b));
            }
            return colours;
        }
    });

    var colourPicker = new ColourPicker();
    var colours = colourPicker.createColours(10);

    for (var i = 0 ; i < colours.length ; i++) {
        alert(colours[i]);
    }

Answer 4

So würde ich es machen.

(function(){
var colours = [];
var x = "0123456789ABCDEF".split('');
var addColour = function() {
  var s='#';
  for(var i=6; i-->0;)
    s+=x[Math.round(Math.random()*15)];
  colours.push(s);
};
createColours = function(numColours) {
  for(var i=numColours-colours.length; i-->0;) addColour();
  return colours.slice(0,numColours);
}
})();

Answer 5

Vielleicht das:

function createColours(numColours){
   var all  = ["#47092E", "#CC2A43", "#00C66B", .... ];
   var selected = [];
   for(var i=0;i