Faire

Depuis les débuts de l’informatique, des artistes se sont intéressés à la programmation. Comprendre quelques principes vous permet d’écrire des programmes capables d’augmenter vos créations, de créer vos outils ou de vous simplifier la tâche.

Dans le web, les enjeux sont différents, améliorer l’ergonomie, la mise en page, l’interactivité, la navigation ou la gestion des contenus.

Inception

Vous utilisez régulièrement des programmes dans votre quotidien. Omniprésents et dans des formes diverses, on les retrouve dans les objects électroniques (montre, calculatrice, appareil photo…), ordinateurs, smartphones ou serveurs. Votre ordinateur utilise plusieurs « couches » de programmes pour fonctionner. Un logiciel comme Firefox peut lui‐même lancer des « petits » programmes dans un langage comme JavaScript ou autres.

Le but

Les programmes ont généralement une entrée (action, données…) et une sortie (un résultat). Vous donnez des informations à une machine et elle vous retourne une autre information.
Exemples :

  • Je donne une photo en couleurs à un programme et celui‐ci me retourne celle‐ci en noir et blanc.
  • Je clique sur un pixel, celui‐ci devient orange ou blanc selon sa couleur.

Entre l’entrée et la sortie, des étapes seront nécessaires, des répétitions, des décisions, des opérations ou traitements.

Sur le premier exemple, pour transformer une photo en noir et blanc, le programme va lire ligne par ligne, point par point, la valeur de rouge, vert et bleu de chaque pixel présent dans la photo, faire une moyenne et l’attribuer aux trois couleurs.
Un pixel de cette couleur R255,V255,B0 donnera un gris R170, V170, B170 ((255+255+0)/3 =170).

Un problème, des solutions

La plus grande difficulté en programmation consiste à décomposer les choses pour communiquer avec la machine et sa logique.
Voici quelques actions :

  • Faire le lit ;
  • Vider la corbeille ;
  • Ranger les affaires ;
  • Vider le lave‐vaisselle.
Dans la vie comme dans un programme, pour faire la suite à plus grande échelle, il faut savoir faire ces petites actions. Par expérience, dans un programme plus long, il est préférable de les tester individuellement.

Supposons que je sois seul dans ma maison et que je dois réaliser ses tâches dans toutes les pièces. Un petit programme serait de dire :


Dans la chambre 1 :
 si le lit n'est pas fait : le faire
 si la corbeille est pleine : la vider
 si des affaires trainent : les ranger
Dans la chambre 2 :
 si le lit n'est pas fait : le faire
 si la corbeille est pleine : la vider
 si des affaires trainent : les ranger
Dans la cuisine :
 si des affaires trainent : les ranger
 si le lave-vaisselle est plein : le vider

Cette version ci‐dessus fonctionne parfaitement, mais en cas d’oubli (passer l’aspirateur ?), la mise à jour du programme nécessite trop d’intervention. Une écriture plus efficace serait de dire


Dans chaque pièce :
 si le lit existe et qu'il n'est pas fait : le faire
 si la corbeille existe et qu'elle est pleine : la vider
 si des affaires trainent : les ranger
 si le lave-vaisselle existe et qu'il est plein : le vider
 passer l'aspirateur
puis passer à la pièce suivante.

Vous avez ci‐dessus un algorithme utilisant boucle et conditions. Si on suppose que faire un lit s’apprend, il faudrait créer une fonction pour réaliser les étapes nécessaires.

Dire des choses simples

Un exercice plus complexe pour les débutants.
J’ai un hotel de 4 étages avec 4 chambres par étage, les chambres ont un numéro commençant par le numéro de l’étage, voici un schéma :

/'''''''''''''''\
-----------------
3E  = 41 42 43 44
2E  = 31 32 33 34
1ER = 21 22 23 24
RDC = 11 12 13 14
-----------------

Quelques remarques :

  • Ma description n’était pas très précise, mais le schéma exprime les règles en un clin d’œil ;
  • Ajouter un étage et écrire 51, 52, 53, 54 ne demande pas un effort surhumain.

Je vais écrire un programme qui me donne les numéros de chambre 11,12,13,14,21,22,23,24,(…),43,44.
On décompose.

1. J’affiche

console.log('chambre n'+11); // affiche dans la console (pomme+alt+j) 'chambre n11'
// ou
console.log('chambre n'+1+1); // affiche dans la console (pomme+alt+j) 'chambre n11'

Le JavaScript est souple et parfois troublant, 1+1=2 mais en présence de chaîne de caractères ''+1+1='11' et ''+(1+1)='2'.

2. Je boucle pour un étage

Pour la définition de for : voir sur le mdn

for(var i=1;i<5;i++){ // la boucle des chambres i
  console.log('chambre n1'+i); // affiche dans la console 'chambre n1i' avec i ayant pour valeur successive 1,2,3,4
}

3. Je boucle pour chaque étage

for(var j=1;j<5;j++){ // la boucle des étages j
 for(var i=1;i<5;i++){ // la boucle des chambres i
   console.log('chambre n'+j+i); // affiche dans la console 'chambre nji' avec i et j ayant pour valeur successive 1,2,3,4
 }
}

L’exercice est fini, l’objectif est atteint. Je vous invite à modifier les valeurs et ajouter un étage pour voir si vous avez compris la logique du code.

Avec deux boucles vous pouvez placer facilement des éléments en x et y sur une grille.

La machine, le réseau, l’affichage

Avant de faire un programme, il faut prendre en compte les éléments liés au contexte d’utilisation.
Si votre programme est en ligne, l’environnement influence le comportement de la machine. Une erreur fréquente consiste à manipuler un fichier (exemple : une image), sans avoir vérifié que celle‐ci est totalement chargé. Sur un jeu, ne pas inclure de chargement d’images avant le lancement, provoque un laps de temps sans personnage ou décor.

Si votre code doit afficher des choses, la gestion de l’affichage ou du « draw » est importante pour la narration. Dans les années 90, un ami avait codé une sorte de jeu de l’oie, sa première version n’avait pas de pause entre les lancés de dés, la partie durée environ 500 millisecondes.