Как сгенерировать серию шестнадцатеричных кодов в «порядке радуги» с учетом счетчика? - PullRequest
Новая
       101

Как сгенерировать серию шестнадцатеричных кодов в «порядке радуги» с учетом счетчика?

0 голосов
/ 18 января 2019

РЕДАКТИРОВАТЬ: Я ВИДЕ ВНЕШНИЙ ЭТО КОДЕКС ЗДЕСЬ ЕЩЕ НЕКОТОРЫЕ ПРОБЛЕМЫ (сейчас должно быть 255 объектов): 

for (let i = 1; i <= 255; i++) {
  let arg = document.createElement("div");
  let red = 0;
  let green = 0;
  let blue = 0;
  if (color == 0) {
    red = 255;
    green = num * 3;
  } else if (color == 1) {
    red = 255 - num*3;
    green = 255;
    blue = num * 3;
  } else if (color == 2) {
    red = num * 3;
    green = 255-num*3;
    blue = 255; 
  }
  arg.style.backgroundColor = "#" + htd(red) + htd(green) + htd(blue);
  document.querySelector("body").appendChild(arg);
  if (num == 85) {
    num = 1;
    color++;
  } else {
    num++;
  }
}

СТАРЫЙ ВОПРОС

Я генерирую несколько объектов HTML в JS, используя цикл for. Я хочу, чтобы эти объекты постепенно окрашивались от красного до фиолетового (порядок радуги). Как мне перейти от #FF0000 к #008080 и обратно к #FF0000.

Вот мой код (НЕ РАБОТАЕТ): 

for (let i = 1; i < 255; i++) {
   let arg = document.createElement("div");
   let num = i;
   if (num > 255) {
      num = 255;
   }
   let red = 255;
   let blue = 0;
   if (num < 128) {
     let green = 0;
     arg.style.backgroundColor = "#" + htd(red - i) + htd(green + i * 2) + htd(blue + i);
   } else {
     let green = 256;
     arg.style.backgroundColor = "#" + htd(red - i * 2) + htd(green - i * 2) + htd(blue + i);
   }
   document.querySelector("body").appendChild(arg);
}

function htd(num) {
   let hexString = num.toString(16);
   if (hexString.length % 2) {
      hexString = '0' + hexString;
   }
   return hexString;
}

Если вы хотите понять, зачем мне это нужно, перейдите на https://codepen.io/navinate/pen/dwExxm

Спасибо!

1 Ответ

0 голосов
/ 18 января 2019

Я думаю, что вы хотите

  1. Градиент значений оттенков
  2. Преобразование из HSL (оттенок, насыщенность, яркость) в RGB
  3. RGB к #hex нотации, которую вы уже охватили

Градиент оттенков - это простая задача линейной интерполяции: 

const length = 100;
const hueGradient = Array.from({length}, (v, k) => k/(length-1));

Пример преобразования из HSL в RGB можно найти в ответе на на этот вопрос . Используя это: 

const saturation = 1.0;
const lightness = 0.5;
const rgbValues = hueGradient.map(hue => hslToRgb(hue, saturation, lightness));

В результате получается массив [R, G, B], который можно выразить как #rgb значения: 

const htmlRgbValues = rgbValues.map(([r,g,b]) => `#${htd(r)}${htd(g)}${htd(b)}`);

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

const htmlRgbValue = hslToRgb(x / x_max, saturation, lightness);
...