使用 javascript 创建颜色渐变网格

Question

我正在尝试使用 JavaScript 创建一个可变的颜色网格。规则是相邻颜色必须始终相似（例如，绿色不能接触红色）。

我设法创建了一些非常接近我想要的东西，但是有一些事情仍然困扰着我，并且我无法解决它们。

1. 蓝色/红色比绿色更流行。例如，没有“深绿色”。这可能是因为我的“算法”，但我无法更改它以使绿色与其他两种颜色一样普遍，而不会弄乱整个网格。

2. 所有颜色都应该彼此不同（在 @Mr.Polywhirl 的有用答案之后添加此内容，但这创建了一些相同颜色的块）。

3. 我希望颜色会集中到中心的浅色调，而不是变暗。

这是我到目前为止所取得的成就：

const COLUMNS = 30;
const ROWS = 16;
const TOTAL = COLUMNS * ROWS;

const generateRed = (step) => {
  return 0 + step * (255 / TOTAL);
}

const generateGreen = (step) => {
  return 255 - step * (255 / ROWS);
}

const generateBlue = (step) => {
  return  255 - step * (255 / COLUMNS);
}

function generateColorStrip(row) {
  const colors = [];
  for (let column = 0; column < COLUMNS; column++) {
    const r = generateRed(column * ROWS);
    const g = generateGreen(row);
    const b = generateBlue(column);
    colors.push(`rgb(${r}, ${g}, ${b})`); 
  }
  return colors;
}

function generateColorStrips() {
  let colors = [];
   for (let row = 0; row < ROWS; row++) {
     colors = [...colors, ...generateColorStrip(row)]
   }
  return colors;
}

const colors = generateColorStrips();

colors.forEach(color => {
    const newDiv = document.createElement('div');
    newDiv.style.backgroundColor=color;
    document.body.appendChild(newDiv);
    document.body.style.gridTemplateColumns = `repeat(${COLUMNS}, auto)`;
});

body {
  display: grid;
  max-height: 5em;
  height: 5em;
  gap: 1px;
  width: min-content;
}

div {
  height: 10px;
  aspect-ratio: 1;
}

这就是我希望以某种方式实现的目标：

关于如何更改此代码以实现这些目标有什么建议吗？

Answer 1

我能得到的最接近的是使用 HSL 颜色模型并计算矢量（幅度和方向）。

\n

\n
• 本质上是径向渐变
\n
• 色相是方向，明度是大小
\n
• 我反转了 x 尺度并旋转了 -2\xcf\x80/3
\n

\n

这是我能达到的最接近的结果：

\n

\r\n

\r\n

const\n  gradientEl = document.querySelector(\'.gradient\'),\n  COLS = 30, ROWS = 16,\n  MAX_MAGNITUDE = Math.max(COLS, ROWS) / 2,\n  MIN_MAGNITUDE = Math.min(COLS, ROWS) / 2;\n\nconst toDegrees = (radians) => radians * (180 / Math.PI);\n\nconst generateColorStrips = () => {\n  const colors = [];\n  for (let row = 0; row < ROWS; row++) {\n    for (let col = 0; col < COLS; col++) {\n      const dx = row - Math.floor(ROWS / 2);\n      const dy = col - Math.floor(COLS / 2);\n      const magnitude = Math.min(Math.hypot(dx, dy), MIN_MAGNITUDE);\n      const hue = Math.floor(toDegrees(Math.atan2(-dx, dy) - (Math.PI * (2/3))));\n      const lightness = Math.floor((1 - (magnitude / MAX_MAGNITUDE)) * 100);\n      colors.push(`hsl(${hue}, 90%, ${lightness}%)`); \n    }\n  }\n  return colors;\n}\n\ngenerateColorStrips().forEach(color => {\n  const newDiv = document.createElement(\'div\');\n  newDiv.classList.add(\'swatch\');\n  newDiv.style.backgroundColor = color;\n  gradientEl.appendChild(newDiv);\n  Object.assign(gradientEl.style, {\n    gridTemplateColumns: `repeat(${COLS}, auto)`,\n  });\n});

\r\n

html, body {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.gradient {\n  display: grid;\n  gap: 1px;\n}\n\n.swatch {\n  height: 10px;\n  aspect-ratio: 1;\n}

\r\n

<div class="gradient"></div>

\r\n

\r\n

\r\n

\n

我想知道你是否可以模拟两个渐变的 CSS 层混合。

\n

\r\n

\r\n

html, body {\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #222;\n}\n\n.drawing {\n  position: relative;\n  width: 300px;\n  height: 150px;\n}\n\n.layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 300px;\n  height: 150px;\n  mix-blend-mode: multiply;\n}\n\n#layer-0 {\n  background: #FFF;\n}\n\n#layer-1 {\n  background: linear-gradient(5deg, rgba(0,255,0,1.0) 0%, rgba(0,0,0,0.0) 50%, rgba(255,0,0,1.0) 100%);\n}\n\n#layer-2 {\n  background: linear-gradient(95deg, rgba(255,255,0,1.0) 0%, rgba(0,0,0,0.0) 50%, rgba(0,0,255,1.0) 100%);\n}

\r\n

<div class="drawing">\n  <div class="layer" id="layer-0"></div>\n  <div class="layer" id="layer-1"></div>\n  <div class="layer" id="layer-2"></div>\n</div>

\r\n

\r\n

\r\n

\n