Algorithme pour générer aléatoirement une esthétique de la palette de couleurs [fermé]
https://stackoverflow.com/questions/43044
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je suis à la recherche d'un algorithme simple pour générer un grand nombre d'aléatoire, esthétique de couleurs.Donc, pas de folles néon de couleurs, couleurs rappelant les selles, etc.
J'ai trouvé des solutions à ce problème, mais ils s'appuient sur d'autres palettes de couleurs de RVB.Je voudrais plutôt utiliser directement RVB de la cartographie d'avant en arrière.Ces autres solutions peuvent générer seulement 32 ou si agréable des couleurs aléatoires.
Toutes les idées seront grands.
La solution
Vous pourriez moyenne les valeurs RVB des couleurs aléatoires avec ceux d'une couleur constante:
(exemple en Java)
public Color generateRandomColor(Color mix) {
Random random = new Random();
int red = random.nextInt(256);
int green = random.nextInt(256);
int blue = random.nextInt(256);
// mix the color
if (mix != null) {
red = (red + mix.getRed()) / 2;
green = (green + mix.getGreen()) / 2;
blue = (blue + mix.getBlue()) / 2;
}
Color color = new Color(red, green, blue);
return color;
}
Mélange aléatoire des couleurs avec le blanc (255, 255, 255) crée neutre pastels par l'augmentation de la légèreté tout en conservant la teinte de la couleur d'origine.Ces généré de façon aléatoire, pastels à l'habitude d'aller bien ensemble, surtout en grand nombre.
Voici quelques couleurs pastel générées à l'aide de la méthode ci-dessus:
Vous pouvez également mélanger la couleur aléatoire avec une constante pastel, ce qui entraîne une teintées à l'ensemble de couleurs neutres.Par exemple, à l'aide d'une lumière bleue crée des couleurs comme celles-ci:
Pour aller plus loin, vous pouvez ajouter des heuristiques pour votre générateur de prendre en compte les couleurs complémentaires ou les niveaux de l'ombrage, mais tout dépend de l'impression que vous voulez atteindre avec vos couleurs aléatoires.
Quelques ressources supplémentaires:
Autres conseils
Je voudrais utiliser une roue de couleur et donné une position aléatoire vous pouvez ajouter l'or de l'angle (137,5 degrés)
http://en.wikipedia.org/wiki/Golden_angle
afin d'obtenir des couleurs différentes à chaque fois, qui ne se chevauchent pas.
Réglage de la luminosité de la roue de couleur vous pourriez obtenir aussi différents clair/foncé combinaisons de couleurs.
J'ai trouvé ce post de blog qui explique très bien le problème et la solution à l'aide du nombre d'or.
http://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
Mise à JOUR: Je viens de trouver cette autre approche:
Il est appelé RYB(rouge, jaune, bleu) la méthode et il est décrit dans le présent document:
http://threekings.tk/mirror/ryb_TR.pdf
en tant que "Peinture de Couleurs Inspirée de Compositing".
L'algorithme génère les couleurs et chaque couleur est choisie de manière à maximiser sa distance euclidienne précédemment sélectionnés.
Ici vous pouvez trouver une bonne implémentation en javascript:
http://afriggeri.github.com/RYB/
Mise à JOUR 2:
Sciences Po Medialb viens de sortir un outil qui s'appelle "je veux Teinte" qui génèrent des palettes de couleurs pour les données scientifiques.À l'aide de différents espaces de couleurs et à la production des palettes en utilisant le clustering k-means ou les vecteurs de la force ( répulsion graphiques) Les résultats de ces méthodes sont très bons, ils montrent la théorie et de la mise en œuvre dans leur page web.
En javascript:
function pastelColors(){
var r = (Math.round(Math.random()* 127) + 127).toString(16);
var g = (Math.round(Math.random()* 127) + 127).toString(16);
var b = (Math.round(Math.random()* 127) + 127).toString(16);
return '#' + r + g + b;
}
Vu l'idée ici: http://blog.functionalfun.net/2008/07/random-pastel-colour-generator.html
La conversion à une autre palette est de loin supérieur à la façon de le faire.Il y a une raison pour laquelle ils font que:d'autres palettes sont "perception" - qui est, ils ont mis semblable semblant de couleurs proches, et le réglage d'une variable change la couleur d'une manière prévisible.Rien de cela n'est vrai pour le RVB, où il n'y a pas de relation évidente entre les couleurs qui "vont bien ensemble".
Une réponse qui ne devrait pas être négligée, parce que c'est simple et présente des avantages, est d'échantillonnage de la vie réelle, les photos et les peintures.exemple au hasard autant de pixels que vous souhaitez couleurs aléatoires sur les vignettes de l'art moderne, de photos, de cézanne, van gogh, monnet, photos...l'avantage est que vous pouvez obtenir des couleurs par thème et qu'ils sont organiques couleurs.juste mettre 20 - 30 photos dans un dossier et d'un échantillon aléatoire de façon aléatoire un pic à chaque fois.
La Conversion de VHS valeurs est généralisée à l'algorithme de code pour psychologiquement base de la palette.le hsv est plus facile de sélectionner de manière aléatoire.
En php:
function pastelColors() {
$r = dechex(round(((float) rand() / (float) getrandmax()) * 127) + 127);
$g = dechex(round(((float) rand() / (float) getrandmax()) * 127) + 127);
$b = dechex(round(((float) rand() / (float) getrandmax()) * 127) + 127);
return "#" . $r . $g . $b;
}
J'ai eu du succès à l'aide de TriadMixing et CIE94 pour éviter des couleurs similaires.L'image ci-dessous utilise une entrée de couleurs rouge, jaune et blanc.Voir ici.
Ici est rapide et sale de couleur générateur en C# (en utilisant 'RYB de l'approche décrite dans ce l'article).C'est une réécriture de JavaScript.
Utilisation:
List<Color> ColorPalette = ColorGenerator.Generate(30).ToList();
D'abord deux couleurs ont tendance à être de couleur blanche et d'un abat-jour noir.J'ai souvent les ignorer, comme ceci (à l'aide de Linq):
List<Color> ColorsPalette = ColorGenerator
.Generate(30)
.Skip(2) // skip white and black
.ToList();
Mise en œuvre:
public static class ColorGenerator
{
// RYB color space
private static class RYB
{
private static readonly double[] White = { 1, 1, 1 };
private static readonly double[] Red = { 1, 0, 0 };
private static readonly double[] Yellow = { 1, 1, 0 };
private static readonly double[] Blue = { 0.163, 0.373, 0.6 };
private static readonly double[] Violet = { 0.5, 0, 0.5 };
private static readonly double[] Green = { 0, 0.66, 0.2 };
private static readonly double[] Orange = { 1, 0.5, 0 };
private static readonly double[] Black = { 0.2, 0.094, 0.0 };
public static double[] ToRgb(double r, double y, double b)
{
var rgb = new double[3];
for (int i = 0; i < 3; i++)
{
rgb[i] = White[i] * (1.0 - r) * (1.0 - b) * (1.0 - y) +
Red[i] * r * (1.0 - b) * (1.0 - y) +
Blue[i] * (1.0 - r) * b * (1.0 - y) +
Violet[i] * r * b * (1.0 - y) +
Yellow[i] * (1.0 - r) * (1.0 - b) * y +
Orange[i] * r * (1.0 - b) * y +
Green[i] * (1.0 - r) * b * y +
Black[i] * r * b * y;
}
return rgb;
}
}
private class Points : IEnumerable<double[]>
{
private readonly int pointsCount;
private double[] picked;
private int pickedCount;
private readonly List<double[]> points = new List<double[]>();
public Points(int count)
{
pointsCount = count;
}
private void Generate()
{
points.Clear();
var numBase = (int)Math.Ceiling(Math.Pow(pointsCount, 1.0 / 3.0));
var ceil = (int)Math.Pow(numBase, 3.0);
for (int i = 0; i < ceil; i++)
{
points.Add(new[]
{
Math.Floor(i/(double)(numBase*numBase))/ (numBase - 1.0),
Math.Floor((i/(double)numBase) % numBase)/ (numBase - 1.0),
Math.Floor((double)(i % numBase))/ (numBase - 1.0),
});
}
}
private double Distance(double[] p1)
{
double distance = 0;
for (int i = 0; i < 3; i++)
{
distance += Math.Pow(p1[i] - picked[i], 2.0);
}
return distance;
}
private double[] Pick()
{
if (picked == null)
{
picked = points[0];
points.RemoveAt(0);
pickedCount = 1;
return picked;
}
var d1 = Distance(points[0]);
int i1 = 0, i2 = 0;
foreach (var point in points)
{
var d2 = Distance(point);
if (d1 < d2)
{
i1 = i2;
d1 = d2;
}
i2 += 1;
}
var pick = points[i1];
points.RemoveAt(i1);
for (int i = 0; i < 3; i++)
{
picked[i] = (pickedCount * picked[i] + pick[i]) / (pickedCount + 1.0);
}
pickedCount += 1;
return pick;
}
public IEnumerator<double[]> GetEnumerator()
{
Generate();
for (int i = 0; i < pointsCount; i++)
{
yield return Pick();
}
}
IEnumerator IEnumerable.GetEnumerator()
{
return GetEnumerator();
}
}
public static IEnumerable<Color> Generate(int numOfColors)
{
var points = new Points(numOfColors);
foreach (var point in points)
{
var rgb = RYB.ToRgb(point[0], point[1], point[2]);
yield return Color.FromArgb(
(int)Math.Floor(255 * rgb[0]),
(int)Math.Floor(255 * rgb[1]),
(int)Math.Floor(255 * rgb[2]));
}
}
}
David Crow de la méthode dans un R deux-liner:
GetRandomColours <- function(num.of.colours, color.to.mix=c(1,1,1)) {
return(rgb((matrix(runif(num.of.colours*3), nrow=num.of.colours)*color.to.mix)/2))
}
function fnGetRandomColour(iDarkLuma, iLightLuma)
{
for (var i=0;i<20;i++)
{
var sColour = ('ffffff' + Math.floor(Math.random() * 0xFFFFFF).toString(16)).substr(-6);
var rgb = parseInt(sColour, 16); // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff; // extract red
var g = (rgb >> 8) & 0xff; // extract green
var b = (rgb >> 0) & 0xff; // extract blue
var iLuma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
if (iLuma > iDarkLuma && iLuma < iLightLuma) return sColour;
}
return sColour;
}
Pour le pastel, passage supérieur de luminance sombre/clair entiers - ie fnGetRandomColour(120, 250)
Crédits:tous les crédits à http://paulirish.com/2009/random-hex-color-code-snippets/ stackoverflow.com/questions/12043187/comment-faire-vérifier-si-hex-couleur-est-trop-noir
JavaScript adaptation de David Crow réponse originale à cette question, c'est à dire et Nodejs code spécifique inclus.
generateRandomComplementaryColor = function(r, g, b){
//--- JavaScript code
var red = Math.floor((Math.random() * 256));
var green = Math.floor((Math.random() * 256));
var blue = Math.floor((Math.random() * 256));
//---
//--- Extra check for Internet Explorers, its Math.random is not random enough.
if(!/MSIE 9/i.test(navigator.userAgent) && !/MSIE 10/i.test(navigator.userAgent) && !/rv:11.0/i.test(navigator.userAgent)){
red = Math.floor((('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 256));
green = Math.floor((('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 256));
blue = Math.floor((('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 256));
};
//---
//--- nodejs code
/*
crypto = Npm.require('crypto');
red = Math.floor((parseInt(crypto.randomBytes(8).toString('hex'), 16)) * 1.0e-19 * 256);
green = Math.floor((parseInt(crypto.randomBytes(8).toString('hex'), 16)) * 1.0e-19 * 256);
blue = Math.floor((parseInt(crypto.randomBytes(8).toString('hex'), 16)) * 1.0e-19 * 256);
*/
//---
red = (red + r)/2;
green = (green + g)/2;
blue = (blue + b)/2;
return 'rgb(' + Math.floor(red) + ', ' + Math.floor(green) + ', ' + Math.floor(blue) + ')';
}
L'exécution de la fonction à l'aide de:
generateRandomComplementaryColor(240, 240, 240);
vous pourriez les avoir dans une certaine luminosité.le contrôle de la quantité de "neon" des couleurs un peu.par exemple, si la "luminosité"
brightness = sqrt(R^2+G^2+B^2)
a l'intérieur d'un certain élevé lié, il aurait délavé, couleur de la lumière à elle.A l'inverse, si c'était dans un certain faible lié, il serait plus sombre.Cela permettrait d'éliminer toutes folles les nombreuses couleurs et, si vous avez choisi un encadrement très élevé ou très bas, ils sont tous assez proches de blanc ou de noir.
Ça va être dur pour obtenir ce que vous voulez de manière algorithmique - les gens ont été l'étude de la théorie de la couleur pour une longue période, et ils ne connaissent même pas les règles.
Cependant, il y a certains les règles que vous pouvez utiliser pour choisir les mauvaises combinaisons de couleurs (c'est à dire, il y a des règles pour les collisions les couleurs, et de choisir des couleurs complémentaires).
Je vous recommande de visiter votre bibliothèque d'art et consulter des livres sur la théorie de la couleur à acquérir une meilleure compréhension de ce qu'est une bonne couleur avant d'essayer de le faire il semble que vous pourriez même ne pas savoir pourquoi certaines combinaisons de travail et d'autres pas.
-Adam
Je recommanderais fortement à l'aide d'une CG HSVtoRGB shader fonction, ils sont géniaux...il vous donne de la couleur naturelle de contrôle comme un peintre, au lieu de contrôle, comme un moniteur crt, qui vous arent sans doute!
C'est une façon de faire 1 valeur flottante.c'est à direGris, en 1000 ds de combinaisons de couleurs et de la luminosité et de la saturation etc:
int rand = a global color randomizer that you can control by script/ by a crossfader etc.
float h = perlin(grey,23.3*rand)
float s = perlin(grey,54,4*rand)
float v = perlin(grey,12.6*rand)
Return float4 HSVtoRGB(h,s,v);
le résultat est GÉNIAL COULEUR RANDOMISATION!ce n'est pas naturel, mais il utilise naturels dégradés de couleurs et il semble organique et controlleably irridescent / pastel paramètres.
Pour perlin, vous pouvez utiliser cette fonction, il est rapide zig zag version de perlin.
function zig ( xx : float ): float{ //lfo nz -1,1
xx= xx+32;
var x0 = Mathf.Floor(xx);
var x1 = x0+1;
var v0 = (Mathf.Sin (x0*.014686)*31718.927)%1;
var v1 = (Mathf.Sin (x1*.014686)*31718.927)%1;
return Mathf.Lerp( v0 , v1 , (xx)%1 )*2-1;
}
Voici quelque chose que j'ai écrit pour un site que j'ai fait.Il va en générer de façon aléatoire un plat couleur d'arrière-plan pour toutes les div avec la classe .flat-color-gen.Jquery n'est nécessaire que pour les fins de l'ajout de css à la page;il n'est pas nécessaire pour la partie principale de ceci, qui est l' generateFlatColorWithOrder() la méthode.
(function($) {
function generateFlatColorWithOrder(num, rr, rg, rb) {
var colorBase = 256;
var red = 0;
var green = 0;
var blue = 0;
num = Math.round(num);
num = num + 1;
if (num != null) {
red = (num*rr) % 256;
green = (num*rg) % 256;
blue = (num*rb) % 256;
}
var redString = Math.round((red + colorBase) / 2).toString();
var greenString = Math.round((green + colorBase) / 2).toString();
var blueString = Math.round((blue + colorBase) / 2).toString();
return "rgb("+redString+", "+greenString+", "+blueString+")";
//return '#' + redString + greenString + blueString;
}
function generateRandomFlatColor() {
return generateFlatColorWithOrder(Math.round(Math.random()*127));
}
var rr = Math.round(Math.random()*1000);
var rg = Math.round(Math.random()*1000);
var rb = Math.round(Math.random()*1000);
console.log("random red: "+ rr);
console.log("random green: "+ rg);
console.log("random blue: "+ rb);
console.log("----------------------------------------------------");
$('.flat-color-gen').each(function(i, obj) {
console.log(generateFlatColorWithOrder(i));
$(this).css("background-color",generateFlatColorWithOrder(i, rr, rg, rb).toString());
});
})(window.jQuery);
Utilisation distinctes-couleurs.
Écrit en javascript.
Il génère une palette de visuellement couleurs distinctes.
distinctes des couleurs est hautement configurable:
- Choisissez combien de couleurs sont dans la palette
- Restreindre la teinte à une gamme spécifique
- Limiter la saturation (saturation) à une gamme spécifique
- Restreindre la légèreté à une gamme spécifique
- Configurer la qualité générale de la palette
