Creare programmatico selettore colore

Question

Come creare un deterministico Javascript HTML color picker che argomenti di quanti colori sono desiderati restituisce un array di HTML, hex codici di colore, vale a dire:

    function createColours(numColours) {
        return [/* colours array of size numColours */]     
    }

I colori stessi possono essere scelto / generato in modo casuale, ma il metodo deve garantire che i colori scelti sono sempre gli stessi tra chiamate e sempre nello stesso ordine in serie.

Per esempio, se la serie di colori decisi dalla funzione avviato con i seguenti 8:

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

La funzione si sarebbero comportati con le seguenti risposte coerenti attraverso diversi invocazioni del metodo sul client

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

Nota:I colori non sono definiti come una variabile in anticipo;il metodo può essere chiesto per 345 colori, che sarebbe richiesto per generare, con qualsiasi mezzo idoneo.

Il problema da risolvere è - in primo luogo - come creare una capacità all'interno del metodo per generare il n colore ESADECIMALE valori costantemente la stessa ogni volta preservando anche la sequenza

Answer 1

È necessario utilizzare un generatore di numeri pseudo casuale (PRNG), con un fisso di start seme.Il Per La Matematica.metodo casuale in javascript è un PRNG, ma non è possibile impostare il seme, come si può in altre lingue.

Un PRNG è ragionevolmente semplice per creare - un sacco di codice su internet.Date fissate per l'inizio seme che genera sempre la stessa sequenza di numeri casuali, che è quello che stai chiedendo.

Se questi colori sono gradevoli o meno, è un'altra questione del tutto...

Una implementazione di javascript con semina capacità di:
http://www.erikoest.dk/rng2.htm

Troverete anche C implementazioni (facile da convertire in javascript) e altri dettagli di costruire la propria PRNG di Lehmer tipo qui:
http://www.google.com/search?q=Lehmer%20random%20number%20generator

Un altro con il codice (Mersenne twister):
http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/VERSIONS/JAVASCRIPT/java-script.html

Questa domanda comprende diversi tipi di PRNG in javascript:
Seedable JavaScript generatore di numeri casuali

Se si dà lo stesso seme di partenza per il PRNG all'inizio della funzione, che restituisce sempre lo stesso numero di sequenza con ogni successiva chiamata.

Convertire il numero in un colore, e tutto è a posto.

-Adam

Answer 2

Ogni coppia di esadecimale colore rappresenta un valore RGB.Dato #AABBCC, si può dedurre che AA rappresenta Rosso, BB representds Verde e CC rappresenta Blu.Per ottenere il 'valore' per il Rosso, è innanzitutto necessario per la conversione da Esadecimale a decimale formato.

Una rappresenta il 10 in decimale.Se si moltiplica il valore di coppie insieme da esadecimale colore, si ottiene ogni valore per RBG.Così, quando si converte in precedenza dichiarato esadecimale colore in RGB, si otterrà Rosso = AUna, Verde = BB e Blu = C*C o Rosso = 10*10 = 100, Verde = 11*11 = 121 e Blu = 12*12 = 144.

Così #AABBCC è un RGB di (100,121,144).Penso che dovrebbero essere sufficienti informazioni per invertire il processo di...dal momento che non avrete bisogno di valori esadecimali con una lunghezza di più di 2 caratteri esadecimali per ogni colore, non avrete bisogno di una fantasia algoritmo per convertire un numero Decimale in Esadecimale e indietro.Solo RGB va da 0 - 255 quindi, è possibile la conversione tra basi di utilizzo di un costruito in funzione o da tavolo con le risorse sulla pagina:

Pagina di Wikipedia per Hexidecmal

Answer 3

Utilizzando le risposte di cui sopra e il RNG codice qui, Ho finito con (si presuppone utilizzo di Prototipo libreria per la creazione della classe):

    var ColourPicker = Class.create({
        initialize: function() {
            this.hash = '#';
            this.rngRed = new RNG(5872323); // using same seed always guarantees number order response same
            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

Questo è come vorrei fare.

(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

Forse questo:

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

Answer 6

Vedere questo articolo.Descrive tutte le funzioni in javascript sono in realtà oggetti.

Quindi, ecco un rapido prototipo:

function createColours(num) {
  if ( typeof createColors.colors == 'undefined' ) {
    // We've not yet created any colors...
    createColors.colors = new array();
   }
  if ( createColors.colors.length >= num ) {
     // Create new colors and add them to the array here...

  }
  // Otherwise, return the array...
  return createColors.colors;
}