Le traçage progressif de courbes est une technique très utile pour visualiser des données et des informations. Processing est un langage de programmation qui permet de créer des graphiques et des images interactives. Dans cet article, nous allons examiner un exemple type de tracé progressif d’une courbe à l’aide de Processing. Nous verrons comment utiliser le langage pour créer des graphiques et des images interactives et comment tracer une courbe progressivement.
Processing Graphiques : Exemple type pour tracé progressif d’une courbe.

Explication
- Typiquement, on réalise l’affichage voulu dans un programme Processing au sein de la fonction draw(). Cependant, si l’on réalise une boucle pour réaliser un graphique, ceci aboutira à un graphique réalisé en une fois sans que l’on visualise le dessin progressif.
- Ici, on va donc utiliser une variable d’incrémentation des abscisses qui s’incrémentera à chaque passage dans draw() réalisant une boucle dont la vitesse d’exécution sera fixée par le framerate. On obtiendra ainsi un tracé progressif dynamique.
Le programme
// généré avec le générateur de code Processing
// du site www.mon-club-elec.fr
// par X. HINAULT – tous droits réservés
// Programme écrit le : 1/11/2011.
// ——- Licence du code de ce programme : GPL v3—–
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License,
// or any later version.
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
/////////////// Description du programme ////////////
/*
Dessin progressif d’une courbe
*/
// XXXXXXXXXXXXXXXXXXXXXX ENTETE DECLARATIVE XXXXXXXXXXXXXXXXXXXXXX
// inclusion des librairies utilisées
// déclaration objets
// déclaration variables globales
//—— déclaration des variables de couleur utiles —-
int jaune=color(255,255,0);
int vert=color(0,255,0);
int rouge=color(255,0,0);
int bleu=color(0,0,255);
int noir=color(0,0,0);
int blanc=color(255,255,255);
int bleuclair=color(0,255,255);
int violet=color(255,0,255);
//— variable globale pour affichage progressif de courbe
int x=0, y=0;
float xf=0.0, yf=0.0;
// variable pour la taille de la capture video
int widthCapture=320; // largeur capture
int heightCapture=240; // hauteur capture
int fpsCapture=20; // framerate (image/secondes) pour la capture video
// XXXXXXXXXXXXXXXXXXXXXX Fonction SETUP XXXXXXXXXXXXXXXXXXXXXX
void setup(){ // fonction d’initialisation exécutée 1 fois au démarrage
// —- initialisation paramètres graphiques utilisés
colorMode(RGB, 255,255,255); // fixe format couleur R G B pour fill, stroke, etc…
fill(0,0,255); // couleur remplissage RGB – noFill() si pas de remplissage
stroke (0,0,255); // couleur pourtour RGB – noStroke() si pas de pourtour
rectMode(CORNER); // origine rectangle : CORNER = coin sup gauche | CENTER : centre
imageMode(CORNER); // origine image : CORNER = coin sup gauche | CENTER : centre
ellipseMode(CENTER); // origine cercles / ellipses : CENTER : centre (autres : RADIUS, CORNERS, CORNER
//strokeWeight(0); // largeur pourtour
frameRate(60);// Images par seconde – The default rate is 60 frames per second
// — initialisation fenêtre de base —
size(400, 400); // ouvre une fenêtre xpixels x ypixels
background(0,0,0); // couleur fond fenetre
// — initialisation des objets et fonctionnalités utilisées —
} // fin fonction Setup
// XXXXXXXXXXXXXXXXXXXXXX Fonction Draw XXXXXXXXXXXXXXXXXXXX
void draw() { // fonction exécutée en boucle
// tracé effectuer à chaque itération
point(x,height–x); // dessine le point
// gestion abscisse tracé à chaque itération
x=x+1; // incrémente x
if (x==width) { // si x = largeur fenêtre
x=0; // RAZ x
background(noir); // efface le graphique
} // fin si x==width
// NB : fixer la vitesse du graphique en modifiant le framerate
// while(true); // stoppe boucle draw
} // fin de la fonction draw()
// XXXXXXXXXXXXXXXXXXXXXX Autres Fonctions XXXXXXXXXXXXXXXXXXXXXX
//XXXXXXXXXXXXXXXXXX Fin du programme XXXXXXXXXXXXXXXXX
Articles Liés
- Javascript : Canva : Tracé progressif d'une courbe mathématique
Le tracé progressif d'une courbe mathématique est une tâche complexe qui peut être simplifiée grâce…
- Processing : interfaces graphiques : Oscilloscope multvoies avec contrôle commun pour toute les voies
Le Processing est un langage de programmation open source qui permet aux développeurs de créer…
- Processing 3D : Test des repères 3D dans Processing.
Le traitement 3D est un domaine en pleine expansion qui offre aux développeurs et aux…