Archives de catégorie : Processing

Sommaire :

2020/01/05 : Création d’un cercle point par point sur Processing
2017/09/03 : Processing – Arduino – Animation d’une forme
2017/07/27 : Tuto comment utiliser l’entrée son
Retour au menu Vidéo

Création d’un cercle point par point sur Processing

Simulation d’un laser rotatif type lidar ( sur un 1 axe ) en 3 etapes

Etape 3.1 : Traçage d’un cercle point par point
Etape 3.2 : Création d’une variable modifiant les valeurs de rayon.
Etape 3.3 : Création d’un cercle point par point avec déplacement .

2017/09/03 : Processing – Arduino . Animation d’une forme

La communication série – Lecture de 3 valeurs sur la carte Arduino via le port série et animation d’un rectangle sur l’écran . Les programmes Arduino et Processing

Retour au sommaire

2017/07/27 : Tuto comment utiliser l’entrée son

Comment récupérer une source sonore sous Processing
Au sommaire : Intégration de la bibliothèque/Configuration de la fonction minim/Mise à l’échelle de la valeur sonore/Utilisation de la valeur

Retour au sommaire

Création d’un cercle point par point sur Processing

Sommaire :

Rappel de l’utilisation de quelques fonctions de Processing
- width
- height
- vertex
- random()
Etape 3.1 : Traçage d’un cercle point par point
Etape 3.2 : Création d’une variable modifiant les valeurs de rayon.
Etape 3.3 : Création d’un cercle point par point avec déplacement .
Pour tout problème
Retour au menu construction d’une tourelle pour laser lidar

A suivre cet article est mis à jour régulièrement

Rappel de l’utilisation de quelques fonctions de Processing.

width :

Variable système qui stocke la largeur de la fenêtre d’affichage. Cette valeur est définie par le premier paramètre de la fonction size () . Par exemple, la fonction size (320, 240) définit la variable width sur la valeur 320. La valeur par défaut de width est 100 si la taille () n’est pas utilisée dans un programme.

height

:Variable système qui stocke la hauteur de la fenêtre d’affichage. Cette valeur est définie par le deuxième paramètre de la fonction size () . Par exemple, la fonction size (320, 240) définit la variable height sur 240. La valeur par défaut de height est 100 si la taille () n’est pas utilisée dans un programme.

vertex :

Toutes les formes sont construites en connectant une série de sommets. vertex () est utilisé pour spécifier les coordonnées de sommet pour les points, les lignes, les triangles, les quads et les polygones. Il est utilisé exclusivement dans les fonctions beginShape () et endShape () .

Pour dessiner un sommet en 3D à l’aide du paramètre z , vous devez associer le paramètre P3D à la taille, comme illustré dans l’exemple ci-dessous.

//
//
// Dessiner des sommets en 3D nécessite P3D
// comme paramètre pour size ()
size(100, 100, P3D);
beginShape(POINTS);
vertex(30, 20, -50);
vertex(85, 20, -50);
vertex(85, 75, -50);
vertex(30, 75, -50);
endShape();

// Dessiner des sommets en 3D nécessite P3D

// comme paramètre pour size ()

size(100, 100, P3D);

beginShape(POINTS);

vertex(30, 20, -50);

vertex(85, 20, -50);

vertex(85, 75, -50);

vertex(30, 75, -50);

endShape();

random()

Génère des nombres aléatoires. Chaque fois que la fonction random () est appelée, elle renvoie une valeur inattendue dans la plage spécifiée. Si un seul paramètre est passé à la fonction, il retournera un float compris entre zéro et la valeur du paramètre haut . Par exemple, random (5) renvoie des valeurs comprises entre 0 et 5 (commençant à zéro et pouvant aller jusqu’à 5).

Si deux paramètres sont spécifiés, la fonction renvoie un float avec une valeur comprise entre les deux valeurs. Par exemple, random (-5, 10.2) renvoie des valeurs allant de -5 à 10.2 maximum (sans l’inclure). Pour convertir un nombre aléatoire à virgule flottante en entier, utilisez la fonction int () .

Syntax :

random ( limite supérieure )
random ( limite inferieure , limite supérieure )

Retour au sommaire

Etape 3.1 traçage d’un cercle point par point

A savoir : processing travaille en radians par defaut

Le but de ce programme est de pouvoir dessiner un cercle non pas avec la commande circle() , mais en utilisant la commande vertex pour pouvoir tracer la circonférence du cercle point par point .

Le but est bien sûr de pouvoir utiliser ce code pour la mise en application d’un laser rotatif afin de retracer sur un écran l’ensemble des obstacles qui l’entourent. On pourra évidemment utiliser ce code aussi bien pour une rotation complète soit 360° ou bien des angles personnalisés du type 180° .

Le rayon du cercle est défini à la ligne 75 , vous pouvez donner comme valeur numérique à rayon la valeur qui vous convient.

Le calcul des coordonnées en X et Y se définisse en ligne 79 et 80

//
//
//*********************************************************************
//*                                                                   *
//* Programme permettant de mieux comprendre le fonctionnement de la  *
//* visualisation sur l’écran des différentes lectures du             *
//* laser lidar ( simulation de déplacement )                         * 
//*                                                                   *
//* RedOhm                                                            *
//* Programme : H-Mazelin                                             *
//* Le 09-11-2019                                                     *
//*                                                                   *
//* Version de IDE Processing 3.5.3                                   *
//* Nom du programme :                                                * 
//* Etape_3_1_etude_de_la_visualisation_en_2D_sur_l_ecran_du_pc       *
//* Notre site : https://www.redohm.fr                                *
//*                                                                   *
//*********************************************************************



// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme.
void setup()

{

  // definition de la taille de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size (600, 600);
  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 idem pour les autres couleurs
  // affichage du fond en blanc
  background (255);
  
  // L'utilisation des fonctions beginShape () et endShape () permet de
// créer des formulaires plus complexes. beginShape () commence à 
// enregistrer les sommets d'une forme et endShape () arrête l'enregistrement  

beginShape();
 
 // boucle simulant la rotation de mon laser lidar soit 360°
 // on peut le modifier pour une demie rotation soit 180°
 for(int i=0; i<360; i++) 
 
 {
  
// A savoir processing travaille en radians par defaut
   
// On declare la variable angle en nombre à virgule flottante
// virgule flottante = les nombres avec un point decimal 
// la valeur de la variable comporte le radians de la valeur de i
// soit : 1 × π/180 = 0,01745rad 
   float angle = radians(i);
 
 
// width = Variable système qui stocke la largeur de la fenêtre
// d'affichage. 
 float xCentre = width/2;
// Variable système qui stocke la hauteur de la fenêtre d'affichage. 
// Cette valeur est définie par le deuxième paramètre de la fonction size () 
 float yCentre = height/2;
 
 

// on declare la variable rayon en nombre à virgule flottante 
// et on ajoute la valeur du laser en simulation 
 float rayon = 120;
 
// on calcul les coordonnées de notre point en x et y 
// en tenant compte des angles 
 float xCoord = xCentre + sin(angle) * rayon ;
 float yCoord = yCentre + cos(angle) * rayon ;
 
// Toutes les formes sont construites en connectant une série de sommets.
// vertex () est utilisé pour spécifier les coordonnées de sommet pour
// les points, les lignes, les triangles, les quads et les polygones. Il
// est utilisé exclusivement dans les fonctions beginShape () et endShape () . 
 vertex(xCoord,yCoord );
   
}

// la fonction endShape () est le compagnon de beginShape () et ne
// peut être appelée qu'après beginShape () . Lorsque endShape () 
// est appelée, toutes les données d'image définies depuis l'appel
// précédent à beginShape () sont écrites dans le tampon d'image.
// La constante CLOSE comme valeur pour le paramètre MODE pour fermer la forme

endShape(CLOSE);

 
 
}



//Le programme principal s’exécute par une boucle infinie appelée draw () 
void draw ()

{
  


}

100

101

102

103

104

105

106

107

//*********************************************************************

//* *

//* Programme permettant de mieux comprendre le fonctionnement de la *

//* visualisation sur l’écran des différentes lectures du *

//* laser lidar ( simulation de déplacement ) *

//* *

//* RedOhm *

//* Programme : H-Mazelin *

//* Le 09-11-2019 *

//* *

//* Version de IDE Processing 3.5.3 *

//* Nom du programme : *

//* Etape_3_1_etude_de_la_visualisation_en_2D_sur_l_ecran_du_pc *

//* Notre site : https://www.redohm.fr *

//* *

//*********************************************************************

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup()

{

// definition de la taille de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size (600, 600);

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 idem pour les autres couleurs

// affichage du fond en blanc

background (255);

// L'utilisation des fonctions beginShape () et endShape () permet de

// créer des formulaires plus complexes. beginShape () commence à

// enregistrer les sommets d'une forme et endShape () arrête l'enregistrement

beginShape();

// boucle simulant la rotation de mon laser lidar soit 360°

// on peut le modifier pour une demie rotation soit 180°

for(int i=0; i<360; i++)

{

// A savoir processing travaille en radians par defaut

// On declare la variable angle en nombre à virgule flottante

// virgule flottante = les nombres avec un point decimal

// la valeur de la variable comporte le radians de la valeur de i

// soit : 1 × π/180 = 0,01745rad

float angle = radians(i);

// width = Variable système qui stocke la largeur de la fenêtre

// d'affichage.

float xCentre = width/2;

// Variable système qui stocke la hauteur de la fenêtre d'affichage.

// Cette valeur est définie par le deuxième paramètre de la fonction size ()

float yCentre = height/2;

// on declare la variable rayon en nombre à virgule flottante

// et on ajoute la valeur du laser en simulation

float rayon = 120;

// on calcul les coordonnées de notre point en x et y

// en tenant compte des angles

float xCoord = xCentre + sin(angle) * rayon ;

float yCoord = yCentre + cos(angle) * rayon ;

// Toutes les formes sont construites en connectant une série de sommets.

// vertex () est utilisé pour spécifier les coordonnées de sommet pour

// les points, les lignes, les triangles, les quads et les polygones. Il

// est utilisé exclusivement dans les fonctions beginShape () et endShape () .

vertex(xCoord,yCoord );

}

// la fonction endShape () est le compagnon de beginShape () et ne

// peut être appelée qu'après beginShape () . Lorsque endShape ()

// est appelée, toutes les données d'image définies depuis l'appel

// précédent à beginShape () sont écrites dans le tampon d'image.

// La constante CLOSE comme valeur pour le paramètre MODE pour fermer la forme

endShape(CLOSE);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

}

Retour au sommaire

Etape 3.2 Création d’une variable modifiant les valeurs de rayon.

Le but à atteindre dans cette étape est de tracer un cercle point par point et chaque point possédant un rayon différent. Pour cela nous utilisons un générateur de nombres aléatoires qui sera paramétré de la façon suivante , rayon mini 100, rayon maxi 160. La valeur aléatoire s’ajoutera à un rayon fixe que l’on s’est donné. Le résultat de ce calcul étant la figure à 360 degrés située ci-dessous.

Bien évidemment , pour l’application sur le laser nous supprimons le générateur de nombres aléatoires par la mesure prise par le laser remis à l’échelle pour dessiner les obstacles se situant dans le rayon du laser.

//
//
//*********************************************************************
//*                                                                   *
//* Programme permettant de mieux comprendre le fonctionnement de la  *
//* visualisation sur l’écran des différentes lectures du             *
//* laser lidar ( simulation de déplacement )                         * 
//*                                                                   *
//* RedOhm                                                            *
//* Programme : H-Mazelin                                             *
//* Le 09-11-2019                                                     *
//*                                                                   *
//* Version de IDE Processing 3.5.3                                   *
//* Nom du programme :                                                * 
//* Etape_3_2_etude_de_la_visualisation_en_2D_sur_l_ecran_du_pc       *
//* Notre site : https://www.redohm.fr                                *
//*                                                                   *
//*********************************************************************



// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme.
void setup()

{

  // definition de la taille de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size (600, 600);
  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 idem pour les autres couleurs
  // affichage du fond en blanc
  background (255);
  
  // L'utilisation des fonctions beginShape () et endShape () permet de
// créer des formulaires plus complexes. beginShape () commence à 
// enregistrer les sommets d'une forme et endShape () arrête l'enregistrement  

beginShape();
  
 // boucle simulant la rotation de mon laser lidar soit 360°
 // on peut le modifier pour une demie rotation soit 180°
 for(int i=0; i<360; i++) 
 
 {
  
// A savoir processing travaille en radians par defaut


   
// On declare la variable angle en nombre à virgule flottante
// virgule flottante = les nombres avec un point decimal 
// la valeur de la variable comporte le radians de la valeur de i
// soit : 1 × π/180 = 0,01745rad 
   float angle = radians(i);
 
 
// width = Variable système qui stocke la largeur de la fenêtre
// d'affichage. 
 float xCentre = width/2;
// Variable système qui stocke la hauteur de la fenêtre d'affichage. 
// Cette valeur est définie par le deuxième paramètre de la fonction size () 
 float yCentre = height/2;
 
 
// Génère des nombres aléatoires. Chaque fois que la fonction random ()
// est appelée, elle renvoie une valeur inattendue dans la plage
// spécifiée 
 float laser = random(100,150);
 

// on declare la variable rayon en nombre à virgule flottante 
// et on ajoute la valeur du laser en simulation 
 float rayon = 50+laser;
 
// on calcul les coordonnées de notre point en x et y 
// en tenant compte des angles 
 float xCoord = xCentre + sin(angle) * rayon ;
 float yCoord = yCentre + cos(angle) * rayon ;
 
// Toutes les formes sont construites en connectant une série de sommets.
// vertex () est utilisé pour spécifier les coordonnées de sommet pour
// les points, les lignes, les triangles, les quads et les polygones. Il
// est utilisé exclusivement dans les fonctions beginShape () et endShape () . 
 vertex(xCoord,yCoord );
 
  
  
  
}

// la fonction endShape () est le compagnon de beginShape () et ne
// peut être appelée qu'après beginShape () . Lorsque endShape () 
// est appelée, toutes les données d'image définies depuis l'appel
// précédent à beginShape () sont écrites dans le tampon d'image.
// La constante CLOSE comme valeur pour le paramètre MODE pour fermer la forme

endShape(CLOSE);

 
 
}



//Le programme principal s’exécute par une boucle infinie appelée draw () 
void draw ()

{
  


}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

//*********************************************************************

//* *

//* Programme permettant de mieux comprendre le fonctionnement de la *

//* visualisation sur l’écran des différentes lectures du *

//* laser lidar ( simulation de déplacement ) *

//* *

//* RedOhm *

//* Programme : H-Mazelin *

//* Le 09-11-2019 *

//* *

//* Version de IDE Processing 3.5.3 *

//* Nom du programme : *

//* Etape_3_2_etude_de_la_visualisation_en_2D_sur_l_ecran_du_pc *

//* Notre site : https://www.redohm.fr *

//* *

//*********************************************************************

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup()

{

// definition de la taille de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size (600, 600);

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 idem pour les autres couleurs

// affichage du fond en blanc

background (255);

// L'utilisation des fonctions beginShape () et endShape () permet de

// créer des formulaires plus complexes. beginShape () commence à

// enregistrer les sommets d'une forme et endShape () arrête l'enregistrement

beginShape();

// boucle simulant la rotation de mon laser lidar soit 360°

// on peut le modifier pour une demie rotation soit 180°

for(int i=0; i<360; i++)

{

// A savoir processing travaille en radians par defaut

// On declare la variable angle en nombre à virgule flottante

// virgule flottante = les nombres avec un point decimal

// la valeur de la variable comporte le radians de la valeur de i

// soit : 1 × π/180 = 0,01745rad

float angle = radians(i);

// width = Variable système qui stocke la largeur de la fenêtre

// d'affichage.

float xCentre = width/2;

// Variable système qui stocke la hauteur de la fenêtre d'affichage.

// Cette valeur est définie par le deuxième paramètre de la fonction size ()

float yCentre = height/2;

// Génère des nombres aléatoires. Chaque fois que la fonction random ()

// est appelée, elle renvoie une valeur inattendue dans la plage

// spécifiée

float laser = random(100,150);

// on declare la variable rayon en nombre à virgule flottante

// et on ajoute la valeur du laser en simulation

float rayon = 50+laser;

// on calcul les coordonnées de notre point en x et y

// en tenant compte des angles

float xCoord = xCentre + sin(angle) * rayon ;

float yCoord = yCentre + cos(angle) * rayon ;

// Toutes les formes sont construites en connectant une série de sommets.

// vertex () est utilisé pour spécifier les coordonnées de sommet pour

// les points, les lignes, les triangles, les quads et les polygones. Il

// est utilisé exclusivement dans les fonctions beginShape () et endShape () .

vertex(xCoord,yCoord );

}

// la fonction endShape () est le compagnon de beginShape () et ne

// peut être appelée qu'après beginShape () . Lorsque endShape ()

// est appelée, toutes les données d'image définies depuis l'appel

// précédent à beginShape () sont écrites dans le tampon d'image.

// La constante CLOSE comme valeur pour le paramètre MODE pour fermer la forme

endShape(CLOSE);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

}

Retour au sommaire

Etape 3.3 Création d’un cercle point par point avec déplacement .

Les modifications suivante :

Déclaration de la variable pour simuler le déplacement du laser en X .Variable Xdepla
Incrémentation de la variable Xdepla. Xdepla ++
Création d’une ligne de code pour effectuer ou simuler le déplacement d’un éventuel robot mobile . ( voir ci-dessous )
L’ensemble du code pour la création du cercle migre dans la fonction void draw

//
//
// activer la ligne de code ci-dessous pour lancer le deplacement 
 float xCentre = 300+Xdepla ;

// activer la ligne de code ci-dessous pour lancer le deplacement

float xCentre = 300+Xdepla ;

Vous pouvez copier le programme en sélectionnant l’ensemble puis contrôle C ou suivez les informations dans la barre supérieure du code

//
//
//*********************************************************************
//*                                                                   *
//* Programme permettant de mieux comprendre le fonctionnement de la  *
//* visualisation sur l’écran des différentes lectures du             *
//* laser lidar ( simulation de déplacement )                         * 
//*                                                                   *
//* RedOhm                                                            *
//* Programme : H-Mazelin                                             *
//* Le 09-11-2019                                                     *
//*                                                                   *
//* Version de IDE Processing 3.5.3                                   *
//* Nom du programme :                                                * 
//* Etape_3_3_etude_de_la_visualisation_en_2D_sur_l_ecran_du_pc       *
//* Notre site : https://www.redohm.fr                                *
//*                                                                   *
//*********************************************************************




// je declare ma variable pour simuler mon deplacement en x
float Xdepla;



// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme.
void setup()

{

  // definition de la taille de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size (600, 600);
  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 idem pour les autres couleurs
  // affichage du fond en blanc
  background (255);
  
 
}



//Le programme principal s’exécute par une boucle infinie appelée draw () 
void draw ()

{
  
// L'utilisation des fonctions beginShape () et endShape () permet de
// créer des formulaires plus complexes. beginShape () commence à 
// enregistrer les sommets d'une forme et endShape () arrête l'enregistrement  

beginShape();

 // incrementation de mon deplacement en x pour simuler un robot 
 // mobile 
 // cette fonction est egale à Xdepla = Xdepla +1
 Xdepla ++ ;
 
 
 // Efface mon ecran pour ne voir qu'un tracé 
 background(255);
 
 
 // boucle simulant la rotation de mon laser lidar soit 360°
 // on peut le modifier pour une demie rotation soit 180°
 for(int i=0; i<360; i++) 
 
 {
  
// A savoir processing travaille en radians par defaut


   
// On declare la variable angle en nombre à virgule flottante
// virgule flottante = les nombres avec un point decimal 
// la valeur de la variable comporte le radians de la valeur de i
// soit : 1 × π/180 = 0,01745rad 
   float angle = radians(i);
 
 
// activer la ligne de code ci-dessous pour lancer le deplacement 
 float xCentre = 300+Xdepla ;
 
// float xCentre = width/2;
 float yCentre = height/2;
 
// Génère des nombres aléatoires. Chaque fois que la fonction random ()
// est appelée, elle renvoie une valeur inattendue dans la plage
// spécifiée 
 float laser = random(100,150);
 

// on declare la variable rayon en nombre à virgule flottante 
// et on ajoute la valeur du laser en simulation 
 float rayon = 50+laser;
 
// on calcul les coordonnées de notre point en x et y 
// en tenant compte des angles 
 float xCoord = xCentre + sin(angle) * rayon ;
 float yCoord = yCentre + cos(angle) * rayon ;
 
// Toutes les formes sont construites en connectant une série de sommets.
// vertex () est utilisé pour spécifier les coordonnées de sommet pour
// les points, les lignes, les triangles, les quads et les polygones. Il
// est utilisé exclusivement dans les fonctions beginShape () et endShape () . 
 vertex(xCoord,yCoord );
 
  
  
  
}

// la fonction endShape () est le compagnon de beginShape () et ne
// peut être appelée qu'après beginShape () . Lorsque endShape () 
// est appelée, toutes les données d'image définies depuis l'appel
// précédent à beginShape () sont écrites dans le tampon d'image.
// La constante CLOSE comme valeur pour le paramètre MODE pour fermer la forme

endShape(CLOSE);



}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

//*********************************************************************

//* *

//* Programme permettant de mieux comprendre le fonctionnement de la *

//* visualisation sur l’écran des différentes lectures du *

//* laser lidar ( simulation de déplacement ) *

//* *

//* RedOhm *

//* Programme : H-Mazelin *

//* Le 09-11-2019 *

//* *

//* Version de IDE Processing 3.5.3 *

//* Nom du programme : *

//* Etape_3_3_etude_de_la_visualisation_en_2D_sur_l_ecran_du_pc *

//* Notre site : https://www.redohm.fr *

//* *

//*********************************************************************

// je declare ma variable pour simuler mon deplacement en x

float Xdepla;

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup()

{

// definition de la taille de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size (600, 600);

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 idem pour les autres couleurs

// affichage du fond en blanc

background (255);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

// L'utilisation des fonctions beginShape () et endShape () permet de

// créer des formulaires plus complexes. beginShape () commence à

// enregistrer les sommets d'une forme et endShape () arrête l'enregistrement

beginShape();

// incrementation de mon deplacement en x pour simuler un robot

// mobile

// cette fonction est egale à Xdepla = Xdepla +1

Xdepla ++ ;

// Efface mon ecran pour ne voir qu'un tracé

background(255);

// boucle simulant la rotation de mon laser lidar soit 360°

// on peut le modifier pour une demie rotation soit 180°

for(int i=0; i<360; i++)

{

// A savoir processing travaille en radians par defaut

// On declare la variable angle en nombre à virgule flottante

// virgule flottante = les nombres avec un point decimal

// la valeur de la variable comporte le radians de la valeur de i

// soit : 1 × π/180 = 0,01745rad

float angle = radians(i);

// activer la ligne de code ci-dessous pour lancer le deplacement

float xCentre = 300+Xdepla ;

// float xCentre = width/2;

float yCentre = height/2;

// Génère des nombres aléatoires. Chaque fois que la fonction random ()

// est appelée, elle renvoie une valeur inattendue dans la plage

// spécifiée

float laser = random(100,150);

// on declare la variable rayon en nombre à virgule flottante

// et on ajoute la valeur du laser en simulation

float rayon = 50+laser;

// on calcul les coordonnées de notre point en x et y

// en tenant compte des angles

float xCoord = xCentre + sin(angle) * rayon ;

float yCoord = yCentre + cos(angle) * rayon ;

// Toutes les formes sont construites en connectant une série de sommets.

// vertex () est utilisé pour spécifier les coordonnées de sommet pour

// les points, les lignes, les triangles, les quads et les polygones. Il

// est utilisé exclusivement dans les fonctions beginShape () et endShape () .

vertex(xCoord,yCoord );

}

// la fonction endShape () est le compagnon de beginShape () et ne

// peut être appelée qu'après beginShape () . Lorsque endShape ()

// est appelée, toutes les données d'image définies depuis l'appel

// précédent à beginShape () sont écrites dans le tampon d'image.

// La constante CLOSE comme valeur pour le paramètre MODE pour fermer la forme

endShape(CLOSE);

}

Retour au sommaire

Pour tout problème

Pour tout problème de téléchargement ou pour nous suivre sur les réseaux sociaux voici les plateformes sur lesquelles nous éditons.
Cliquez sur celles qui vous intéressent .

Facebook Twitter Youtube

Retour au sommaire

Communication Pc vers Arduino lecture d’une variable

Mise à jour le 15/01/2021 : Article traitant de la communication entre la carte Arduino et Processing via votre pc en liaison série ( par les ports Usb )

Continuer la lecture →

Manipulation Audio et Effets Visuels avec Processing

–

Mise à jour le 09/01/2024 : Ce code Processing est une démonstration de l’intégration de la bibliothèque audio Minim, utilisée pour créer une visualisation interactive basée sur les entrées audio. Ce projet illustre la transformation des signaux sonores en éléments visuels dynamiques dans l’environnement de programmation Processing

Sommaire :

Présentation de la fonction Minim
Configuration de la fonction Minim
Utilisation de la valeur mise à l’échelle dans la gestion des formes
Tutoriel : Manipulation Audio et Effets Visuels avec Processing
Retour au menu

Présentation de la fonction

Le logiciel de création multimédia Processing, permet de dessiner et réaliser des animations en deux et trois dimensions , il peut aussi créer des œuvres sonores et visuelles. Concevoir un programme qui permet d’interagir avec l’environnement devient très intéressant pour les personnes qui travaillent sur la robotique ou la domotique. Incorporez la notion de son dans un programme nous ouvre une autre dimension, une interactivité sans précédent, imaginez parler à votre écran et qu’une image informatique vous réponde en bougeant les lèvres là, ça devient beaucoup plus séduisant et beaucoup plus excitant. Dans cette rubrique nous allons voir comment récupérer le son, utilisez le son pour générer cette interactivité.

Pour ajouter une source sonore à notre programme il nous faut pour cela exploiter l’entrée microphone et ou la sortie sonore, nous allons donc utiliser la librairie Minim qui nous permet de rentrer dans cette nouvelle dimension.

Cette rubrique par ses tutoriels et ses exemples vont, je l’espère briser tous les tabous.

Retour au sommaire

Configuration de la fonction Minim

Lancer votre programme via le bouton Run ne suffit pas pour jouer un son avec Minim. Avant de pouvoir jouer un son, vous devez activer les fonctionnalités de gestion audio de Minim, son moteur audio. Minim doit demander un accès à la carte son de votre ordinateur pour traiter le son. Heureusement, Minim gère cette configuration interne automatiquement. Il suffit simplement d’initialiser Minim dans votre code pour qu’il soit opérationnel. Cependant, il est important de noter que si vous activez Minim, vous devez aussi prévoir de le désactiver à la fin de votre programme pour libérer les ressources audio et éviter les fuites de mémoire.

//
//
// Version de IDE:Processing 3.3.4 
// RedOhm 
// H-Mazelin 25/12/2019

// instruction minimale pour le bon fonctionnement de la 
// bibliothéque son 


// Minim est une bibliothèque audio qui permet la manipulation 
// du son dans l’environnement Processing.

import ddf.minim.*;

// Création d'une variable qui contiendra le moteur Minim 

Minim minim;


// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telle que la 
// taille de l'écran et à charger des supports tels que des images et/ou des polices
// au démarrage du programme.
void setup()


{
  // this entre parenthése dans ce code, sachez qu'il sert à indiquer à Processing
  // que vos instructions s'appliquent à ce programme.
  // l'instruction Minim a besoin de connaître l'adresse de votre programme pour le
  // faire communiquer avec la carte son de notre ordinateur
  minim = new Minim(this);
  
}

//Le programme principal s’exécute par une boucle infinie appelée draw ()
void draw ()
{
  


  
}

// ***************Procedure d'arret ************************ 
// il faut prévoir d'arréter la capture du son ainsi que la librairie
// minim a la fin de l'execution du programme
void stop()
{
  
  minim.stop();
  super.stop();
}

// Version de IDE:Processing 3.3.4

// RedOhm

// H-Mazelin 25/12/2019

// instruction minimale pour le bon fonctionnement de la

// bibliothéque son

// Minim est une bibliothèque audio qui permet la manipulation

// du son dans l’environnement Processing.

import ddf.minim.*;

// Création d'une variable qui contiendra le moteur Minim

Minim minim;

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telle que la

// taille de l'écran et à charger des supports tels que des images et/ou des polices

// au démarrage du programme.

void setup()

{

// this entre parenthése dans ce code, sachez qu'il sert à indiquer à Processing

// que vos instructions s'appliquent à ce programme.

// l'instruction Minim a besoin de connaître l'adresse de votre programme pour le

// faire communiquer avec la carte son de notre ordinateur

minim = new Minim(this);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

}

// ***************Procedure d'arret ************************

// il faut prévoir d'arréter la capture du son ainsi que la librairie

// minim a la fin de l'execution du programme

void stop()

{

minim.stop();

super.stop();

}

Retour au sommaire

Utilisation de la valeur dans la gestion des formes

  //                Partie du programme traitant des formes 
  //
  //
  // ********** utilisation des parametres audio *******************
  //          pour activer la courbe de bezier 
  
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte   
  text("Affectation de la valeur audio "   , 500,500);
  text("aux paramétres de la courbe de "   , 500,520);
  text("          Bezier               "   , 500,540);
  // Pour dessiner une courbe de bézier, il faut définir quatre
  // points avec chaque fois 2 valeurs (x,y) . La première et la
  // dernière définiront le début et le fin de la courbe. Les deux
  // points intermédiaires définiront les contrôles de courbe 
  // 
  // bezier (ax,ay,c1x,c1y,c2x,c2y,bx,by)
  // ax,ay => définition du début de la courbe
  // c1x,c1y => premier contrôle de courbure
  // c2x,c2y => deuxième contrôle de courbure
  // bx,by => définition de la fin de la courbe
  bezier(500,600,550,600-son1,600,600-son1,650,600); 
  bezier(500,600,550,600+son2,600,600+son2,650,600); 
}

// Partie du programme traitant des formes

// ********** utilisation des parametres audio *******************

// pour activer la courbe de bezier

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Affectation de la valeur audio " , 500,500);

text("aux paramétres de la courbe de " , 500,520);

text(" Bezier " , 500,540);

// Pour dessiner une courbe de bézier, il faut définir quatre

// points avec chaque fois 2 valeurs (x,y) . La première et la

// dernière définiront le début et le fin de la courbe. Les deux

// points intermédiaires définiront les contrôles de courbe

// bezier (ax,ay,c1x,c1y,c2x,c2y,bx,by)

// ax,ay => définition du début de la courbe

// c1x,c1y => premier contrôle de courbure

// c2x,c2y => deuxième contrôle de courbure

// bx,by => définition de la fin de la courbe

bezier(500,600,550,600-son1,600,600-son1,650,600);

bezier(500,600,550,600+son2,600,600+son2,650,600);

}

Retour au sommaire

Tutoriel vidéo

Le programme commence par intégrer la bibliothèque Minim, un outil puissant pour la manipulation du son dans Processing. Une fois la bibliothèque importée, le code initialise Minim et configure une connexion d’entrée audio, permettant ainsi au programme de recevoir des données sonores en temps réel.

Le cœur du sketch repose sur la capture des niveaux sonores à travers l’objet AudioInput, représenté par la variable in. Cette entrée sonore est ensuite analysée et transformée en plusieurs variables à virgule flottante (son, son1, son2, son3, son4). Chacune de ces variables subit une série de transformations, comme la mise à l’échelle, pour adapter les données sonores aux besoins visuels du sketch.

Une partie intéressante du programme est la conversion d’une de ces variables flottantes en une valeur entière (son5_entier), illustrant comment les données sonores peuvent être manipulées et préparées pour différentes applications visuelles.

Le sketch utilise ensuite ces données audio traitées pour influencer visuellement deux principaux éléments graphiques : un rectangle et une courbe de Bézier. Le rectangle change de taille en fonction des variations sonores, créant un effet visuel dynamique qui réagit en temps réel au son capté. Les courbes de Bézier, quant à elles, utilisent les valeurs sonores pour ajuster leurs points de contrôle, créant un effet visuel qui représente la fluidité et la dynamique du son.

Le programme est conçu avec un souci du détail, incluant des commentaires utiles pour guider les utilisateurs à travers chaque étape du processus, de l’initialisation de la bibliothèque Minim à la construction des éléments visuels. La section draw() du programme, où se déroule l’animation, est structurée de manière à refléter clairement comment les données sonores sont transformées en visuels.

Retour au sommaire

// Version de IDE:Processing 3.3.4
// RedOhm
// H-Mazelin 26/07/2017
 
// Au sommaire
//
// Integration de la bibliothéque
// Configuration de la fonction minim
// Mise à l'echelle de la valeur sonore
// Utilisation de la valeur 

// Minim est une bibliothèque audio qui permet la manipulation
// du son dans l’environnement Processing.
import ddf.minim.*;
// Création d'une variable qui contiendra le moteur Minim
Minim minim;
// Un AudioInput est une connexion à la source d'enregistrement
// actuelle de l'ordinateur.
AudioInput in;

// declaration des variables son à virgule flottante 
float son;
float son1;
float son2;
float son3;
float son4;
// creation d'une variable son5_entier 
int son5_entier;







// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme.
void setup() {
  
 
// definition de la taile de la fenetre 
// syntaxe : size (Hauteur fenetre,largeur fenetre )
  size(1000,800);   
  
  
// definition « this » dans ce programme, sachez qu'il sert à indiquer à Processing
// que ces instructions s'appliquent à « ce » programme. Minim a besoin de connaître
// l'adresse de « ce » programme pour le  faire communiquer avec la carte son de 
// votre ordinateur.   
  minim = new Minim(this);
//  requête pour une entrée d'un certain taux d'échantillonnage
  in = minim.getLineIn(Minim.STEREO, 512);
  
  
  
  
  
}



//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw() {
  
  
  // *********** Présentation de l'exercice ***************************
  //
  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 iden pour les autre couleurs
  // affichage du fond de l'ecran en blanc 
  background(255,255,255); 
  
  // Fill : Définit la couleur utilisée pour remplir les formes.
  // fill(r,g,b);
  // r = pour rouge
  // g = pour le vert
  // b = pour le bleu
  fill(0,0,0);
  
  // Choix de la taille de la police 
  // syntaxe => textSize( taille )
  // Taille => La taille des caractères est en de pixels.
  textSize(32);
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte 
  text("Utilisation de l'entrée son "  , 300,50); 
  
  
  
  
  
  
  
  //*********** Récupération du niveau sonore **********************
  //
  // transfert de la valeur du volume du canal audio 
  // vers la variable son
  son=(in.mix.level());
  // Mise a l'echelle et augmentation de la valeur 
  son1=son*200;
  // Mise a l'echelle et augmentation de la valeur 
  son2=son*100;
  // Mise a l'echelle et augmentation de la valeur 
  son3=son*100;
  
  
  
  
  
  
  // *********** Affichage de la valeur de remise à l'echelle *********
  //
  // Choix de la taille de la police 
  // syntaxe => textSize( taille )
  // Taille => La taille des caractères est en de pixels.
  textSize(20);  
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte 
  text("Valeur du son brute =>  "+ son   , 100,200);   
  text("Valeur du son avec un coef multiplicateur de 100  =>  "+ son1   , 100,230);
  
  // ********  Mise a l'echelle d'une valeur   ********************** 
  //
  // map(valeur, v_basse_e,v_haut_e,valeur_b_sortie,valeur_h_sortie)
  // valeur => valeur a etalonner
  // v_basse_e =>  limite inférieure de la plage actuelle de la valeur
  // v_haute_e =>  limite supérieure de la plage actuelle de la valeur
  // valeur_b_sortie => limite inférieure de la plage cible de la valeur
  // valeur_h_sortie => limite supérieure de la plage cible de la valeur
  son4=map(son3,1,40,0,10);
  text("Mise à l'echelle  " + son4 ,100,330); 
  text("map (variable son3 , 1 , 40 , 0 , 10)  ",400,330 );
  
  // ******** Convertion d'une variable flottante en entier ***********
  // valeur_entier = int(valeur flottante * 1.4);
  son5_entier = int(son4 * 1.4);
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte 
  text("Conversion d'une variable flottante en entier => "+ son5_entier,100,360 ); 
   
  // *********** Construction du rectangle ***************************
  //
  // Choix de la taille de la police 
  // syntaxe => textSize( taille )
  // Taille => La taille des caractères est en de pixels.
  textSize(16); 
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte   
  text("Affectation de la valeur audio "   , 100,540);
  text("aux paramétres du rectangle "   , 100,560);
  // Dessine un rectangle à l’écran avec tous les angles à 90°
  // rect(a, b, c, d);
  // a => coordonnée x du rectangle
  // b => coordonnée y du rectangle
  // c => largeur du rectangle
  // d => hauteur du rectangle
  rect(100,600,20+son1,20+son1); 
  
  // ********** utilisation des parametres audio *******************
  //          pour activer la courbe de bezier 
  
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte   
  text("Affectation de la valeur audio "   , 500,500);
  text("aux paramétres de la courbe de "   , 500,520);
  text("          Bezier               "   , 500,540);
  // Pour dessiner une courbe de bézier, il faut définir quatre
  // points avec chaque fois 2 valeurs (x,y) . La première et la
  // dernière définiront le début et le fin de la courbe. Les deux
  // points intermédiaires définiront les contrôles de courbe 
  // 
  // bezier (ax,ay,c1x,c1y,c2x,c2y,bx,by)
  // ax,ay => définition du début de la courbe
  // c1x,c1y => premier contrôle de courbure
  // c2x,c2y => deuxième contrôle de courbure
  // bx,by => définition de la fin de la courbe
  bezier(500,600,550,600-son1,600,600-son1,650,600); 
  bezier(500,600,550,600+son2,600,600+son2,650,600); 
}
  
  
  



  // ***************Procedure d'arret ************************ 

  // il faut prévoir d'arréter la capture du son ainsi que la librairie
  // minim a la fin de l'execution du programme 

void stop() {
  minim.stop();
  super.stop();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

// Version de IDE:Processing 3.3.4

// RedOhm

// H-Mazelin 26/07/2017

// Au sommaire

// Integration de la bibliothéque

// Configuration de la fonction minim

// Mise à l'echelle de la valeur sonore

// Utilisation de la valeur

// Minim est une bibliothèque audio qui permet la manipulation

// du son dans l’environnement Processing.

import ddf.minim.*;

// Création d'une variable qui contiendra le moteur Minim

Minim minim;

// Un AudioInput est une connexion à la source d'enregistrement

// actuelle de l'ordinateur.

AudioInput in;

// declaration des variables son à virgule flottante

float son;

float son1;

float son2;

float son3;

float son4;

// creation d'une variable son5_entier

int son5_entier;

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup() {

// definition de la taile de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size(1000,800);

// definition « this » dans ce programme, sachez qu'il sert à indiquer à Processing

// que ces instructions s'appliquent à « ce » programme. Minim a besoin de connaître

// l'adresse de « ce » programme pour le faire communiquer avec la carte son de

// votre ordinateur.

minim = new Minim(this);

// requête pour une entrée d'un certain taux d'échantillonnage

in = minim.getLineIn(Minim.STEREO, 512);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw() {

// *********** Présentation de l'exercice ***************************

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 iden pour les autre couleurs

// affichage du fond de l'ecran en blanc

background(255,255,255);

// Fill : Définit la couleur utilisée pour remplir les formes.

// fill(r,g,b);

// r = pour rouge

// g = pour le vert

// b = pour le bleu

fill(0,0,0);

// Choix de la taille de la police

// syntaxe => textSize( taille )

// Taille => La taille des caractères est en de pixels.

textSize(32);

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Utilisation de l'entrée son " , 300,50);

//*********** Récupération du niveau sonore **********************

// transfert de la valeur du volume du canal audio

// vers la variable son

son=(in.mix.level());

// Mise a l'echelle et augmentation de la valeur

son1=son*200;

// Mise a l'echelle et augmentation de la valeur

son2=son*100;

// Mise a l'echelle et augmentation de la valeur

son3=son*100;

// *********** Affichage de la valeur de remise à l'echelle *********

// Choix de la taille de la police

// syntaxe => textSize( taille )

// Taille => La taille des caractères est en de pixels.

textSize(20);

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Valeur du son brute => "+ son , 100,200);

text("Valeur du son avec un coef multiplicateur de 100 => "+ son1 , 100,230);

// ******** Mise a l'echelle d'une valeur **********************

// map(valeur, v_basse_e,v_haut_e,valeur_b_sortie,valeur_h_sortie)

// valeur => valeur a etalonner

// v_basse_e => limite inférieure de la plage actuelle de la valeur

// v_haute_e => limite supérieure de la plage actuelle de la valeur

// valeur_b_sortie => limite inférieure de la plage cible de la valeur

// valeur_h_sortie => limite supérieure de la plage cible de la valeur

son4=map(son3,1,40,0,10);

text("Mise à l'echelle " + son4 ,100,330);

text("map (variable son3 , 1 , 40 , 0 , 10) ",400,330 );

// ******** Convertion d'une variable flottante en entier ***********

// valeur_entier = int(valeur flottante * 1.4);

son5_entier = int(son4 * 1.4);

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Conversion d'une variable flottante en entier => "+ son5_entier,100,360 );

// *********** Construction du rectangle ***************************

// Choix de la taille de la police

// syntaxe => textSize( taille )

// Taille => La taille des caractères est en de pixels.

textSize(16);

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Affectation de la valeur audio " , 100,540);

text("aux paramétres du rectangle " , 100,560);

// Dessine un rectangle à l’écran avec tous les angles à 90°

// rect(a, b, c, d);

// a => coordonnée x du rectangle

// b => coordonnée y du rectangle

// c => largeur du rectangle

// d => hauteur du rectangle

rect(100,600,20+son1,20+son1);

// ********** utilisation des parametres audio *******************

// pour activer la courbe de bezier

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Affectation de la valeur audio " , 500,500);

text("aux paramétres de la courbe de " , 500,520);

text(" Bezier " , 500,540);

// Pour dessiner une courbe de bézier, il faut définir quatre

// points avec chaque fois 2 valeurs (x,y) . La première et la

// dernière définiront le début et le fin de la courbe. Les deux

// points intermédiaires définiront les contrôles de courbe

// bezier (ax,ay,c1x,c1y,c2x,c2y,bx,by)

// ax,ay => définition du début de la courbe

// c1x,c1y => premier contrôle de courbure

// c2x,c2y => deuxième contrôle de courbure

// bx,by => définition de la fin de la courbe

bezier(500,600,550,600-son1,600,600-son1,650,600);

bezier(500,600,550,600+son2,600,600+son2,650,600);

}

// ***************Procedure d'arret ************************

// il faut prévoir d'arréter la capture du son ainsi que la librairie

// minim a la fin de l'execution du programme

void stop() {

minim.stop();

super.stop();

}

Retour au sommaire

Le langage Processing :Les fichiers images

–

Mise à jour le 21/07/2017 : Article traitant de La fonction image() dans Processing . Dessine une image sur l’espace de travail .

Sommaire :

Présentation de la fonction
Comment importer une image dans Processing ( Tutoriel ).

Présentation de la fonction

La fonction image() dessine une image sur l’espace de travail . Les images doivent être dans le répertoire « data » de l’esquisse pour se charger correctement. Sélectionnez «Ajouter un fichier …» dans le menu «Croquis» pour ajouter l’image au répertoire de données, ou faites simplement glisser déposer le fichier image sur l’espace de travail.

–

Retour au sommaire

Comment importer une image dans Processing ( Tutoriel ).

–

Programme du tuto ci-dessus

//
//
//
// Comment importer une image dans Processing 
// 
//
// Version de IDE:Processing 3.3.4
// RedOhm
// H-Mazelin 18/07/2017


// création d'une variable Processing pour le fichier image 
// nom de la variable iris
PImage iris;


// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme. 
void setup ()
{
  // definition de la taile de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size(1000,800);
  
  // loadImage() qui va aller chercher les pixels de l'image dans le fichier
  // et les importera dans notre variable nommée iris.
  iris = loadImage("iris_essai_png.png");
  
  
}

//Le programme principal s’exécute par une boucle infinie appelée draw () 

void draw ()

{

 // choix de la couleur du fond de la fenetre 
 // syntaxe : background (rouge,vert,bleu )
 // valeur du rouge de 0 à 255 iden pour les autre couleurs
 // dans notre exemple blanc
 background(255,255,255);    

 // parametre de la fonction (variableImage, x, y, largeur,hauteur).
 // variableImage => l'image à afficher
 // X => coordonnées en X de l'image
 // Y => coordonnées en Y de l'image
 // largeur => largeur de l'image à afficher 
 // hauteur => hauteur de l'image à afficher
 //
 // ***************** utilisation de la fonction  mouse ****************
 //
 // Utilisation de mouseX : La variable système mouseX contient toujours
 // la coordonnée horizontale actuelle de la souris.
 // Utilisation de mouseY : La variable système mouseY contient toujours
 // la coordonnée verticale actuelle de la souris.
 image(iris,10+mouseX,10+mouseY,60,60);

}

// Comment importer une image dans Processing

// Version de IDE:Processing 3.3.4

// RedOhm

// H-Mazelin 18/07/2017

// création d'une variable Processing pour le fichier image

// nom de la variable iris

PImage iris;

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup ()

{

// definition de la taile de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size(1000,800);

// loadImage() qui va aller chercher les pixels de l'image dans le fichier

// et les importera dans notre variable nommée iris.

iris = loadImage("iris_essai_png.png");

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 iden pour les autre couleurs

// dans notre exemple blanc

background(255,255,255);

// parametre de la fonction (variableImage, x, y, largeur,hauteur).

// variableImage => l'image à afficher

// X => coordonnées en X de l'image

// Y => coordonnées en Y de l'image

// largeur => largeur de l'image à afficher

// hauteur => hauteur de l'image à afficher

// ***************** utilisation de la fonction mouse ****************

// Utilisation de mouseX : La variable système mouseX contient toujours

// la coordonnée horizontale actuelle de la souris.

// Utilisation de mouseY : La variable système mouseY contient toujours

// la coordonnée verticale actuelle de la souris.

image(iris,10+mouseX,10+mouseY,60,60);

}

Retour au sommaire

Le langage pour Processing , la communication série

–

Mise à jour le 10/09/2017 : La liaison série est un protocole de communication indispensable entre l’ordinateur et la carte Arduino ( ou bien un autre type de carte ) , via le câble de communication USB.Dans cet article , nous vous donnons quelques exemples avec des tutoriels pour vous familiariser à ce genre de communication série.

Sommaire :

Lecture d’un compteur dans la carte Arduino sur Processing
- Lecture d’une valeur sur la carte Arduino via la communication série ( coté Arduino )
- Affichage d’une valeur de la carte Arduino sur processing ( coté Processing )
Lecture de 3 valeurs sur la carte Arduino via le port série et animation d’un rectangle sur l’écran.
- Tutoriel vidéo
- Programme pour la carte Arduino lecture d’un joystick
- Programme pour Processing affichage d’une forme via la carte Arduino
Retour au menu Processing

– La communication série –
Lecture d’un compteur dans la carte Arduino
sur Processing ( AP001-P)

Programme pour Arduino ( AP001-A)

//
//
//
// *****************************************************
// * RedOhm                                            *
// *                                                   *
// *    Lecture d'une valeur sur la carte Arduino      *
// *       via le port serie                           *
// *                                                   *
// * code programme : AP001-A                          *
// *                                                   *
// * 13/08/2017                                        *
// * H.Mazelin                                         *
// *****************************************************




// Déclare une variable ( valeur )  de type int non-signée. ce type de variables 
// unsigned int stocke uniquement des valeurs positives, dans une fourchette 
// allant de 0 à 65535 
unsigned int valeur ;


// Un programme Arduino doit impérativement contenir la fonction "setup"
// Elle ne sera exécuter une seule fois au démarrage du microcontroleur
// Elle sert à configurer globalement les entrées sorties 
void setup() {
  
//ouvre le port série et fixe le debit de communication à 9600 bauds
 Serial.begin(9600);
}




 //Le programme principal s’exécute par une boucle infinie appelée Loop () 
  
void loop()

{


// incrémente la variable valeur de  un, sans modifier la variable valeur  
valeur = valeur +1 ;
// Affiche les données sur le port série suivi d'un caractère de "retour de chariot"
//(ASCII 13, or '\r') et un caractère de "nouvelle ligne" (ASCII 10, or '\n'). 
Serial.println(valeur);

// Réalise une pause dans l'exécution du programme pour la durée (en millisecondes)
// soit 2000 ms = 2 secondes 
delay(2000);

  
}

// *****************************************************

// * RedOhm *

// * *

// * Lecture d'une valeur sur la carte Arduino *

// * via le port serie *

// * *

// * code programme : AP001-A *

// * *

// * 13/08/2017 *

// * H.Mazelin *

// *****************************************************

// Déclare une variable ( valeur ) de type int non-signée. ce type de variables

// unsigned int stocke uniquement des valeurs positives, dans une fourchette

// allant de 0 à 65535

unsigned int valeur ;

// Un programme Arduino doit impérativement contenir la fonction "setup"

// Elle ne sera exécuter une seule fois au démarrage du microcontroleur

// Elle sert à configurer globalement les entrées sorties

void setup() {

//ouvre le port série et fixe le debit de communication à 9600 bauds

Serial.begin(9600);

}

//Le programme principal s’exécute par une boucle infinie appelée Loop ()

void loop()

{

// incrémente la variable valeur de un, sans modifier la variable valeur

valeur = valeur +1 ;

// Affiche les données sur le port série suivi d'un caractère de "retour de chariot"

//(ASCII 13, or '\r') et un caractère de "nouvelle ligne" (ASCII 10, or '\n').

Serial.println(valeur);

// Réalise une pause dans l'exécution du programme pour la durée (en millisecondes)

// soit 2000 ms = 2 secondes

delay(2000);

}

Retour au sommaire

Programme pour Processing ( AP001-P )

//
//
//
// *****************************************************
// * RedOhm                                            *
// *                                                   *
// *    Lecture d'une valeur sur la carte Arduino      *
// *       via le port serie                           *
// *                                                   *
// * code programme : AP001-P                          *
// *                                                   *
// * 13/08/2017                                        *
// * H.Mazelin                                         *
// *****************************************************


// Cette librairie permet de communiquer avec l'Arduino 
// il esn indispensable de l'installer pour communiquer 
import processing.serial.*;

 
// Crée un objet de type myPort
Serial port_de_com;  

// Declaration de la variable -> valeur_recu
// Cette fonction (string ) sert à stocker du texte.
// Dans notre exemple pour les données reçues sur le port série
String valeur_recu;  


// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme. 


void setup()
{
  
  // definition de la taille de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size(1000,600); 
  
  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 iden pour les autre couleurs
  // affichage du fond en jaune 
  background(255,255,128);  
  
  
  // Ouverture du port de communication 
  // par defaut sur le systeme Windows , cela ouvre generalement
  // le port COM 1
  String nom_du_port = Serial.list()[0]; 
  // initialise la connexion série à 9600 bauds
  // IMPORTANT : régler le recepteur avec la même valeur de transmission
  // soit dans notre exemple la carte Arduino
  port_de_com = new Serial(this, nom_du_port, 9600);
  
 
 
 

}

//Le programme principal s’exécute par une boucle infinie appelée draw () 
void draw()
{
  
  
  
  
  // ---------------  Affichage du titre -----------------------
  
  // Fill : Définit la couleur utilisée pour remplir les formes.
  // fill(r,g,b);
  // r = pour rouge
  // g = pour le vert
  // b = pour le bleu
  fill(0,0,0);
   
  
  // Choix de la taille de la police 
  // syntaxe => textSize( taille )
  // Taille => La taille des caractères est en de pixels.
  textSize(32);
  
  
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte 
  text("Lecture des informations envoyer par Arduino", 220, 75);
  
  // ---------- Fin de l'affichage du titre -----------------------
  
  
  
  // --------- Controle du port série ----------------------------
  
  // On vérifie si les données ou informations sont disponibles 
  // sur le port série.Si oui , on exécute le code ci-dessous 
  // entre crochets   
  if ( port_de_com.available() > 0) 
  {  
    
  
  // Comme des données sont disponibles sur le port série, alors
  // on fixe celle-ci dans la variable valeur_recu 
  valeur_recu = port_de_com.readStringUntil('\n'); 
    

} 

  // --------------- fin du controle du port série ------------- 




  // ------------------- Aide a la mise au point ---------------- 

  // La fonction println () écrit sur la zone de la console 
  // (le rectangle noir en bas de l'environnement de l'écran de 
  // Processing )
  //                 ** A savoir **
  // Cette fonction est souvent utile pour vérifier le bon fonctionnement
  // du programme .Notez que la fonction est relativement lente .Elle ne
  // fonctionne bien que sur des contrôles relativement lents comme dans 
  // notre exemple. On peut donc désactiver cette ligne de code qui ne sert 
  // que pour la mise au point .
  println(valeur_recu); 
  
  // ----------- Fin de la mise au point -------------------------- 
 
  
  // ----- Affichage de valeur du compteur de la carte Arduino ---
  
  // Désactive le dessin des contours de la forme dans notre cas le 
  // rectangle 
  noStroke();
  
  // Fill : Définit la couleur utilisée pour remplir les formes.
  // dans notre exemple le rectangle
  fill(255,255,128);
  
  // On dessine 
  rect(435,259,100,20); 
  
    
  // Choix de la taille de la police 
  textSize(16);
  
  // Fill : Définit la couleur utilisée pour remplir les formes.
  // dans notre exemple le texte  
  fill(0,0,0);
  
  // Affichage d'un texte à l'écran
  // suivi de la valeur du compteur de la carte Arduino 
  text("Valeur du compteur de la carte Arduino -> "+ valeur_recu, 115, 275); 
  
  // ---- Fin du traitement de l'affichage du compteur --------- 
  
 
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

// *****************************************************

// * RedOhm *

// * *

// * Lecture d'une valeur sur la carte Arduino *

// * via le port serie *

// * *

// * code programme : AP001-P *

// * *

// * 13/08/2017 *

// * H.Mazelin *

// *****************************************************

// Cette librairie permet de communiquer avec l'Arduino

// il esn indispensable de l'installer pour communiquer

import processing.serial.*;

// Crée un objet de type myPort

Serial port_de_com;

// Declaration de la variable -> valeur_recu

// Cette fonction (string ) sert à stocker du texte.

// Dans notre exemple pour les données reçues sur le port série

String valeur_recu;

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup()

{

// definition de la taille de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size(1000,600);

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 iden pour les autre couleurs

// affichage du fond en jaune

background(255,255,128);

// Ouverture du port de communication

// par defaut sur le systeme Windows , cela ouvre generalement

// le port COM 1

String nom_du_port = Serial.list()[0];

// initialise la connexion série à 9600 bauds

// IMPORTANT : régler le recepteur avec la même valeur de transmission

// soit dans notre exemple la carte Arduino

port_de_com = new Serial(this, nom_du_port, 9600);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw()

{

// --------------- Affichage du titre -----------------------

// Fill : Définit la couleur utilisée pour remplir les formes.

// fill(r,g,b);

// r = pour rouge

// g = pour le vert

// b = pour le bleu

fill(0,0,0);

// Choix de la taille de la police

// syntaxe => textSize( taille )

// Taille => La taille des caractères est en de pixels.

textSize(32);

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Lecture des informations envoyer par Arduino", 220, 75);

// ---------- Fin de l'affichage du titre -----------------------

// --------- Controle du port série ----------------------------

// On vérifie si les données ou informations sont disponibles

// sur le port série.Si oui , on exécute le code ci-dessous

// entre crochets

if ( port_de_com.available() > 0)

{

// Comme des données sont disponibles sur le port série, alors

// on fixe celle-ci dans la variable valeur_recu

valeur_recu = port_de_com.readStringUntil('\n');

}

// --------------- fin du controle du port série -------------

// ------------------- Aide a la mise au point ----------------

// La fonction println () écrit sur la zone de la console

// (le rectangle noir en bas de l'environnement de l'écran de

// Processing )

// ** A savoir **

// Cette fonction est souvent utile pour vérifier le bon fonctionnement

// du programme .Notez que la fonction est relativement lente .Elle ne

// fonctionne bien que sur des contrôles relativement lents comme dans

// notre exemple. On peut donc désactiver cette ligne de code qui ne sert

// que pour la mise au point .

println(valeur_recu);

// ----------- Fin de la mise au point --------------------------

// ----- Affichage de valeur du compteur de la carte Arduino ---

// Désactive le dessin des contours de la forme dans notre cas le

// rectangle

noStroke();

// Fill : Définit la couleur utilisée pour remplir les formes.

// dans notre exemple le rectangle

fill(255,255,128);

// On dessine

rect(435,259,100,20);

// Choix de la taille de la police

textSize(16);

// Fill : Définit la couleur utilisée pour remplir les formes.

// dans notre exemple le texte

fill(0,0,0);

// Affichage d'un texte à l'écran

// suivi de la valeur du compteur de la carte Arduino

text("Valeur du compteur de la carte Arduino -> "+ valeur_recu, 115, 275);

// ---- Fin du traitement de l'affichage du compteur ---------

}

Retour au sommaire .

– La communication série –

Lecture de 3 valeurs sur la carte Arduino
via le port série et animation
d’un rectangle sur l’écran

–

Tutoriel : Animation d’une forme sous Processing avec utilisation de la communication série

Pour plus d’information sur la carte Arduino Mega => oui j’en besoin

Programme pour Arduino ( Version 1.8.3 )

//
//
//

/*
 * RedOhm
 * 
 * 
 * Transfert des informations du joystock vers le port de 
 * communication  
 *              
 *              
 * Le 28/08/2017
 * H.Mazelin              
 * 
 * 
 */




// Déclaration et initialisation des broches d'entrée
// Le signal de l'axe X SUR A0
int JoyStick_X = A0;
// Le signal de l'axe Y SUR A1 
int JoyStick_Y = A1; 
// L'information du bouton sur la pin 3 
int Bouton = 3; 
 

/* 
 * Un programme Arduino doit impérativement contenir cette fonction .
 * Elle ne sera exécuter une seule fois au démarrage du microcontroleur
 * Elle sert à configurer globalement les entrées sorties  
 *  
 */
 
void setup ()
{
  //le potentiometre JoyStick_X est une entrée
  pinMode (JoyStick_X, INPUT);
  //le potentiometre JoyStick_Y est une entrée
  pinMode (JoyStick_Y, INPUT);
  //l'inter Bouton est une entrée
  pinMode (Bouton, INPUT);

   
  //Cette fonction a pour but de de forcer une entrée dans un état
  //défini. Dans notre exemple nous le forçons à l’État HAUT
  digitalWrite(Bouton, HIGH);  
  //ouvre le port série et fixe le debit de communication à 9600 bauds 
  Serial.begin (9600); 
 
}


//Le programme principal s’exécute par une boucle infinie appelée Loop () 
void loop ()
{
  // Déclare des variables de type "virgule-flottante", c'est à dire des nombres 
  // à virgules. Les nombres à virgule sont souvent utilisés pour l'expression 
  // des valeurs analogiques et continues
  float x, y;
  // Déclare une variable ( etat_du_bouton )  de type int 
  int etat_du_bouton;
   
  // Lit la valeur de la tension présente sur la broche spécifiée
  // dans notre cas la valeur JoyStick_X 
  x = analogRead (JoyStick_X);
  // Lit la valeur de la tension présente sur la broche spécifiée
  // dans notre cas la valeur JoyStick_Y 
  y = analogRead (JoyStick_Y);
  // Lit l"état (= le niveau logique) d'une broche précise en entrée
  // numérique dans notre cas (bouton)
  etat_du_bouton = digitalRead (Bouton);
  

  
    // ecrit les données sur le port série
    Serial.print(x);
    Serial.print(';');
    Serial.print(y);
    Serial.print(';');
    // ecrit les données sur le port série
    // puis effectue un saut de ligne avec la fonction  Serial.println  
    Serial.println(etat_du_bouton);

  // Réalise une pause dans l'exécution du programme pour la durée
  //(en millisecondes) indiquée en paramètre.
  delay (50);
}

* RedOhm

* Transfert des informations du joystock vers le port de

* communication

* Le 28/08/2017

* H.Mazelin

// Déclaration et initialisation des broches d'entrée

// Le signal de l'axe X SUR A0

int JoyStick_X = A0;

// Le signal de l'axe Y SUR A1

int JoyStick_Y = A1;

// L'information du bouton sur la pin 3

int Bouton = 3;

* Un programme Arduino doit impérativement contenir cette fonction .

* Elle ne sera exécuter une seule fois au démarrage du microcontroleur

* Elle sert à configurer globalement les entrées sorties

void setup ()

{

//le potentiometre JoyStick_X est une entrée

pinMode (JoyStick_X, INPUT);

//le potentiometre JoyStick_Y est une entrée

pinMode (JoyStick_Y, INPUT);

//l'inter Bouton est une entrée

pinMode (Bouton, INPUT);

//Cette fonction a pour but de de forcer une entrée dans un état

//défini. Dans notre exemple nous le forçons à l’État HAUT

digitalWrite(Bouton, HIGH);

//ouvre le port série et fixe le debit de communication à 9600 bauds

Serial.begin (9600);

}

//Le programme principal s’exécute par une boucle infinie appelée Loop ()

void loop ()

{

// Déclare des variables de type "virgule-flottante", c'est à dire des nombres

// à virgules. Les nombres à virgule sont souvent utilisés pour l'expression

// des valeurs analogiques et continues

float x, y;

// Déclare une variable ( etat_du_bouton ) de type int

int etat_du_bouton;

// Lit la valeur de la tension présente sur la broche spécifiée

// dans notre cas la valeur JoyStick_X

x = analogRead (JoyStick_X);

// Lit la valeur de la tension présente sur la broche spécifiée

// dans notre cas la valeur JoyStick_Y

y = analogRead (JoyStick_Y);

// Lit l"état (= le niveau logique) d'une broche précise en entrée

// numérique dans notre cas (bouton)

etat_du_bouton = digitalRead (Bouton);

// ecrit les données sur le port série

Serial.print(x);

Serial.print(';');

Serial.print(y);

Serial.print(';');

// ecrit les données sur le port série

// puis effectue un saut de ligne avec la fonction Serial.println

Serial.println(etat_du_bouton);

// Réalise une pause dans l'exécution du programme pour la durée

//(en millisecondes) indiquée en paramètre.

delay (50);

}

Retour au sommaire .

–

Programme pour Processing ( Version 3.3.4 )

Code programme : AP002-A

Nom du programme : communication_processing_joy_ky023

//
//
//
//
//
// *********************************************************
// * RedOhm                                                *
// *                                                       *
// *    Lecture de 3 valeurs sur la carte Arduino           *
// *       via le port serie et animation                  *        
// *        d'un rectangle sur l'ecran                     *
// *                                                       *
// * code programme : AP002-A                              *
// * Nom du programme : communication_processing_joy_ky023 *
// *                                                       *
// * 28/08/2017                                            *
// * B.Benoit & H.Mazelin                                  *
// *********************************************************


// Cette librairie permet de communiquer avec l'Arduino 
// il est indispensable de l'installer pour communiquer 
import processing.serial.*;

// Definition du port cible, en minuscules.
static String ARDUINO_PORT = "com15";

// Crée un objet de type myPort
Serial myPort;  

// Variable pour les données reçues sur le port serie
String message;

// Fonction permettant de vérifier l'existence du port cible souhaité.
boolean checkSerialPort(final String targetPort) {
  // Récupération de la liste des ports disponibles.
  final String[] serialPortList = Serial.list();
  // Itération sur chacun de ces ports.
  for (int i=0; i < serialPortList.length; i++)
    // Comparaison du nom du port (en minuscules), avec le port cible. 
    if (serialPortList[i].toLowerCase().equals(targetPort))
      return true;

  // Le port n'a pas été trouvé !
  return false;
}

void setup()
{
   
  // Fixe la taille de la fenêtre graphique en pixels (100x100 par défaut)
  // pour les parametre longeur , hauteur 
  // et fixe le mode graphique  cette commande est optionnel
  size(1000, 600, P3D);
 
  // Verification de l'existence du port cible.
  if (!checkSerialPort(ARDUINO_PORT)) {
    println("Impossible de trouver le port '" + ARDUINO_PORT + "'. Veuillez vérifier la configuration et la bonne connexion.");
    // Demande de sortie (différée) du programme.
    exit();
    // Sortie immédiate du setup().
    return;
  }
  
  // Initialisation concrète du port sur lequel communiquer avec l'Arduino.
  println("Initialisation du port '" + ARDUINO_PORT + "'.");
  myPort = new Serial(this, ARDUINO_PORT, 9600);
  myPort.bufferUntil('\n');
}

void draw()
{
  // Vérification de la disponibilité du port initialisé.
  if (myPort.available() > 0) 
  {
    // Récupération des prochaines valeurs lissées.
    float[] averageValues = getAverageValues(1);
    
    // Convertion des valeurs reçues depuis le Joystick.
    // La valeur brute 1 va être utilisée sur l'axe Y.
    // La valeur brute 2 va être utilisée sur l'axe X.
    // La troisième valeur correspond à l'état du bouton du Joystick
    //   => 1 = bouton NON pressé (valeur par défaut), 0 = bouton pressé
    float valeurBrute1 = averageValues[0];
    float valeurBrute2 = averageValues[1];
    boolean etatBouton = !(averageValues[2] == 1);
    
    // Mapping des valeurs en angle (exprimé en degré).
    // La plage de valeurs du Joystick est de 0 à 1023.
    float x = map(valeurBrute2, 0, 1023, 0, 360);
    float y = map(valeurBrute1, 0, 1023, 0, 360);
    
    // Si le bouton est pressé, on allume une lumière, et active un effet de zoom.
    if (etatBouton) {
      lights();
      //scale(1.1);
    }
    
   

    // Positionnement par défaut de l'affichage.
    background(0);
    translate(width/2, height/2);

    // Ajout d'un offset, pour que la position de départ soit celle d'une boite posée sur une surface plane.
    // Cela est variable et à ajuster en fonction du matériel utilisé (ici Joystick).
    x += 90;
    y -= 174;

    rotateX(radians(x));
    rotateY(radians(y));
    rotateZ(radians(90));

    // Remplissage de la boîte d'une couleur différente selon l'état du bouton du Joystick.
    if (etatBouton)
      fill(255,0,0);
    else
      fill(128,128,128);
    
    stroke(255);
    box(80,240,20);
  }
}



// *************************** creation de la fonction ********************************
//
// fixe un nombre pour un eventuel lissage 
// Controle du format 
// convertion en entier 
// Envoie des 3 valeurs, sous la forme d'un tableau.



float[] getAverageValues(int measureCount) {
  int iterationCount = measureCount;
  float valeurBrute1 = 0.0, valeurBrute2 = 0.0, etatBouton = 0.0;
  
  // Boucle jusqu'à ce que l'on obtienne le nombre de mesures demandées
  // (en ne prenant pas en compte tous les problèmes de format, de convertion 
  // en entiers ...).
  while (true) {
    // Lecture du prochain message disponible.
    message = myPort.readStringUntil('\n');
    // Vérification : on s'assure qu'un message AVEC fin de ligne est bien disponible
    // sur le port,sinon on ne fait rien de plus dans cette exécution de draw().
    // L'exécution suivante prendra en charge les messages en attente.
    if (message == null)
      continue;
    
    
    
    // Décodage du message reçu; il doit impérativement respecter le format : x;y
    final String[] values = message.split(";");
    if (values.length != 3) {
     println("Le message suivant ne respecte pas le format attendu (x;y): " + message);
     continue;
    }

    // Convertion des valeurs reçues en entiers (en gérant le cas où l'une des
    // valeurs n'est pas un entier).
    try {
      float nextvaleurBrute1 = Float.parseFloat(values[0].trim());
      float nextvaleurBrute2 = Float.parseFloat(values[1].trim());
      float nextetatBouton = Float.parseFloat(values[2].trim());
    
      // Prise en compte de ces nouvelles valeurs (pour le moment, on somme toutes les valeurs).
      valeurBrute1 += nextvaleurBrute1;
      valeurBrute2 += nextvaleurBrute2;
      etatBouton += nextetatBouton;
    } catch(NumberFormatException e) {
       // Affichage d'un message d'erreur. 
       println("Impossible de convertir l'une des valeurs en entier ... le message suivant est donc totalement ignoré : " + message);
       e.printStackTrace();
       continue; 
    }

    // Arrivé ici, on a la certitude d'avoir bien reçu et pris en compte une
    // nouvelle valeur, au bon format.C'est ici que l'on gère le nombre d'itération,
    // et la condition d'arrêt de la boucle infinie (while(true)). 
    if (--iterationCount <= 0)
      break;
  }
  
  // Envoie des 3 valeurs lissées, sous la forme d'un tableau.
  return new float[]{valeurBrute1/measureCount, valeurBrute2/measureCount, etatBouton/measureCount};
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

// *********************************************************

// * RedOhm *

// * *

// * Lecture de 3 valeurs sur la carte Arduino *

// * via le port serie et animation *

// * d'un rectangle sur l'ecran *

// * *

// * code programme : AP002-A *

// * Nom du programme : communication_processing_joy_ky023 *

// * *

// * 28/08/2017 *

// * B.Benoit & H.Mazelin *

// *********************************************************

// Cette librairie permet de communiquer avec l'Arduino

// il est indispensable de l'installer pour communiquer

import processing.serial.*;

// Definition du port cible, en minuscules.

static String ARDUINO_PORT = "com15";

// Crée un objet de type myPort

Serial myPort;

// Variable pour les données reçues sur le port serie

String message;

// Fonction permettant de vérifier l'existence du port cible souhaité.

boolean checkSerialPort(final String targetPort) {

// Récupération de la liste des ports disponibles.

final String[] serialPortList = Serial.list();

// Itération sur chacun de ces ports.

for (int i=0; i < serialPortList.length; i++)

// Comparaison du nom du port (en minuscules), avec le port cible.

if (serialPortList[i].toLowerCase().equals(targetPort))

return true;

// Le port n'a pas été trouvé !

return false;

}

void setup()

{

// Fixe la taille de la fenêtre graphique en pixels (100x100 par défaut)

// pour les parametre longeur , hauteur

// et fixe le mode graphique cette commande est optionnel

size(1000, 600, P3D);

// Verification de l'existence du port cible.

if (!checkSerialPort(ARDUINO_PORT)) {

println("Impossible de trouver le port '" + ARDUINO_PORT + "'. Veuillez vérifier la configuration et la bonne connexion.");

// Demande de sortie (différée) du programme.

exit();

// Sortie immédiate du setup().

return;

}

// Initialisation concrète du port sur lequel communiquer avec l'Arduino.

println("Initialisation du port '" + ARDUINO_PORT + "'.");

myPort = new Serial(this, ARDUINO_PORT, 9600);

myPort.bufferUntil('\n');

}

void draw()

{

// Vérification de la disponibilité du port initialisé.

if (myPort.available() > 0)

{

// Récupération des prochaines valeurs lissées.

float[] averageValues = getAverageValues(1);

// Convertion des valeurs reçues depuis le Joystick.

// La valeur brute 1 va être utilisée sur l'axe Y.

// La valeur brute 2 va être utilisée sur l'axe X.

// La troisième valeur correspond à l'état du bouton du Joystick

// => 1 = bouton NON pressé (valeur par défaut), 0 = bouton pressé

float valeurBrute1 = averageValues[0];

float valeurBrute2 = averageValues[1];

boolean etatBouton = !(averageValues[2] == 1);

// Mapping des valeurs en angle (exprimé en degré).

// La plage de valeurs du Joystick est de 0 à 1023.

float x = map(valeurBrute2, 0, 1023, 0, 360);

float y = map(valeurBrute1, 0, 1023, 0, 360);

// Si le bouton est pressé, on allume une lumière, et active un effet de zoom.

if (etatBouton) {

lights();

//scale(1.1);

}

// Positionnement par défaut de l'affichage.

background(0);

translate(width/2, height/2);

// Ajout d'un offset, pour que la position de départ soit celle d'une boite posée sur une surface plane.

// Cela est variable et à ajuster en fonction du matériel utilisé (ici Joystick).

x += 90;

y -= 174;

rotateX(radians(x));

rotateY(radians(y));

rotateZ(radians(90));

// Remplissage de la boîte d'une couleur différente selon l'état du bouton du Joystick.

if (etatBouton)

fill(255,0,0);

else

fill(128,128,128);

stroke(255);

box(80,240,20);

}

// *************************** creation de la fonction ********************************

// fixe un nombre pour un eventuel lissage

// Controle du format

// convertion en entier

// Envoie des 3 valeurs, sous la forme d'un tableau.

float[] getAverageValues(int measureCount) {

int iterationCount = measureCount;

float valeurBrute1 = 0.0, valeurBrute2 = 0.0, etatBouton = 0.0;

// Boucle jusqu'à ce que l'on obtienne le nombre de mesures demandées

// (en ne prenant pas en compte tous les problèmes de format, de convertion

// en entiers ...).

while (true) {

// Lecture du prochain message disponible.

message = myPort.readStringUntil('\n');

// Vérification : on s'assure qu'un message AVEC fin de ligne est bien disponible

// sur le port,sinon on ne fait rien de plus dans cette exécution de draw().

// L'exécution suivante prendra en charge les messages en attente.

if (message == null)

continue;

// Décodage du message reçu; il doit impérativement respecter le format : x;y

final String[] values = message.split(";");

if (values.length != 3) {

println("Le message suivant ne respecte pas le format attendu (x;y): " + message);

continue;

}

// Convertion des valeurs reçues en entiers (en gérant le cas où l'une des

// valeurs n'est pas un entier).

try {

float nextvaleurBrute1 = Float.parseFloat(values[0].trim());

float nextvaleurBrute2 = Float.parseFloat(values[1].trim());

float nextetatBouton = Float.parseFloat(values[2].trim());

// Prise en compte de ces nouvelles valeurs (pour le moment, on somme toutes les valeurs).

valeurBrute1 += nextvaleurBrute1;

valeurBrute2 += nextvaleurBrute2;

etatBouton += nextetatBouton;

} catch(NumberFormatException e) {

// Affichage d'un message d'erreur.

println("Impossible de convertir l'une des valeurs en entier ... le message suivant est donc totalement ignoré : " + message);

e.printStackTrace();

continue;

}

// Arrivé ici, on a la certitude d'avoir bien reçu et pris en compte une

// nouvelle valeur, au bon format.C'est ici que l'on gère le nombre d'itération,

// et la condition d'arrêt de la boucle infinie (while(true)).

if (--iterationCount <= 0)

break;

}

// Envoie des 3 valeurs lissées, sous la forme d'un tableau.

return new float[]{valeurBrute1/measureCount, valeurBrute2/measureCount, etatBouton/measureCount};

}

Retour au sommaire .

Le langage Processing : écrire un texte dans l’espace de travail

–

Mise à jour le 08/07/2017

Sommaire :

Le langage Processing sur l’utilisation du texte dans l’espace de travail .
- 001- Exemple pour écrire un texte sur l’écran avec , choix de la couleur du texte , de la taille , du positionnement du texte et enfin le contenu.
- 004 – La typographie comment importer une police de caractères
- 010- Comment déplacer un texte avec la commande translate sans effacement de l’ancienne position

Retour au sommaire

001 – Exemple pour écrire un texte sur l’écran avec , choix de la couleur du texte , de la taille , du positionnement du texte et enfin le contenu .

Exemple de programme :

//
//
// Exemple ecrire un texte sur l'ecran 
// 
// Choisir la couleur du texte
// choisir la taille du texte 
// Positionner le texte sur l'ecran et donner le contenue du texte
//
// H-Mazelin 23/06/2017


// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme. 


void setup ()
{
  // definition de la taile de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size(1000,800);
  
  
  
  
}


//Le programme principal s’exécute par une boucle infinie appelée draw () 
void draw ()
{

  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 iden pour les autre couleurs
  // affichage du fond de l'ecran en blanc 
  background(255,255,255); 
  
  // Fill : Définit la couleur utilisée pour remplir les formes.
  // fill(r,g,b);
  // r = pour rouge
  // g = pour le vert
  // b = pour le bleu
  fill(0,0,0);
  
  // Choix de la taille de la police 
  // syntaxe => textSize( taille )
  // Taille => La taille des caractères est en de pixels.
  textSize(32);
  
  // Affichage d'un texte à l'écran
  // text (texte,x,y);
  // x => coordonnée x du texte
  // y => coordonnée y du texte 
  text("Bonjour de l'équipe RedOhm ", 220, 75);
  
  // Choix de la taille de la police 18 pixels
  textSize(18);
  // Affichage d'un texte à l'écran
  text("Bienvenue sur RedOhm.fr ", 15, 150);
  
  // Choix de la taille de la police 15 pixels
  textSize(15);
  // Affichage d'un texte à l'écran
  text("Nous sommes une équipe de passionnés de robotique, électronique, ", 15, 190);
  text("mécanique et nous partageons ici le fruit de notre travail.", 520, 190);
  

  
  
}

// Exemple ecrire un texte sur l'ecran

// Choisir la couleur du texte

// choisir la taille du texte

// Positionner le texte sur l'ecran et donner le contenue du texte

// H-Mazelin 23/06/2017

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup ()

{

// definition de la taile de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size(1000,800);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 iden pour les autre couleurs

// affichage du fond de l'ecran en blanc

background(255,255,255);

// Fill : Définit la couleur utilisée pour remplir les formes.

// fill(r,g,b);

// r = pour rouge

// g = pour le vert

// b = pour le bleu

fill(0,0,0);

// Choix de la taille de la police

// syntaxe => textSize( taille )

// Taille => La taille des caractères est en de pixels.

textSize(32);

// Affichage d'un texte à l'écran

// text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("Bonjour de l'équipe RedOhm ", 220, 75);

// Choix de la taille de la police 18 pixels

textSize(18);

// Affichage d'un texte à l'écran

text("Bienvenue sur RedOhm.fr ", 15, 150);

// Choix de la taille de la police 15 pixels

textSize(15);

// Affichage d'un texte à l'écran

text("Nous sommes une équipe de passionnés de robotique, électronique, ", 15, 190);

text("mécanique et nous partageons ici le fruit de notre travail.", 520, 190);

}

–

Retour au sommaire

Menu langage Processing

004 – La typographie comment importer une police de caractères

–

Tutoriel comment importer une police de caractères .( Pour visionner ce tutoriel cliquez sur « agrandir » et attendez quelques secondes)

–

Exemple de programme :

//
//
//***************************************************************************
// RedOhm
//
// La typographie
// Comment importer une police de caractéres 
//
// Le 06/07/2017
// H-Mazelin
//
//***************************************************************************

// La fonction PFont indique à Processing le genre de la variable et lui 
// permettra d'ouvrir assez de mémoire pour contenir l'ensemble des données
// de ce genre

PFont police; 
 
// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme. 


void setup()
{
 
  
 
 // definition de la taille de la fenetre 
 // syntaxe : size (Hauteur fenetre,largeur fenetre )
 size(800,600); 
 
 // choix de la couleur du fond de la fenetre 
 // syntaxe : background (rouge,vert,bleu )
 // valeur du rouge de 0 à 255 iden pour les autre couleurs
 // affichage du fond en gris 
 background(209,209,209);  
  
 // Fill : Définit la couleur utilisée pour remplir les formes.
 // fill(r,g,b);
 // r = pour rouge
 // g = pour le vert
 // b = pour le bleu
 fill(0,0,0);
 textSize(32);
 text("La typographie",280,50);
 textSize(20);
 text("Comment importer une police de caractéres sur Processing",100,100); 
}


//Le programme principal s’exécute par une boucle infinie appelée draw () 
 
void draw()

{
 
 // ********************* importer une police 1 ************************ 
 // on charge le type de police 
 police = loadFont("Magneto-Bold-48.vlw");
 // Cette fonction  rend la police active.avec la hauteur de la police 
 textFont(police,30);
 // Fill : Définit la couleur utilisée pour remplir les formes.
 // fill(r,g,b);
 // r = pour rouge
 // g = pour le vert
 // b = pour le bleu
 fill(255,0,0);
 // Affichage d'un texte à l'écran
 // dans notre exemple  -> redohm en couleur rouge 
 // la position du texte à l'ecran en x 
 // la position du texte à l'ecran en y
 text(" redohm en couleur rouge ",20,340);
}

//***************************************************************************

// RedOhm

// La typographie

// Comment importer une police de caractéres

// Le 06/07/2017

// H-Mazelin

//***************************************************************************

// La fonction PFont indique à Processing le genre de la variable et lui

// permettra d'ouvrir assez de mémoire pour contenir l'ensemble des données

// de ce genre

PFont police;

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup()

{

// definition de la taille de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size(800,600);

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 iden pour les autre couleurs

// affichage du fond en gris

background(209,209,209);

// Fill : Définit la couleur utilisée pour remplir les formes.

// fill(r,g,b);

// r = pour rouge

// g = pour le vert

// b = pour le bleu

fill(0,0,0);

textSize(32);

text("La typographie",280,50);

textSize(20);

text("Comment importer une police de caractéres sur Processing",100,100);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw()

{

// ********************* importer une police 1 ************************

// on charge le type de police

police = loadFont("Magneto-Bold-48.vlw");

// Cette fonction rend la police active.avec la hauteur de la police

textFont(police,30);

// Fill : Définit la couleur utilisée pour remplir les formes.

// fill(r,g,b);

// r = pour rouge

// g = pour le vert

// b = pour le bleu

fill(255,0,0);

// Affichage d'un texte à l'écran

// dans notre exemple -> redohm en couleur rouge

// la position du texte à l'ecran en x

// la position du texte à l'ecran en y

text(" redohm en couleur rouge ",20,340);

}

Retour au sommaire

Menu langage Processing

010 – Comment déplacer un texte avec la fonction translate sans effacement de l’ancienne position

Exemple de programme :

//
// Comment déplacer un texte avec la commande translate
// sans effacement de l'ancienne position 
//
// H-Mazelin le 12/06/2017 


 // Declare la variable X 
 // Rappel sur la fonction d'une variable :On peut définir une variable comme
 // une boite ou l’on stock des balles .Une variable est une boite ou 
 // l’on stock un nombre ,et comme il existe une multitude de nombres:
 // Exemple entiers ,décimaux etc …Il faut donc assigner un type à cette
 // variable .
 int x;



// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme. 




void setup ()
{
  // definition de la taile de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size(1000,600);
  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 iden pour les autre couleurs
  background(255,255,255);
  
}


//Le programme principal s’exécute par une boucle infinie appelée draw () 
void draw ()

{
  
// Boucle comptant de 0 a 10 avec un increment de 1
// for (initialisation ; condition ; increment)
// entre crochet { instructions executees dans la boucle }
  
for (x=0;x<10;x++)  
 {
   
    // Fill : Définit la couleur utilisée pour remplir les formes.
    // Syntaxe => fill(r,g,b);
    // r = pour rouge
    // g = pour le vert
    // b = pour le bleu  
    fill(0);
 
    // translate => permet de faire une translation au système de coordonnées
    // Cette fonction est additionnelle et s'appliquent à tout ce qui se passe 
    // dans une boucle comme dans notre exemple 
    // est donc la fonction accumulent l'effet.
    // Syntaxe translate (x,y);
    // x => deplacer la coordonnée de gauche vers la droite
    // y => deplacer la coordonnée du haut vers le bas 
    translate(20,20);
 
    // Affichage d'un texte à l'écran
    // Syntaxe => text (texte,x,y);
    // x => coordonnée x du texte
    // y => coordonnée y du texte 
    text("RedOhm 2017",0,0);
 
 }
 
 
  
}

// Comment déplacer un texte avec la commande translate

// sans effacement de l'ancienne position

// H-Mazelin le 12/06/2017

// Declare la variable X

// Rappel sur la fonction d'une variable :On peut définir une variable comme

// une boite ou l’on stock des balles .Une variable est une boite ou

// l’on stock un nombre ,et comme il existe une multitude de nombres:

// Exemple entiers ,décimaux etc …Il faut donc assigner un type à cette

// variable .

int x;

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup ()

{

// definition de la taile de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size(1000,600);

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 iden pour les autre couleurs

background(255,255,255);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

// Boucle comptant de 0 a 10 avec un increment de 1

// for (initialisation ; condition ; increment)

// entre crochet { instructions executees dans la boucle }

for (x=0;x<10;x++)

{

// Fill : Définit la couleur utilisée pour remplir les formes.

// Syntaxe => fill(r,g,b);

// r = pour rouge

// g = pour le vert

// b = pour le bleu

fill(0);

// translate => permet de faire une translation au système de coordonnées

// Cette fonction est additionnelle et s'appliquent à tout ce qui se passe

// dans une boucle comme dans notre exemple

// est donc la fonction accumulent l'effet.

// Syntaxe translate (x,y);

// x => deplacer la coordonnée de gauche vers la droite

// y => deplacer la coordonnée du haut vers le bas

translate(20,20);

// Affichage d'un texte à l'écran

// Syntaxe => text (texte,x,y);

// x => coordonnée x du texte

// y => coordonnée y du texte

text("RedOhm 2017",0,0);

}

Résultat du programme comment déplacer un texte avec la commande translate – RedOhm

Comment déplacer un texte avec la commande translate – RedOhm

Retour au sommaire

Menu langage Processing

Le langage processing sur le fonctionnement de la souris .

–

Mise à jour le 19/06/2017

Sommaire :

Le langage processing sur le fonctionnement de la souris .
- Déplacement de forme avec la fonction mouseY

Retour au sommaire

–

Déplacement de forme avec la fonction mouseY

//
//
// Exemple d'utilisation de la fonction mouseY 
// 
// Deplacement de forme avec la fonction mouseY
//
// H-Mazelin 15/06/2017


// La fonction setup () est exécutée une fois, lorsque le programme démarre. 
// Il sert à définir les propriétés d'environnement initiales telles que la 
// taille de l'écran et à charger des supports tels que des images et des polices
// au démarrage du programme. 


void setup ()
{
  // definition de la taile de la fenetre 
  // syntaxe : size (Hauteur fenetre,largeur fenetre )
  size(1000,800);
  
}


//Le programme principal s’exécute par une boucle infinie appelée draw () 
void draw ()
{

  // choix de la couleur du fond de la fenetre 
  // syntaxe : background (rouge,vert,bleu )
  // valeur du rouge de 0 à 255 iden pour les autre couleurs
  // affichage du fond de l'ecran en blanc 
  background(255,255,255); 
  
  // Creation d'un ligne qui se deplace en verticale 
  // line(a,b,c,d)
  // a => coordonnées horizontal  de depart
  // b => coordonnées vertical de depart defini par mouseY
  // a => coordonnées horizontal  d'arrivée
  // b => coordonnées vertical d'arrivée defini par mouseY
  line(100, mouseY, 200, mouseY);
  
  
  // Creation d'un rectangle qui se deplace en verticale 
  // rect(x,y,largeur,longueur );
  // les 2 premiers paramètres définissent l'emplacement du coin 
  // supérieur gauche 
  // x => la valeur horizontal horizontal de la position de 
  // la forme 
  // y => la valeur vetical de la position de la forne est
  // défini dans ce cas par mouseY
  // largeur => largeur du rectangle
  // longueur => longueur du rectangle 
  // par defaut les angles du rectangles sont = 90°
  rect(250, mouseY, 80, 80);
  
  // Creation d'un cercle qui se deplace en verticale 
  // ellipse(x,y,largeur,hauteur);
  // x => la valeur horizontal de la position de la forme 
  // y => la valeur vetical est défini dans ce cas par mouseY
  // largeur => grandeur du diamètre sur l'axe horizontal
  // hauteur => diamètre sur l'axe vertical 
  ellipse(400, mouseY, 80, 80);
  
}

// Exemple d'utilisation de la fonction mouseY

// Deplacement de forme avec la fonction mouseY

// H-Mazelin 15/06/2017

// La fonction setup () est exécutée une fois, lorsque le programme démarre.

// Il sert à définir les propriétés d'environnement initiales telles que la

// taille de l'écran et à charger des supports tels que des images et des polices

// au démarrage du programme.

void setup ()

{

// definition de la taile de la fenetre

// syntaxe : size (Hauteur fenetre,largeur fenetre )

size(1000,800);

}

//Le programme principal s’exécute par une boucle infinie appelée draw ()

void draw ()

{

// choix de la couleur du fond de la fenetre

// syntaxe : background (rouge,vert,bleu )

// valeur du rouge de 0 à 255 iden pour les autre couleurs

// affichage du fond de l'ecran en blanc

background(255,255,255);

// Creation d'un ligne qui se deplace en verticale

// line(a,b,c,d)

// a => coordonnées horizontal de depart

// b => coordonnées vertical de depart defini par mouseY

// a => coordonnées horizontal d'arrivée

// b => coordonnées vertical d'arrivée defini par mouseY

line(100, mouseY, 200, mouseY);

// Creation d'un rectangle qui se deplace en verticale

// rect(x,y,largeur,longueur );

// les 2 premiers paramètres définissent l'emplacement du coin

// supérieur gauche

// x => la valeur horizontal horizontal de la position de

// la forme

// y => la valeur vetical de la position de la forne est

// défini dans ce cas par mouseY

// largeur => largeur du rectangle

// longueur => longueur du rectangle

// par defaut les angles du rectangles sont = 90°

rect(250, mouseY, 80, 80);

// Creation d'un cercle qui se deplace en verticale

// ellipse(x,y,largeur,hauteur);

// x => la valeur horizontal de la position de la forme

// y => la valeur vetical est défini dans ce cas par mouseY

// largeur => grandeur du diamètre sur l'axe horizontal

// hauteur => diamètre sur l'axe vertical

ellipse(400, mouseY, 80, 80);

}

Retour au sommaire

Menu langage Processing

Le langage pour Processing

.

Mise à jour le 25/12/2019 :Processing est tout particulièrement adapté à la création graphique interactive , mais sa simplicité d’utilisation en fait aussi aussi un bon support pour l’apprentissage de la programmation pour les non-programmeurs.

Continuer la lecture →