Le but de ce cours est d'introduire les bases de l'algorithmique et de la programmation. Les concepts de base seront introduits progressivement à l'aide de nombreux exemples et exercices.

Un algorithme est une suite finie et non ambiguë d'instructions permettant de résoudre un problème particulier. En informatique, on utilise des langages de programmation pour formuler les algorithmes et produire des programmes qui les appliquent. Contrairement aux langues naturelles, les langages de programmation ont une syntaxe très restreinte et précise. Les instructions sont écrites de façon très détaillée et non ambiguë car les ordinateurs ne savent pas compléter les détails et résoudre les ambiguïtés. Un ordinateur sait faire des calculs très rapidement sans se fatiguer et sans faire des erreurs, mais n'est doté d'aucune intelligence ou connaissance.

Exercice 1.1. Écrivez un algorithme pour une tâche quotidienne, par exemple le brossage des dents. Imaginez que vous devez fournir des instructions à quelqu'un qui ne connaît pas du tout les brosses à dents, les dentifrices et les dents. Faites des instructions ridiculement simples et détaillées. Utilisez des mots comme « si », « sinon », « répéter » dans vos instructions. Par exemple :

tant que la température de l'eau n'est pas 22°C
  si la température de l'eau est supérieure à 22°C
    tourner le mélangeur légèrement à droite
  sinon
    tourner le mélangeur légèrement à gauche

...

répéter 100 fois
  bouger la brosse 1 cm vers le haut
  bouger la brosse 1 cm vers le bas

Exercice 1.2. Écrivez la recette de votre plat préféré sous forme d'algorithme. Commencez par décrire les entrées de l'algorithme : les ingrédients et le matériel utilisés. Proscrire des instructions ambiguës telles que « blanchir les tomates » ou « 10 min avant que ça soit prêt, saupoudrer au fromage râpé ».

Source @bibcoline

Traditionnellement, on apprend les bases de la programmation en utilisant des langages comme Java ou Python. Dans un premier temps nos programmes affichent leur résultats sous forme de texte et l'utilisateur interagit avec eux en tapant du texte dans le terminal. Il faut atteindre un bon niveau avant de s'attaquer aux interfaces graphiques. Processing est un environnement plus intuitif où notre code produit un résultat visuel et on peut interagir avec le programme en utilisant la souris (et beaucoup d'autres périphériques). Cela rend apprentissage des concepts de base plus facile et plus ludique. Processing est basé sur Java en quand on le maîtrise, le passage à des langages de programmation plus « sérieux » tels que Java ou C++ est facile.

Processing est né en 2001 au sein du groupe de recherche "Aesthetics and Computation" à MIT Media Lab. C'est un projet open source initié par deux étudiants, Casey Reas et Benjamin Fry. C'est à la fois un langage de programmation et un environnement de développement. Beaucoup d'artistes et de graphistes utilisent Processing comme outil de production mais son utilisation n'est pas limitée à ce domaine. C'est un langage généraliste disposant de toutes les fonctionnalités des langages de programmation modernes avec une large communauté d'utilisateurs qui partagent du code et des idées sur son site web.

L'application Processing est un environnement de développement simplifié presque aussi facile à utiliser qu'un éditeur de texte. Il a des menus habituels permettant d'ouvrir et enregistrer des croquis (les programmes Processing sont appelés des croquis ou sketches en anglais) et d'autres fonctionnalités que nous allons découvrir progressivement. À noter également les deux boutons avec des pictogrammes aussi connus qu'on n'a pas besoin de les expliquer.

Exercice 1.3. Lancez Processing. Appuyez sur le bouton ▶️. Que se passe-t-il ?

Exercice 1.4. Ouvrez un des exemples fournis avec Processing. Menu Fichier/Exemples/Topics/Drawing/ContinuousLines. Exécutez. Jetez un œil sur le code. Pouvez-vous expliquer comment ça marche ?

size(640, 480);
line(20, 20, 620, 460);

Dans un premier temps nos programmes seront des suites d'instructions. On peut comparer les instructions aux phrases d'une langue naturelle. Chaque instruction se termine par un point-virgule (contrairement aux phrases qui se terminent par un point). Il y a plusieurs types d'instructions qu'on va étudier plus tard. Pour l'instant nos instructions sont des appels de fonctions. Une fonction est une partie de programme qui effectue une tâche précise. Un appel de fonction est composé du nom de la fonction suivi par une liste d'arguments entre parenthèses. Les arguments sont des données nécessaires à la fonction pour accomplir sa tâche. Si vous vous adressez à un ami, vous allez utiliser quelque chose comme :

Dessine une ligne entre les points (20, 20) et (620, 460) s'il te plaît.

Si votre ami est un ordinateur, vous allez omettre les politesses et utiliser un format particulier :

line(20, 20, 620, 460);

La fenêtre qui s'ouvre lorsque l'on appuie sur le bouton ▶️ est constituée de pixels. On peut l'imaginer comme une sorte de papier millimétré. Chaque pixel a des coordonnées x et y mais contrairement à la façon dont on représente habituellement un système de coordonnées cartésiennes, l'axe y pointe vers le bas et l'origine se trouve dans le coin supérieur gauche.

C'est notre job de préciser quelles formes et quelles couleurs s'affichent sur ce canevas de pixels.

Source xkcd

On utilise la fonction size pour préciser la taille de la fenêtre. Les arguments sont la largeur et la hauteur en pixels.

size(w, h);

On va apprendre à dessiner quelques formes primitives. Pour chaque forme, on verra quelles sont les informations nécessaires pour spécifier son emplacement et sa taille et comment fournir ces informations à Processing.

Le point est la forme la plus simple et un bon point de départ. Pour dessiner un point, on a seulement besoin de ces coordonnées x et y.

point(x, y);

Même si théoriquement il est possible de dessiner tout en n'utilisant que des points, Processing offre des fonctions permettant de dessiner d'autres formes.

La ligne n'est pas très compliquée non plus. Une ligne entre deux points A et B est complètement déterminée par les coordonnées de A et B :

line(xa, ya, xb, yb);

Ici les choses se compliquent légèrement car il y a plusieurs façons de spécifier un rectangle :

Le mode par défaut est CORNER.

Quand on est à l'aise avec les rectangles, dessiner une ellipse devient simple. La fonction ellipse() a quatre arguments qui décrivent le rectangle qui est la boîte englobante de l'ellipse. Les ellipseMode sont les mêmes sauf que celui par défaut est CENTER.

Exercice 1.5. Dans une fenêtre de taille 600x400 dessinez un rectangle de largeur 300 et hauteur 200 centré dans la fenêtre. Dessinez les diagonales du rectangle. Dessinez un cercle de rayon 50 dont le centre coïncide avec le sommet supérieur gauche du rectangle.

Exercice 1.6. Dans votre éditeur de code, double-cliquez sur le mot rect pour le sélectionner. Utilisez le menu Aide\Chercher dans la documentation ou le raccourci Ctrl+Maj+F pour accéder à la documentation de cette fonction. La documentation est votre amie, n'hésitez pas à la consulter !

Exercice 1.7. Utilisez la documentation (menu Aide\Documentation) pour apprendre à dessiner d'autres formes primitives : arc(), triangle() et quad().

Exercice 1.8. Dessinez un objet simple de votre choix en utilisant les formes primitives que vous avez apprises.