pleasing palette random color generation

Question

Using javascript, I've created a 1000px x 1000px canvas that on "play" fills itself with random-sized, random colored rectangles. Fun, but garish results. To refine it further, I'd like it to lock onto some kind of color palette determined perhaps by its first iterations, then stay loosely with that for the entire play. I'm thinking then to let it make "serendipitous" odd-ball choices, but only if the rectangle is small, i.e. a tiny accent color. But I can figure that out later on my own. I found a highly-voted generator here that's interesting, but the author wrote it in Java. Unfortunately, I'm still a noob at javascript(!) Can someone show me how to translate it? Alternate suggestions are welcome. I'd be happy to share my script if I can figure out where I should publish it. No doubt there'd be numerous suggestions on bettering my code... Here's the generator I'm referring to: Algorithm to randomly generate an aesthetically-pleasing color palette Many thanks in advance!

Answer 1

I like that function in the article from the 2nd answer.

In JS, using s = 0.5 and 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)];
}

Answer 2

It would look something like this:

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

Making three of those for red, green, and blue. You could then set the background of an HTML element as the results using the DOM. Or you could tie them together a string if you simply wish to give the color value. You have to have them as 3 seperate variables because there is no color Object that I am aware of.

Set a background in JavaScript:

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

Answer 3

Read the Java code as best as you can and the accompanying notes.

Write down a 'program' of higher level pseudo-code. Statements like "mix each random colour with the mix-in colour". Break up each pseudo-code statement into a few more detailed pseudo-code fragments.

Translate the pseudo-code into JavaScript.

Note: The linked code does not generate pleasing harmonious colour combinations. It generates random combinations and reduces the dischord by mixing with a colour (white is suggested for pastel).

Read up on colour harmony theory and come up with something much better.