Votre algoblob jusqu'ici était tout en blanc. Mais qui a dit qu'ils étaient toujours blanc, qu'ils le seraient toujours ? Non, il peuvent voir la vie en couleur !

Première approche de la couleur

On va reprendre le programme python basique qui affichait un algoblob au centre de l'écran. 

import p5

largeur = 500
hauteur = 500
abscisse = 250
ordonnee = 250
rayon = 20

def setup():
    p5.size(largeur,hauteur)

def draw():
    p5.background(0)
    p5.circle(abscisse,ordonnee,rayon)

p5.run()

Il va suffire de modifier un tout petit peu ce programme pour pouvoir ajouter de la couleur. Dans p5, la fonction fill indique la couleur avec laquelle on va remplir les objets qui seront dessinés par la suite. Par exemple, fill('white') indique que l'on va remplir en blanc les figures.

  1. Ouvrez l'éditeur avec lequel vous travaillez et recopiez le code ci dessus.
  2. Entre p5.background(0) et p5.circle(...) ajoutez la ligne p5.fill('SeaGreen)
  3. Éxécutez le code.

Comme vous pouvez le constater, votre algoblob est maintenant vert. C'est l'une des façon de choisir les couleurs : en les appelant par leur nom. Ces noms sont en anglais et il y a 140 noms différents qui ont été standardisé. Vous pouvez les voir sur ce site par exemple

Notre problème va être de parcourir les 7 couleurs de l'arc en ciel.

Plusieurs couleurs

Pour pouvoir avoir plusieurs couleur, il va falloir stocker deux informations :

La première chose que nous allons faire, c'est stocker la liste des couleurs.

Les listes en python

Une liste en python, c'est un ensemble d'objets réunis dans une même structure. Si on considère qu'une variable est une boîte dans laquelle on place un contenu, une liste est une étagère où l'on range ces boites. (notez bien qu'une étagère est une grosse boîte: une liste est une variable aussi).

Ce qui est appelé une liste en python est en général appelé un tableau dans les autres langages de programmation, du fait que l'on peut accéder au contenu à partir du numéro de la case de l'étagère. On parle d'ailleurs de tableaux dynamiques car la taille du tableau peut évoluer au cours du programme (ce qui n'est pas vrai par défaut pour les tableaux en C par exemple).

Comment crée t'on une liste ?

Pour créer une liste il suffit d'utiliser la notation avec les crochets 

maListe=[]

On peut remplir la liste directement au moment de sa création. Vous savez par exemple qu'il faut manger 5 fruits et légumes par jour ? Voici une liste de légumes disponibles. 

maListe=['carotte','patates','chou','navet','haricot']

On peut aussi ajouter du contenu dans une liste en utilisant la méthode append qui permet de rajouter un élément à la fin de la liste. Par exemple pour ajouter les courgettes dans ma liste de légume : 

maListe.append('courgettes')
Comment accède t'on aux éléments d'une liste ?

Là aussi, on utilise la notation avec les crochets pour accéder à un élément précis de la liste, par son numéro.

À votre avis, que va afficher le code ci dessous ? Essayez le pour vérifier. maListe=maListe=['carotte','patates','chou','navet','haricot'] maListe.append('courgettes') legume = maListe[2] print (legume)

Vous vous attendiez peut être à voir patates comme affichage, qui est le second élément de la liste. Mais la liste est numérotée à partir de 0.

La numérotation d'une liste commence à 0. Carotte, le premier élément de la liste a comme numéro 0. Pensez à un immeuble. Un immeuble qui a 5 niveaux aura le rez de chaussée (étage numéroté 0), l'étage numéroté 1 qui est bien le second niveau de l'immeuble, etc.

Il faut noter qu'un élément de la liste est accessible en lecture comme en écriture. On peut remplacer chou par poivron 

maListe[2] = 'poivron'
Enlever un élément de la liste

Pour enlever un élément de la liste, on utilise la méthode pop. Utilisée avec un argument, elle retire l'élément qui a cet indice. Sans argument, elle retire le dernier élément de la liste. 

maListe.pop() #retire 'courgettes'
maListe.pop(1) # retire 'patates'
  1. Dans le cadre python ci dessous, créer une liste d'éléments sur un sujet qui vous plait
  2. Affichez la liste en faisant print(...) (avec le nom de la liste). Vous afficherez la liste après chaque étape qui suit
  3. Ajoutez quelques éléments
  4. Supprimer un élément dans la liste et l'élement de la fin
  5. Affichez un élément de la liste que vous choissisez
  6. Modifiez un élément de la liste de votre choix.
  7. Profitez. Amusez vous un peu à essayer ce que vous voulez. Mettez des variables dans votre liste, des listes de listes. Vous avez le droit de faire des erreurs !
 # Mettez ici votre code Python sur les listes
  • On crée une liste par maliste=[] (en mettant éventuellement un contenu)
  • on ajoute un élément à la fin de la liste par maListe.append(element)
  • on accède à l'élément d'indice i par maListe[i] pour le lire ou le modifier
  • on supprimme un élément de la liste en utilisant maListe.pop() (avec ou sans indice)

Mise en œuvre

Nous allons utiliser les 7 couleurs de l'arc en ciel comme on les définit habituellement :

Ce qui donne en anglais :

Dans l'éditeur ajoutez au début de votre programme une liste ( un tableau ) que vous nommerez couleurs qui contient les chaines de caractère de ces septs couleurs nommées

couleurs = ['red',...]

Il faut aussi ajouter une variable qui indique le numéro de la couleur sur lequel on se trouve. Comme il y a 7 couleurs, le numéro de la couleur ira de 0 à 6.

Dans l'éditeur, au début de votre programme ajoutez une variable numCouleur qui vaudra initialement 0 et qui contiendra dans notre programme l'indice de la couleur dans le tableau

Nous avons maitenant les variables nécessaires : le tableau qui contient les couleurs et la variable qui indique la position dans le tableau. Il ne reste plus qu'à modifier le code pour que ce soit ces éléments qui indiquent la couleur de remplissage

Dans votre programme, remplacez la couleur 'SeaGreen' par la lecture de la couleur dans le tableau : p5.fill(couleurs[numCouleur])

Ne reste plus maintenant qu'à gérer l'événement : au clic de souris, il faudra passer à la couleur suivante.

Si vous en avez besoin, vous pouvez relire la partie sur l'utilisation des événements pour gérer le clic de souris et la partie sur les tests pour gérer le retour de la couleur à 0.

Faîtes en sorte qu'un clic de souris passe à la couleur suivante. Pour cela,

  • Quand on clique, vous devez ajouter 1 à numCouleur
  • Si numCouleur arrive à 7, il faut le ramener à 0 (on a fait le tour)

Testez votre programme et validez le. À chaque clic de souris, la couleur doit changer.

Voilà ! vous avez réussi à faire changer de couleur votre algoblob. Mais vous n'êtes pas au bout de vos suprises... vous avez utilisé 7 couleurs. Vous en aviez 140 à votre disposition. Nous verrons comment nous pouvons en avoir ... 16 777 216 (oui, plus de 16 millions...).

Vous pouvez consulter une version javascript un peu enrichie de ces algoblobs de couleurs

Compléments

Remarque : pour faire le tour des numéros de couleurs de 0 à 6, vous pouvez utiliser un test, comme vous avez été encouragé à le faire ci dessus. Vous pouvez aussi utiliser l'opérateur % (se lit modulo). Cet opérateur donne le reste dans une division euclidienne. Par exemple, si on veut le reste de la division par 7 d'une variable x, on fera reste = x % 7 . Ce nombre sera toujours entre 0 et 6 (c'est le reste d'une division par 7). Il est évident que 7%7 vaut 0. On peut donc écrire numCouleur = numCouleur % 7 plutôt que de faire un test.

Si vous souhaitez réviser les tableaux, vous pouvez aussi consulter l'introduction aux tableaux sur france-ioi