Aller au contenu
Drones

Processing

Introduction à Processing

🎯 Objectif : Comprendre ce qu'est Processing, pourquoi on l'utilise dans ce cours, l'installer et découvrir l'interface. À la fin de cette introduction, tu seras capable de lancer ton premier programme.

Slides du chapitre

Le chaînon manquant

Dans ce cours, tu as déjà programmé avec Scratch : tu as assemblé des blocs colorés pour créer des programmes. C'est super pour comprendre la logique, mais dans le monde réel, les programmes s'écrivent avec du texte.

Le problème ? Passer directement de Scratch à un langage comme C++ ou Python, c'est un peu comme passer du vélo à la moto sur l'autoroute. Il faut une étape intermédiaire.

Processing, c'est exactement ça : un langage de programmation textuel conçu pour être accessible aux débutants, avec des résultats visuels immédiats. Tu écris du code, tu cliques sur Play, et tu vois directement le résultat à l'écran.

Un peu d'histoire

Processing est né en 2001 au MIT (Massachusetts Institute of Technology), créé par Ben Fry et Casey Reas. Leur objectif : permettre aux artistes, designers et non-programmeurs de créer des œuvres visuelles avec du code, sans avoir besoin d'un diplôme en informatique.

Le projet a tellement bien marché qu'il a reçu le Golden Nica du prestigieux festival Ars Electronica en 2005. Aujourd'hui, Processing est utilisé dans le monde entier pour l'art numérique, la visualisation de données, et surtout... l'enseignement de la programmation.

Pourquoi Processing dans un cours de Drones & Robotique ?

Voici le secret : la syntaxe de Processing est quasiment identique à celle du C++ utilisé pour programmer les cartes Arduino.

Processing Arduino (C++)
void setup() { } void setup() { }
void draw() { } void loop() { }
int x = 100; int x = 100;
if (x > 50) { } if (x > 50) { }
for (int i = 0; i < 10; i++) for (int i = 0; i < 10; i++)

Tu vois ? C'est le même langage (ou presque). Techniquement, Processing est basé sur Java, mais sa syntaxe est tellement proche du C++ que ce que tu apprends ici, tu le réutiliseras directement quand on passera à Arduino !

💡 Fun fact : Processing peut même être utilisé pour programmer directement des cartes Arduino, grâce à un mode intégré.

Installer Processing

Téléchargement

  1. Va sur https://processing.org/download
  2. Clique sur le bouton de téléchargement correspondant à ton système (Windows, Mac ou Linux)
  3. Lance le fichier téléchargé — c'est tout, pas besoin de décompresser ni de configurer quoi que ce soit !
  4. Ouvre Processing

L'interface

Quand tu ouvres Processing, voici ce que tu vois :

Zone Rôle
Zone de code (grande zone blanche) C'est là que tu écris ton programme
Bouton ▶ Play (en haut à gauche) Lance ton programme
Bouton ■ Stop Arrête ton programme
Console (zone noire en bas) Affiche les messages et les erreurs
Fenêtre de résultat S'ouvre quand tu cliques sur Play — c'est ton canevas !

💡 Astuce : Si tu vois du texte rouge dans la console, c'est une erreur. Pas de panique ! Lis le message, il te dit souvent quelle ligne pose problème.

La structure d'un programme Processing

Tout programme Processing a la même structure de base :

void setup() {
  // Code exécuté UNE SEULE FOIS au démarrage
}

void draw() {
  // Code exécuté EN BOUCLE (60 fois par seconde !)
}

Le parallèle avec Scratch

Scratch Processing Rôle
🚩 Quand le drapeau vert est cliqué void setup() { } S'exécute une seule fois au début
🔁 Répéter indéfiniment void draw() { } S'exécute en boucle, encore et encore
La scène (arrière-plan) Le canevas (canvas) La zone où on dessine

Pour créer un canevas, on utilise size() dans le setup() :

void setup() {
  size(400, 300);  // Crée un canevas de 400 pixels de large et 300 de haut
}

void draw() {
  // On dessinera ici
}

⚠️ Attention : size() doit toujours être la première instruction dans setup().

Ton premier programme

Tape ce code dans Processing et clique sur ▶ Play :

void setup() {
  size(400, 300);
}

void draw() {
  background(200);
  ellipse(200, 150, 100, 100);
}

Tu devrais voir une fenêtre grise avec un cercle blanc au centre. Félicitations, tu viens d'écrire ton premier programme textuel ! 🎉

Ne t'inquiète pas si tu ne comprends pas encore chaque ligne — on va tout décortiquer dans les prochains chapitres.

Ce qu'on va apprendre dans les prochains chapitres

Voici un aperçu de la suite. Chaque concept a son équivalent en Scratch que tu connais déjà :

Chapitre Concept En Scratch En Processing
0b Outils de dessin Stylo (couleur, taille) rect(), ellipse(), stroke(), fill()
0c Couleurs Couleur du stylo / du lutin fill(255, 0, 0), background()
1 Premières formes Dessiner avec le stylo Combiner formes et couleurs
2 Variables Bloc "mettre maVariable à 10" int x = 10;
3 Conditions Bloc "Si ... Alors ... Sinon" if (x > 5) { } else { }
4 Boucles Bloc "Répéter 10 fois" for (int i = 0; i < 10; i++)
5 Fonctions Bloc "Mes blocs" void dessinerMaison(int x, int y)
6 Animation Mouvement continu Variable qui change dans draw()

Les types de données (un avant-goût)

En Scratch, une variable peut contenir n'importe quoi. En Processing (comme en C++ et Arduino), chaque variable a un type qui dit quel genre de valeur elle contient :

Type Ce que ça stocke Exemple
int Un nombre entier int age = 25;
float Un nombre à virgule float prix = 9.99;
boolean Vrai ou Faux boolean estVisible = true;
String Du texte String nom = "Alice";
color Une couleur color rouge = color(255, 0, 0);

Il en existe d'autres qu'on découvrira au fur et à mesure (char, long, double...). L'important pour l'instant : quand tu crées une variable, tu dois toujours dire son type en premier.

int x = 100;        // ✅ Correct
float y = 3.14;     // ✅ Correct
x = "bonjour";      // ❌ Erreur ! x est un int, pas du texte

On verra tout ça en détail dans le chapitre sur les variables.

Pour aller plus loin

Si tu veux explorer Processing par toi-même :

  • Documentation officielle : https://processing.org/reference — la liste complète de toutes les fonctions
  • The Coding Train (YouTube) : Daniel Shiffman explique Processing de façon fun et accessible
  • Nature of Code (https://natureofcode.com) : un livre gratuit pour les plus avancés, mêlant code et simulation physique
  • OpenProcessing (https://openprocessing.org) : des milliers de créations pour s'inspirer