Javascript - функция произвольного цвета (контроль яркости и контрастности) - PullRequest
Новая
       43

Javascript - функция произвольного цвета (контроль яркости и контрастности)

1 голос
/ 12 декабря 2011

Несколько дней назад я начал искать функцию JavaScript, которая генерирует случайные цвета.

Я нашел скрипт и сделал несколько собственных изменений: 

function getRandColor(brightness)
{
    //6 levels of brightness from 0 to 5, 0 being the darkest
    var rgb = [Math.random() * 256, Math.random() * 256, Math.random() * 256];
    var mix = [brightness*51, brightness*51, brightness*51]; //51 => 255/5
    var mixedrgb = [rgb[0] + mix[0], rgb[1] + mix[1], rgb[2] + mix[2]].map(function(x){ return Math.round(x/2.0)})    
    var rgb = mixedrgb[2] | (mixedrgb[1] << 8) | (mixedrgb[0]  << 16);
    return  '#' + rgb.toString(16);
}

Я бы хотел добавить параметр контраста в функцию. Как это можно сделать?

Кроме того, если вы считаете, что есть более быстрый способ сделать расчеты, пожалуйста, поделитесь. Спасибо.

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

Функция действительно плохая и уродливая, поэтому помогите мне сделать ее лучше. Например, случайная функция возвращает повторяющиеся значения даже в 100 вызовах. 

  function RandomValue(MinValue,MaxValue)
{
    return parseInt(Math.random()*(MaxValue-MinValue+1), 10)+MinValue;
}

function GetRandomColor()
{
    var h = RandomValue(1, 360);   // color hue between 1 and 360
    var s = RandomValue(20, 100);  // saturation 0-100%
    var l = RandomValue(50, 70);   // lightness  0-70%

    /* Convert the HSL values to HEX */

    return HSLtoRGB(h, s, l);
}

function HSLtoRGB(h, s, v)
{
    var r, g, b;
    var i;
    var f, p, q, t;

    h = Math.max(0, Math.min(360, h));
    s = Math.max(0, Math.min(100, s));
    v = Math.max(0, Math.min(100, v));

    s /= 100;
    v /= 100;

    if(s == 0) 
    {
        r = g = b = v;
        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }

    h /= 60; 
    i = Math.floor(h);
    f = h - i; 
    p = v * (1 - s);
    q = v * (1 - s * f);
    t = v * (1 - s * (1 - f));

    switch(i) 
    {
        case 0:
        r = v;
        g = t;
        b = p;
        break;

        case 1:
        r = q;
        g = v;
        b = p;
        break;

        case 2:
        r = p;
        g = v;
        b = t;
        break;

        case 3:
        r = p;
        g = q;
        b = v;
        break;

        case 4:
        r = t;
        g = p;
        b = v;
        break;

        default: 
        r = v;
        g = p;
        b = q;
    }

    var rgb = Math.round(b * 255) | (Math.round(g * 255) << 8) | (Math.round(r * 255)  << 16);

    var m=rgb.toString(16);

    switch(m.length)
    {
        case 5:return  '#' + rgb.toString(16) + '0';break;
        case 4:return  '#' + rgb.toString(16) + '00';break;
        default:return  '#' + rgb.toString(16);break;
    }
}


for (var i = 0; i < 500; i++) {
    var div = document.createElement('div');
    div.style.backgroundColor = GetRandomColor() ;
    document.body.appendChild(div);
}
...