7

Суть такая. Пользователь со временем получает опыт, пользуясь сайтом. Цвет прогресс бара меняется с уровнем пользователя. Цвет можно задать либо HEX, либо RGB кодом, но я запутался. Я уверен, что подобное можно выразить какой-либо математической формулой, но, видимо, я плохо учил математику.

Уровни идут как очередность чисел: от 1 до бесконечности. Это единственный известный параметр в формуле. Нужно выразить его так, чтобы цвет менялся от одного цвета к другому крайне плавно. То есть если прежний цвет был (0, 0, 5), то следующий уровень изменит его до (0, 0, 6). Но это еще не все. Чтобы избежать черного и белого цветов, я думаю, правильнее будет сделать переход от синего в зеленый, а оттуда в красный. А если цвета закончатся, то пойдут по новой.

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

За последние 3 часа я голову хорошо поломал, исписав листик в совершенно нелогичных догадках о том что нужно сделать. Возможно, кто-то имел дело с подобным и покажет примеры? Или хотя бы подсказки как это сделать в теории?

4
  • 10 раз перечитал не понял в чем суть вопроса...
    – Air
    20 апр 2018 в 7:02
  • @Air каждый уровень пользователя изменяет цвет прогресс бара. Чем выше уровень тем "круче" цвет. Я не знаю как обьяснить лучше, помоему достаточно подробно.
    – Telion
    20 апр 2018 в 7:04
  • Это я понял. Я не понял что именно у тебя не получется и в чем вопрос? Что именно ты не можешь реализовать?
    – Air
    20 апр 2018 в 7:07
  • @Максим Ленский карму начисляют пользователю другие пользователи. Опыт начисляется автоматически за время проведенное на сайте. Каждые X количество опыта повышают уровень, каждый следующий уровень сложнее достать в геометрической прогрессии. Но суть не в этом, а в том что есть уровни 1, 2 ... 256 и эта цифра должна конвертироваться в код цвета (0, 0, 1), (0, 0, 2) ... (0, 1, 255) и так далее. Если провести ползунок по графическому слайдеру цвета в том же Хроме можно наблюдать как работают переходы.
    – Telion
    20 апр 2018 в 7:09

3 ответа 3

6

Можете воспользоваться hsl - первый параметр отвечает за цвет. Правда, я не знаю, как вы представляете себе бесконечное отображение... Ведь цветов то ограниченное количество. Но можно представить что-то типа такого.

function setColorLevels() {
  for (var i = 0; i < 1000; i++) {
    var elem = document.createElement('div');
    elem.style.backgroundColor = `hsl(${360-i*4-110},100%,50%)`;
    elem.innerText = `level ${i}`;
    content.appendChild(elem);
  }
}
setColorLevels();
<content id="content"></content>

3
  • Я сказал в вопросе что по окончанию цветов идет по кругу, это вроде работает по кругу. Я проверил все работает и даже можно сдвинуть: jsfiddle.net/bs6tqt82/5. По сути идеально, но все же одна маленькая проблемка, возможно ли как-то легко изменить порядок что бы был синий-зеленый-красный, а не зеленый-синий-красный?
    – Telion
    20 апр 2018 в 7:38
  • @Telion Начинаем с синего цвета 20 апр 2018 в 7:53
  • Самый разумный вариант из предложенных в ответах.
    – yar85
    20 апр 2018 в 12:07
5

Можно использовать hsl-цвета

let getTemperatureColor = (value) => ['hsl(', value, ',100%,50%)'].join('');

for (let i = 240; i >= 0; i--) {
  var d = document.createElement('div');
  d.style.backgroundColor = getTemperatureColor(i);
  document.body.appendChild(d);
}
div {
  width: 2px;
  height: 20px;
  float: left;
}

Если поддерживаемые браузеры позволяют шаблонные строки, то можно упросить еще сильнее.

for (let i = 240; i >= 0; i--) {
  var d = document.createElement('div');
  d.style.backgroundColor = `hsl(${i}, 100%,50%)`;
  document.body.appendChild(d);
}
div {
  width: 2px;
  height: 20px;
  float: left;
}

Вариант с таймером:

let getTemperatureColor = (value) => ['hsl(', value, ',100%,50%)'].join('');
let i = 240;

setInterval(function() {
  i--;
  document.getElementById('status').style.backgroundColor = getTemperatureColor(i);
}, 25);
div {
  width: 50px;
  height: 50px;
}
<div id="status"></div>

7
  • Как и у другого товарища ответившиго на вопрос у вас тоже очередность цветов не такая как я задумывал. Переспрошу: нельзя ли изменить очередность до синий-зеленый-красный? Во всем остальном идеально. А, стоп, если инвертировать то наверное можно...
    – Telion
    20 апр 2018 в 7:39
  • @Telion, поправил, если поиграться со значениями диапазона для цикла, с 200 до 400 получается как раз синий-зеленый-красный 20 апр 2018 в 8:43
  • @Regent, этого можно добиться заменив 400 на большее число, точно не скажу сколько, надо поиграться со значением. 20 апр 2018 в 8:45
  • @SergeyGlazirin а ещё, я так понимаю, у вас не все 1530 цветов получаются? Не то чтобы я бы на практике стал упираться за использование именно всех требуемых цветов, но всё же.
    – Regent
    20 апр 2018 в 8:55
  • 1
    @yar85, там в коде формула вычислялась, по ней 200 - преобразовывалось в 240, сейчас переделал, стало даже лучше, спасибо за замечание. 20 апр 2018 в 12:48
4

Что при таких условиях получается с цветами:

 lvl   r   g   b
   0   0   0 255
   1   0   1 255
 254   0 254 255
 255   0 255 255
 256   0 255 254
 509   0 255   1
 510   0 255   0
 511   1 255   0
 764 254 255   0
 765 255 255   0
 766 255 254   0
1019 255   1   0
1020 255   0   0
1021 255   0   1
1274 255   0 254
1275 255   0 255
1276 254   0 255
1529   1   0 255
1530   0   0 255

В итоге цикл - 1530 уровней (итераций). Соответственно, для вычисления значений цветов достаточно брать level % 1530.

Решение "в лоб":

var colorBlock = document.getElementById("color");
var level = 0;

setInterval(function() {
  var levelBase = level % 1530;

  var red = 0;
  if (levelBase >= 511 && levelBase <= 765)
    red = levelBase - 510;
  else if (levelBase >= 766 && levelBase <= 1275)
    red = 255;
  else if (levelBase >= 1276 && levelBase <= 1529)
    red = 1530 - levelBase;

  var green = 0;
  if (levelBase <= 255)
    green = levelBase;
  else if (levelBase <= 765)
    green = 255;
  else if (levelBase <= 1020)
    green = 1020 - levelBase;

  var blue = 0;
  if (levelBase <= 255 || levelBase >= 1276)
    blue = 255;
  else if (levelBase <= 510)
    blue = 510 - levelBase;
  else if (levelBase >= 1021 && levelBase <= 1275)
    blue = levelBase - 1020;

  colorBlock.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
  colorBlock.innerText = level + " " + red + " " + green + " " + blue;
  level++;
}, 10);
#color {
  width: 200px;
  height: 200px;
}
<div id="color"></div>


Можно уменьшить количество строк кода с 34 до 24, вынеся логику определения значения цвета по levelBase в отдельную функцию:

var colorBlock = document.getElementById("color");
var level = 0;

setInterval(function() {
  var levelBase = level % 1530;
  var red = getColorValue(levelBase, [511, 764], [1276, 1530], [765, 1275]);
  var green = getColorValue(levelBase, [1, 254], [766, 1020], [255, 765]);
  var blue = getColorValue(levelBase, [1021, 1274], [256, 510], [0, 255], [1275, 1529]);
  colorBlock.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
  colorBlock.innerText = level + " " + red + " " + green + " " + blue;
  level++;
}, 10);

function getColorValue(levelBase, incRange, decRange, maxValueRange, maxValueRange2) {
  if (levelBase >= incRange[0] && levelBase <= incRange[1])
    return levelBase - incRange[0];
  if (levelBase >= decRange[0] && levelBase <= decRange[1])
    return decRange[1] - levelBase;
  if (levelBase >= maxValueRange[0] && levelBase <= maxValueRange[1])
    return 255;
  if (maxValueRange2 != null && levelBase >= maxValueRange2[0] && levelBase <= maxValueRange2[1])
    return 255;
  return 0;
}
#color {
  width: 200px;
  height: 200px;
}
<div id="color"></div>


Искусственное "выравнивание" цветов снижает количество строк с 24 до 19, плюсом укоротив некоторые строки кода:

var colorBlock = document.getElementById("color");
var level = 0;

setInterval(function() {
  var red = getColorValue((level + 1020) % 1530);
  var green = getColorValue(level % 1530);
  var blue = getColorValue((level + 510) % 1530);
  colorBlock.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
  colorBlock.innerText = level + " " + red + " " + green + " " + blue;
  level++;
}, 10);

function getColorValue(levelBase) {
  if (levelBase <= 254)
    return levelBase;
  if (levelBase <= 765)
    return 255;
  return levelBase <= 1020 ? 1020 - levelBase : 0;
}
#color {
  width: 200px;
  height: 200px;
}
<div id="color"></div>

5
  • Этого я и боялся.. Тем не менее пока самое точное решение, хотя и не самое красивое. Подожду до завтра, голова не варит, может что придумаю еще.
    – Telion
    20 апр 2018 в 7:48
  • @Telion каких-то волшебных функций, дающих решение в одну строку, для такого нет. Единственное - можно попытаться уменьшить количество if-ов за счет каких-то формул, но их, во-первых, ещё придумать надо (попытаюсь это сделать сегодня), а во-вторых, их использование ухудшит читаемость кода и, как следствие, усложнит отладку кода.
    – Regent
    20 апр 2018 в 7:50
  • нет я полностью понимаю что решение в 1 строку я врядли найду, просто если выйдет уменьшить размер сего кода хотя бы вдвое было бы уже лучше(я понимаю что можно использовать те же строчные операторы IF), а если изобрести формулу то уже даже гордиться есть чем :) Я благодарен за помощь в любом случае, но как сказал, голова не варит, утро вечера мудренее.
    – Telion
    20 апр 2018 в 7:54
  • 2
    @Telion я количество строк кода во втором примере уменьшил с 34 до 24. Вряд ли получится сделать сильно короче.
    – Regent
    20 апр 2018 в 8:14
  • Большое спасибо за старания, этот ответ наиболее точный и достаточно удобный.
    – Telion
    20 апр 2018 в 20:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.