introduction_blocks.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Introduction à ipythonblocks\n",
    "\n",
    "La bibliothèque ipythonblocks est une bibliothèque destinée à créer des grilles pour pouvoir apprendre la programmation. On peut avoir des cases de couleur, les modifier et faire des animations. Voici les principaux éléments à connaître sur cette bibliothèque\n",
    "\n",
    "## BlockGrid\n",
    "\n",
    "Au cœur de cette bibliothèque se trouve le système de grille. La première chose à faire est d'importer l'objet grille de la bibliothèque et ensuite d'initialiser une grille et de l'afficher"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Requirement already satisfied: ipythonblocks in /home/jeanclaude/.local/lib/python3.8/site-packages (1.9.0)\n",
      "Requirement already satisfied: notebook>=4.0 in /usr/local/lib/python3.8/dist-packages (from ipythonblocks) (6.0.3)\n",
      "Requirement already satisfied: ipython>=4.0 in /usr/lib/python3/dist-packages (from ipythonblocks) (7.13.0)\n",
      "Requirement already satisfied: requests>=1.0 in /usr/lib/python3/dist-packages (from ipythonblocks) (2.23.0)\n",
      "Requirement already satisfied: prometheus-client in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (0.7.1)\n",
      "Requirement already satisfied: jupyter-core>=4.6.1 in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (4.6.3)\n",
      "Requirement already satisfied: jinja2 in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (2.10.1)\n",
      "Requirement already satisfied: ipython-genutils in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (0.2.0)\n",
      "Requirement already satisfied: traitlets>=4.2.1 in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (4.3.3)\n",
      "Requirement already satisfied: jupyter-client>=5.3.4 in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (6.1.2)\n",
      "Requirement already satisfied: terminado>=0.8.1 in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (0.8.2)\n",
      "Requirement already satisfied: tornado>=5.0 in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (5.1.1)\n",
      "Requirement already satisfied: ipykernel in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (5.2.0)\n",
      "Requirement already satisfied: nbconvert in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (5.6.1)\n",
      "Requirement already satisfied: Send2Trash in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (1.5.0)\n",
      "Requirement already satisfied: pyzmq>=17 in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (18.1.1)\n",
      "Requirement already satisfied: nbformat in /usr/lib/python3/dist-packages (from notebook>=4.0->ipythonblocks) (5.0.5)\n",
      "Requirement already satisfied: pexpect in /usr/lib/python3/dist-packages (from ipython>=4.0->ipythonblocks) (4.6.0)\n"
     ]
    }
   ],
   "source": [
    "!python3 -m pip install  ipythonblocks  2>/dev/null"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocksc69cd194-1cb4-4858-8d76-9599760f5817 td {border: 1px solid white;}</style><table id=\"blocksc69cd194-1cb4-4858-8d76-9599760f5817\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [3, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [4, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [5, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [6, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [7, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [8, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [9, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 10]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 11]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 12]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 14]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 15]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 16]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 17]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipythonblocks import BlockGrid     # On importe BlockGrid  du module ipythonblocks\n",
    "grille = BlockGrid(20,10,fill=(0,0,0))  # On crée la grille de 20 (longueur)  par 10 (hauteur)\n",
    "grille.show()                           # On affiche la grille"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocksbbb3ab33-87df-43b2-935f-5c4f6bbab0ab td {border: 1px solid white;}</style><table id=\"blocksbbb3ab33-87df-43b2-935f-5c4f6bbab0ab\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [0, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 1]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [1, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def carre(n,Liste,couleur1=(0,0,0),couleur2=(255,255,255)):\n",
    "    grille = BlockGrid(n,n,fill=couleur1)\n",
    "    for i in Liste:\n",
    "        grille[i] = couleur2\n",
    "    grille.show()\n",
    "    \n",
    "    \n",
    "    \n",
    "\n",
    "carre(3,[(1,1),(0,0)])   "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "(0,0,0)  représente la couleur noire.  dans le système RGB, les couleurs sont représentées par un triplé (r,g,b)  pour (red, green, blue)  avec des entiers compris entre 0 et 255.\n",
    "\n",
    "- (255,0,0) correspond à la couleur rouge\n",
    "- (0,255,0) correspond à la couleur vert\n",
    "- (0,0,255) correspond à la couleur bleu\n",
    "- (0,0,0)   correspond à la couleur noire\n",
    "- (255,255,255) correspond à la couleur blanche.\n",
    "\n",
    "[Regarder pour les autres couleurs](https://www.w3schools.com/colors/colors_rgb.asp)\n",
    "\n",
    "\n",
    "Sur la seconde ligne, le premier paramètre est la largeur de la grille (nombre de colonnes), le second est la hauteur de la grille (nombre de lignes) et le paramètre `fill` de la fonction correspond aux composantes rouges, vertes et bleues de la couleur de remplissage par défaut de la grille, dans le système RGB (dans cet exemple, c'est le noir).\n",
    "\n",
    "\n",
    "\n",
    "\n",
    "## Accéder à un élément de la grille\n",
    "\n",
    "La grille est une liste double. On accède à un élément de la grille en donnant ses coordonnées entre crochets  \n",
    "sous la forme [num ligne , num col]  par exemple"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocksd6808d8d-140b-48a7-9144-4a184219d658 td {border: 0px solid white;}</style><table id=\"blocksd6808d8d-140b-48a7-9144-4a184219d658\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "bloc = grille[0,0]  #c'est le carré en haut à gauche.\n",
    "bloc.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "**Attention !**\n",
    "\n",
    "**Les coordonnées d’un élément de la grille sont données dans l’ordre ligne, colonne,\n",
    "ce qui correspond à l’ordonnée en premier et l’abscisse en seconde. \n",
    "C’est contraire aux conventions habituelles, et c’est contraire à la définition de la grille \n",
    "ou le nombre de colonnes est donné en premier.**"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Lire et modifier un élément de la grille\n",
    "\n",
    "On peut lire la couleur d’un élément de la grille soit en utilisant les propriétés de couleur individuelle, soit en utilisant la propriété rgb pour connaître la couleur\n",
    "\n",
    "On peut de la même façon fixer la couleur d’un élément de la grille."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 23,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "rouge : 0\n",
      "vert : 0\n",
      "bleu : 0\n",
      "(0, 0, 0)\n"
     ]
    }
   ],
   "source": [
    "print(f\"rouge : {bloc.red}\")\n",
    "print(f\"vert : {bloc.green}\")\n",
    "print(f\"bleu : {bloc.blue}\")\n",
    "print(bloc.rgb)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 24,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocks8d8500db-7dca-4354-b17a-77ff02c7e4c6 td {border: 0px solid white;}</style><table id=\"blocks8d8500db-7dca-4354-b17a-77ff02c7e4c6\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (100, 210, 200)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 210, 200);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "bloc.rgb=(100,210,200)\n",
    "bloc.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Animations\n",
    "\n",
    "On peut utiliser sur la grille la méthode flash() qui permet \n",
    "\n",
    " * d’effacer la sortie\n",
    " * d’afficher la grille\n",
    " * d’attendre un délai (qui peut être spécifié en paramètre et vaut 0.2s sinon)\n",
    "\n",
    "Voici un code exemple qui va créer une grille, puis réaliser une boucle 500 fois pour changer de façon aléatoire la couleur d’une case de la grille (on utilise la fonction randrange() )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocks9115b3f0-6b1f-40f2-bf9a-ab93dcef2727 td {border: 1px solid white;}</style><table id=\"blocks9115b3f0-6b1f-40f2-bf9a-ab93dcef2727\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (118, 133, 66)\" style=\"width: 20px; height: 20px;background-color: rgb(118, 133, 66);\"></td><td title=\"Index: [0, 1]&#10;Color: (216, 96, 221)\" style=\"width: 20px; height: 20px;background-color: rgb(216, 96, 221);\"></td><td title=\"Index: [0, 2]&#10;Color: (218, 79, 73)\" style=\"width: 20px; height: 20px;background-color: rgb(218, 79, 73);\"></td><td title=\"Index: [0, 3]&#10;Color: (204, 207, 245)\" style=\"width: 20px; height: 20px;background-color: rgb(204, 207, 245);\"></td><td title=\"Index: [0, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 5]&#10;Color: (56, 215, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(56, 215, 123);\"></td><td title=\"Index: [0, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 7]&#10;Color: (157, 154, 66)\" style=\"width: 20px; height: 20px;background-color: rgb(157, 154, 66);\"></td><td title=\"Index: [0, 8]&#10;Color: (24, 37, 137)\" style=\"width: 20px; height: 20px;background-color: rgb(24, 37, 137);\"></td><td title=\"Index: [0, 9]&#10;Color: (51, 98, 22)\" style=\"width: 20px; height: 20px;background-color: rgb(51, 98, 22);\"></td><td title=\"Index: [0, 10]&#10;Color: (66, 63, 42)\" style=\"width: 20px; height: 20px;background-color: rgb(66, 63, 42);\"></td><td title=\"Index: [0, 11]&#10;Color: (42, 67, 83)\" style=\"width: 20px; height: 20px;background-color: rgb(42, 67, 83);\"></td><td title=\"Index: [0, 12]&#10;Color: (199, 164, 240)\" style=\"width: 20px; height: 20px;background-color: rgb(199, 164, 240);\"></td><td title=\"Index: [0, 13]&#10;Color: (106, 206, 35)\" style=\"width: 20px; height: 20px;background-color: rgb(106, 206, 35);\"></td><td title=\"Index: [0, 14]&#10;Color: (134, 75, 111)\" style=\"width: 20px; height: 20px;background-color: rgb(134, 75, 111);\"></td><td title=\"Index: [0, 15]&#10;Color: (116, 205, 10)\" style=\"width: 20px; height: 20px;background-color: rgb(116, 205, 10);\"></td><td title=\"Index: [0, 16]&#10;Color: (38, 227, 56)\" style=\"width: 20px; height: 20px;background-color: rgb(38, 227, 56);\"></td><td title=\"Index: [0, 17]&#10;Color: (198, 124, 4)\" style=\"width: 20px; height: 20px;background-color: rgb(198, 124, 4);\"></td><td title=\"Index: [0, 18]&#10;Color: (254, 4, 214)\" style=\"width: 20px; height: 20px;background-color: rgb(254, 4, 214);\"></td><td title=\"Index: [0, 19]&#10;Color: (140, 169, 28)\" style=\"width: 20px; height: 20px;background-color: rgb(140, 169, 28);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (39, 173, 163)\" style=\"width: 20px; height: 20px;background-color: rgb(39, 173, 163);\"></td><td title=\"Index: [1, 1]&#10;Color: (110, 62, 13)\" style=\"width: 20px; height: 20px;background-color: rgb(110, 62, 13);\"></td><td title=\"Index: [1, 2]&#10;Color: (99, 104, 78)\" style=\"width: 20px; height: 20px;background-color: rgb(99, 104, 78);\"></td><td title=\"Index: [1, 3]&#10;Color: (253, 211, 167)\" style=\"width: 20px; height: 20px;background-color: rgb(253, 211, 167);\"></td><td title=\"Index: [1, 4]&#10;Color: (252, 236, 136)\" style=\"width: 20px; height: 20px;background-color: rgb(252, 236, 136);\"></td><td title=\"Index: [1, 5]&#10;Color: (176, 39, 164)\" style=\"width: 20px; height: 20px;background-color: rgb(176, 39, 164);\"></td><td title=\"Index: [1, 6]&#10;Color: (97, 186, 97)\" style=\"width: 20px; height: 20px;background-color: rgb(97, 186, 97);\"></td><td title=\"Index: [1, 7]&#10;Color: (209, 96, 210)\" style=\"width: 20px; height: 20px;background-color: rgb(209, 96, 210);\"></td><td title=\"Index: [1, 8]&#10;Color: (80, 245, 210)\" style=\"width: 20px; height: 20px;background-color: rgb(80, 245, 210);\"></td><td title=\"Index: [1, 9]&#10;Color: (24, 148, 131)\" style=\"width: 20px; height: 20px;background-color: rgb(24, 148, 131);\"></td><td title=\"Index: [1, 10]&#10;Color: (214, 153, 54)\" style=\"width: 20px; height: 20px;background-color: rgb(214, 153, 54);\"></td><td title=\"Index: [1, 11]&#10;Color: (215, 215, 235)\" style=\"width: 20px; height: 20px;background-color: rgb(215, 215, 235);\"></td><td title=\"Index: [1, 12]&#10;Color: (134, 221, 169)\" style=\"width: 20px; height: 20px;background-color: rgb(134, 221, 169);\"></td><td title=\"Index: [1, 13]&#10;Color: (204, 62, 151)\" style=\"width: 20px; height: 20px;background-color: rgb(204, 62, 151);\"></td><td title=\"Index: [1, 14]&#10;Color: (107, 109, 223)\" style=\"width: 20px; height: 20px;background-color: rgb(107, 109, 223);\"></td><td title=\"Index: [1, 15]&#10;Color: (0, 242, 185)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 242, 185);\"></td><td title=\"Index: [1, 16]&#10;Color: (233, 108, 35)\" style=\"width: 20px; height: 20px;background-color: rgb(233, 108, 35);\"></td><td title=\"Index: [1, 17]&#10;Color: (57, 139, 62)\" style=\"width: 20px; height: 20px;background-color: rgb(57, 139, 62);\"></td><td title=\"Index: [1, 18]&#10;Color: (20, 150, 101)\" style=\"width: 20px; height: 20px;background-color: rgb(20, 150, 101);\"></td><td title=\"Index: [1, 19]&#10;Color: (176, 169, 29)\" style=\"width: 20px; height: 20px;background-color: rgb(176, 169, 29);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (28, 193, 93)\" style=\"width: 20px; height: 20px;background-color: rgb(28, 193, 93);\"></td><td title=\"Index: [2, 1]&#10;Color: (222, 228, 70)\" style=\"width: 20px; height: 20px;background-color: rgb(222, 228, 70);\"></td><td title=\"Index: [2, 2]&#10;Color: (25, 42, 104)\" style=\"width: 20px; height: 20px;background-color: rgb(25, 42, 104);\"></td><td title=\"Index: [2, 3]&#10;Color: (234, 152, 191)\" style=\"width: 20px; height: 20px;background-color: rgb(234, 152, 191);\"></td><td title=\"Index: [2, 4]&#10;Color: (56, 113, 49)\" style=\"width: 20px; height: 20px;background-color: rgb(56, 113, 49);\"></td><td title=\"Index: [2, 5]&#10;Color: (56, 213, 80)\" style=\"width: 20px; height: 20px;background-color: rgb(56, 213, 80);\"></td><td title=\"Index: [2, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 7]&#10;Color: (140, 52, 199)\" style=\"width: 20px; height: 20px;background-color: rgb(140, 52, 199);\"></td><td title=\"Index: [2, 8]&#10;Color: (211, 88, 69)\" style=\"width: 20px; height: 20px;background-color: rgb(211, 88, 69);\"></td><td title=\"Index: [2, 9]&#10;Color: (191, 16, 250)\" style=\"width: 20px; height: 20px;background-color: rgb(191, 16, 250);\"></td><td title=\"Index: [2, 10]&#10;Color: (108, 8, 98)\" style=\"width: 20px; height: 20px;background-color: rgb(108, 8, 98);\"></td><td title=\"Index: [2, 11]&#10;Color: (109, 69, 166)\" style=\"width: 20px; height: 20px;background-color: rgb(109, 69, 166);\"></td><td title=\"Index: [2, 12]&#10;Color: (211, 192, 107)\" style=\"width: 20px; height: 20px;background-color: rgb(211, 192, 107);\"></td><td title=\"Index: [2, 13]&#10;Color: (106, 133, 4)\" style=\"width: 20px; height: 20px;background-color: rgb(106, 133, 4);\"></td><td title=\"Index: [2, 14]&#10;Color: (76, 52, 19)\" style=\"width: 20px; height: 20px;background-color: rgb(76, 52, 19);\"></td><td title=\"Index: [2, 15]&#10;Color: (163, 141, 241)\" style=\"width: 20px; height: 20px;background-color: rgb(163, 141, 241);\"></td><td title=\"Index: [2, 16]&#10;Color: (27, 220, 4)\" style=\"width: 20px; height: 20px;background-color: rgb(27, 220, 4);\"></td><td title=\"Index: [2, 17]&#10;Color: (80, 151, 89)\" style=\"width: 20px; height: 20px;background-color: rgb(80, 151, 89);\"></td><td title=\"Index: [2, 18]&#10;Color: (107, 129, 204)\" style=\"width: 20px; height: 20px;background-color: rgb(107, 129, 204);\"></td><td title=\"Index: [2, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [3, 0]&#10;Color: (117, 229, 19)\" style=\"width: 20px; height: 20px;background-color: rgb(117, 229, 19);\"></td><td title=\"Index: [3, 1]&#10;Color: (47, 136, 137)\" style=\"width: 20px; height: 20px;background-color: rgb(47, 136, 137);\"></td><td title=\"Index: [3, 2]&#10;Color: (211, 164, 182)\" style=\"width: 20px; height: 20px;background-color: rgb(211, 164, 182);\"></td><td title=\"Index: [3, 3]&#10;Color: (117, 24, 99)\" style=\"width: 20px; height: 20px;background-color: rgb(117, 24, 99);\"></td><td title=\"Index: [3, 4]&#10;Color: (250, 216, 40)\" style=\"width: 20px; height: 20px;background-color: rgb(250, 216, 40);\"></td><td title=\"Index: [3, 5]&#10;Color: (162, 170, 145)\" style=\"width: 20px; height: 20px;background-color: rgb(162, 170, 145);\"></td><td title=\"Index: [3, 6]&#10;Color: (42, 240, 51)\" style=\"width: 20px; height: 20px;background-color: rgb(42, 240, 51);\"></td><td title=\"Index: [3, 7]&#10;Color: (196, 21, 108)\" style=\"width: 20px; height: 20px;background-color: rgb(196, 21, 108);\"></td><td title=\"Index: [3, 8]&#10;Color: (46, 130, 206)\" style=\"width: 20px; height: 20px;background-color: rgb(46, 130, 206);\"></td><td title=\"Index: [3, 9]&#10;Color: (42, 191, 58)\" style=\"width: 20px; height: 20px;background-color: rgb(42, 191, 58);\"></td><td title=\"Index: [3, 10]&#10;Color: (1, 249, 179)\" style=\"width: 20px; height: 20px;background-color: rgb(1, 249, 179);\"></td><td title=\"Index: [3, 11]&#10;Color: (157, 113, 59)\" style=\"width: 20px; height: 20px;background-color: rgb(157, 113, 59);\"></td><td title=\"Index: [3, 12]&#10;Color: (242, 145, 180)\" style=\"width: 20px; height: 20px;background-color: rgb(242, 145, 180);\"></td><td title=\"Index: [3, 13]&#10;Color: (147, 228, 31)\" style=\"width: 20px; height: 20px;background-color: rgb(147, 228, 31);\"></td><td title=\"Index: [3, 14]&#10;Color: (92, 217, 130)\" style=\"width: 20px; height: 20px;background-color: rgb(92, 217, 130);\"></td><td title=\"Index: [3, 15]&#10;Color: (129, 152, 26)\" style=\"width: 20px; height: 20px;background-color: rgb(129, 152, 26);\"></td><td title=\"Index: [3, 16]&#10;Color: (230, 25, 114)\" style=\"width: 20px; height: 20px;background-color: rgb(230, 25, 114);\"></td><td title=\"Index: [3, 17]&#10;Color: (171, 55, 115)\" style=\"width: 20px; height: 20px;background-color: rgb(171, 55, 115);\"></td><td title=\"Index: [3, 18]&#10;Color: (8, 216, 249)\" style=\"width: 20px; height: 20px;background-color: rgb(8, 216, 249);\"></td><td title=\"Index: [3, 19]&#10;Color: (127, 163, 173)\" style=\"width: 20px; height: 20px;background-color: rgb(127, 163, 173);\"></td></tr><tr><td title=\"Index: [4, 0]&#10;Color: (148, 254, 253)\" style=\"width: 20px; height: 20px;background-color: rgb(148, 254, 253);\"></td><td title=\"Index: [4, 1]&#10;Color: (114, 153, 51)\" style=\"width: 20px; height: 20px;background-color: rgb(114, 153, 51);\"></td><td title=\"Index: [4, 2]&#10;Color: (232, 200, 231)\" style=\"width: 20px; height: 20px;background-color: rgb(232, 200, 231);\"></td><td title=\"Index: [4, 3]&#10;Color: (15, 134, 52)\" style=\"width: 20px; height: 20px;background-color: rgb(15, 134, 52);\"></td><td title=\"Index: [4, 4]&#10;Color: (107, 29, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(107, 29, 0);\"></td><td title=\"Index: [4, 5]&#10;Color: (201, 72, 204)\" style=\"width: 20px; height: 20px;background-color: rgb(201, 72, 204);\"></td><td title=\"Index: [4, 6]&#10;Color: (173, 156, 1)\" style=\"width: 20px; height: 20px;background-color: rgb(173, 156, 1);\"></td><td title=\"Index: [4, 7]&#10;Color: (30, 28, 50)\" style=\"width: 20px; height: 20px;background-color: rgb(30, 28, 50);\"></td><td title=\"Index: [4, 8]&#10;Color: (244, 77, 161)\" style=\"width: 20px; height: 20px;background-color: rgb(244, 77, 161);\"></td><td title=\"Index: [4, 9]&#10;Color: (210, 195, 17)\" style=\"width: 20px; height: 20px;background-color: rgb(210, 195, 17);\"></td><td title=\"Index: [4, 10]&#10;Color: (60, 162, 32)\" style=\"width: 20px; height: 20px;background-color: rgb(60, 162, 32);\"></td><td title=\"Index: [4, 11]&#10;Color: (3, 23, 177)\" style=\"width: 20px; height: 20px;background-color: rgb(3, 23, 177);\"></td><td title=\"Index: [4, 12]&#10;Color: (226, 184, 195)\" style=\"width: 20px; height: 20px;background-color: rgb(226, 184, 195);\"></td><td title=\"Index: [4, 13]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 14]&#10;Color: (201, 197, 149)\" style=\"width: 20px; height: 20px;background-color: rgb(201, 197, 149);\"></td><td title=\"Index: [4, 15]&#10;Color: (110, 27, 238)\" style=\"width: 20px; height: 20px;background-color: rgb(110, 27, 238);\"></td><td title=\"Index: [4, 16]&#10;Color: (93, 65, 107)\" style=\"width: 20px; height: 20px;background-color: rgb(93, 65, 107);\"></td><td title=\"Index: [4, 17]&#10;Color: (40, 10, 208)\" style=\"width: 20px; height: 20px;background-color: rgb(40, 10, 208);\"></td><td title=\"Index: [4, 18]&#10;Color: (27, 74, 132)\" style=\"width: 20px; height: 20px;background-color: rgb(27, 74, 132);\"></td><td title=\"Index: [4, 19]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [5, 0]&#10;Color: (139, 58, 97)\" style=\"width: 20px; height: 20px;background-color: rgb(139, 58, 97);\"></td><td title=\"Index: [5, 1]&#10;Color: (253, 184, 172)\" style=\"width: 20px; height: 20px;background-color: rgb(253, 184, 172);\"></td><td title=\"Index: [5, 2]&#10;Color: (66, 125, 67)\" style=\"width: 20px; height: 20px;background-color: rgb(66, 125, 67);\"></td><td title=\"Index: [5, 3]&#10;Color: (16, 148, 138)\" style=\"width: 20px; height: 20px;background-color: rgb(16, 148, 138);\"></td><td title=\"Index: [5, 4]&#10;Color: (253, 237, 103)\" style=\"width: 20px; height: 20px;background-color: rgb(253, 237, 103);\"></td><td title=\"Index: [5, 5]&#10;Color: (213, 154, 199)\" style=\"width: 20px; height: 20px;background-color: rgb(213, 154, 199);\"></td><td title=\"Index: [5, 6]&#10;Color: (18, 126, 58)\" style=\"width: 20px; height: 20px;background-color: rgb(18, 126, 58);\"></td><td title=\"Index: [5, 7]&#10;Color: (183, 254, 152)\" style=\"width: 20px; height: 20px;background-color: rgb(183, 254, 152);\"></td><td title=\"Index: [5, 8]&#10;Color: (5, 230, 94)\" style=\"width: 20px; height: 20px;background-color: rgb(5, 230, 94);\"></td><td title=\"Index: [5, 9]&#10;Color: (180, 31, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(180, 31, 123);\"></td><td title=\"Index: [5, 10]&#10;Color: (219, 2, 219)\" style=\"width: 20px; height: 20px;background-color: rgb(219, 2, 219);\"></td><td title=\"Index: [5, 11]&#10;Color: (67, 146, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(67, 146, 15);\"></td><td title=\"Index: [5, 12]&#10;Color: (187, 136, 77)\" style=\"width: 20px; height: 20px;background-color: rgb(187, 136, 77);\"></td><td title=\"Index: [5, 13]&#10;Color: (174, 133, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(174, 133, 123);\"></td><td title=\"Index: [5, 14]&#10;Color: (105, 244, 81)\" style=\"width: 20px; height: 20px;background-color: rgb(105, 244, 81);\"></td><td title=\"Index: [5, 15]&#10;Color: (106, 148, 239)\" style=\"width: 20px; height: 20px;background-color: rgb(106, 148, 239);\"></td><td title=\"Index: [5, 16]&#10;Color: (76, 172, 203)\" style=\"width: 20px; height: 20px;background-color: rgb(76, 172, 203);\"></td><td title=\"Index: [5, 17]&#10;Color: (205, 183, 134)\" style=\"width: 20px; height: 20px;background-color: rgb(205, 183, 134);\"></td><td title=\"Index: [5, 18]&#10;Color: (188, 79, 58)\" style=\"width: 20px; height: 20px;background-color: rgb(188, 79, 58);\"></td><td title=\"Index: [5, 19]&#10;Color: (39, 43, 168)\" style=\"width: 20px; height: 20px;background-color: rgb(39, 43, 168);\"></td></tr><tr><td title=\"Index: [6, 0]&#10;Color: (219, 51, 3)\" style=\"width: 20px; height: 20px;background-color: rgb(219, 51, 3);\"></td><td title=\"Index: [6, 1]&#10;Color: (238, 46, 95)\" style=\"width: 20px; height: 20px;background-color: rgb(238, 46, 95);\"></td><td title=\"Index: [6, 2]&#10;Color: (144, 4, 116)\" style=\"width: 20px; height: 20px;background-color: rgb(144, 4, 116);\"></td><td title=\"Index: [6, 3]&#10;Color: (148, 35, 211)\" style=\"width: 20px; height: 20px;background-color: rgb(148, 35, 211);\"></td><td title=\"Index: [6, 4]&#10;Color: (96, 162, 22)\" style=\"width: 20px; height: 20px;background-color: rgb(96, 162, 22);\"></td><td title=\"Index: [6, 5]&#10;Color: (41, 210, 141)\" style=\"width: 20px; height: 20px;background-color: rgb(41, 210, 141);\"></td><td title=\"Index: [6, 6]&#10;Color: (94, 50, 81)\" style=\"width: 20px; height: 20px;background-color: rgb(94, 50, 81);\"></td><td title=\"Index: [6, 7]&#10;Color: (28, 154, 72)\" style=\"width: 20px; height: 20px;background-color: rgb(28, 154, 72);\"></td><td title=\"Index: [6, 8]&#10;Color: (54, 102, 213)\" style=\"width: 20px; height: 20px;background-color: rgb(54, 102, 213);\"></td><td title=\"Index: [6, 9]&#10;Color: (158, 104, 103)\" style=\"width: 20px; height: 20px;background-color: rgb(158, 104, 103);\"></td><td title=\"Index: [6, 10]&#10;Color: (112, 7, 84)\" style=\"width: 20px; height: 20px;background-color: rgb(112, 7, 84);\"></td><td title=\"Index: [6, 11]&#10;Color: (79, 46, 192)\" style=\"width: 20px; height: 20px;background-color: rgb(79, 46, 192);\"></td><td title=\"Index: [6, 12]&#10;Color: (192, 175, 97)\" style=\"width: 20px; height: 20px;background-color: rgb(192, 175, 97);\"></td><td title=\"Index: [6, 13]&#10;Color: (215, 118, 213)\" style=\"width: 20px; height: 20px;background-color: rgb(215, 118, 213);\"></td><td title=\"Index: [6, 14]&#10;Color: (211, 222, 213)\" style=\"width: 20px; height: 20px;background-color: rgb(211, 222, 213);\"></td><td title=\"Index: [6, 15]&#10;Color: (163, 174, 163)\" style=\"width: 20px; height: 20px;background-color: rgb(163, 174, 163);\"></td><td title=\"Index: [6, 16]&#10;Color: (19, 181, 87)\" style=\"width: 20px; height: 20px;background-color: rgb(19, 181, 87);\"></td><td title=\"Index: [6, 17]&#10;Color: (149, 196, 231)\" style=\"width: 20px; height: 20px;background-color: rgb(149, 196, 231);\"></td><td title=\"Index: [6, 18]&#10;Color: (143, 18, 139)\" style=\"width: 20px; height: 20px;background-color: rgb(143, 18, 139);\"></td><td title=\"Index: [6, 19]&#10;Color: (111, 167, 21)\" style=\"width: 20px; height: 20px;background-color: rgb(111, 167, 21);\"></td></tr><tr><td title=\"Index: [7, 0]&#10;Color: (231, 163, 40)\" style=\"width: 20px; height: 20px;background-color: rgb(231, 163, 40);\"></td><td title=\"Index: [7, 1]&#10;Color: (92, 178, 92)\" style=\"width: 20px; height: 20px;background-color: rgb(92, 178, 92);\"></td><td title=\"Index: [7, 2]&#10;Color: (144, 131, 141)\" style=\"width: 20px; height: 20px;background-color: rgb(144, 131, 141);\"></td><td title=\"Index: [7, 3]&#10;Color: (134, 200, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(134, 200, 255);\"></td><td title=\"Index: [7, 4]&#10;Color: (127, 87, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(127, 87, 0);\"></td><td title=\"Index: [7, 5]&#10;Color: (186, 251, 52)\" style=\"width: 20px; height: 20px;background-color: rgb(186, 251, 52);\"></td><td title=\"Index: [7, 6]&#10;Color: (177, 49, 205)\" style=\"width: 20px; height: 20px;background-color: rgb(177, 49, 205);\"></td><td title=\"Index: [7, 7]&#10;Color: (12, 191, 172)\" style=\"width: 20px; height: 20px;background-color: rgb(12, 191, 172);\"></td><td title=\"Index: [7, 8]&#10;Color: (134, 124, 147)\" style=\"width: 20px; height: 20px;background-color: rgb(134, 124, 147);\"></td><td title=\"Index: [7, 9]&#10;Color: (207, 85, 148)\" style=\"width: 20px; height: 20px;background-color: rgb(207, 85, 148);\"></td><td title=\"Index: [7, 10]&#10;Color: (142, 211, 246)\" style=\"width: 20px; height: 20px;background-color: rgb(142, 211, 246);\"></td><td title=\"Index: [7, 11]&#10;Color: (194, 225, 58)\" style=\"width: 20px; height: 20px;background-color: rgb(194, 225, 58);\"></td><td title=\"Index: [7, 12]&#10;Color: (6, 58, 216)\" style=\"width: 20px; height: 20px;background-color: rgb(6, 58, 216);\"></td><td title=\"Index: [7, 13]&#10;Color: (6, 151, 170)\" style=\"width: 20px; height: 20px;background-color: rgb(6, 151, 170);\"></td><td title=\"Index: [7, 14]&#10;Color: (77, 73, 212)\" style=\"width: 20px; height: 20px;background-color: rgb(77, 73, 212);\"></td><td title=\"Index: [7, 15]&#10;Color: (25, 82, 74)\" style=\"width: 20px; height: 20px;background-color: rgb(25, 82, 74);\"></td><td title=\"Index: [7, 16]&#10;Color: (191, 227, 200)\" style=\"width: 20px; height: 20px;background-color: rgb(191, 227, 200);\"></td><td title=\"Index: [7, 17]&#10;Color: (64, 176, 74)\" style=\"width: 20px; height: 20px;background-color: rgb(64, 176, 74);\"></td><td title=\"Index: [7, 18]&#10;Color: (42, 153, 227)\" style=\"width: 20px; height: 20px;background-color: rgb(42, 153, 227);\"></td><td title=\"Index: [7, 19]&#10;Color: (227, 57, 234)\" style=\"width: 20px; height: 20px;background-color: rgb(227, 57, 234);\"></td></tr><tr><td title=\"Index: [8, 0]&#10;Color: (118, 255, 21)\" style=\"width: 20px; height: 20px;background-color: rgb(118, 255, 21);\"></td><td title=\"Index: [8, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 2]&#10;Color: (242, 237, 33)\" style=\"width: 20px; height: 20px;background-color: rgb(242, 237, 33);\"></td><td title=\"Index: [8, 3]&#10;Color: (84, 202, 94)\" style=\"width: 20px; height: 20px;background-color: rgb(84, 202, 94);\"></td><td title=\"Index: [8, 4]&#10;Color: (89, 182, 89)\" style=\"width: 20px; height: 20px;background-color: rgb(89, 182, 89);\"></td><td title=\"Index: [8, 5]&#10;Color: (29, 86, 160)\" style=\"width: 20px; height: 20px;background-color: rgb(29, 86, 160);\"></td><td title=\"Index: [8, 6]&#10;Color: (247, 41, 166)\" style=\"width: 20px; height: 20px;background-color: rgb(247, 41, 166);\"></td><td title=\"Index: [8, 7]&#10;Color: (204, 252, 235)\" style=\"width: 20px; height: 20px;background-color: rgb(204, 252, 235);\"></td><td title=\"Index: [8, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 9]&#10;Color: (108, 200, 35)\" style=\"width: 20px; height: 20px;background-color: rgb(108, 200, 35);\"></td><td title=\"Index: [8, 10]&#10;Color: (93, 200, 69)\" style=\"width: 20px; height: 20px;background-color: rgb(93, 200, 69);\"></td><td title=\"Index: [8, 11]&#10;Color: (171, 79, 205)\" style=\"width: 20px; height: 20px;background-color: rgb(171, 79, 205);\"></td><td title=\"Index: [8, 12]&#10;Color: (216, 102, 250)\" style=\"width: 20px; height: 20px;background-color: rgb(216, 102, 250);\"></td><td title=\"Index: [8, 13]&#10;Color: (191, 55, 174)\" style=\"width: 20px; height: 20px;background-color: rgb(191, 55, 174);\"></td><td title=\"Index: [8, 14]&#10;Color: (4, 218, 224)\" style=\"width: 20px; height: 20px;background-color: rgb(4, 218, 224);\"></td><td title=\"Index: [8, 15]&#10;Color: (63, 13, 206)\" style=\"width: 20px; height: 20px;background-color: rgb(63, 13, 206);\"></td><td title=\"Index: [8, 16]&#10;Color: (192, 213, 35)\" style=\"width: 20px; height: 20px;background-color: rgb(192, 213, 35);\"></td><td title=\"Index: [8, 17]&#10;Color: (240, 198, 139)\" style=\"width: 20px; height: 20px;background-color: rgb(240, 198, 139);\"></td><td title=\"Index: [8, 18]&#10;Color: (216, 141, 191)\" style=\"width: 20px; height: 20px;background-color: rgb(216, 141, 191);\"></td><td title=\"Index: [8, 19]&#10;Color: (3, 152, 19)\" style=\"width: 20px; height: 20px;background-color: rgb(3, 152, 19);\"></td></tr><tr><td title=\"Index: [9, 0]&#10;Color: (237, 119, 128)\" style=\"width: 20px; height: 20px;background-color: rgb(237, 119, 128);\"></td><td title=\"Index: [9, 1]&#10;Color: (220, 70, 47)\" style=\"width: 20px; height: 20px;background-color: rgb(220, 70, 47);\"></td><td title=\"Index: [9, 2]&#10;Color: (160, 49, 3)\" style=\"width: 20px; height: 20px;background-color: rgb(160, 49, 3);\"></td><td title=\"Index: [9, 3]&#10;Color: (177, 97, 14)\" style=\"width: 20px; height: 20px;background-color: rgb(177, 97, 14);\"></td><td title=\"Index: [9, 4]&#10;Color: (129, 172, 129)\" style=\"width: 20px; height: 20px;background-color: rgb(129, 172, 129);\"></td><td title=\"Index: [9, 5]&#10;Color: (11, 118, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(11, 118, 0);\"></td><td title=\"Index: [9, 6]&#10;Color: (216, 168, 242)\" style=\"width: 20px; height: 20px;background-color: rgb(216, 168, 242);\"></td><td title=\"Index: [9, 7]&#10;Color: (127, 122, 16)\" style=\"width: 20px; height: 20px;background-color: rgb(127, 122, 16);\"></td><td title=\"Index: [9, 8]&#10;Color: (33, 222, 67)\" style=\"width: 20px; height: 20px;background-color: rgb(33, 222, 67);\"></td><td title=\"Index: [9, 9]&#10;Color: (61, 220, 98)\" style=\"width: 20px; height: 20px;background-color: rgb(61, 220, 98);\"></td><td title=\"Index: [9, 10]&#10;Color: (20, 33, 97)\" style=\"width: 20px; height: 20px;background-color: rgb(20, 33, 97);\"></td><td title=\"Index: [9, 11]&#10;Color: (39, 237, 68)\" style=\"width: 20px; height: 20px;background-color: rgb(39, 237, 68);\"></td><td title=\"Index: [9, 12]&#10;Color: (101, 156, 224)\" style=\"width: 20px; height: 20px;background-color: rgb(101, 156, 224);\"></td><td title=\"Index: [9, 13]&#10;Color: (71, 65, 77)\" style=\"width: 20px; height: 20px;background-color: rgb(71, 65, 77);\"></td><td title=\"Index: [9, 14]&#10;Color: (134, 184, 175)\" style=\"width: 20px; height: 20px;background-color: rgb(134, 184, 175);\"></td><td title=\"Index: [9, 15]&#10;Color: (212, 102, 227)\" style=\"width: 20px; height: 20px;background-color: rgb(212, 102, 227);\"></td><td title=\"Index: [9, 16]&#10;Color: (164, 7, 180)\" style=\"width: 20px; height: 20px;background-color: rgb(164, 7, 180);\"></td><td title=\"Index: [9, 17]&#10;Color: (170, 64, 69)\" style=\"width: 20px; height: 20px;background-color: rgb(170, 64, 69);\"></td><td title=\"Index: [9, 18]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 19]&#10;Color: (182, 77, 213)\" style=\"width: 20px; height: 20px;background-color: rgb(182, 77, 213);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipythonblocks import BlockGrid\n",
    "from random import  randint\n",
    "\n",
    "grille = BlockGrid(20,10,fill=(0,0,0))\n",
    "\n",
    "for i in range(500):\n",
    "    ligne = randint(0,grille.height-1)\n",
    "    colonne = randint(0,grille.width-1)\n",
    "    bloc=grille[ligne,colonne]\n",
    "    bloc.red=randint(0,255)\n",
    "    bloc.green=randint(0,255)\n",
    "    bloc.blue=randint(0,255)\n",
    "    grille.flash(0.01)\n",
    "    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid = BlockGrid(10, 10, fill=(123, 234, 123))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocks83bda47d-96aa-4598-8c1e-6bfbd7f5bd3e td {border: 1px solid white;}</style><table id=\"blocks83bda47d-96aa-4598-8c1e-6bfbd7f5bd3e\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [0, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [1, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [2, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [3, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [3, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [4, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [4, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [5, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [5, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [6, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [6, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [7, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [7, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [8, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [8, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr><tr><td title=\"Index: [9, 0]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 1]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 2]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 3]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 4]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 5]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 6]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 7]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 8]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td><td title=\"Index: [9, 9]&#10;Color: (123, 234, 123)\" style=\"width: 20px; height: 20px;background-color: rgb(123, 234, 123);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "grid.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "\n",
    "for r in range(grid.height):\n",
    "    for c in range(grid.width):\n",
    "        sq = grid[r, c]\n",
    "        sq.red = 100\n",
    "        \n",
    "        if r % 2 == 0:\n",
    "            sq.green = 15\n",
    "        else:\n",
    "            sq.green = 255\n",
    "        \n",
    "        if c % 2 == 0:\n",
    "            sq.blue = 15\n",
    "        else:\n",
    "            sq.blue = 255\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocks8454f499-bd7f-46ad-96ae-32df5673e963 td {border: 1px solid white;}</style><table id=\"blocks8454f499-bd7f-46ad-96ae-32df5673e963\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [0, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [0, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [0, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [0, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [0, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [0, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [0, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [0, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [0, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [3, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [4, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [5, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [6, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [7, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [8, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [9, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "grid.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocks8e725d46-724c-41ac-89bd-e56c03fca209 td {border: 1px solid white;}</style><table id=\"blocks8e725d46-724c-41ac-89bd-e56c03fca209\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td></tr><tr><td title=\"Index: [3, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td></tr><tr><td title=\"Index: [4, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td></tr><tr><td title=\"Index: [5, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td></tr><tr><td title=\"Index: [6, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td></tr><tr><td title=\"Index: [7, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td></tr><tr><td title=\"Index: [8, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td></tr><tr><td title=\"Index: [9, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "grid[:,0].show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "grid = BlockGrid(10, 10, fill=(123, 234, 15))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 29,
   "metadata": {},
   "outputs": [],
   "source": [
    "for i in range(grid.width):\n",
    "    grid[0,i]=(255,0,0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 30,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocks5558dfd7-669f-4e7c-908e-28d15d82b786 td {border: 1px solid white;}</style><table id=\"blocks5558dfd7-669f-4e7c-908e-28d15d82b786\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 1]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 2]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 3]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 4]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 5]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 6]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 7]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 8]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td><td title=\"Index: [0, 9]&#10;Color: (255, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 0, 0);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [1, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [1, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [2, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [2, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [3, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [3, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [3, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [4, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [4, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [4, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [5, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [5, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [5, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [6, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [6, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [6, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [7, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [7, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [7, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr><tr><td title=\"Index: [8, 0]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 1]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 2]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 3]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 4]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 5]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 6]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 7]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td><td title=\"Index: [8, 8]&#10;Color: (100, 15, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 15);\"></td><td title=\"Index: [8, 9]&#10;Color: (100, 15, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 15, 255);\"></td></tr><tr><td title=\"Index: [9, 0]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 1]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 2]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 3]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 4]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 5]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 6]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 7]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td><td title=\"Index: [9, 8]&#10;Color: (100, 255, 15)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 15);\"></td><td title=\"Index: [9, 9]&#10;Color: (100, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(100, 255, 255);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "grid.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 33,
   "metadata": {},
   "outputs": [],
   "source": [
    "for i in range(grid.height):\n",
    "    for j in range(grid.width):\n",
    "        if (i+j)%2==0:\n",
    "            grid[i,j]=(0,0,0)\n",
    "        else:\n",
    "            grid[i,j]=(255,255,255)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 34,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style type=\"text/css\">table.blockgrid {border: none;} .blockgrid tr {border: none;} .blockgrid td {padding: 0px;} #blocks730a5a79-7e46-4056-84cd-0a1aec944873 td {border: 1px solid white;}</style><table id=\"blocks730a5a79-7e46-4056-84cd-0a1aec944873\" class=\"blockgrid\"><tbody><tr><td title=\"Index: [0, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 1]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [0, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 3]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [0, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 5]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [0, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 7]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [0, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [0, 9]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td></tr><tr><td title=\"Index: [1, 0]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [1, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 2]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [1, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 4]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [1, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 6]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [1, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [1, 8]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [1, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [2, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 1]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [2, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 3]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [2, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 5]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [2, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 7]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [2, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [2, 9]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td></tr><tr><td title=\"Index: [3, 0]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [3, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 2]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [3, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 4]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [3, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 6]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [3, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [3, 8]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [3, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [4, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 1]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [4, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 3]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [4, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 5]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [4, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 7]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [4, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [4, 9]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td></tr><tr><td title=\"Index: [5, 0]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [5, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 2]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [5, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 4]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [5, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 6]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [5, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [5, 8]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [5, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [6, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 1]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [6, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 3]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [6, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 5]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [6, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 7]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [6, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [6, 9]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td></tr><tr><td title=\"Index: [7, 0]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [7, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 2]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [7, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 4]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [7, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 6]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [7, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [7, 8]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [7, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr><tr><td title=\"Index: [8, 0]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 1]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [8, 2]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 3]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [8, 4]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 5]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [8, 6]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 7]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [8, 8]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [8, 9]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td></tr><tr><td title=\"Index: [9, 0]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [9, 1]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 2]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [9, 3]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 4]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [9, 5]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 6]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [9, 7]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td><td title=\"Index: [9, 8]&#10;Color: (255, 255, 255)\" style=\"width: 20px; height: 20px;background-color: rgb(255, 255, 255);\"></td><td title=\"Index: [9, 9]&#10;Color: (0, 0, 0)\" style=\"width: 20px; height: 20px;background-color: rgb(0, 0, 0);\"></td></tr></tbody></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "grid.show()\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "finalized": {
   "timestamp": 1575733298364,
   "trusted": false
  },
  "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.8.2"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": true,
   "toc_window_display": false
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": true
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}