Tutorial Herstellung lästige Regenbogen und andere Farbzyklen in Javascript
Dies ist eine Anleitung, wie man Folgen diskreter Farben zu erzeugen, für die Verwendung in Schriften, Grafiken oder Tabellen, wie sie in dem Farbstreifen hier gezeigt ist, oder der Titel dieses Artikels.
Ich werde für meine Code-Beispiele verwenden javacsript, aber Sie die gleichen grundlegenden Techniken in jeder Sprache verwenden, und in der Tat entwickelte ich ursprünglich diese Tricks in C, aber ich benutze jetzt die gleichen alten Tricks in C ++, Perl, Verarbeitung, Java, Flash Actionscript und andere Sprachen.
Nun, lasst uns um es bekommen, sollen wir?
Bevorzugen Sie per E-Mail zu spenden? Hier ist wie.
Umwandeln von R, G, B-Werte zu HTML-Hex-Notation
Auf Computer-Monitore, erhalten Sie verschiedene Farben von Rot, Grün und Blau kombiniert. Die roten, grünen und blauen Ebenen ‚Farbkomponenten‘ genannt.
Um Regenbogen-ähnlichen Sequenzen von Farben zu erzeugen, werde ich die einzelnen RGB-Komponenten jeder nachfolgenden Farbe zu manipulieren. Das erste, was ich brauche, ist eine Nutzenfunktion der Rot-, Grün- und Blau-Wert zu einer HTML-Hex-Farbspezifikation zu konvertieren, die etwa wie folgt aussieht:
Mit dieser Formel, werden Sie feststellen, dass die Farbe #AABBCC auf die folgenden Werte entspricht:
Was ich für dieses Tutorial brauchen, ist eine Funktion, die das Gegenteil tut - konvertiert 170.187.204 zurück zu #AABBCC. Ich würde es wie folgt verwenden:
Und wissen, dass die Zeichenfolge ‚#AABBCC‘ ist in dem Ausgangswert, bereit Ausgabe als HTML zu sein, mit dem document.write () Befehl.
In Perl, können Sie diese gleiche Umwandlung in einer Zeile tun, etwa so:
Wenn Sie ohne eine alten Stil CSS-Farbspezifikation leben können, können Sie auch Farben produzieren mehr einfach ohne byte2Hex, etwa so:
Sinuswellenzyklen
Sinuswellen sind im wirklichen Leben wirklich nützlich. im Gegensatz zu dem, was Sie in trig Klasse inadvertantly gelernt haben könnten, und sie sind vor allem für alle Arten von Dingen in Bezug auf Grafik und Musik nützlich.
Zu diesem Zeitpunkt würde Ich mag, wie beschissen das π (PI) Charakter sieht in dem san-serif in 80% der Computer da draußen verwendet entschuldigen. Wenn ich schöne Times Roman verwendet hat, wäre der π Charakter weit mehr recognizeable sein. Leider bin ich nicht, denn für fast alles, was ich das San Serifenschrift besser lesbar zu finden. Aber ich schweife ab.
Es gibt eine Beziehung zwischen diesen π-Einheiten, die mit dem Math.sin () Funktion (so genannte Radiant) und die bekannteren Grad verwendet werden, die von 0-360 gehen (Grad sind eine alte babylonische Einheit - die Babylonier wirklich Zahlen mochte wie 60 und 360, da alle Arten von Zahlen gleichmäßig in ihnen zu gehen. auch hatten die Babylonier noch nicht erfunden Kuchen.)
Ich habe persönlich π bis 8 Ziffern auswendig gelernt werden. Art von einer Verschwendung von der grauen Substanz, wirklich.
Apropos grauen Substanz.
Sinuswellen in Graustufen zu machen
Ich kann den Rückgabewert von Math.sin () verwenden, um Farbwerte zu machen fluktuiert. Aber ich brauche ein wenig Umwandlung zu tun. Wie oben gezeigt, geht der Rückgabewert von Math.sin () von -1 bis 1. Die Farbkomponenten I verwenden, um RGB-Farben von 0 bis 255. So muß ich aus dem Bereich eine Reihe übersetzen gehen zu machen (-1 - 1>) in (0 -> 255).
Dies ist nicht zu hart, weil wir wissen, dass wir der Sinuswert wollen zu einem bestimmten Mittelwert zu starten, und dann nach oben und unten um einen gewissen Betrag gehen. Da die Sinuswelle bis zu 1 geht, und bis zu -1, ist es bereits normalisiert (was bedeutet, dass es Maximalwert ist 1, eine sehr nützliche Zahl). Wir können multiplizieren sie nur durch eine andere Zahl, und es wird auf diese Zahl steigen, und bis auf die negative Version dieser Zahl.
Für unsere Farbwerte, es wird gut funktionieren, wenn wir 255/2 für unser Zentrum Wert verwenden, und hat den Sinuswert nach oben und unten mit einer Amplitude von 255/2 (die uns zu 255 nehmen und bis auf 0.
Ich dies in der Regel ausdrücken, ganze Zahlen mit, wie. das ist nicht genau die gleiche, aber nahe genug.
Allgemeiner gesagt, wenn wir eine Sinuswelle schwingen etwas verwenden wollen, werden wir die Formel verwenden
Frequenz ist eine Konstante, die, wie schnell sich die Welle oszilliert steuert
Inkrement eine Variable ist, die hochzählt, in der Regel durch eine Schleife bereitgestellt
Amplitude steuert, wie hoch (und niedriger) die Welle geht
Zentrum steuert die Mittelposition der Welle.
Jetzt kann ich meine ursprüngliche Sinus-Schleife, modifizieren und eine Reihe von Testfarben erzeugen. Im Inneren des document.write produziere ich eine Farbe durch RGB2Color Aufruf (v, v, v). Da ich den gleichen Wert in 3 mal passieren, für Rot, Grün und Blau, werde ich eine graue Farbe erhalten. In grauen Farben, rot, grün und blau haben den gleichen Wert. Um die Farbe zu sehen, drucke ich einen Blockcharakter, den Unicode-Wert mit - # 9608 ;.
Und hier ist, was der Code erzeugt - eine Art von Farbe Sinuswelle:
Für Spaß, ich kann versuchen, eine Reihe von unterschiedlichen Werten für Frequenz. Das ist, was ich, wenn ich eine zusätzliche äußere Schleife hinzufügen, die den Wert der Frequenz ändert.
Out-of-Phase unter Verwendung von Sinuswellen zu machen Regenbögen
Nun, wie ich bereits erwähnt, ist der Grund der oben Steigung grau aussieht, ist beacuse ich den gleichen Wert für Rot, Grün benutze und blau. Ein Weg, können wir versuchen, Farben zu erhalten, ist eine Konstante auf den Wert von v hinzuzufügen, die wir für die grünen und blauen Parameter verwenden. Also anstatt zu sagen: Ich könnte sagen: Daraus ergibt sich die folgende Farbfolge:
Das ist interessant, aber es ist nicht ganz das, was ich will. Eine bessere Technik ist 3 out-of-Phasen-Sinuswellen zu erzeugen, durch so etwas wie dies zu tun:
Was ergibt dies:
Wie man sehen kann ich die Werte 2 und 4 bin mit der Ausrichtung (oder Phase) der grünen und blauen Sinuswellen zu ändern. Wählte ich 2 und 4, weil sie fast den Bereich der Sinuswelle Divide (2π oder 6.2) in drei gleiche Teile, die jede Sinuswelle etwa 1 / 3rd eines Zyklus versetzt, oder 120 °, außer Phase ist, so wie:
Wenn ich genau 120 ° wollte kann ich 2 * Math.PI / 3 anstelle von 2 und 4 * Math.PI / 3 anstelle von 4, der diese nahezu identisch erzeugt (aber perfekt) Farbzyklus:
Allerdings sind die Ergebnisse so nah, dass ich glaube, 2 und 4 sind in Ordnung ersetzt. Es wird gesagt, dass die alten Ägypter gedacht, dass π gleich drei war. Und in diesem Tutorial, wir sind Gonna Code wie ein Ägypter.
Mehr über den Farbton Zyklus
Diese grundlegende Phänomen - dass drei 120 ° out-of-Phasen-Sinuswellen-Effekt einen Regenbogen erzeugt, ist etwas, was ich für eine lange Zeit gekannt habe - seit Mitte der 1980er Jahre tatsächlich. Ich entdeckte es ursprünglich nur von mit der Verwendung von Sinuswellen spielen um zu Farbe (eine häufige Aktivität, die die stattfand, ein Leben zu haben) zu machen. Sobald ich diesen Trick gelernt, begann ich es zu benutzen, wenn ich eine Auswahl von hellen Farben wollte. Zum Beispiel werden die Punkte in meiner Whitney Music Box gefärbt mit diesem System.
Später, als ich mehr über Farbenlehre gelernt, fand ich heraus, dass das, was ich tue, ist im Grunde den Farbton der Farbe verursacht um den Kreis eines Farbrades zu reisen. Wenn Sie den Pfad zeichnen, die ich auf dem Farbton-Sättigung Kreis mache häufig in Farbauswahl zu sehen ist, finden Sie es nicht einen perfekten Kreis produziert, sondern eher ein Kleeblatt-Muster, etwa so:
Auch wenn es keinen perfekten Bunttonkreis macht, macht das Sinus Dreiblatt einen hübschen Farbverlauf, und es ist ziemlich einfach, einen Regenbogeneffekt in nur wenige Zeilen Code zu bekommen. Ich ziehe es tatsächlich auf den „richtigen“ HSB / HSL Farbton Zyklus, da es besser Helligkeit hat. Es minimiert die Speichen in Gelb, Cyan und Magenta, die Sie im Bild sehen können.
Jetzt werde ich darüber sprechen, wie die Funktion zu ändern, um eine größere Auswahl an Farben zu erzeugen, und verschiedener Schattierungen, wie Pastelle.
Verallgemeinert man es
Herstellung von Pastelle
Der grundlegende Trick zu bekommen Pastelle ist die ganze Skala der Farbkomponenten zu ändern, für die Farbkomponenten hellfarbigere Werte zu verwenden. Wenn wir also die Sinuswerte umwandeln, statt convering auf den vollen Bereich (0 -> 255), wandeln wir so etwas wie (205 - 255). Wir ändern die letzten beiden Parameter (Mitte und Breite) wie folgt. Vorher: Nachher: In dem geändertenen Code, der 230 ist der Mittelpunkt der Sinuswelle, und die 25 ist die maximale Abweichung von diesem Mittelwert. So ist die Sinuswelle beginnt bei 230, geht bis zu (230 + 25) und geht bis zu (230-25). Mit anderen Worten, es hat eine Reihe von (205-255).
Und das macht einen Pastell Streifen:
Ich kann dunkler Pastelle erhalten, indem ein breiteres Spektrum mit (Mitte = 200, width = 55), etwa so:
Erfahren Sie mehr Streifen durch die Erhöhung der Häufigkeit
Wenn Sie den Wert der Frequenz ändern, können Sie die Farben erhalten, um schneller zu ändern, oder langsamer. Bis jetzt habe ich meistens einen Frequenzwert von 0,3 wurde unter Verwendung, aber hier sind einige andere Werte:
Das Experimentieren mit Phase
Für den Grundregenbogeneffekt, getrennt I die Phasen jeder Sinuswelle um 120 °. Was passiert, wenn ich die Phasen näher zusammen? Lass es uns herausfinden:
Mehr Vielfalt durch Verwendung von getrennten Frequenzen für jede Komponente
Ein weiterer Trick, die ich verwendet habe, die größer ist Farbvarietät produziert, ist jede Farbkomponente auf einer anderen Frequenz zu setzen. Hier ist der Code. und hier ist, wie es aussieht:
Wenn ich die einzelnen Kanäle trennen, können Sie sehen, was los ist:
Erste Zyklen zu wiederholen
Angenommen, Sie haben die Farbzyklus wollen alle 6 Schritte zu wiederholen. Wie machst du das? Die Art, wie ich dies zu erreichen ist durch einen Frequenzwert verwendet, der auf 1 / 6. 2π entspricht. Denken Sie daran, dass die Sinuswelle jedes 2π wiederholt, so wird dies macht die Farben alle 6 Schritte wiederholen. Hier ist der Code. Und hier ist, wie es aussieht:
Zyklen immer nicht wiederholen
Wenn Sie nicht wollen, die Farben exakt wiederholen, dann Frequenzwerte benutzen, die gehen nicht gleichmäßig in 2π. Es stellt sich heraus, dass die Zahl 2.4 sehr gut für das funktioniert. 2.4 in Radianten, ist sehr nah an den goldenen Winkel (137.51 °). Das ist der Winkel, dass viele Pflanzen neue Triebe wachsen um das Sonnenlicht zu maximieren, indem sie Blätter erhalten. Hier verwende ich im Wesentlichen die gleiche Technik - ich bin die Maximierung der Abstand zwischen den Farb Wiederholungen (die wie überlappende Blätter um einen Stamm wäre). 2.4 ist eine gute Frequenz zu verwenden, wenn Sie Farben für ein Kreisdiagramm oder Diagramm sind die Auswahl, und Sie sind nicht sicher, wie viele Datenwerte den Sie zeichnen müssen gehen. Hier ist der Code. Und hier ist, wie es mit einer Frequenz von 2,4 aussieht:
Wenn Sie dies mit dem Trick der Verwendung separater freqencies für jede Farbe kombinieren, und sicherzustellen, dass keine der einzelnen Frequenzen Vielfache voneinander sind, können Sie noch mehr Abwechslung bekommen. Hier bin ich mit Frequenz von 1.666, 2.666 und 4.666.
Schließlich ist hier eine Funktion, die den Regenbogeneffekt auf eine Textzeile der Fall ist.
Das war's. Ich hoffe, dass Sie das Tutorial genossen!
Bevorzugen Sie per E-Mail zu spenden? Hier ist wie.