Tutoriel Faire des arcs en ciel ennuyeux et d'autres cycles de couleur en Javascript
Ceci est un tutoriel sur la façon de produire des séquences de couleurs discrètes, pour une utilisation dans des polices, des graphiques ou des tableaux, comme dans les bandes de couleurs présentées ici, ou le titre de cet article.
Je vais utiliser javacsript pour mes exemples de code, mais vous pouvez utiliser les mêmes techniques de base dans toutes les langues, et en effet je développé ces astuces en C, mais je l'utilise maintenant les mêmes vieux trucs en C ++, Perl, traitement, Java, flash Actionscript et d'autres langues.
Eh bien, nous allons y arriver, allons-nous?
Vous préférez faire un don par la poste? Voici comment.
La conversion de R, G, B à des valeurs de notation hexadécimale HTML
Sur les écrans d'ordinateur, vous obtenez des couleurs différentes en combinant rouge, vert et bleu. Les niveaux de rouge, vert et bleu sont appelés « composantes de couleur ».
Pour générer des séquences comme de toutes les couleurs, je vais être manipuler les différents composants RVB de chaque couleur ultérieure. La première chose que j'ai besoin est une fonction d'utilité pour convertir rouge individuels, les valeurs vertes et bleues à un hexadécimal HTML spécification de couleur, qui ressemble à ceci:
En utilisant cette formule, vous verrez que la #AABBCC couleur correspond aux valeurs suivantes:
Ce que je besoin de ce tutoriel est une fonction qui fait l'inverse - convertit 170187204 retour à #AABBCC. Je l'utiliser comme ceci:
Et sachez que la chaîne « #AABBCC » est la valeur de sortie, prêt à être sortie en HTML, en utilisant la commande document.write ().
En Perl, vous pouvez faire la même conversion en une ligne, comme suit:
Si vous pouvez vivre sans ancienne spécification de couleur CSS, vous pouvez également produire des couleurs plus simplement sans byte2Hex, comme ceci:
cycles d'onde sinusoïdale
Les ondes sinusoïdales sont vraiment utiles dans la vie réelle. contrairement à ce que vous pourriez avoir inadvertantly appris en classe triglycéride, et ils sont particulièrement utiles pour toutes sortes de choses liées aux graphiques et de la musique.
A cette époque, je voudrais présenter mes excuses pour la façon dont merdique le π (PI) personnage regarde dans la police san-serif utilisé dans 80% des ordinateurs là-bas. Si j'utilisais Roman beau temps, le caractère π serait beaucoup plus recognizeable. Malheureusement, je ne suis pas, parce que pour à peu près tout ce que je trouve plus facile à lire la police de San Serif. Mais je digresse.
Il existe une relation entre ces unités tc qui sont utilisés avec la fonction Math.sin () (appelée radians) et les degrés plus familiers qui vont 0-360 (degrés sont une ancienne unité de Babylone - les Babyloniens vraiment aimé des chiffres comme 60 et 360 parce que toutes sortes de chiffres vont régulièrement en eux. en outre, les Babyloniens avaient pas encore inventé la tarte.)
J'ai personnellement π mémorisé jusqu'à 8 chiffres. Une sorte de perte de matière grise, vraiment.
En parlant de la matière grise.
En utilisant des ondes sinusoïdales pour faire des nuances de gris
Je peux utiliser pour faire la fluctuation des valeurs de couleur la valeur de retour de Math.sin (). Cependant, je dois faire un peu de conversion. Comme indiqué ci-dessus, la valeur de retour de Math.sin () passe de -1 à 1. Les composants de couleur j'utiliser pour rendre les couleurs RVB vont de 0 à 255. Je dois traduire un numéro de la plage (-1 - > 1) en (0 -> 255).
Ce n'est pas trop difficile parce que nous savons que nous voulons que la valeur de sinus pour commencer à une valeur centrale, puis monter et descendre d'un certain montant. Depuis l'onde sinusoïdale monte à 1, et à -1, il est déjà normalisé (ce qui signifie que sa valeur maximale est de 1, un très utile). Nous pouvons simplement multiplier par un autre numéro, et il monterons à ce numéro, et vers le bas à la version négative de ce nombre.
Pour nos valeurs de couleur, il fonctionne bien si nous utilisons 255/2 pour notre valeur centrale, et ont la valeur de sinus aller de haut en bas avec une amplitude de 255/2 (qui nous mènera à 255 et à 0.
J'exprime habituellement ce, en utilisant des nombres entiers, comme. qui n'est pas exactement la même chose, mais assez près.
De manière plus générale, lorsque l'on veut utiliser une onde sinusoïdale à osciller quelque chose, nous utiliserons la formule
fréquence est une constante qui contrôle la vitesse des ondes oscille
incrément est une variable qui compte jusqu'à, typiquement fourni par une boucle
les contrôles d'amplitude quelle hauteur (et basse) l'onde continue
centre contrôle la position du centre de l'onde.
Maintenant, je peux modifier ma boucle d'onde sinusoïdale originale et produire une série de couleurs de test. A l'intérieur du document.write je produis une couleur en appelant RGB2Color (v, v, v). Depuis que je passe la même valeur en 3 fois, pour le rouge, le vert et le bleu, je vais obtenir une couleur grise. En couleurs gris, rouge, vert et bleu ont la même valeur. Pour voir la couleur, imprimer un caractère de bloc, en utilisant la valeur unicode - # 9608 ;.
Et voici ce que le code produit - une sorte d'onde sinusoïdale couleur:
Pour le plaisir, je peux essayer d'utiliser une série de valeurs différentes pour la fréquence. Voilà ce que je vais si j'ajouter une boucle extérieure supplémentaire qui change la valeur de la fréquence.
L'utilisation sinusoïdales hors de phase des ondes pour faire des arcs en ciel
Maintenant, comme je l'ai mentionné, la raison pour laquelle le gradient ci-dessus est gris est beacuse j'utilise la même valeur pour le rouge, le vert et le bleu. Une façon nous pouvons essayer d'obtenir des couleurs est d'ajouter une constante à la valeur de v que nous utilisons pour les paramètres vert et bleu. Ainsi, au lieu de dire: Je pourrais dire: Ce produit la séquence de couleurs suivant:
Ce qui est intéressant, mais il est pas tout à fait ce que je veux. Une meilleure technique est de générer 3 hors de phase des ondes sinusoïdales, en faisant quelque chose comme ceci:
Qui produit ceci:
Comme vous pouvez le voir, je suis en utilisant les valeurs 2 et 4 pour modifier l'alignement (ou phase) des ondes sinusoïdales vert et bleu. Je choisis 2 et 4, car ils ont presque diviser la gamme de l'onde sinusoïdale (2π ou 6.2) en trois parties égales, ce qui met chaque onde sinusoïdale d'environ 1/3 d'un cycle ou 120 °, en opposition de phase, comme suit:
Si je voulais exactement 120 ° que je peux utiliser 2 * Math.PI. / 3 à la place de 2 et 4 * Math.PI. / 3 à la place de 4, qui produit cette presque identique (mais parfait) cycle de couleur:
Cependant, les résultats sont si proches, que je pense que 2 et 4 sont très bien substituts. On dit que les anciens Egyptiens pensaient que π était égal à trois. Dans ce tutoriel, nous sommes le code va comme un Egyptien.
En savoir plus sur le cycle de teinte
Ce phénomène de base - que trois ondes sinusoïdales 120 ° hors phase produit un effet arc en ciel est quelque chose que j'ai connu depuis longtemps - depuis les années 1980 en fait. Je l'origine découvert juste en jouant avec l'aide d'ondes sinusoïdales pour faire la couleur (une activité fréquente qui a pris la place d'avoir une vie). Une fois que j'appris cette astuce, j'ai commencé à l'utiliser chaque fois que je voulais un assortiment de couleurs vives. Par exemple, les points de ma Whitney Music Box sont colorés en utilisant ce système.
Plus tard, quand j'ai appris plus sur la théorie des couleurs, je trouve que ce que je fais est à l'origine essentiellement la teinte de la couleur de voyager autour du cercle d'une roue de couleur. Si vous tracer le chemin que je fais sur le cercle de saturation de la teinte souvent observée dans les nuanciers, vous trouverez qu'il ne produit pas un cercle parfait, mais plus d'un motif de trèfles, comme ceci:
Même si elle ne fait pas un cercle parfait de teinte, la minette onde sinusoïdale rend un gradient assez de couleur, et il est assez facile d'obtenir un effet arc en ciel en quelques lignes de code. Je préfère en fait à la « correcte » cycle de teinte HSB / HSL, car il a une luminosité plus cohérente. Il minimise les rayons en jaune, cyan et magenta, que vous pouvez voir dans l'image.
Maintenant, je vais parler de la façon de modifier la fonction de produire une plus grande variété de couleurs et différentes nuances, comme les pastels.
il généralisant
faire pastels
L'astuce de base pour obtenir des pastels est de changer la gamme des composants de couleur pour utiliser des valeurs de couleur plus claire pour les composants de couleur. Donc, quand on convertit les valeurs de sinus, au lieu de convering à la gamme complète (0 -> 255), nous convertissons à quelque chose comme (205 - 255). Nous changeons les deux derniers paramètres (centre et largeur) comme suit. Avant: après: Dans le code modifié, le 230 est le centre de l'onde sinusoïdale, et la figure 25 est l'écart maximum de cette valeur centrale. Ainsi, l'onde sinusoïdale commence à 230, monte à (230 + 25) et descend à (230-25). En d'autres termes, il a une portée de (205-255).
Et cela fait une bande de pastel:
Je peux obtenir des pastels plus sombres en utilisant une gamme plus large (centre = 200, largeur = 55), comme suit:
Plus rayures en augmentant la fréquence
Lorsque vous modifiez la valeur de la fréquence, vous pouvez obtenir les couleurs pour changer plus rapidement ou plus lentement. Jusqu'à présent, je suis la plupart du temps utilise une valeur de fréquence de 0,3, mais voici quelques autres valeurs:
Expérimenter avec la phase
Pour que l'effet arc-en-base, je séparé les phases de chaque onde sinusoïdale de 120 °. Qu'advient-il si je mets les phases plus rapprochées? Découvrons-le:
Obtenez plus de variété en utilisant des fréquences distinctes pour chaque composant
Une autre astuce que je l'ai utilisé qui produit une plus grande variété de couleurs est de mettre chaque composante de couleur sur une fréquence différente. Voici le code. et voici à quoi il ressemble:
Si je sépare les canaux individuels, vous pouvez voir ce qui se passe:
Obtenir des cycles pour répéter
Disons que vous voulez que le cycle de couleur pour répéter tous les 6 étapes. Comment faites-vous? La façon dont j'accomplir ceci est en utilisant une valeur de fréquence qui correspond à 1 / 6ème de 2π. Rappelez-vous que l'onde sinusoïdale se répète toutes 2π, donc cela fera les couleurs répéter tous les 6 incréments. Voici le code. Et voici à quoi il ressemble:
Obtenir des cycles de ne pas répéter
Si vous ne voulez pas les couleurs de répéter exactement, utilisez les valeurs de fréquence qui ne vont pas uniformément dans 2π. Il se trouve que le nombre 2.4 fonctionne très bien pour cela. 2.4 en radians, est très proche de l'angle d'or (137,51 ° C). qui est l'angle que beaucoup de plantes poussent de nouvelles pousses afin de maximiser la lumière du soleil reçue par les feuilles. Ici, je suis en utilisant essentiellement la même technique - je maximise la distance entre les répétitions de couleurs (ce qui serait comme des feuilles qui se chevauchent autour d'une tige). 2.4 est une bonne fréquence à utiliser si vous choisissez des couleurs pour un graphique ou un graphique, et vous ne savez pas combien de données les valeurs que vous allez avoir besoin de tracer. Voici le code. Et voici à quoi il ressemble à une fréquence de 2,4:
Si vous combinez cela avec l'astuce d'utiliser freqencies séparés pour chaque couleur, Historica et qu'aucune des fréquences individuelles sont des multiples de l'autre, vous pouvez obtenir encore plus de variété. J'utilise ici la fréquence de 1,666, 2,666 et 4,666.
Enfin, voici une fonction qui fait l'effet arc en ciel sur une ligne de texte.
Eh bien, voilà. J'espère que vous avez apprécié le tutoriel!
Vous préférez faire un don par la poste? Voici comment.