Anthias
mail
2 connectés     # #

r

Rolex Processing

 

Emulation en Processing sans Arduino

r


Introduction
Performances
Animation d'images
Conclusion

Maj : 04/02/22

Abstract :
Processing is a fantastic tool to develop graphic talents. Don’t panic, learning is not very difficult.
Goes to Processing.org and check examples to discover this amazing world.

Résumé :
Processing est un outil fantastique pour développer les talents graphiques. Pas de panique, l'apprentissage n'est pas très difficile.
Allez sur Processing.org et consultez les exemples pour découvrir ce monde étonnant.

nextion  Introduction

J’ai émulé les Rolex sur tous les afficheurs graphiques passés entre mes mains. Aux faibles résolutions, il est impossible d’avoir des aiguilles crédibles.
En 480*320, c’est moche et très limite.
Sur le Nextion en 800x480, cela commence à être acceptable : Rolex sur Nextion nextion
Sur l’écran PC, c’est parfait en 1228*940 ! Je vous donne ici mon exemple d’implantation sous Processing afin que ceux qui ne le connaissent pas découvrent son énorme potentiel et son accès assez facile. Il a été développé surtout pour les artistes, comme le montrent les exemples, les possibilités graphiques sont illimitées en 2D ou 3D.

Pourquoi avoir programmé des aiguilles Rolex sur tant d’affichages différents ? Ce n’est pas un TOC, mais le design de ces montres étant une perfection, c’est toujours un chalenge de vouloir s’en inspirer avec nos petits moyens.

J‘avais utilisé Processing dans les années 2015, pour faire mes acquisitions de capteurs, mais c’était du temps du règne de la MEGA. Vieille archive : Arduino et Processing arduino
Je l’avais oublié depuis, il a fallu tout réapprendre à cause de ma mémoire de poisson rouge…

Haut de page

nextion  Performances

Le temps indiqué d’environ 17 milli secondes est celui nécessaire pour recharger l’image de fond et recalculer et placer les aiguilles. C’est extrêmement rapide.
Pour rappel, la persistance rétinienne est de 25 images  par seconde, soit une image toutes les 40 milli secondes, il y a de la marge.

Astuce :
Toutes les aiguilles sont calculées verticalement en position minuit.
Ensuite, pour chacune, la rotation du bon angle est appliquée, mais attention chaque appel d’une rotation se fait par rapport à la précédente.
Il faut donc déduire chaque fois l’angle précédent !
rotate(radians(angleH));
shape (RolexHour);
rotate(radians(-angleH+angleM));
shape (RolexMinute);
rotate(radians(-angleM+angleS));
shape (RolexSecond);
r

Cette approche est complètement différente de celle décrite pour le Nextion, où chaque point pour construire les aiguilles est calculé par sinus et cosinus.
En Processing, il s’agit de rotation vectorielle.

 

Particularités :

Le langage Processing est très proche du C et de l’Arduino, il y a cependant quelques curiosités.
Dans le setup, il faut passer la taille de la fenêtre en dur !
void setup() {
size(1228, 940); …

Cela s’avèrera très gênant dans l’exemple suivant de l’interpréteur car la totalité des commandes sont passées par l’Arduino sauf cette première.
Il n’y aura aucune possibilité de redimensionner la fenêtre ensuite.
Petit détail : les #define, #if…, n’existent pas, mais on peut contourner par des variables.

 

Choix des couleurs douteux :

Un détail à remarquer au centre, le gris bleuté est la tentative de représenter l’ombre des aiguilles de secondes et minutes pour essayer d’évoquer pauvrement la notion de plans superposés…

Ce vert ne correspond pas à la couleur d’origine de la couche fluorescente de jour, mais le blanc encafré de gris était très laid. C’est par contre proche de la couleur émise la nuit.

Le grand problème est de retranscrire l’impression de métal poli brillant des aiguilles originales qui sont d’un superbe design, impossible à reproduire. Mes compétences artistiques étant nulles, j’ai pris un gris approximatif, ne sachant faire mieux. Comme dans toutes mes pages, mes couleurs sont moches, si un artiste veut faire mieux, je suis client…

 

Réalisation :

La réalisation du fond d’écran sous Photoshop m’a pris plus de temps que l’écriture du source.
Je suis parti de photos trouvées sur le Net en rétablissant les perspectives et en fabriquant un cadran car il m’a été impossible d’effacer proprement les aiguilles sans altérer le graphisme.

Cet exemple n’utilise pas Arduino à la différence des autres réalisations que je décris.

Haut de page

nextion  Animation d’images

Voici le déroulement de la création d’images animées sous Processing.
p Poser un fond, soit une couleur RGB soit une image, le chargement est extrêmement rapide.
p Empiler les objets créés en donnant leurs coordonnées (le zéro est est en haut à gauche) et leur angle de rotation à chaque instant, et c’est terminé.

Création des objets

Nous trouvons la terminologie  familière des classes. Chaque objet complexe est une forme (shape) regroupant ses enfants qui sont des formes simples (structures géométriques ou élémentaires : segment, triangle, …). Prenons comme exemple un enfant de la classe « aiguille des heures »,  la forme en « Y ».
Pour commencer, on dessine sur un papier quadrillé la forme souhaitée à l’échelle, en position verticale, avec les bras à 120 degrés,  afin de repérer les décalages en pixels à partir de l’origine centrale. Il y a ici 9 points caractéristiques que l’on va parcourir dans l’ordre. Le vertex indique simplement les coordonnées relatives d’un point. On rajoute évidement les couleurs, les épaisseurs,…
rolexHourY = createShape(); // << Création de l’enfant
rolexHourY.beginShape();
rolexHourY.noStroke(); // Pas d’encadrement
rolexHourY.vertex(k1X, k1Y); // Point de départ : kX et kY sont les décalages par rapport à l’origine de l’enfant.

rolexHourY.vertex(k9X, k9Y); // Fin, on reboucle sur le point de départ, la forme est fermée

Quand tous les enfants sont créés,  ils sont ajoutés dans la forme mère :
RolexHour.addChild(rolexHourExt); // Le corps brillant
RolexHour.addChild(rolexHourFill); // Le rectangle fluorescent
RolexHour.addChild(rolexHourDisk); // Le gros disque
RolexHour.addChild(rolexHourDelta); // La pointe fluorescente
RolexHour.addChild(rolexHourY); //<< L'enfant décrit ici
}  //  L'objet "aiguille heure" est créé

h

Aiguille des heures 

 

v

Parcours vertex

Haut de page

nextion  Conclusion

Chargez d’abord l’outil sur le site mère Processing.org  et installez-le, c’est très rapide. Ensuite fouillez dans les multiples exemples du site puis du Net pour commencer à en comprendre les possibilités…

La page suivante vous montrera grâce à mon interpréteur Processing, comment tout peut se faire depuis Arduino, afin d’avoir le terminal graphique ultime :
Enregistreur de données via terminal et interpreteur Processingnextion

Tous les détails et logiciels sont dans cette page à jour au : 220511

eclate

Haut de page

© Christian Couderc 1999-2022     Toute reproduction interdite sans mon autorisation


* Page vue   2307   fois       IP : 44.200.40.195

 Haut de page         Dernière retouche le 04 Février 2022 à 10 h         Retour page précédente

   Collector