令人愉悦的调色板随机颜色生成[关闭]答案

【问题标题】：pleasing palette random color generation [closed]令人愉悦的调色板随机颜色生成[关闭]
【发布时间】：2015-05-05 19:17:58
【问题描述】：

使用 javascript，我创建了一个 1000 像素 x 1000 像素的画布，它在“播放”时会用随机大小、随机颜色的矩形填充自己。有趣，但花哨的结果。为了进一步完善它，我希望它锁定某种可能由其第一次迭代确定的调色板，然后在整个游戏中保持松散。然后我想让它做出“偶然的”奇数选择，但前提是矩形很小，即一个小的强调色。但我以后可以自己弄清楚。我在这里找到了一个投票率很高的生成器，很有趣，但作者是用 Java 编写的。不幸的是，我仍然是javascript的菜鸟（！）有人可以告诉我如何翻译吗？欢迎提出其他建议。如果我能弄清楚我应该在哪里发布它，我很乐意分享我的脚本。毫无疑问，会有很多关于改进我的代码的建议...... 这是我指的生成器： Algorithm to randomly generate an aesthetically-pleasing color palette 非常感谢！

【问题讨论】：

JavaScript 最好发布到 JSFiddle。您不能将 Java“翻译”为 JavaScript，它们是两种截然不同的语言。你必须根据Java代码重写它。
如果这个问题以后仍然没有答案，我会在我回到我的电脑时发布完整的代码。我在 iPad 上输入这个:(
谢谢。我非常感激！希望其他人也会发现你的努力是值得的，CaffeineToCode。
如果它对你有用，你应该接受一个答案。按您选择的答案上的绿色复选标记。
阅读代码时不要阅读语法，而要阅读逻辑。然后将相同的逻辑应用于您的程序，您使用的语言应该不重要。看看它在做什么，而不是在语言 X 中是如何完成的。

标签： java javascript random colors generator

【解决方案1】：

我喜欢第二个答案中article 中的那个功能。

在 JS 中，使用 s = 0.5 和 v = 0.95：

function randomColor(){
  var golden_ratio_conjugate = 0.618033988749895,
      h = (Math.random() + golden_ratio_conjugate) % 1 *360,
      rgb = hsvToRgb(h, 50, 95);
  return "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
}

/**
 * Converts an HSV color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_and_HSV.
 * Assumes h is contained in the set [0, 360] and
 * s and l are contained in the set [0, 100] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  v       The value
 * @return  Array           The RGB representation
 */
function hsvToRgb(h, s, v){
  var chroma = s * v / 10000,
      min = v / 100 - chroma,
      hdash = h / 60,
      x = chroma * (1 - Math.abs(hdash % 2 - 1)),
      r = 0, g = 0, b = 0;

  switch(true){
    case hdash < 1:
      r = chroma;
      g = x;
      break;
    case hdash < 2:
      r = x;
      g = chroma;
      break;
    case hdash < 3:
      g = chroma;
      b = x;
      break;
    case hdash < 4:
      g = x;
      b = chroma;
      break;
    case hdash < 5:
      r = x;
      b = chroma;
      break;
    case hdash <= 6:
      r = chroma;
      b = x;
      break;
  }

  r += min;
  g += min;
  b += min;

  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

【讨论】：

【解决方案2】：

尽可能阅读 Java 代码和随附的注释。

写下更高级别的伪代码“程序”。诸如“将每种随机颜色与混合颜色混合”之类的语句。将每个伪代码语句分解成几个更详细的伪代码片段。

将伪代码翻译成 JavaScript。

注意：链接代码不会生成令人愉悦的和谐颜色组合。它会生成随机组合并通过与颜色混合来减少不和谐（建议使用白色作为柔和的颜色）。

阅读色彩和谐理论并想出更好的东西。

【讨论】：

【解决方案3】：

看起来像这样：

function redColor(var red) {
    return (Math.floor(Math.random() * 256) + red) / 2;
}

为红色、绿色和蓝色制作三个。然后，您可以使用 DOM 将 HTML 元素的背景设置为结果。或者，如果您只是想给出颜色值，您可以将它们绑在一起。您必须将它们作为 3 个单独的变量，因为我知道没有颜色对象。

在 JavaScript 中设置背景：

element.style.backgroundColor = rgb(redColor(greenColorToMix), greenColor(redColorToMix), blueColor(blueColorToMix));

【讨论】：