208 lines
7.1 KiB
Plaintext
208 lines
7.1 KiB
Plaintext
{
|
||
"cells": [
|
||
{
|
||
"cell_type": "markdown",
|
||
"metadata": {},
|
||
"source": [
|
||
"# Un peu de couleurs\n",
|
||
"\n",
|
||
"## Contexte\n",
|
||
"\n",
|
||
"Le codage informatique le plus simple de la couleur consiste à donner, pour chaque pixel, c'est-à-dire pour tout élément de l'image, trois valeurs chacune sur un octet, correspondant directement à la luminosité. \n",
|
||
"\n",
|
||
"Un pixel d'une image, d'un écran est constitué de 3 composantes de luminophore:\n",
|
||
"\n",
|
||
"<center>\n",
|
||
"<span style='background-color: rgb(255, 0, 0);'> </span><span style='background-color: rgb(0, 255, 0);'> </span><span style='background-color: rgb(0, 0, 255);'> </span>\n",
|
||
"</center>\n",
|
||
"\n",
|
||
"## Codage en RGB\n",
|
||
"\n",
|
||
"HTML et CSS acceptent la notation RGB `rgb(24,255,12)` où les nombres représentent la valeur en pourcentage pour le rouge, le vert et le bleu.\n",
|
||
"\n",
|
||
"Chaque nombre représente la valeur de la luminosité sur un octet (8 bits)"
|
||
]
|
||
},
|
||
{
|
||
"cell_type": "markdown",
|
||
"metadata": {},
|
||
"source": [
|
||
"### À Faire\n",
|
||
"\n",
|
||
"1. Combien y a-t-il de valeurs possibles pour le rouge, vert et le bleu ? \n",
|
||
"2. Combien de couleurs totales peut-on coder avec 3 octets ?\n",
|
||
"3. Dans le code, modifier la valeur des composantes rgb pour changer la couleur du <span style='background-color: rgb(255, 255, 255);'>Fond du texte</span>"
|
||
]
|
||
},
|
||
{
|
||
"cell_type": "markdown",
|
||
"metadata": {},
|
||
"source": [
|
||
"## Codage condensé\n",
|
||
"\n",
|
||
"HTML et CSS acceptent également la notation condensée `#08A12C`, où le code après # agglutine trois valeurs hexadécimales qui sont directement celle des octets de commande des luminophores.\n",
|
||
"\n",
|
||
"Exemple : \n",
|
||
"\n",
|
||
"Le fond du texte suivant est en <span style='background-color: #808080;'>couleur grise</span>. \n",
|
||
"\n",
|
||
"En regardant le code source, on s'aperçoit que notation condensée de la couleur est : `#808080`. \n",
|
||
"\n",
|
||
"Il correspond à au codage RGB `rgb(128, 128, 128)` : <span style='background-color: rgb(128, 128, 128);'>couleur grise</span>\n",
|
||
"\n",
|
||
"### À Faire\n",
|
||
"\n",
|
||
"1. Convertir $80_{16}$ en base 10\n",
|
||
"2. Quel lien existe-t-il entre une composante RGB et le codage condensé d'une couleur ?"
|
||
]
|
||
},
|
||
{
|
||
"cell_type": "markdown",
|
||
"metadata": {},
|
||
"source": [
|
||
"## Couleurs de l'arc-en-ciel\n",
|
||
"\n",
|
||
"Un arc-en-ciel est un phénomène optique se produisant dans le ciel, visible dans la direction opposée au Soleil quand il brille pendant la pluie. C'est un arc de cercle coloré d'un dégradé de couleurs continu du rouge, à l'extérieur, au jaune au vert et au bleu, jusqu'au violet à l'intérieur.\n",
|
||
"\n",
|
||
"L'objectif est de reconstituer les couleurs d'un arc en ciel !\n",
|
||
"\n",
|
||
"En analysant le code source, les couleurs de fond sont manquantes, vous devez modifiez les codes pour afficher les couleurs correspondantes.\n",
|
||
"\n",
|
||
"<table>\n",
|
||
"<tr>\n",
|
||
" <td style=\"background-color : rgb(255, 255, 255); color: black;\">Violet</td>\n",
|
||
" <td style=\"background-color : #ffffff; color: black;\">Indigo</td>\n",
|
||
" <td style=\"background-color : rgb(255, 255, 255); color: black;\">Bleu</td>\n",
|
||
" <td style=\"background-color : #ffffff; color: black;\">Vert</td>\n",
|
||
" <td style=\"background-color : rgb(255, 255, 255); color: black;\">Jaune</td>\n",
|
||
" <td style=\"background-color : #ffffff; color: black;\">Orangé</td>\n",
|
||
" <td style=\"background-color : rgb(255, 255, 255); color: black;\">Rouge</td>\n",
|
||
"</tr>\n",
|
||
"</table>\n",
|
||
"\n",
|
||
"Pour cela, vous disposez de la liste des valeurs des couleurs...en binaire :\n",
|
||
"\n",
|
||
"| Couleur | Valeur binaire |\n",
|
||
"| :--: | :--: |\n",
|
||
"| Violet | `10000000 00000000 10000000` |\n",
|
||
"| Indigo | `00110011 01100110 11111111` |\n",
|
||
"| Bleu | `00000000 11001100 11111111` |\n",
|
||
"| Vert | `10011001 11001100 00000000` |\n",
|
||
"| Jaune | `11111111 11001100 00000000`|\n",
|
||
"| Orangé | `11111111 01100110 00000000`|\n",
|
||
"| Rouge | `11111111 00000000 00000000`|\n",
|
||
"\n",
|
||
"### À Faire\n",
|
||
"\n",
|
||
"1. Convertir les valeurs binaires en décimales\n",
|
||
"2. Programmer les blocs d'instructions permettant de :\n",
|
||
" 1. convertir une couleur RGB en condensé,\n",
|
||
" 2. convertir une couleur condensé en RGB.\n",
|
||
"3. Modifier les codes couleurs du tableau pour afficher les couleurs de l'arc-en-ciel"
|
||
]
|
||
},
|
||
{
|
||
"cell_type": "markdown",
|
||
"metadata": {},
|
||
"source": [
|
||
"### Conversion RGB $\\rightarrow$ condensé\n",
|
||
"\n",
|
||
"Ci-dessous, l'aide de la fonction `hex`, obtenue en exécutant `help(hex)`\n",
|
||
"\n",
|
||
"```python\n",
|
||
">>>help(hex)\n",
|
||
"Help on built-in function hex in module builtins:\n",
|
||
"\n",
|
||
"hex(number, /)\n",
|
||
" Return the hexadecimal representation of an integer.\n",
|
||
" \n",
|
||
" >>> hex(12648430)\n",
|
||
" '0xc0ffee'\n",
|
||
"```\n",
|
||
"\n",
|
||
"Écrire les instructions qui permettent de convertir la valeur d'un RGB en condensé"
|
||
]
|
||
},
|
||
{
|
||
"cell_type": "code",
|
||
"execution_count": 51,
|
||
"metadata": {},
|
||
"outputs": [
|
||
{
|
||
"name": "stdout",
|
||
"output_type": "stream",
|
||
"text": [
|
||
"la composante condensé de ( 0 , 0 , 0 ) est : None\n"
|
||
]
|
||
}
|
||
],
|
||
"source": [
|
||
"# Conversion Codage RGB vers Codage condensé\n",
|
||
"\n",
|
||
"rouge = 0\n",
|
||
"vert = 0\n",
|
||
"bleu = 0 \n",
|
||
"\n",
|
||
"condense = None # valeur calculée du condensé de la couleur \n",
|
||
"\n",
|
||
"print(\"la composante condensé de (\", rouge, \",\", vert, \",\", bleu, \") est :\", condense)"
|
||
]
|
||
},
|
||
{
|
||
"cell_type": "markdown",
|
||
"metadata": {},
|
||
"source": [
|
||
"### Conversion condensé $\\rightarrow$ RGB\n",
|
||
"\n",
|
||
"Écrire les instructions qui permettent de convertir la valeur d'un condensé en RGB"
|
||
]
|
||
},
|
||
{
|
||
"cell_type": "code",
|
||
"execution_count": 46,
|
||
"metadata": {},
|
||
"outputs": [
|
||
{
|
||
"name": "stdout",
|
||
"output_type": "stream",
|
||
"text": [
|
||
"la composante RGB de None est : 0 0 0\n"
|
||
]
|
||
}
|
||
],
|
||
"source": [
|
||
"# Conversion Codage condensé vers Codage RGB\n",
|
||
"\n",
|
||
"condense = None # valeur condensé de la couleur \n",
|
||
"\n",
|
||
"rouge = 0 # Extraire la valeur rouge de condense et la convertir en décimale\n",
|
||
"vert = 0 # Extraire la valeur verte de condense et la convertir en décimale\n",
|
||
"bleu = 0 # Extraire la valeur bleue de condense et la convertir en décimale\n",
|
||
"\n",
|
||
"print(\"la composante RGB de\", condense, \"est :\", rouge, vert, bleu)"
|
||
]
|
||
}
|
||
],
|
||
"metadata": {
|
||
"kernelspec": {
|
||
"display_name": "Python 3",
|
||
"language": "python",
|
||
"name": "python3"
|
||
},
|
||
"language_info": {
|
||
"codemirror_mode": {
|
||
"name": "ipython",
|
||
"version": 3
|
||
},
|
||
"file_extension": ".py",
|
||
"mimetype": "text/x-python",
|
||
"name": "python",
|
||
"nbconvert_exporter": "python",
|
||
"pygments_lexer": "ipython3",
|
||
"version": "3.9.7"
|
||
}
|
||
},
|
||
"nbformat": 4,
|
||
"nbformat_minor": 2
|
||
}
|