@S_C_R_E_A_M_E_R

Как преобразовать массив из 64 чисел от 0 до 63 в цвет?

Как можно преобразовать массив из 64 чисел от 0 до 63 в цвет?
  • Вопрос задан
  • 107 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Тут некоторая избыточность.
Цвет в вебе задаётся одним байтом 0..FF (0..255) для каждого компонента: R, G, B и, опционально, альфа (прозрачность 0..100). Прозрачность, вероятно, отбросим.
Будем считать, что цвет – это три байта = 24 бита.

0..63 это 6 бит. Для цвета достаточно четырёх чисел 0..63, чтобы получить 4 * 6 = 24 бита.
четыре 6-битовых дают три 8-битных:
00000011 11112222 22333333


В массиве из 64 элементов 64 / 4 = 16 таких четвёрок, или 16 цветов. Можно генерить градиент )

Вариант решения
(()=>{
  // из четырёх чисел 0..63 получить строку цвета типа "#abcdef"
  const makeColor = (n1, n2, n3, n4) => {
    const r = (n1 & 63) << 2 | (n2 & 48) >> 4;
    const g = (n2 & 15) << 4 | (n3 & 60) >> 2;
    const b = (n3 & 3) << 6 | n4 & 63;
    return '#' + [r,g,b].map(n => n.toString(16).padStart(2,'0')).join('');
  }
  
  // из массива чисел от 0 до 63, длиной кратной 4, получить массив цветов
  const arrToColor = arr => {
    const len = arr.length;
    if (len % 4) throw "Длина массива не кратна 4";

    const result = [];
    for (let i=0; i<len; i+=4)
      result.push(makeColor(...arr.slice(i, i+4)));

    return result;
  }  

  // тест
  const test = () => arrToColor(
    [...new Array(64)].map(()=>Math.floor(64 * Math.random()))
  );
  return test();
})()

/*
#941510,#4b31ca,#eec8c9,#4c9202,
#336a01,#95b7ec,#e73d44,#4069e6,
#4d1700,#8efa27,#8e0333,#f089af,
#67b561,#fc8fc8,#48503c,#f308a9
*/


Ответ написан
Пригласить эксперта
Ответы на вопрос 2
yarkov
@yarkov Куратор тега JavaScript
https://github.com/yarkovaleksei/toster-extension
Циклом
Ответ написан
longclaps
@longclaps
const palette = [
    '#000000', '#000055', '#0000aa', '#0000ff',
    '#005500', '#005555', '#0055aa', '#0055ff',
    '#00aa00', '#00aa55', '#00aaaa', '#00aaff',
    '#00ff00', '#00ff55', '#00ffaa', '#00ffff',
    '#550000', '#550055', '#5500aa', '#5500ff',
    '#555500', '#555555', '#5555aa', '#5555ff',
    '#55aa00', '#55aa55', '#55aaaa', '#55aaff',
    '#55ff00', '#55ff55', '#55ffaa', '#55ffff',
    '#aa0000', '#aa0055', '#aa00aa', '#aa00ff',
    '#aa5500', '#aa5555', '#aa55aa', '#aa55ff',
    '#aaaa00', '#aaaa55', '#aaaaaa', '#aaaaff',
    '#aaff00', '#aaff55', '#aaffaa', '#aaffff',
    '#ff0000', '#ff0055', '#ff00aa', '#ff00ff',
    '#ff5500', '#ff5555', '#ff55aa', '#ff55ff',
    '#ffaa00', '#ffaa55', '#ffaaaa', '#ffaaff',
    '#ffff00', '#ffff55', '#ffffaa', '#ffffff'
];
или
const palette = [
    '#000', '#500', '#a00', '#f00', '#050', '#550', '#a50', '#f50',
    '#0a0', '#5a0', '#aa0', '#fa0', '#0f0', '#5f0', '#af0', '#ff0',
    '#005', '#505', '#a05', '#f05', '#055', '#555', '#a55', '#f55',
    '#0a5', '#5a5', '#aa5', '#fa5', '#0f5', '#5f5', '#af5', '#ff5',
    '#00a', '#50a', '#a0a', '#f0a', '#05a', '#55a', '#a5a', '#f5a',
    '#0aa', '#5aa', '#aaa', '#faa', '#0fa', '#5fa', '#afa', '#ffa',
    '#00f', '#50f', '#a0f', '#f0f', '#05f', '#55f', '#a5f', '#f5f',
    '#0af', '#5af', '#aaf', '#faf', '#0ff', '#5ff', '#aff', '#fff'
];
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
17 сент. 2019, в 20:46
952 руб./в час
17 сент. 2019, в 20:41
10000 руб./за проект
17 сент. 2019, в 20:30
700 руб./в час