Как генерировать случайные серые цвета в JavaScript

1

У меня есть функция и хотелось бы генерировать только серые цвета. Как я могу это сделать с помощью кода ниже? Я новичок в javascript! Буду признателен за любую помощь. Я использую Paper.js

 function onMouseDown(event) {
        path = new Path();
        path.fillColor = {
            hue: Math.random() * 360,
            //saturation: 0,
            //brightness: 0.5
        };

        path.add(event.point);
    }
  • 1
    Похоже, вы используете какую-то библиотеку. Я не узнаю это. Может быть Paper.js? Возможно, это ваше собственное. Можете ли вы дать нам знать, что это, пожалуйста? Если это Paper.js, вы можете использовать для него шестнадцатеричный цвет, а не HSL в вашем примере. Смотрите: paperjs.org/reference/color
  • 0
    @Moob Я действительно использую paper.js! Благодарю за ваш ответ. Я должен был уточнить это в моем вопросе.
Теги:
paperjs

3 ответа

1
Лучший ответ

Так как пример, который вы предоставляете, принимает цвета HSB, вы можете просто генерировать случайное значение яркости. Насыщенность должна быть 0 (полностью ненасыщенная), а оттенок также может быть 0, поскольку он является избыточным.

Значение яркости должно быть числом от 0 до 1. Так как вы хотите серый цвет, вы можете захотеть вернуть значение, которое не слишком темное или слишком светлое. Мы можем сделать небольшой метод для возврата случайного числа между двумя значениями.

function getRandomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

Поэтому в коде вы будете использовать его так:

function onMouseDown(event) {
    path = new Path();
    path.fillColor = {
        hue: 0, 
        saturation: 0,
        brightness: getRandomInRange(0.2, 0.8)
    };

    path.add(event.point);
}

Обновить

Paper.js имеет конструктор Color, специально предназначенный для оттенков серого, который также подходит для использования здесь. Требуется число от 0 до 1 (где 0 - черное), поэтому getRandomInRange будет работать одинаково хорошо:

path.fillColor = new Color(getRandomInRange(0.2, 0.8)); //a random grey
Поделиться
  • 1
    Не уверен насчет используемой вами библиотеки, но getRandomInRange(0,100) использовать getRandomInRange(0,100) , если ожидается процент.
  • 0
    Спасибо @Moob! Это сработало отлично. Ты обалденный.
7

Поскольку серые цвета имеют равные компоненты RGB, вы можете генерировать гекс в диапазоне 0 - ff и использовать его для каждой из частей R, G, B:

function randomGreyHex() {
  var v = (Math.random()*(256)|0).toString(16);//bitwise OR. Gives value in the range 0-255 which is then converted to base 16 (hex).
  return "#" + v + v + v;
}

/* demo usage: */
var div = document.querySelector("div");
div.addEventListener("click", function() {
  var grey = randomGreyHex();
  this.style.backgroundColor = grey;
  this.innerHTML = grey;
});
div {
  height: 100px;
  border: 1px solid red;
  text-shadow: 0 0 10px white;
}
<div id="div">click me</div>
Поделиться
  • 3
    Ну, я вижу, ты побил меня к этому! :-) В случае, если OP заинтересован в использовании RGB, я привел в этой скрипке пример, в котором есть небольшие различия в цветах и ограниченный некоторыми из средних тонов (не 100% черного и не 100% белого) , Однако не могли бы вы объяснить, что именно делает (255)|0) ? Я вижу, что он работает так, как задумано, возвращает числа от 0 до 255, и это потрясающий метод, я просто не видел его раньше, и меня интересует техническая составляющая этого?
  • 2
    @ Chri.s Это побитовый оператор ИЛИ, который эффективно усекает случайное число в десятичной точке (то же самое, что и Math.floor в этом смысле).
Показать ещё 1 комментарий
2

Вы можете использовать библиотеку randomColor.

Для генерации случайного серого цвета это будет:

randomColor({hue: 'monochrome', count: 1});

Это, однако, также будет включать черный цвет. Вы можете использовать клавишу яркости, установленную на "свет", чтобы получать только реальные серые цвета.

randomColor({hue: 'monochrome',luminosity: 'light', count: 1});

Небольшая демонстрация, подражая цветным шарам, которые мы находим на репо GitHub:

var colours = randomColor({
  hue: 'monochrome',
  count: 5,
  luminosity: 'light'
});

var myDiv = document.getElementById('squares');

colours.forEach(function(colour) {
  myDiv.innerHTML += '<span class="circle" style="color:${colour}"></span>'
});
.circle:before {
  content: ' \25CF';
  font-size: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>


<div id="squares">

</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню