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

Question

[S_C_R_E_A_M_E_R]

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

Comments

[irishmann]

[Рональд Макдональд]

irishmann, нет, о чём речь идёт, понятно, возмущает наглость ТС.

[Kovalsky]

В цикле для каждого элемента преобразовываете число в цвет, что бы это ни значило

[irishmann]

Рональд Макдональд, так и я о том же

[S_C_R_E_A_M_E_R]

Рональд Макдональд, не совсем понял, при чём тут наглость?

Answer 1

[Сергей Соколов]

Тут некоторая избыточность.
Цвет в вебе задаётся одним байтом 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
*/

Answer 2

[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'
];