NOMBRES - Curiosités, théorie et usages Accueil DicoNombre Rubriques Nouveautés Édition du: 07/02/2021 Orientation générale  DicoMot Math Atlas Actualités M'écrire Barre de recherche DicoCulture Index alphabétique Références Brèves de Maths
	Informatique
Débutants Programmation	Programmation avec Processing				Glossaire Informatique Glossaire Algorithme
INDEX Informatique Multimédia Ordinateur	Index (portail)	Processing	Premiers progs	Animations
	Fonctions	Manipulations
		Sommaire de cette page >>> Cercles variables >>> Deux carrés >>> Carrés gigognes >>> Animation: cercle clignotant >>> Arbre de Pythagore >>> Bilan

PROGRAMMATION

PROCESSING – Premiers Programmes

Apprentissage les notions essentielles par l'exemple.

Note: tous les programmes de ces pages peuvent être copiés-collés pour une exécution immédiate.

Cercles variables

Programme

void setup() {

background(255,0,0);

size(200, 200);

frameRate(30);

}

void draw(){

float taille= mouseX/2;

ellipse(mouseX,mouseY,taille,taille);

}

Dessin

But

Dessiner un cercle dont la tailles est fonction de la position de la souris en horizontal.

Programme

L'initialisation est classique.

Dans la zone dessin (draw), on définit une variable (taille) qui prend la valeur le l'abscisse en X de la souris (mouseX), donc faible à gauche et grande en allant vers la droite.

Dessin du cercle en positionnant son centre là où se trouve la souris (mouseX, mouseY) et en précisant que l'ellipse aura la même taille en hauteur et en largeur (donc, un cercle).

Exécution

Un balayage de la zone graphique avec la souris produit l'effet présenté sur l'image.

Apprentissage des instructions

background (255, 0, 0);	Fixe la couleur de fond de la zone image. On peut définir les trois composantes comme ici ou choisir la couleur sur la palette des couleurs via l'onglet "Outils'.
size(200, 200);	Fixe la taille de la zone image. Ici 200 pixels en x et 200 pixels en y.
frameRate (30)	Fixe le rythme (en fois par seconde) du rafraichissement de l'image et donc de la prise en compte des coordonnées de la souris.
float	Indique que la variable qui suit est un nombre à virgule (avec des décimales); ici, ce nombre est la taille du cercle. Notez que toute variable doit être précédée de sa nature. On notera, par exemple: int nbbilles = 10 pour signifier que le nombre de billes est dix, un nombre entier (int).
mouseX et mouseY	Relève la position actuelle en x et y de la souris.
ellipse (x, h, l, h);	Demande la réalisation d'une ellipse avec son point central x et y, suivi de sa larguer et de sa hauteur.

Deux carrés

Programme

void setup() {
 size(500, 500); noLoop(); 
 background (0, 255, 255);
}
 
void draw() {
 stroke (#FC0571);
 strokeWeight (5);
 fill (#1405FC);
 rect (100, 100, 200, 200);
 
 stroke (#FC0571);
 fill (#05FC76);
 rect (150, 150, 100, 100);
}
 

Dessin

But

Dessiner deux carrés concentriques avec définition des couleurs.

Programme

L'initialisation est classique. On demande d'exécuter un seul tracé avec noLoop.

Le programme de dessin commence par définir l'épaisseur du tracé (stroke) et l'épaisseur du trait (strokeWeight). L'instruction fill indique la couleur de remplissage.

L'instruction rect dessine le rectangle dont le coin supérieur gauche est (100, 100) et qui mesure 200 de long et même chose en largeur.

Les couleurs ont été sélectionnées à partir de la palette accessible avec l'onglet "outils".

Cliquez sur la couleur et copier-coller la valeur dans l'instruction.

Exécution

Le programme dessine les deux rectangles une seule fois et s'arrête.

Apprentissage des instructions

stroke (…);	Fixe la couleur des traits, ici celle du périmètre du rectangle.
strokeWeight (…);	Fixe l'épaisseur du trait en nombre de pixels. Accepte les valeurs décimales.
fill (…);	Définit la couleur du remplissage (pot de penture).
rect (x, y, L, l)	Commande le dessin d'un rectangle dont les côtés sont parallèles au bord de l'image. Un quadrilatère quelconque sera définit par ses quatre sommets avec quad (les huit coordonnées).

Présentation Le programme écrit sans mise en forme, comme ci-dessous, fonctionne aussi. Mais avouez qu'il est difficile de s'y reconnaitre. La présentation vue ci-dessus est bien plus pratique. Vous pouvez demander une mise en forme de votre programme en utilisant: Modifier / Mise en forme automatique.

void setup(){size(500,500); noLoop();background(0,255,255);}
void draw() { stroke(#FC0571); strokeWeight(5);fill(#1405FC); 
rect(100,100,200,200); stroke(#FC0571); fill(#05FC76); rect(150,150,100,100);}

Carrés gigognes

Programme

void setup(){
 size(520,520); noLoop(); 
 background(0,255,255);
}
 
void draw() {
 int d = 26;
 stroke(#FC0571);
 strokeWeight(10);
 for (int i = 0; i<10 ; i+=1) {
 fill(#05FC76+50000*i);
 rect(10+i*d, 10+i*d,
 500-2*i*d, 500-2*i*d);
  }
}
 
 Dessin

But

Dessiner une série de carrés emboités, gigognes de différentes couleurs

Programme

Initialisation (setup) classique.

Dessin (draw): déclaration d'une variable d comme décalage en nombre entier (int pour integer = nombre entier en anglais).

Définition des paramètres du tracé des traits des graphiques qui suivent (ici, les rectangles).

Lancement d'une boucle (for) qui va tracer dix carrés. Spécification du remplissage avec le nom de la couleur exprimé en hexadécimal (#05FC76) obtenu avec la palette des couleurs. La quantité 50000 est ajoutée à chaque nouvelle boucle pour modifier la couleur.

Tracé du rectangle avec des coordonnées calculées pour créer le décalage en position et le rétrécissement de la taille du carré.

Exécution

Le programme dessine les dix carrés avec un cadre rouge à chaque fois et un remplissage de couleurs différentes pour chacun.

Apprentissage des instructions

int	Introduit une variable en nombre entier (integer en anglais).
for (…) { … }	Introduit la définition d'une répétition du traitement définit entre les parenthèses {…}. Notez bien la syntaxe sans point-virgule. Dans la parenthèse on trouve les trois précisons suivantes:
(int i = 0;	valeur du paramètre de départ. Ici i = 0, toujours un entier, mais on le précise tout de même (int)
i < 10	quantité de répétitions (d'itérations). Ici, tant que i n'atteint pas la valeur 10, soit dix itérations.
i+ = 1	valeur à additionner à i à chaque itération. Cette manière de faire indique que i passe à la valeur i + 1. On aurait pu écrire: i = i + 1.
#05FC76	Manière d'exprimer un nombre en hexadécimal. Nous verrons d'autres possibilitésf pour exprimer les couleurs.

Animation: cercle clignotant

Programme

int x = 0; int y = 100; int coul = 0;
void setup () {
 size (200, 200); 
}
void draw() {
  eff (); des ();
}
void eff () {
 background (255);
}
void des () {
 fill (#161EF0 + coul);
 ellipse (x, y, 100, 100); 
  x = x + 1; coul = coul + 1000;
 if (x > 200) { x = 0; }
}
 
 Dessin (deux instantanés)

But

Dessiner un cercle qui traverse l'écran en changeant de couleur. On utilisera la notion de fonction pour écrire ce programme.

Programme

Déclaration des variables (x, y et coul).

Initialisation (setup) de la zone image.

Dessin (draw): deux fonctions sont appelées:

eff () pour effacer l'image, et

des () pour dessiner

On se souvient que le programme sous draw est répété sans arrêt. Alors, on commence par effacer le tableau avec background pour ensuite dessiner la nouvelle image. La persistance rétinienne fait son effet.

La fonction effacer consiste simplement à remettre le fond d'image en blanc (255).

La fonction dessiner créé l'ellipse en la remplissant d'une couleur qui évolue avec la variable coul.

L'abscisse x est incrémentée (addition de 1) et repasse à 0 si elle atteint 200 (instruction if).

La couleur est augmentée de 1000 à chaque traitement.

Exécution

Le cercle défile en horizontal avec une couleur qui évolue progressivement créant une sorte de clignotement.

Apprentissage des instructions

int x = 0;	Pourquoi cette déclaration de variables en tête ? Pour faire connaitre cette variable au programme et, éventuellement, pour lui donner une valeur de départ et la faire évoluer lors des exécutions répétitives du programme.
draw	Notez qu'avec un logiciel conventionnel, on aurait inclut la fonction draw dans une boucle explicite du type for.
void eff () {…}	Permet de définir un sous-programme, une fonction, un module de programme répétitif, défini une fois pour toute.
if (x>395) { x = 0; }	Instruction conditionnelle qui se lit: si x est plus grand que 395, alors mettre x à 0.

Programme "plus simple"

int x=0; int y=100; int coul=0;

void setup(){

size (200,200);

}

void draw() {

background(255);

fill (#161EF0 + coul);

ellipse (x, y, 100, 100);

  x = x + 1; coul = coul + 1000;

if (x>200) { x = 0; }

}

Intérêt des fonctions

Utiliser les fonctions sert à découper le programme en modules plus simples et faciles à mettre au point.

Le second intérêt est de disposer des modules prêts pour de multiples usages.

Le programme ci-contre, avec tout regroupé dans draw, fonctionne aussi bien que celui du haut.

Mieux vaut s'habituer à découper en petits modules, plutôt utile, voire impératif, pour des programmes plus importants.

Arbre de Pythagore
But Dessiner l'arbre de Pythagore: un carré qui de démultiplie en deux carrés plus petits. Géométrie
Programme void setup() { size(800, 500); background(255); stroke(0, 255, 0);   arbre(width/2.5, height, width/1.8, height, 10); } void arbre(float x1, float y1, float x2, float y2, int prof) { if (prof <= 0) {return; } float dx = (x2 - x1); float dy = (y1 - y2); float x3 = (x2 - dy); float y3 = (y2 - dx); float x4 = (x1 - dy); float y4 = (y1 - dx); float x5 = (x4 + 0.5*(dx - dy)); float y5 = (y4 - 0.5*(dx + dy)); // Carré (Ceci est un commentaire) beginShape(); fill(0, 255-prof*25, 0+prof*25); vertex(x1, y1); vertex(x2, y2); vertex(x3, y3); vertex(x4, y4); vertex(x1, y1); endShape(); // triangle beginShape(); fill(255, 0, 0); vertex(x3, y3); vertex(x4, y4); vertex(x5, y5); vertex(x3, y3); endShape(); // Appel récursif     arbre(x4, y4, x5, y5, prof-1);   arbre(x5, y5, x3, y3, prof-1); }	Commentaires En setup, initialisation classique de l'image, et commande d'exécution initiale de la fonction arbre. On y trouve les quatre coordonnées et l'indication du numéro de profondeur (prof = 10) numéro de l'itération), ici on lance donc le programme pour 10 calculs successifs. Fonction Arbre: exécution tant que prof est positif. Le calcul des sommets des carrés se résout selon le principe énoncé en géométrie. La commande Shape (forme) est utilisée pour dessiner les carrés et les triangles en désignant leurs sommets (vertex). Exécution Le programme dessine les carrés et triangles successifs en les coloriant. Dessin: itérations 1 et 2
Dessin complet

Bilan

En quelques programmes, nous avons vu la majorité des bases de ce logiciel:

Commande à partir de la souris;

Réglage des couleurs;

Répétition avec la boucle for;

Condition avec l'instruction if;

Définition des fonctions; et

Structuration d'un programme d'animation.

Sur ce site

Retour	Processing – Première approche Programmation – Index (Maple, Python, tableur …)
Suite	Processing – Programmes d'animation
Voir	Python – Approche pour débutant Scratch – Apprendre à programmer simplement Historique de l’aventure informatique Maple – Apprendre à programmer (maths)
Cette page	http://villemin.gerard.free.fr/aInforma/PROCESNG/Premiers.htm

Externe

Processing	Tutoriel: Processing – C'est un exemple; il en existe bien d'autres OpenProcessing –Nombreuses réalisations avec Processing Pythagoras tree – Roseatta Code – Ce programme en divers langages
Livres	À la conquête des maths avec Python (et Processing) – Peter Farell – Eyrolles – 2020 {Processing} // S'initier à la programmation créative – Jean-Michel Géridan et Jean-Noël Lafargue – Dunod – 2016