two - Le meilleur moyen de générer une couleur aléatoire en JavaScript?




random javascript entier (6)

Sans utiliser de cadre

J'ai écrit 2 fonctions:

function get_random_color() 
{
    var color = "";
    for(var i = 0; i < 3; i++) {
        var sub = Math.floor(Math.random() * 256).toString(16);
        color += (sub.length == 1 ? "0" + sub : sub);
    }
    return "#" + color;
}

function get_rand_color()
{
    var color = Math.floor(Math.random() * Math.pow(256, 3)).toString(16);
    while(color.length < 6) {
        color = "0" + color;
    }
    return "#" + color;
}

Lequel serait considéré comme le meilleur? Y a-t-il de meilleurs moyens de le faire?


Cette réponse est la meilleure méthode.

Vous devez choisir des couleurs connues au lieu de vous fier à des méthodes purement numériques. Vous pouvez utiliser des sites comme ColorBrewer pour choisir des palettes de couleurs qui fonctionnent bien en fonction du problème (ensemble de données qualitatives, quantitatives, ColorBrewer ).

['red','orange','yellow','green','blue','purple'][Math.random()*6|0]

var colors = {
  rainbow: ['red', 'orange', 'yellow', 'green', 'blue', 'purple'],
  qual: ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'],
  quant: ['#fff7ec', '#fee8c8', '#fdd49e', '#fdbb84', '#fc8d59', '#ef6548', '#d7301f', '#b30000', '#7f0000'],
  div: ['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#f7f7f7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']
};
randc = function(array) {
  return array[Math.random() * array.length | 0]
}
genc = function() {
  var frag = [];
  var arr = colors[$("select").val()];
  for (var i = 0; i < 1024; i++) {
    frag.push("<div style='background-color:" + randc(arr) + ";'></div>");
  }
  $("#demo").html(frag.join(''));
}
genc();
$("select").on("change", genc);
#demo {
  margin-top: 10px;
  font-size: 0;
}
#demo div {
  display: inline-block;
  width: 24px;
  height: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='qual'>Qualitative (categorical)</option>
  <option value='quant'>Quantitative (sequential)</option>
  <option value='div'>Divergent (republicans versus democrats)</option>
  <option value='rainbow'>Rainbow (my little pony)</option>
</select>
<div id='demo'></div>


Comme George a dit que la meilleure façon est d'utiliser HSL, ainsi vous pouvez générer un tas de couleurs distinctes identifiables par l'homme. L'idée similaire est implémentée dans Adams Cole réponse à la question similaire, mais son code a aléatoire générateur de couleurs et hsl-> hex rgb traducteur regroupés ce qui le rend difficile à comprendre et à modifier.

Si vous utilisez l'une des bibliothèques de manipulation de couleur javascript (comme jquery-color ), la génération de couleur devient triviale:

function rainbow() {
  // 30 random hues with step of 12 degrees
  var hue = Math.floor(Math.random() * 30) * 12;

  return $.Color({
    hue: hue,
    saturation: 0.9,
    lightness: 0.6,
    alpha: 1
  }).toHexString();
};

Je l'ai fait comme ça, avec l'aide d'autres réponses:

'#' + parseInt(Math.random() * 0xffffff).toString(16)

Le plus succinct:

function get_random_color()
{
  return '#' + Math.random().toString(16).substring(4);
}

Nicolas Buduroi a donné le meilleur code ci-dessus pour obtenir des couleurs aléatoires chez Random Color generator en Javascript


Un moyen plus court:

'#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6)

Voici un moyen de générer une couleur aléatoire et de fournir la luminosité minimale:

function randomColor(brightness){
  function randomChannel(brightness){
    var r = 255-brightness;
    var n = 0|((Math.random() * r) + brightness);
    var s = n.toString(16);
    return (s.length==1) ? '0'+s : s;
  }
  return '#' + randomChannel(brightness) + randomChannel(brightness) + randomChannel(brightness);
}

Appelez randomColor avec une valeur comprise entre 0 et 255, indiquant la luminosité de la couleur. Ceci est utile pour générer des pastels, par exemple randomColor(220)





random