Jouer avec les mathématiques : faire des GIF animé et HTML5 (6 / 15 étapes)

Étape 6: Notions de base - couleurs

Il existe deux façons très communs de définir une couleur : les modèles RVB et TSL . Les deux sont pris en charge par MathVision, et leur utilisation est décrite dans cette étape.

Modèle RVB

Avec le soi-disant modèle RVB, une couleur est définie par Red, Green et Blue composants.

Pour utiliser le modèle de couleur RVB, vous définit votre formule comme rgb(x,y) ou rgb(x,y,t).

Lors des étapes précédentes, n’oubliez pas que votre fonction rgb utilisé color(luma) avec un seul argument, pour produire des échelles de gris ou noir et blancs. Maintenant, pour la sortie de couleur, vous devez appeler RVB avec trois arguments : color(red,green,blue). Chaque argument doit varier de 0 à 255.

  • Color(255,0,0) est le rouge primaire, color(0,255,0) est vert primaire, color(0,0,255) est bleu primaire ;
  • Color(0,0,0) noir, color(255,255,255) est blanc ;
  • Color(127,0,0) est rouge foncé.

Formule 1 (RGB)

 WIDTH = 250; RATIO = 1; X_MIN = 0; X_MAX = 255; Y_MIN = 0; Y_MAX = 255; color rgb(x, y) { int radius = 80; int d1 = dist(x, y, 80, 175); int d2 = dist(x, y, 175, 175); int d3 = dist(x, y, 127, 80); int r = d1 < radius ? 255 : 0; int g = d2 < radius ? 255 : 0; int b = d3 < radius ? 255 : 0; return color(r, g, b); } 

La formule ci-dessus génère la première image de cette étape.

  • Pour le cercle rouge, nous avons contribution intégral-rouge (255) si nous sommes à l’intérieur d’un cercle centré en x = 80 et y = 175, dans le cas contraire, nous avons 0.
  • Similaires pour le vert et bleu, avec différents centres.
  • Si nous sommes en dehors de n’importe quel cercle, r, g et b sont tous nul ; nous obtenons noirs, parce que (0, 0, 0) est noire.

Que se passe-t-il si, au lieu d’un fond noir, nous voulons un fond blanc ? Il s’agit de notre deuxième photo et la deuxième formule pour cette étape.

Formule 2 (RGB)

 WIDTH = 250; RATIO = 1; X_MIN = 0; X_MAX = 255; Y_MIN = 0; Y_MAX = 255; color rgb(x, y) { int radius = 80; int d1 = dist(x, y, 80, 175); int d2 = dist(x, y, 175, 175); int d3 = dist(x, y, 127, 80); int r = d1 < radius ? 255 : 0; int g = d2 < radius ? 255 : 0; int b = d3 < radius ? 255 : 0; return r+g+b ? color(r, g, b) : color(255); } 

La formule ci-dessus est similaire à la précédente, avec ce changement à la dernière ligne :

  • Si toutes les composantes sont nulles (c'est-à-dire r + g + b est égal à zéro), puis nous sommes à l’extérieur d’un cercle, et nous retournons color(255) qui est blanc (et qui est le même que color(255,255,255) ) ;
  • dans le cas contraire. retour color(r,g,b) comme avant.

Modèle TSL

Pour le modèle TSL, au lieu d’utiliser les composantes rouges, vert et bleu, une couleur est définie par trois autres types d’arguments :

  • H, la teinte--la couleur pure dans la gamme de couleurs possibles: 0 = rouge, 150 = bleu ;
  • S, la saturation--comment les couleurs sont vives ou Fané : 50 = pastel, 255 = vives ;
  • B, la luminosité : 50 = noir, 255 = plus léger.

Formule 3 (HSB)

 WIDTH = 250; RATIO = 1; X_MIN = 0; X_MAX = 255; Y_MIN = 0; Y_MAX = 255; color hsb(x, y) { int radius = 80; int b = dist(x, y, 127, 127) < 80 ? 64 : 255; return color(x, y, b); } 

Dans la formule ci-dessus, ce qui donne la troisième photo de cette étape, nous faisons ce qui suit :

  • Varier la teinte avec x (horizontale) et la saturation avec y (verticale). Le haut de l’image est vif, tandis que le fond est tellement délavé qu’il devient blanc.
  • En outre, nous assombrir un disque centré au milieu de l’image au (127 127) ; Si nous sommes à l’extérieur du disque, nous avons mis b à 255 (intensité maximum), sinon à 64 (assez sombre).

Articles Liés

Comment faire des Gifs animés sur Pizza

Comment faire des Gifs animés sur Pizza

si vous passez du temps dans les Forums communautaires de Instructables >> Blog communautaire, verrait qu'il y a quelque temps j'ai commencé à parler de l'art que je fais pour célébrer la commande de pizza au QG Instructables tous les jeudis. Je l'a
Lire esprit... avec les mathématiques !

Lire esprit... avec les mathématiques !

Quelques mois, j'étais assis autour de s'ennuyer sur mon ordinateur, quand mon père m'a envoyé un email. Le Courriel contenait un lien vers un jeu de puzzle de mathématiques. Pour ceux d'entre vous trop peur de cliquer sur le lien, ou qui ne veulent
Faire un GIF animé

Faire un GIF animé

Remarque : cette page peut prendre un moment pour chargerRien ne résume les choses comme un GIF animé, et si vous avez passé du temps sur l'Internet vous avez sans doute vu quelques-uns. Pour ceux qui sont arrivés en retard à la classe, une image GIF
Comment faire un Gif animé dans Photoshop (et imprimer un flipbook!)

Comment faire un Gif animé dans Photoshop (et imprimer un flipbook!)

j'ai voulu faire un gif animé d'un système mécanique de la jambe que j'ai conçu (et publiera une instructable tout bientôt), et j'ai pensé que je poste un rapide tutoriel sur comment faire des gifs animés dans photoshop.Etape 1: Assembler vos couches
Comment faire des GIFs avec VLC player et Adobe Photoshop

Comment faire des GIFs avec VLC player et Adobe Photoshop

ce tutoriel est de faire des GIFs que beaucoup de gens aujourd'hui voudrais faire, en particulier des blogueurs.Commentaires ? Suggestions ? Questions ? S'il vous plaît mettre là-bas ! :)Cette vidéo vous est présentée par groupe onze S20 ID 111.
Comment : modifier les Images pour faire un GIF

Comment : modifier les Images pour faire un GIF

Modifier les images avec des techniques simples de photoshop et créez un GIF !Choses dont vous aurez besoin :PhotoshopToute image JPEG de votre choixÉtape 1: Ouvrez votre fichier sur PhotoshopPour commencer, allez dans fichier - ouvrir - choisissez u
Jouer avec les neurones rougeoyants ? Un nouveau cadre pour la simulation interactive de neurone dans le matériel.

Jouer avec les neurones rougeoyants ? Un nouveau cadre pour la simulation interactive de neurone dans le matériel.

La théorie EEPA présente et la mise en œuvre matérielle correspondante ont été développés dans le cadre de mes recherches de thèse de baccalauréat. Les explications données ici sont écrits pour un large public. Si vous êtes intéressé par la thèse, le
Faire un GIF animé d’un petit objet

Faire un GIF animé d’un petit objet

l'idée est de prendre un court clip vidéo d'un objet en rotation et les convertir en format GIF89a qui jouera dans une boucle sans fin dans un navigateur web.En utilisant une platine motorisée tel qu'un lecteur de disque, l'objet peut être fait pour
Comment faire un GIF animé sur un fichier vidéo en utilisant seulement le freeware

Comment faire un GIF animé sur un fichier vidéo en utilisant seulement le freeware

pour ceux d'entre vous qui ne connaissent pas un GIF est le plus couramment utilisé format supportant plusieurs images dans un slidshow ou une animation d'image. en d'autres termes, vous pouvez mettre de courtes vidéos où aller normalement seules les
Comment faire un GIF animé

Comment faire un GIF animé

Dans ce tutoriel je va vous montrer comment faire un gif animé de base, avec quelques techniques de base montage dans Adobe Photoshop CS5. Veuillez noter pour ce tutoriel que vous avez besoin d'une compréhension de base de photoshop.Étape 1: Ouvrez P
Emballage colis - mains sur les mathématiques

Emballage colis - mains sur les mathématiques

Vous pouvez joindre mathématiques avec plaisir ?Oui !Pour la plupart des enfants et des adultes mathématiques pourrait être ennuyeux et difficile. Mais tous les jours nous utilisons mathématiques pour faire toutes sortes de choses dans nos vies. Emba
Peu de frapper et booléennes mathématiques sans les mathématiques

Peu de frapper et booléennes mathématiques sans les mathématiques

vue d'ensembleQuand je suis peu cogner ou programmation de microcontrôleurs, parfois que j'ai vraiment envie de se concentrer sur ce que les modèles binaires ressemblent, vraiment visualiser ce que font les zéros et uns.  Mais le devoir de faire le c
Jouer avec les régulateurs de tension

Jouer avec les régulateurs de tension

quelqu'un qui a joué avec ces petites bêtes de somme de notre monde et je me demandais comment ils fonctionnent, lire sur. Les régulateurs de terminales standards à trois comme les 7805(5v) sont ce que la plupart des gens voir et utilisent sans pense
BRICOLAGE pour les filles : Comment faire des Kanzashi perles fleur de ruban de Satin

BRICOLAGE pour les filles : Comment faire des Kanzashi perles fleur de ruban de Satin

Mesdames ! Ce joli tutoriel sur comment faire Kanzashi perles Satin ruban fleur d'artisanat bricolage pour les filles qui fait pour telle une activité art et d'artisanat pour les filles du plaisir! N'est pas amusant reprenant Rapide et simple bricola