Pixellisation_et_Images_numériques.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "name": "Pixellisation et Images numériques",
      "version": "0.3.2",
      "provenance": [],
      "collapsed_sections": []
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    }
  },
  "cells": [
    {
      "metadata": {
        "id": "DZS_holEOSw1",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "<H1>Pixellisation et traitement de l'image</H1>\n",
        "<h2>Attentes du programme</h2>\n",
        "<center><img src=\"https://img.lght.pics/zW9G.jpg\" alt=\"zW9G.jpg\" border=\"0\" width=\"800\"></center>\n",
        "  <br>\n",
        "  <h2>Découverte d'une matrice LED</h2>\n",
        "  <br>\n",
        "\n",
        "  <img class=left src=\"https://proxima.cnes.fr/sites/default/files/styles/wysiwyg_popup/public/drupal/201609/image/prx_astro_pi_logo_web.png?itok=nFfxAUeM\" width=\"100\"> Le Sense HAT est une carte additionnelle du Raspberry Pi . Elle ajoute la capacité de détecter toutes sortes d’informations en utilisant une matrice de LED et faigt partie du projet Astropi.  On a la possibilité de l’utiliser en réel ou à l’aide d’un émulateur."
      ]
    },
    {
      "metadata": {
        "id": "_A9-I1dNT4f6",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Utilisons l'émulateur trinket, en tapant shift Entrée dans la cellule ci-dessous. Effacer toutes les lignes, puis tapez les lignes ci-dessous. Appuyer sur Stop, puis sur Run. Notez ce qui se passe dans un fichier nommé pixellisation.\n",
        "\n",
        "<img src=\"https://img.lght.pics/zWqE.png\" alt=\"zWqE.png\" border=\"0\" />"
      ]
    },
    {
      "metadata": {
        "id": "YKVwGa2mUYLy",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "%%html\n",
        "<iframe src=\"https://trinket.io/embed/python/91de272f38\" width=\"100%\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen></iframe>"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "CyBZMn_CWadn",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "<h2> Découverte du fonctionnement d'un écran LED  </h2>\n",
        "La matrice de LED contient 64 LED multicolores. Chacune d’elle est constituée de trois LED plus petites : une rouge, une verte et une bleue.\n",
        "<h3>Comprendre le mélange des couleurs</h3>\n",
        ">1.  Selon le principe du mélange de couleurs additif, les couleurs rouge, vert et bleu sont utilisées pour obtenir les autres couleurs. On les appelle les trois couleurs primaires additives.<br>\n",
        "<img src=\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRV2aGhVmMh9d3pQqE0mpbW-o5CX1sPf7bZfoMyoySfmdmP2vIQew\">\n",
        "Cette figure contient 3 disques présentant la même luminosité, un pour chaque couleur.  En l’absence de couleur, le résultat est noir.<br>a) Quelles combinaisons de deux couleurs produisent une couleur ? Identifiez-les en complétant votre fichier.\n",
        "<br><br><br>b) Quel est le résultat de l'ajout des trois couleurs primaires ? Compléter votre fichier.<br><br><br>\n",
        ">2. On peut obtenir plus de couleurs que celles de la figure 4, en faisant varier la luminosité des trois couleurs d’origine utilisées. Saisissez le code ci-dessous dans le trinket précédent.<br> <img src=\"https://img.lght.pics/zWqr.png\" alt=\"zWqr.png\" border=\"0\" /><br> Appuyez sur Run. Notez ce qui se passe dans votre fichier.\n"
      ]
    },
    {
      "metadata": {
        "id": "k249xcXyZNNF",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        ">3.  Les variables r, g et b représentent les couleurs rouge, vert et bleu. Les nombres qu’elles contiennent spécifient la luminosité de chaque couleur ; elle varie de 0 à 255. Dans le code ci-dessus, la valeur maximale (255) pour chaque couleur a été utilisée. Changez les valeurs pour spécifier 255 red (255 rouge) mais 0 green (0 vert) et 0 blue (0 bleu), puis exécutez de nouveau le code. Quelles autres couleurs pouvez-vous faire ? A vous de jouer ! Combien de couleurs différentes obtient-on ? Notez vos résultats dans votre fichier.<br><br><br><br>"
      ]
    },
    {
      "metadata": {
        "id": "_4MYNSKfZtzM",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        ">4. Utilisez le trinket précédent, effacez les lignes et tapez ceci <br><img src=\"https://img.lght.pics/zWqs.png\" alt=\"zWqs.png\" border=\"0\" /><br>Notez ce qui se passe dans votre fichier."
      ]
    },
    {
      "metadata": {
        "id": "JrVT4PzCaMSK",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "<h3>Affichage d'images</h3>\n",
        "Un **pixel **: c’est un petit élément d’une surface de visualisation dans une image numérique.  Chaque pixel de votre écran est constitué de trois sous-pixels (rouge, vert et bleu).  C’est de cette façon que fonctionnent tous les écrans d’ordinateur et de smartphone.<br> <img src=\"https://upload.wikimedia.org/wikipedia/commons/d/de/Closeup_of_pixels.JPG\" width=\"250\"><br>\n",
        ">1. Pour allumer un pixel on utiliser la commande s.set_pixel(x,y,r,g,b). En utilisant le trinket ci-dessous, tapez et  compléter le code ci-dessous pour allumer le pixel(0,0) en rouge. <br><img src=\"https://img.lght.pics/zWyf.png\" alt=\"zWyf.png\" border=\"0\" />"
      ]
    },
    {
      "metadata": {
        "id": "hXDIVbbkbfDW",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "%%html\n",
        "<iframe src=\"https://trinket.io/embed/python/91de272f38\" width=\"100%\" height=\"356\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" allowfullscreen></iframe>"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "EUQ3khoqcbl8",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        ">2. Les variables « x » et « y » sont utilisées pour contrôler la LED que la commande set_pixel doit changer. x correspond à l'abscisse et varie de 0 à 7 de gauche à droite. y correspond à l'ordonnée et varie de 0 à 7 de haut en bas.  Si on saisit le code suivant dans une nouvelle fenêtre, colorez la matrice qui s’affichera.<br>\n",
        "<img src=\"https://img.lght.pics/zWyy.png\" alt=\"zWyy.png\" border=\"0\">\n",
        "<img src=\"https://img.lght.pics/zWyq.png\" alt=\"zWyq.png\" border=\"0\">"
      ]
    },
    {
      "metadata": {
        "id": "11J8VJLCdMJq",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        ">3. Pixelliser ce logo , en utilisant la grille ci-dessous. La couleur d’un carré doit correspondre à la couleur dominante du carré individuel qui compose l'image. Écrivez le code qui va vous permettre d’afficher l’image sur la matrice de LED. <br>\n",
        "<img src=\"https://img.lght.pics/zW3Z.jpg\" alt=\"zW3Z.jpg\" border=\"0\" />"
      ]
    },
    {
      "metadata": {
        "id": "tNgCePEUd8km",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "<H1> Filtres et manipulation d'images </H1>"
      ]
    },
    {
      "metadata": {
        "id": "V1ilPEA-eFcY",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "!pip install pillow\n",
        "from PIL import Image\n",
        "from IPython.display import HTML\n",
        "from io import BytesIO\n",
        "import requests"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "I4Y2I_edepyo",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Tester le code ci dessous et noter le résultat de l'affichage dans votre fichier réponse. Interprétez ce résultat."
      ]
    },
    {
      "metadata": {
        "id": "ZinqIAUq4nHC",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "#fifty shades of yoda\n",
        "r = requests.get('https://img.lght.pics/zW9k.jpg')  #on télécharge l'image\n",
        "im1=Image.open(BytesIO(r.content))\n",
        "largeur,hauteur=im1.size\n",
        "print(largeur)\n",
        "print(hauteur)\n",
        "pixels=largeur*hauteur\n",
        "print(pixels)\n",
        "im1"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "0o_iYhJ1fVYk",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Nous allons transformer l’image en niveau de gris** pixels par pixels**. Pour cela nous allons utiliser :\n",
        "**getpixel((x,y))** renvoie la couleur du pixel de coordonnées (x,y) sous la forme d’une liste (R,G,B)<br>\n",
        "**putpixel((x,y),couleur)** attribue la couleur au pixel de coordonnées (x,y). Testez ceci\n"
      ]
    },
    {
      "metadata": {
        "id": "Fq6pzE5_e-Ew",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "#fifty shades of yoda\n",
        "for x in range(largeur):\n",
        "  for y in range(hauteur):\n",
        "    pixel=im1.getpixel((x,y))\n",
        "    m=(pixel[0]+pixel[1]+pixel[2])//3 #Que fait-on dans cette ligne? Notez cela dans votre fichier réponse\n",
        "    newpixel=(m,m,m)\n",
        "    im1.putpixel((x,y),newpixel)\n",
        "im1"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "24ZvWggdf7Cg",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "On a modifié le programme, tester le! Que se passe-t-il? Notez cela dans votre fichier réponse.\n",
        "\n"
      ]
    },
    {
      "metadata": {
        "id": "0e30QzKff6g8",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "for x in range(largeur):\n",
        "  for y in range(hauteur):\n",
        "    pixel=im1.getpixel((x,y))\n",
        "    newpixel=(pixel[0],pixel[1],255)\n",
        "    im1.putpixel((x,y),newpixel)\n",
        "im1"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "_LE9AXhcg0hO",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "\n",
        "On dira que l’image est saturée en ….\n",
        "A vous de jouer : modifier votre programme pour saturer en vert, puis en rouge. Notez les changements effectués dans le fichier réponse."
      ]
    },
    {
      "metadata": {
        "id": "eIjdJS31iuj8",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "<h3>Photomaton</h3><br><img src=\"https://img.lght.pics/zWmL.jpg\" alt=\"zWmL.jpg\" border=\"0\" /><br> Testez et commentez ce programme."
      ]
    },
    {
      "metadata": {
        "id": "Ol0HArOAhlpS",
        "colab_type": "code",
        "colab": {}
      },
      "cell_type": "code",
      "source": [
        "r = requests.get('https://img.lght.pics/zW9k.jpg')  #on télécharge l'image\n",
        "im1=Image.open(BytesIO(r.content))\n",
        "l,h=im1.size\n",
        "newimg=Image.new(im1.mode, im1.size)\n",
        "for y in range(h):\n",
        "  for x in range(l):\n",
        "    couleur = im1.getpixel((x,y))\n",
        "    if x%2==0 and y%2==0:  # x et y sont pairs\n",
        "      newimg.putpixel((x//2,y//2),couleur)\n",
        "    elif x%2==0:           # Expliquez et commentez cette ligne\n",
        "      newimg.putpixel((x//2,h//2+y//2),couleur)\n",
        "    elif y%2==0:           # Expliquez et commentez cette ligne\n",
        "      newimg.putpixel((l//2+x//2,y//2),couleur)\n",
        "    else:                  # Expliquez et commentez cette ligne\n",
        "      newimg.putpixel((l//2+x//2,h//2+y//2),couleur)\n",
        "newimg"
      ],
      "execution_count": 0,
      "outputs": []
    },
    {
      "metadata": {
        "id": "oKgiRSFSi_73",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "<H3>Pop Art</H3>\n",
        "Modifiez le code ci-dessus pour obtenir un effet à la Warrohl!<br><br><br><br>"
      ]
    },
    {
      "metadata": {
        "id": "pGAV06eNjWYJ",
        "colab_type": "text"
      },
      "cell_type": "markdown",
      "source": [
        "Stéphane Renouf, lycée Beaussier"
      ]
    }
  ]
}