Zufallsgenerator für Farben

Question

Angesichts dieser Funktion möchte ich die Farbe mit einem Zufallsfarbgenerator.

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

Wie kann ich das tun?

Answer 1

Für anständige Zufälligkeit.

Zufällige Farbe

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0).slice(-6)}`

Zufälliges Alpha, zufällige Farbe.

`#${crypto.getRandomValues(new Uint32Array(1))[0].toString(16).padStart(8, 0)}`

Answer 2

Sie könnten diese einfache Funktion verwenden

function getRandomColor(){
 var color =  "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
 return color;
}

Answer 3

Utilice verschiedene Farben .

Es erzeugt eine Palette von visuell unterschiedliche Farben.

distinct-colors ist in hohem Maße konfigurierbar:

• Wählen Sie, wie viele Farben in der Palette sind
• Beschränkung des Farbtons auf einen bestimmten Bereich
• Beschränken Sie die Farbsättigung auf einen bestimmten Bereich
• Beschränken Sie die Helligkeit auf einen bestimmten Bereich
• Konfigurieren Sie die allgemeine Qualität der Palette

Answer 4

Ich wollte Folgendes schaffen sehr ausgeprägte und lebendige Farben (für die grafische Darstellung). Für ernsthafte Aufgaben ist hsl eine bessere Methode als rgb. Falls erforderlich, können Sie hsl in rgb konvertieren, wie bereits von anderen erwähnt.

Einfacher Weg:

• Erstellen Sie eine zufällige Farbton von 0 bis 360
• Erstellen Sie eine zufällige Sättigung von 0,5 bis 1 (oder 50 bis 100) für die Lebendigkeit

• Setzen Sie die Helligkeit auf 50 %, um die beste Sichtbarkeit zu erreichen.

  color_generator = () => hsl (360*Math.random(), 0.5 + Math.random()/2, 0.5)

geänderte Weise

Es erzeugt ein sehr schönes Spektrum heller und lebendiger Farben, aber das Problem ist, dass im üblichen Farbspektrum rote, grüne und blaue Farbtöne viel dominanter sind als Gelb, Cyan und Lila. Also habe ich den Farbton mit der Funktion acos umgewandelt. Der technische Grund ist sehr langweilig, daher überspringe ich ihn, aber Sie können im Wiki nachschlagen.

color_generator = () => {
    let color_section = Math.floor(Math.random()/0.33) // there are three section in full spectrum
    let transformed_hue = Math.acos(2*Math.random() - 1)/3.14 // transform so secondary colors would be as dominant as the primary colors
    let hue = 120*color_section + 120*transformed_hue
    return hsl(hue, 0.5 + Math.random()/2, 0.5)
}

Das Ergebnis ist das beste Farbspektrum, das ich nach dem Experimentieren mit vielen anderen Methoden hatte.

Referenzen:

• https://observablehq.com/@d3/farbschemata
• https://en.wikipedia.org/wiki/HSL_and_HSV

Answer 5

Array.prototype.reduce macht es sehr sauber.

["r", "g", "b"].reduce(function(res) {
    return res + ("0" + ~~(Math.random()*256).toString(16)).slice(-2)
}, "#")

---

Bei alten Browsern ist eine Unterlegscheibe erforderlich.