Le Processing 3D est une technologie qui permet aux utilisateurs de créer des modèles 3D et de les contrôler à l’aide d’un clavier. Cette technologie offre aux utilisateurs une variété de possibilités créatives et est très utile pour les artistes, les designers et les développeurs. Dans cet article, nous allons examiner en détail le plan inclinable 3D contrôlé avec le clavier, qui est l’un des principaux avantages de cette technologie. Nous verrons comment cette fonctionnalité peut être utilisée pour créer des modèles 3D plus complexes et plus réalistes.
Processing 3D : Plan inclinable 3D contrôlé avec le clavier.

Explication
- Ce programme explore les possibilité de base de la 3D avec Processing, notamment :
- la rotation autour des axes X,Z de référence du tracé (instructions rotateX, rotateZ)
- à distinguer de la rotation de la « caméra » ou angle de vue dans le plan XZ qui permet de se déplacer autour des axes de références (instruction camera)
- Les 3 axes de référence de l’espace 3D sont dessinés : l’axe X en rouge, l’axe Y en vert et l’axe Z en bleu.
- Dans ce programme :
- les touches 8 (HAUT) et 2 (BAS) du pavé numérique modifient l’angle de la caméra dans le plan XZ
- les touches de flèches DROIT et GAUCHE modifient l’inclinaison autour de l’axe Z
- les touches de flèches HAUT et BAS modifient l’inclinaison autour de l’axe X
Ressources utiles
- La référence des instructions
- rotateX, rotateZ
- camera
- size
- translate
Le programme
// généré avec le générateur de code Processing
// www.mon-club-elec.fr
// par X. HINAULT – Avril 2011 – tous droits réservés
/////////////// Description du programme ////////////
// Utilise le clavier
// XXXXXXXXXXXXXXXXXXXXXX ENTETE DECLARATIVE XXXXXXXXXXXXXXXXXXXXXX
// inclusion des librairies utilisées
// déclaration objets
// déclaration variables globales
//—— déclaration des variables de couleur utiles —-
int jaune=color(255,255,0);
int vert=color(0,255,0);
int rouge=color(255,0,0);
int bleu=color(0,0,255);
int noir=color(0,0,0);
int blanc=color(255,255,255);
int bleuclair=color(0,255,255);
int violet=color(255,0,255);
//———- angles pour 3D —-
int angleX=0; // angle X pour tracé de forme
int angleY=0; // angle Y pour tracé de forme
int angleZ=0; // angle Z pour tracé de forme
int distanceCamXZ=400; // variable distance à la caméra dans plan XZ
int distanceCamYZ=0; // variable distance à la caméra dans plan YZ
int angleCamXZ=90; // angle dans le plan XZ de la visée de la caméra avec l’axe des X dans le plan XZ
int angleCamYZ=90; // angle avec axe YZ de la visée de la caméra dans le plan YZ
// XXXXXXXXXXXXXXXXXXXXXX Fonction SETUP XXXXXXXXXXXXXXXXXXXXXX
void setup(){ // fonction d’initialisation exécutée 1 fois au démarrage
// —- initialisation paramètres graphiques utilisés
colorMode(RGB, 255,255,255); // fixe format couleur R G B pour fill, stroke, etc…
fill(0,0,255); // couleur remplissage RGB – noFill() si pas de remplissage
stroke (0,0,0); // couleur pourtour RGB – noStroke() si pas de pourtour
rectMode(CORNER); // origine rectangle : CORNER = coin sup gauche | CENTER : centre
imageMode(CORNER); // origine image : CORNER = coin sup gauche | CENTER : centre
ellipseMode(CENTER); // origine cercles / ellipses : CENTER : centre (autres : RADIUS, CORNERS, CORNER
//strokeWeight(0); // largeur pourtour
frameRate(30);// Images par seconde
// — initialisation fenêtre de base —
size(400, 400,P3D); // ouvre une fenêtre xpixels x ypixels
background(0,0,0); // couleur fond fenetre
// — initialisation des objets et fonctionnalités utilisées —
} // fin fonction Setup
// XXXXXXXXXXXXXXXXXXXXXX Fonction Draw XXXXXXXXXXXXXXXXXXXX
void draw() { // fonction exécutée en boucle
// NB : à chaque draw, la position est réinitialisée en 0,0 de la fenêtre d’affichage
background(noir); // couleur fond fenetre
translate (width/2, height/2, 0 ); // décale origine dessin
//angleX=angleX+3; // incrémente angle
//camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ)
//angleCamXZ=90; // angle entre axe visée caméra et axe X
camera ( distanceCamXZ*cos(radians(angleCamXZ)),0, distanceCamXZ*sin(radians(angleCamXZ)), 0, 0, 0,0,1,0); // angle de vue de la scène 3D
rotateX(radians(angleX)); // rotation de angleX ° autour de l’axe des X (horizontal) par rapport référence dessin
rotateY(radians(0)); // rotation autour de l’axe des y (vertical) par rapport référence dessin
rotateZ(radians(angleZ)); // rotation autour de l’axe des z (avant-arriere) par rapport référence dessin
stroke(jaune);
// box(width, height, depth);
box(200, 5, 200);
// while(true); // stoppe boucle draw
// affiche le repère Ox,Oy,Oz
//—- Ox
stroke(rouge);
line (0,0,0,150,0,0);
// — Oy
stroke(vert);
line (0,0,0,0,-150,0);
// — Oz
stroke(bleu);
line (0,0,0,0,0,-150);
} // fin de la fonction draw()
// XXXXXXXXXXXXXXXXXXXXXX Autres Fonctions XXXXXXXXXXXXXXXXXXXXXX
//———— gestion évènement clavier ———
void keyPressed() { // si une touche est appuyée
// les touches 8 (HAUT) et 2 (BAS) du pavé numérique modifient l’angle de la caméra dans le plan XZ
if(key==‘8’) { // si touche a enfoncee
angleCamXZ=angleCamXZ+5; // angle entre axe visée caméra et axe X dans le plan XZ
}
if(key==‘2’) { // si touche a enfoncee
angleCamXZ=angleCamXZ–5; // angle entre axe visée caméra et axe X dans le plan XZ
}
// les touches de flèches DROIT et GAUCHE modifient l’inclinaison autour de l’axe Z
// les touches de flèches HAUT et BAS modifient l’inclinaison autour de l’axe X
if (key == CODED) { // si appui d’une touche particulière (les touches spéciales up, down, etc.. cf Keycode)
if (keyCode == UP) { // si touche Haut appuyée
angleX=angleX+5;
}
else if (keyCode == DOWN) {// si touche BAS appuyée
angleX=angleX–5;
}
else if (keyCode == LEFT) {// si touche GAUCHE appuyée
angleZ=angleZ+5;
}
else if (keyCode == RIGHT) {// si touche GAUCHE appuyée
angleZ=angleZ–5;
}
else if (keyCode==SHIFT) {// si touche GAUCHE appuyée
}
} //— fin si appui touche spéciale —
} //— fin si touche enfoncee
//XXXXXXXXXXXXXXXXXX Fin du programme XXXXXXXXXXXXXXXXX
Voir ici :
Articles Liés
- Javascript : Graphique Dygraphs simple
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…
- Javascript : Afficher 6 widgets graphiques fournis par une librairie graphique externe.
Le Javascript est un langage de programmation très populaire qui permet aux développeurs de créer…
- Javascript : Graphique Dygraphs : afficher date à partir unixtime
Le langage de programmation Javascript est très populaire et est utilisé pour créer des applications…