Как «отсортировать» цвета определенного оттенка - PullRequest
Новая
       75

Как «отсортировать» цвета определенного оттенка

0 голосов
/ 09 июня 2019

Так что, если я использую randomColor , чтобы сгенерировать довольно случайное изменение "зеленого", я получу это, например:

enter image description here

Это немного хаотично для меня, вместо этого я хотел бы получить список зеленых цветов, которые имеют своего рода порядок или сортировку . Похоже, они текут друг на друга. Нечто подобное:

enter image description here

Вопрос в том, какие принципы используются для сортировки цветов таким образом. Я хотел бы знать, как я мог бы создать сетку цветов, которая выглядела бы более приятной, чем случайный ассортимент цветов определенного оттенка.

Код, который я использовал, просто такой: 

var randomColor = require('randomcolor')

var input = process.argv[2]
var colors = randomColor({
  count: 20,
  hue: input
})

Если это имеет значение, я хотел бы иметь возможность указать количество строк и столбцов, на которые нужно разделить цвета. Любой язык или псевдокод было бы хорошо, чтобы понять это, но увидеть его в JavaScript, особенно если он включает в себя манипуляции с битами, такие как битовые сдвиги, было бы полезно, но не обязательно.

Это не совсем то, что я хочу.

Ответы [ 2 ]

1 голос
/ 11 июня 2019

Зеленые цвета на изображении имеют различные оттенки, а затем уменьшаются в значении (становятся меньше черного) при движении вниз.

Ваш симпатичный генератор цветов randomColor основан на нечетной теории, что цвета, которые проходят череззолотое сечение в цветовом пространстве будет красивее, в основном оно просто гарантирует, что вы будете стремиться к линейным шагам.Но этот код является лицензией CC0 и включает в себя ряд полезных вещей для ваших целей.Сначала они определяют, что такое зеленый.И они определяют, как конвертировать из RGB в HSL.Я бы просто изменил этот код, чтобы сделать линейные шаги через правильные оттенки, а затем в направлении направления строки по значению.

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

Если вы действительно хотите отсортировать эти цвета, вы можете отсортировать их буквально, просто отсортировав их.Используйте HexToHSB () в коде randomColor, а затем сортируйте значения на основе полученного значения оттенка.Обычно это будут более светлые и яркие цвета, но вы можете ясно видеть менее хаотичный рисунок повсюду.

Все цветовые пространства имеют, как правило, 3 значения, поэтому размещение их в 2d имеет тенденцию быть немного запутанным, так что вы можете такжевыберите одну или две метрики и используйте их. 

  function HexToHSB(hex) {
    hex = hex.replace(/^#/, '');
    hex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;

    var red = parseInt(hex.substr(0, 2), 16) / 255,
      green = parseInt(hex.substr(2, 2), 16) / 255,
      blue = parseInt(hex.substr(4, 2), 16) / 255;

    var cMax = Math.max(red, green, blue),
      delta = cMax - Math.min(red, green, blue),
      saturation = cMax ? (delta / cMax) : 0;

    switch (cMax) {
      case red:
        return [60 * (((green - blue) / delta) % 6) || 0, saturation, cMax];
      case green:
        return [60 * (((blue - red) / delta) + 2) || 0, saturation, cMax];
      case blue:
        return [60 * (((red - green) / delta) + 4) || 0, saturation, cMax];
    }
  }

  var input = 'green'
  var colors = randomColor({
    count: 200,
    hue: input
  })
  colors = colors.sort(function(a, b) {
    var hsva = HexToHSB(a);
    var hsvb = HexToHSB(b);
    return hsva[0] - hsvb[0];
  });
  div = document.createElement("div");
  document.body.appendChild(div);
  colors.forEach(function(element) {
    var d = document.createElement("button");
    d.style.cssText = 'padding:5px; font-size:22px; width:50px; height:50px; background-color:' + element;
    div.appendChild(d);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.4/randomColor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1 голос
/ 09 июня 2019

(не предполагается, что это будет полный ответ с кодом)

Ваша зелень на втором изображении, поперек верхней части, идет от сине-зеленого до желто-зеленого. В практическом плане это означает, что верхний левый зеленый - это «0 красных, возможно 255 зеленых и 200 синих». С другой стороны, в правом верхнем углу, это может быть «200 красных, 255 зеленых, 0 синих». (Я бы сделал их более точными, используя детектор цвета, но я разговариваю по телефону)

Спускаясь вниз по строкам, которые стремятся к черному, уменьшая значения r g b, поэтому для среднего ряда они могут перейти от 0,127,100 до 100,127,0

Алгоритмически, хотя это может быть проще сделать, используя цвета hsv, а не rgb, поскольку столбцы поперек переходят от более высокого оттенка к более низкому оттенку, а строки вниз стремятся от высокого значения к низкому значению. Это, вероятно, было бы проще реализовать, чем выполнять RGB-математику, поскольку вам просто нужно принять оттенок, который будет варьироваться от, возможно, h + 40 до h-40 (от полного колеса 360) и матрицу (и вам, вероятно, потребуется попросите строки и столбцы не только 20, иначе как вы узнаете, чтобы вывести 5x4 или 4x5)

...