DM 3 : Les couleurs

Devoir à la maison ISN pour le 28 Novembre 2012.
Les couleurs
1
Principe
Actuellement les écrans d’ordinateurs savent afficher 16 millions de couleurs. D’après une étude
menée en 1998, l’œil humain ne pourrait distinguer "que" 2 millions de couleurs en moyenne.
Il existe différentes solutions pour décrire une couleur, celle qui va nous intéresser est le système
RGB (ou RVB en français) pour les 3 couleurs primaires Rouge, Vert, Bleu. En utilisant le principe
de synthèse additive des couleurs. On va pouvoir à partir de ces 3 couleurs recréer toutes les couleurs
dont nous avons besoin. En voici quelques exemples :
Rouge
100%
100%
0%
100%
100%
50%
0%
...
Vert
100%
0%
100%
50%
100%
50%
0%
...
Bleu
0%
100%
100%
0%
100%
50%
0%
...
Résultat
Jaune
Violet
Cyan
Orange
Blanc
Gris
Noir
...
Interface de modification de couleurs du logiciel libre GIMP (www.gimp.org)
Vous pouvez utiliser l’excellent logiciel libre
GIMP pour créer une couleur ou plus simplement utiliser un outil en ligne comme le
suivant :
http ://www.code-couleur.com/
Capture d’écran du site www.code-couleur.com
Quel que soit l’outil utilisé, vous constaterez que les proportions de rouge, vert et bleu ne sont
pas données en pourcentage, mais par un entier entre 0 et 255. On dit que cet entier est codé sur un
octet.
2
Binaire et octet
Expliquons le système de numération d’un ordinateur. Les êtres humains comptent en base décimale (base 10), sûrement car ils ont dix doigts. Un ordinateur ne peut stocker de l’information qu’à
l’aide de signaux électriques qui sont soit sur ON soit sur OFF. Il n’existe donc que 2 états pour une
machine : 0 ou 1 que l’on appelle bit.
Un ordinateur compte donc en base 2, on dit qu’il compte en binaire. Si on colle 2 bits ensemble,
on peut représenter 4 nombres : 00, 01, 10 et 11. Le principe de numération est identique à celui que
nous utilisons tous les jours :
• En base 10 : on commence par écrire les premières valeurs : 0, 1, ... 8, 9 quand on n’a plus
de chiffre disponible, on prend alors une dizaine et on recommence 10, 11, ... et ainsi de suite
jusqu’à 99 où il faut alors ajouter un nouveau chiffre (des centaines).
• En base 2, la position des chiffres est tout aussi déterminante : On commence à 0, puis 1, puis
10, 11, 100, 101, ... le nombre de chiffres augmente donc très rapidement.
Par exemple, le nombre 2 534 peut se décomposer ainsi avec notre système de numération décimale :
2 534 = 2000 + 500 + 30 + 4
= 2 × 1000 + 5 × 100 + 3 × 10 + 4 × 1
= 2 × 103 + 5 × 102 + 3 × 101 + 4 × 10
et avec le système de numération binaire :
2 534 = 1 × 211 + 1 × 28 + 1 × 27 + 1 × 26 + 1 × 25 + 1 × 22 + 1 × 21
donc, en binaire, le nombre 2 534 s’écrit 100111100110.
Conversion d’un binaire en décimal : Pour savoir ce que représente le nombre 10110 en base 10,
on peut présenter le calcul ainsi :
1
0
1
1
0
×24
×23
×22
×21
×20
1 × 16 + 0 × 8 + 1 × 4 + 1 × 2 + 0 × 1 = 22
Le nombre 10110 en binaire représente donc 22 dans notre système décimal.
Conversion d’un décimal en binaire : Pour la conversion inverse, il suffit d’effectuer des divisions
successives par 2 jusqu’à obtention d’un quotient nul. Le nombre en binaire s’obtient alors en listant
en sens inverse les restes obtenus. Si on reprend l’exemple précédent avec le nombre 22 :
Nombre
22
11
5
2
1
Quotient
11
5
2
1
0
Reste
0
1
1
0
1
Un octet est une unité de place en mémoire (mémoire interne, disque dur,...). Elle représente
l’emplacement nécessaire pour coder un nombre sur 8 bits. Si on ne s’intéresse qu’aux entiers positifs,
on peut donc coder sur un octet un nombre allant de 00000000 à 11111111 qui représente le fameux
255 en décimal.
Exercice 1
Complétez le tableau ci-dessous :
Binaire
10101010
...
11110000
...
Décimal
...
234
...
101
Exercice 2
Quelle est la particularité de l’écriture binaire de tous les nombres pairs ?
Exercice 3
Dans la même idée de regroupement par puissance de 2, un kibioctet (Kio) ne représente pas 1000
octets comme on pourrait imaginer, mais 1024(= 210 ) octets. De la même manière, 1Mio (mébioctet)
représente 1024 Kio et 1Gio (gibioctet) 1024 Mio. Combien d’octets peut-on mettre sur un espace
de 2Gio ?
Remarque : pour l’usage grand public, il y a souvent confusion chez les commerçants entre ces
unités (Kio, Mio, Gio) et celles que l’on trouve plus communément : selon la norme IEC 60027-2, un
kilooctet (ko) représente 1 000 octets, un mégaoctet (Mo) représente 1 000 ko et un gigaoctet (Go)
représente 1 000 Mo.
Exercice 4
Réalisez en PHP deux programmes (on pourra utiliser les fonctions de conversion de PHP)
1. Le premier demande un nombre en écriture décimale et le transforme en écriture binaire.
2. Le second demande un nombre en écriture binaire et le transforme en écriture décimale.
3
Hexadécimal
L’écriture binaire d’un nombre, bien que naturelle pour la machine, présente le gros inconvénient
de générer des nombres dont l’écriture est très longue et peu lisible pour l’être humain. Pour cela on
se propose pour un octet de regrouper les bits 4 par 4. Sur 4 bits, on peut écrire 16 valeurs de 0000
à 1111 en binaire ou plus clairement de 0 à 15 en décimal. Il nous faudrait donc 16 symboles pour
représenter ces valeurs et ainsi travailler en base 16 que l’on appelle base hexadécimale. On a déjà
les 10 chiffres de 0 à 9 que l’on va compléter par 6 lettres : A, B, C, D, E et F.
En hexadécimal, 2 symboles suffisent donc pour écrire un nombre de 0 à 255. Le principe est
toujours le même, on commence à numéroter : 0, 1, ..., 8, 9, A, B, C, D, E, F, puis 10, 11, 12, ... 1A,
..., 1F, 20... La conversion d’une base à l’autre se fait aussi selon les mêmes règles.
Conversion d’un nombre hexadécimal en décimal : comme pour le binaire, cette fois-ci on multiplie par des puissances de 16, un exemple avec le nombre 1A3C :
1
A
3
C
3
2
1
×16
×16
×16
×160
1 × 4096 + 10 × 256 + 3 × 16 + 12 × 1 = 6 716
Conversion d’un décimal en hexadécimal : la conversion se fait à l’aide de divisions successives
par 16. Si on reprend l’exemple précédent avec le nombre 6 716 :
Nombre Quotient Reste Symbole
6716
419
12
C
419
26
3
3
26
1
10
A
1
0
1
1
Le nombre 6 716 s’écrit donc en hexadécimal sous la forme 1A3C.
Exercice 5
Complétez le tableau ci-dessous :
Binaire
101010
...
...
Décimal
...
534
...
Hexadécimal
...
...
BAC
Exercice 6
Complétez les programmes de conversion précédents pour que l’on puisse entrer un nombre en
décimal, binaire ou hexadécimal et que la machine affiche ce nombre dans les autres bases.
4
Pour revenir aux codes couleurs HTML
Dans une page HTML, si l’on souhaite une couleur personnalisée, on peut alors préciser la couleur
que l’on souhaite en indiquant le code HTML de la couleur désirée. Le code HTML d’une couleur
est une chaîne de caractères composée de :
• Un symbole # pour commencer.
• 2 symboles correspondant au niveau de rouge codé en hexadécimal.
• 2 symboles correspondant au niveau de vert codé en hexadécimal.
• 2 symboles correspondant au niveau de bleu codé en hexadécimal.
Par exemple, la couleur #FFFFFF correspond au blanc, #FF0000 au rouge, ...
Exercice 7
Réalisez une fonction RVB2HTML qui :
• attend pour paramètres d’entrée 3 nombres entiers $r, $v et $b entre 0 et 255.
• Renvoie une chaîne de caractères correspondant à la couleur (r,v,b) entrée.
Attention le code HTML d’une couleur doit forcément compter 7 caractères (il faut ajouter des 0 le
cas échéant).
Exercice 8
Réalisez une page en PHP générant l’affichage d’une page HTML contenant le mot ISN en dégradé.
Exercice bonus 1
Même exercice, mais réalisant un dégradé d’une couleur aléatoire vers
une autre.
Exercice bonus 2
Reprogrammez vous même les fonctions bindec et decbin de PHP.