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




nombre entier (9)

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?


Answers

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)


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


Plus succinct:

function get_random_color2() 
{
    var r = function () { return Math.floor(Math.random()*256) };
    return "rgb(" + r() + "," + r() + "," + r() + ")";
}

function randomColor()
{
     color='rgb('+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+','+Math.round(Math.random()*255)+')';

     return color;
}

Cela renvoie une valeur RVB aléatoire.


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)

Un moyen plus court:

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

Les fermetures sont simples:

L'exemple simple suivant couvre tous les points principaux des fermetures de JavaScript. *

Voici une usine qui produit des calculatrices qui peuvent ajouter et multiplier:

function make_calculator() {
  var n = 0; // this calculator stores a single number n
  return {
    add: function(a) {
      n += a;
      return n;
    },
    multiply: function(a) {
      n *= a;
      return n;
    }
  };
}

first_calculator = make_calculator();
second_calculator = make_calculator();

first_calculator.add(3); // returns 3
second_calculator.add(400); // returns 400

first_calculator.multiply(11); // returns 33
second_calculator.multiply(10); // returns 4000

Le point clé: chaque appel à make_calculatorcréer une nouvelle variable locale n, qui continue à être utilisable par la calculatrice addet multiplyfonctionne longtemps après le make_calculatorretour.

Si vous connaissez bien les cadres de pile, ces calculatrices semblent étranges: comment peuvent-elles continuer à accéder naprès les make_calculatorretours? La solution consiste à imaginer que JavaScript n'utilise pas de "cadres de pile", mais utilise des "cadres de tas", qui peuvent persister après l'appel de la fonction qui les a renvoyés.

Les fonctions internes comme addet multiply, qui accèdent aux variables déclarées dans une fonction externe ** , sont appelées fermetures .

C'est à peu près tout ce qu'il y a aux fermetures.


* Par exemple, il couvre tous les points de l'article "Fermetures pour les nuls" donné dans une autre réponse , à l'exception de l'exemple 6, qui montre simplement que des variables peuvent être utilisées avant d'être déclarées, ce qui est un fait intéressant à connaître mais totalement indépendant des fermetures. Il couvre également tous les points de la réponse acceptée , à l'exception des points (1) qui copient leurs arguments dans des variables locales (les arguments de la fonction nommée) et (2) qui copie des nombres crée un nouveau numéro, mais copie une référence d'objet. vous donne une autre référence au même objet. Celles-ci sont également utiles à connaître, mais là encore, elles n’ont aucun lien avec les fermetures. Il est également très similaire à l'exemple de cette réponse, mais un peu plus court et moins abstrait. Il ne couvre pas le point decette réponse ou ce commentaire , qui est que JavaScript rend difficile de brancher le courantvaleur d'une variable de boucle dans votre fonction interne: L'étape "brancher" ne peut être effectuée qu'avec une fonction d'assistance englobant votre fonction interne et appelée à chaque itération de la boucle. (À proprement parler, la fonction interne accède à la copie de la variable de la fonction d'assistance, plutôt que de rien brancher.) Encore une fois, très utile lors de la création de fermetures, mais ne faisant pas partie de ce qu'est une fermeture ou de son fonctionnement. Il existe une confusion supplémentaire en raison du fait que les fermetures fonctionnent différemment dans des langages fonctionnels tels que ML, où les variables sont liées à des valeurs plutôt qu’à l’espace de stockage, fournissant ainsi un flot constant de personnes qui comprennent les fermetures de manière tout simplement incorrect pour JavaScript, où les variables sont toujours liées à un espace de stockage et jamais à des valeurs.

** Toute fonction externe, si plusieurs sont imbriquées, ou même dans le contexte global, comme le montre clairement cette réponse .







javascript random