Source: Scratch Wiki en français
La maîtrise des codages des couleurs compatibles avec Scratch permet de réaliser des projets de haut niveau.
Info :
Du fait du nombre de variables / listes à utiliser, elles ne sont pas données à l'avance. Chaque code utilise ses propres variables, mais vous pouvez utiliser les mêmes pour tous les blocs personnalisés.
Entrée-couleur
Une entrée-couleur ou entrée de couleur est une entrée ([#ff0000]::sensing) où l'utilisateur peut entrer une couleur depuis un menu déroulant.
LeSaviezVous :
Le format utilisé par les entrées-couleur est le HSV (lire page précédente du guide).
Gestion des codes RGB et Décimal
RGB
Le RGB (RVB en français, Rouge Vert Bleu) est le format idéal lorsqu'il s'agit de faire des comparaisons, modifications ou actions sur une couleur.
Cependant, le RGB ne peut pas être utilisé dans une entrée-couleur (du moins, pas sans conversion).
Décimal
Le Décimal est le format idéal pour les entrées-couleur et le plus simple à convertir en RGB (l'inverse est tout aussi simple).
Conversions
RGB vers Décimal
définir Couleur | Conv | RGB (r) (g) (b) vers DEC mettre [couleur v] à (([plancher v] de (b)) + ((256) * (([plancher v] de (g)) + ((256) * ([plancher v] de (r))))))
Idée :
L'utilisation du bloc
([plancher v] de ()) permet d'éviter des erreurs si un des canal n'est pas un entier.
Danger :
Les valeurs r, g et b doivent être comprises entre 0 et 255, tous deux inclus.
Décimal vers RGB
définir Couleur | Conv | DEC (déc) vers RGB mettre [canal r v] à ([plancher v] de ((déc) / (65536))) mettre [canal g v] à ([plancher v] de (((déc) - ((canal r) * (65536))) / (256))) mettre [canal b v] à ([plancher v] de (((déc) - ((canal r) * (65536))) - ((canal g) * (256))))
Actions sur les couleurs
Info :
Pour cette partie, vous devez uniquement utiliser le format RGB.
Mélanger des couleurs
définir Couleur | Act | Mélanger (r1) (g1) (b1) et (r2) (g2) (b2), mélange (%) mettre [canal r v] à (arrondi de (((r1) * ((1) - ((%) / (100)))) + ((r2) * ((%) / (100))))) mettre [canal g v] à (arrondi de (((g1) * ((1) - ((%) / (100)))) + ((g2) * ((%) / (100))))) mettre [canal b v] à (arrondi de (((b1) * ((1) - ((%) / (100)))) + ((b2) * ((%) / (100)))))
Idée :
(%::custom) permet de doser le mélange des couleurs :
- à 50 (%), le mélange sera équilibré ;
- à 25 (%), la couleur 1 sera majoritaire ;
- à 75 (%), la couleur 2 sera majoritaire ;
- à 0 (%), la couleur 1 sera la couleur retournée ;
- à 100 (%), la couleur 2 sera la couleur retournée ;
Différence des couleurs
définir Couleur | Act | Différence entre (r1) (g1) (b1) et (r2) (g2) (b2) mettre [différence r v] à ((r1) - (r2)) mettre [différence g v] à ((g1) - (g2)) mettre [différence b v] à ((b1) - (b2)) mettre [différence v] à ((différence r) + ((différence g) + (différence b)))
LeSaviezVous :
En informatique, la différence entre des couleurs est nommée seuil.
Réduire une couleur
définir Couleur | Act | Réduire (r) (g) (b), profondeur (%) mettre [canal r v] à (arrondi de ((arrondi de ((r) / ((100) / (%)))) * ((100) / (%)))) mettre [canal g v] à (arrondi de ((arrondi de ((g) / ((100) / (%)))) * ((100) / (%)))) mettre [canal b v] à (arrondi de ((arrondi de ((b) / ((100) / (%)))) * ((100) / (%))))
Idée :
(%::custom) permet de définir une profondeur :
- 100 (%) conservera la profondeur de la couleur donnée ;
- 50 (%) réduira de moitié la profondeur de la couleur donnée ;
- 33 (%) réduira la profondeur de la couleur donnée par 3 ;
- 25 (%) réduira la profondeur de la couleur donnée par 4 ;
- 20 (%) réduira la profondeur de la couleur donnée par 5 ;
- 10 (%) réduira la profondeur de la couleur donnée par 10 ;
- 6.25 (%) réduira la profondeur de la couleur donnée par 16 ;
Danger :
(%::custom) ne peut être égal à 0 (le programme effectuerait alors une division par 0) !Aller plus loin
Couleur du stylo depuis RGBA
définir Couleur | A+L | Mettre la couleur du stylo à (r) (g) (b) (a) mettre la couleur du stylo à (([plancher v] de (b)) + ((256) * (([plancher v] de (g)) + ((256) * ([plancher v] de (r)))))) mettre la [transparence v] du stylo à ((100) - (((255) - ((a) + ((255) * <(a) = ()>))) / (2.55)))
Idée :
((a::custom) + ((255) * <(a::custom) = ()>)) défini la couleur du stylo comme opaque si le canal alpha n'est pas précisé.Dégradé de couleurs
définir Couleur | A+L | Dégradé entre (r1) (g1) (b1) et (r2) (g2) (b2) mettre [i v] à (0) mettre la taille du stylo à (1) aller à x:(-100) y:(100) répéter (200) fois Couleur | Act | Mélanger (r1) (g1) (b1) et (r2) (g2) (b2), mélange (i)::custom Couleur | A+L | Mettre la couleur du stylo à (canal r) (canal g) (canal b) ()::custom stylo en position d'écriture mettre y à (100) mettre y à (-100) relever le stylo ajouter (1) à x ajouter (0.5) à [i v] fin
Idée :
Libre à vous de modifier le script pour qu'il puisse être exécuté entre deux points et avec une certaine qualité.
Gestion de formats divers
Découvrez d'autres formats de couleur, et comment les convertir vers le format RGB.
Format de couleur HSL et HSV
L'éditeur Scratch propose une sélection de couleur via le format HSV.
Le format de couleur HSL (de l'anglais "Hue Saturation Luminosity", en français « Teinte Saturation Luminosité ») est un format angulaire, parce qu'il utilise une « roue des couleurs ». Sa variante HSV, est très utilisée en informatique pour interagir avec l'utilisateur.
Canaux
Le HSL repose sur trois canaux. À la différence de la plupart des autres formats, il n'utilise pas de représentation via des octets.
- "Hue", un angle (de 0° (inclus) à 360° (exclu, égal à 0°)) ;
- "Saturation", un pourcentage ou un octet ramené sur l’intervalle
[0 ; 1]
. - "Luminosity", un pourcentage ou un octet ramené sur l’intervalle
[0 ; 1]
.
Info :
Les algorithmes de conversion utiliseront des octets pour les canaux "Saturation" et "'Luminosity".
Sa variante HSV utilise aussi les canaux "Hue" et "Saturation", et le dernier canal, "Value" (même règles que le canal "Saturation"), est égale à la moitié du canal luminosité du HSL. Ce format est généralement le plus utilisé pour permettre à l'utilisateur de choisir une couleur.
HSV vers RGB
définir Couleur | Conv | HSV (H) (S) (V) vers RGB … // conversion des paramètres mettre [canal H v] à ((H) mod [360]) mettre [canal S v] à ((S) / [255]) // S : entier allant de 0 à 255 inclus mettre [canal V v] à ((V) / [255]) // V : entier allant de 0 à 255 inclus … // définition du chroma, angulaire et ajustement mettre [HSL | chroma v] à ((canal V) * (canal S)) mettre [HSL | angulaire v] à ((HSL | chroma) * ([1] - ([abs v] de (( ((canal H) / [60]) mod [2] ) - [1] ) ))) mettre [HSL | ajustement v] à ((canal V) - ( (HSL | chroma) / [2] )) … // composantes conditionnelles si <(canal H) < [60]> alors mettre [canal r v] à (HSL | chroma) mettre [canal g v] à (HSL | angulaire) mettre [canal b v] à [0] sinon si <(canal H) < [120]> alors mettre [canal r v] à (HSL | angulaire) mettre [canal g v] à (HSL | chroma) mettre [canal b v] à [0] sinon si <(canal H) < [180]> alors mettre [canal r v] à [0] mettre [canal g v] à (HSL | chroma) mettre [canal b v] à (HSL | angulaire) sinon si <(canal H) < [240]> alors mettre [canal r v] à [0] mettre [canal g v] à (HSL | angulaire) mettre [canal b v] à (HSL | chroma) sinon si <(canal H) < [300]> alors mettre [canal r v] à (HSL | angulaire) mettre [canal g v] à [0] mettre [canal b v] à (HSL | chroma) sinon si <(canal H) < [360]> alors mettre [canal r v] à (HSL | chroma) mettre [canal g v] à [0] mettre [canal b v] à (HSL | angulaire) fin fin fin fin fin fin … // ajustement des canaux mettre [canal r v] à ([plancher v] de (((canal r) + (HSL | ajustement)) * [255])) mettre [canal g v] à ([plancher v] de (((canal g) + (HSL | ajustement)) * [255])) mettre [canal b v] à ([plancher v] de (((canal b) + (HSL | ajustement)) * [255])) … // conversion finale (facultative) Couleur | Conv | RGB (canal r) (canal g) (canal b) vers DEC :: custom
HSL vers RGB
définir Couleur | Conv | HSL (H) (S) (L) vers RGB Couleur | Conv | HSV (H) (S) ([255] * ([1] - ([abs v] de (((L) * [2]) - [1])))) vers RGB :: custom
RGB vers HSL
définir Outils | Max & Min mettre [max v] à ((-1) / (0)) // retourne -∞ mettre [min v] à ((1) / (0)) // retourne +∞ répéter (longueur de [outils v]) fois si <(élément [1] de [outils v]) > (max)> alors mettre [max v] à (élément [1] de [outils v]) fin si <(élément [1] de [outils v]) < (min)> alors mettre [min v] à (élément [1] de [outils v]) fin supprimer l'élément [1] de [outils v] fin définir Couleur | Conv | RGB (R) (G) (B) vers HSL … // conversion des paramètres mettre [canal r v] à ((R) / [255]) mettre [canal g v] à ((G) / [255]) mettre [canal b v] à ((B) / [255]) … // obtention de min, max supprimer tous les éléments de la liste [outils v] ajouter (canal r) à [outils v] :: list ajouter (canal g) à [outils v] :: list ajouter (canal b) à [outils v] :: list Outils | Max & Min :: custom … // composantes mettre [HSL | chroma] à ((max) - (min)) mettre [canal L v] à (((max) + (min)) / [2]) … // composantes conditionnelles mettre [canal S v] à ((HSL | chroma) / ([1] - ([abs v] de (([2] * (canal L)) - [1]))) mettre [canal S v] à (<non <(HSL | chroma) = [0]>> * (canal S)) si <(HSL | chroma) = [0]> alors mettre [canal H v] à [0] sinon si <(max) = (canal r)> alors mettre [canal H v] à ((((canal g) - (canal b)) / (HSL | chroma)) mod [6]) sinon si <(max) = (canal g)> alors mettre [canal H v] à ((((canal b) - (canal r)) / (HSL | chroma)) + [2]) sinon mettre [canal H v] à ((((canal r) - (canal g)) / (HSL | chroma)) + [4]) fin fin mettre [canal H v] à (((canal H) * [60]) mod [360]) fin
