Страницы

Поиск по вопросам

воскресенье, 16 февраля 2020 г.

Рандомный оттенок

#jquery #цвета


Хочу создать форму, где пользователь нажимает на нужный цвет и скрипт генерирует
случайный оттенок этого цвета.

Я генерирую цвет rgb с помощью random. Но я не могу Придумать, как сделать, что бы
генерировался именно оттенок цвета, а не случайный цвет



$(function() {
  $('#color').change(function() {
    var min = 0, max = 255;
    
    var rgbColor = 'rgb('+(Math.floor(Math.random() * (max - min)) + min)+','+(Math.floor(Math.random()
* (max - min)) + min)+','+(Math.floor(Math.random() * (max - min)) + min)+')';
    
    $('#shade').val(rgbColor).css('border-color', rgbColor);
  });
});
#shade {border: 2px solid #000;}


Выберите цвет:

Оттенок:

Как сделать, что бы генерировался оттенок?


Ответы

Ответ 1



Нужно записывать кода всех оттенков нужных $(function() { $('#color').change(function() { var self = this, // Создаём список цветов colorsModels = { 'red': {'r': '50-255', 'g': '0', 'b': '0'}, 'green': {'r': '0', 'g': '50-255', 'b': '0'}, 'yellow': {'r': '50-255', 'g': 'r', 'b': '0'}, 'blue': {'r': '0', 'g': '0', 'b': '50-255'}, 'grey': {'r': '50-200', 'g': 'r', 'b': 'r'} }; // Проверяем, существует ли цвет указанный в списке if( colorsModels[self.value] !== undefined ){ // Передаём массив цвета в переменную и создаём rgb var model = colorsModels[self.value], rgb = {r: null, g: null, b: null}; // Перебираем каждый цвет из массива for(var key in model){ if( /\d{1,3}\-\d{1,3}/.exec(model[key]) ){ // Проверяем, указано ли значение диапазоном // Вычисляем минимум и максимум с диапазона var min = parseFloat( model[key].replace(/(\d{1,3})\-\d{1,3}/, '$1') ), max = parseFloat( model[key].replace(/\d{1,3}\-(\d{1,3})/, '$1') ); // Вычисляем рандомное число в этом диапазоне var value = Math.floor(Math.random() * (max - min)) + min; // Применяем значение rgb[key] = value; }else if( /\d{1,3}/.exec(model[key]) ){ // Если цвет указан не диапазоном, то проверяем, цифра ли это // Преобразовываем значение в цифру var value = parseFloat( model[key] ); // Применяем значение rgb[key] = value; }else if( model[key] === 'r' || model[key] === 'g' || model[key] === 'b' ){ // Проверяем, ну казано ли значение повторяющим цветом (не равно ли значение пердыдущим цветам) // Проверяем, на допустимость повторения if( (key !== 'r' && key !== model[key]) || (model[key] === 'g' && key !== 'r') ){ // Если всё нормально, то копируем значение rgb[key] = rgb[model[key]]; }else{ console.error('Invalid!'); }; }else{ console.error('Undefined a value color!'); }; }; // Устанавливаем значение var rgbColor = 'rgb('+rgb['r']+','+rgb['g']+','+rgb['b']+')'; $('#shade').val(rgbColor).css('border-color', rgbColor); }else{ console.error('Undefined a color!'); }; }); }); #shade {border: 2px solid #000;}

Выберите цвет:

Оттенок:



Ответ 2



Обычно цвет переводят в цветовую модель HSV, меняют оттенок цвета (Hue) и переводят обратно в RGB. Если нужно поменять насыщенность - Saturation. Если светлоту - Volume. Посмотрите также другие цветовые модели - многие из них "заточены" под разные вещи.

Ответ 3



Для серого цвета надо выбросить один random, и выпавшее значение присваивать всем каналам (r,g,b). Для прочих цветов генерировать значения не в полном диапазоне [0, 255], а раздельно по каналам, отдавая предпочтение тем или иным из них. function limitedRandom (min, max) { return (Math.floor(Math.random() * (max - min)) + min); } red = { r: limitedRandom(150, 255); g: limitedRandom(0, 100); b: limitedRandom(0, 100); }; yellow = { r: limitedRandom(150, 255); g: limitedRandom(150, 255); b: limitedRandom(0, 100); }; // and so on Конкретные границы диапазонов цветов подберите по своему вкусу в графическом редакторе.

Комментариев нет:

Отправить комментарий