Создать программную палитру цветов

Question

Как создать детерминированный Javascript HTML-палитру цветов, в которой заданы аргументы о том, сколько цветов нужно получить, возвращает массив шестнадцатеричных цветовых кодов HTML, т.е.

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

Сами цвета могут быть выбраны / сгенерированы случайным образом, но метод должен гарантировать, что выбранные цвета всегда одинаковы между вызовами и всегда в одном и том же порядке последовательно.

Например, если последовательность цветов, определяемая функцией, начинается со следующего 8:

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

Функция будет вести себя со следующими непротиворечивыми ответами через отдельные вызовы методов на клиенте

    ["#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);     

Примечание : цвета заранее не определены как переменные; метод может быть запрошен для 345 цветов, каждый из которых потребуется генерировать любым подходящим способом.

Проблема, которую необходимо решить, - в первую очередь - как создать в методе возможность последовательно генерировать n значений цвета HEX одинаково каждый раз, сохраняя последовательность

Answer 1

Вам необходимо использовать генератор псевдослучайных чисел (PRNG) с фиксированным начальным начальным числом. Метод Math.random в javascript - это PRNG, но вы не можете установить начальное значение, как в других языках.

PRNG достаточно прост для создания - много кода в Интернете. При фиксированном начальном начальном числе он всегда будет генерировать одну и ту же последовательность случайных чисел, о чем вы просите.

Независимо от того, выглядят ли эти цвета приятными или нет, это совсем другой вопрос ...

Одна реализация javascript с возможностью заполнения:
http://www.erikoest.dk/rng2.htm

Здесь вы также найдете реализации C (легко конвертируемые в javascript) и другие подробности создания собственного PRNG типа Lehmer:
http://www.google.com/search?q=Lehmer%20random%20number%20generator

Еще один с кодом ( Мерсенна Твистер ):
http://www.math.sci.hiroshima -u.ac.jp / ~ м-мат / MT / ВЕРСИЯ / JAVASCRIPT / Java-script.html

Этот вопрос охватывает несколько типов PRNG в javascript:
Генератор случайных чисел JavaScript Seedable

Если вы передадите PRNG одинаковое начальное начальное число в начале функции, он всегда будет возвращать одинаковую последовательность номеров при каждом последующем вызове.

Преобразуйте это число в цвет, и все готово.

-Adam

Answer 2

Используя приведенные выше ответы и код ГСЧ здесь , я закончил с (предполагается, что для создания класса используется библиотека Prototype ):

    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 3

Каждая пара шестнадцатеричного цвета представляет значение RGB. Учитывая #AABBCC, можно сделать вывод, что AA представляет красный, BB представляет зеленый, а CC представляет синий. Чтобы получить «значение» для красного, сначала необходимо преобразовать A из шестнадцатеричного в десятичный формат.

А представляет 10 в десятичном виде. Когда вы умножаете пары значений вместе с шестнадцатеричным цветом, вы получаете каждое значение для RBG. Поэтому, когда вы преобразуете ранее указанный шестнадцатеричный цвет в RGB, вы получите красный = A A, зеленый = B B и синий = C * C или красный = 10 * 10 = 100, зеленый = 11 * 11 = 121 и синий = 12 * 12 = 144.

Итак, #AABBCC - это RGB (100,121,144). Я думаю, этого должно быть достаточно для обратного процесса ... так как вам не понадобятся шестнадцатеричные значения длиной более 2 шестнадцатеричных символов для каждого цвета, вам не понадобится причудливый алгоритм для преобразования десятичного числа в шестнадцатеричное и назад. RGB идет только от 0 до 255, поэтому вы можете либо конвертировать базы, используя встроенную функцию, либо составляя таблицу из ресурсов на странице:

Страница Википедии для Hexidecmal

Answer 4

Вот как бы я это сделал.

(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

См. статью . Он описывает, как все функции в javascript на самом деле являются объектами.

Итак, вот быстрый прототип:

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

Answer 6

Может быть, это:

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