إنشاء منتقي الألوان الآلي

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 لونًا، وكلها ستكون مطلوبة لتوليدها بأي وسيلة مناسبة.

المشكلة التي يجب حلها هي - اولا في المقام الاول اولا قبل كل شي - كيف يمكنك إنشاء إمكانية ضمن الطريقة لإنشاء قيم ألوان HEX n بشكل ثابت في كل مرة مع الحفاظ على التسلسل أيضًا

Answer 1

تحتاج إلى استخدام مولد أرقام عشوائية زائفة (PRNG)، مع بذرة بداية ثابتة.طريقة Math.random في جافا سكريبت هي PRNG، لكن لا يمكنك تعيين البذرة كما تفعل في اللغات الأخرى.

يعد إنشاء PRNG أمرًا بسيطًا إلى حد معقول - حيث يوجد الكثير من التعليمات البرمجية على الإنترنت.نظرًا لوجود بذرة بداية ثابتة، فإنها ستولد دائمًا نفس التسلسل من الأرقام العشوائية، وهو ما تطلبه.

سواء كانت تلك الألوان تبدو ممتعة أم لا، فهي كذلك سؤال آخر تماما...

تطبيق جافا سكريبت واحد مع إمكانية البذر:
http://www.erikoest.dk/rng2.htm

ستجد أيضًا تطبيقات لغة C (سهلة التحويل إلى جافا سكريبت) وتفاصيل أخرى حول إنشاء PRNG الخاص بك من نوع Lehmer هنا:
http://www.google.com/search?q=Lehmer%20random%20number%20generator

واحد آخر مع الكود (إعصار ميرسين):
http://www.math.sci.hiroshima-u.ac.jp/~m-mat/MT/VERSIONS/JAVASCRIPT/java-script.html

يغطي هذا السؤال عدة أنواع من PRNG في جافا سكريبت:
مولد رقم عشوائي جافا سكريبت قابل للبذور

إذا قمت بإعطاء نفس بداية البداية إلى PRNG في بداية الوظيفة، فسوف تقوم دائمًا بإرجاع نفس التسلسل الرقمي مع كل استدعاء متتالي.

قم بتحويل هذا الرقم إلى لون، وستكون جاهزًا.

-آدم

Answer 2

يمثل كل زوج من الألوان السداسية العشرية قيمة RGB.بالنظر إلى #AABBCC، يمكن للمرء أن يستنتج أن AA يمثل اللون الأحمر، وBB يمثل اللون الأخضر وCC يمثل اللون الأزرق.للحصول على "قيمة" اللون الأحمر، ستحتاج أولاً إلى تحويل A من التنسيق السداسي العشري إلى تنسيق عشري.

A يمثل 10 بالنظام العشري.عندما تقوم بضرب أزواج القيمة معًا من اللون السداسي العشري، تحصل على كل قيمة لـ RBG.لذلك عندما تقوم بتحويل اللون السداسي المذكور مسبقًا إلى RGB، ستحصل على Red = Aأ، الأخضر = بB والأزرق = C*C أو الأحمر = 10*10 = 100، الأخضر = 11*11 = 121 والأزرق = 12*12 = 144.

إذن #AABBCC هو RGB بقيمة (100,121,144).أعتقد أن هذه يجب أن تكون معلومات كافية لعكس العملية ...نظرًا لأنك لن تحتاج إلى قيم سداسية عشرية بطول أكثر من حرفين سداسي عشري لكل لون، فلن تحتاج إلى خوارزمية رائعة لتحويل النظام العشري إلى سداسي عشري وبالعكس.ينتقل RGB فقط من 0 إلى 255 لذا يمكنك إما التحويل بين القواعد باستخدام وظيفة مضمنة أو عن طريق إنشاء جدول من الموارد الموجودة في الصفحة:

صفحة ويكيبيديا لـ Hexidecmal

Answer 3

باستخدام الإجابات المقدمة أعلاه، ورمز RNG هنا, ، انتهى بي الأمر بـ (يفترض استخدام النموذج المبدئي مكتبة لإنشاء الصف):

    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

هذه هي الطريقة التي سأفعل بها ذلك.

(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

ربما هذا:

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

انظر الى هذا شرط.فهو يصف كيف أن جميع الوظائف في جافا سكريبت هي في الواقع كائنات.

إذن إليك نموذج أولي سريع:

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