Introduction

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.
Vieilles archives moisies : Arduino et Processing
Je l’avais oublié depuis, il a fallu tout réapprendre à cause de ma mémoire de poisson rouge…

Le choix de Processing pour ces émulations offre une grande flexibilité et des capacités graphiques impressionnantes, adaptées à des projets artistiques et techniques.

Émulation sur Différentes Résolutions :
Faibles Résolutions (480x320) : Qualité visuelle limitée.
Résolution Moyenne (800x480 sur Nextion) : Commence à être acceptable.
Haute Résolution (1920x1080 sur PC) : Résultat parfait en 2k.

  Introduction

Why did you program Rolex needles on so many different displays?
It's not an OCD, but the design of these watches being a perfection, it's always a challenge to want to be inspired by it with our limited means.

I had used Processing in the 2015s, to make my sensor acquisitions, but it was at the time of the reign of the MEGA. Old misies archives: Arduino et Processing
I had forgotten it since, I had to relearn everything because of my goldfish memory...

Choosing Processing for these emulations offers great flexibility and impressive graphic capabilities, suitable for both artistic and technical projects.

Emulation on Different Resolutions:
Low Resolutions (480x320): Limited visual quality.
Medium Resolution (800x480 on Nextion): Starts to look acceptable.
High Resolution (1920x1080 on PC): Perfect resultion in 2k.

  Utilisation de Processing :

Flexibilité : Processing est compatible avec plusieurs plateformes (PC, Mac, Linux, Raspberry Pi, Android).
Un projet développé sur une plateforme peut être facilement porté sur une autre sans modifications majeures.

Capacités Graphiques : Possibilités illimitées en 2D et 3D, parfait pour des projets artistiques.
Processing s’adapte facilement à différentes résolutions d’écran, permettant de tester et d’optimiser vos designs pour divers dispositifs.

Accessibilité : Facile à apprendre et à utiliser, idéal pour les artistes et développeurs.

Processing est rapide, ce qui est crucial pour des animations fluides et réactives.

  Using Processing:

Flexibility: Processing is compatible with multiple platforms (PC, Mac, Linux, Raspberry Pi, Android).
A project developed on one platform can easily be ported to another without major modifications.

Graphic Capabilities: Unlimited possibilities in 2D and 3D, perfect for artistic projects.
Processing adapts easily to different screen resolutions, allowing you to test and optimize your designs for various devices.

Accessibility: Easy to learn and use, ideal for artists and developers.

Processing is fast, which is crucial for smooth and responsive animations.

  Animation d’images

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

Animating images

Here is the process of creating animated images under Processing:
Set a background, either an RGB color or an image, loading is extremely fast.
Stack the objects created by giving their coordinates (the zero is at the top left) and their rotation angle at each moment, and it's done.

Défi du Design :
Inspiration Rolex : La complexité et la perfection du design des montres Rolex représentent un défi stimulant à reproduire, même avec des moyens limités.

Ressources et Communauté :
De nombreuses ressources en ligne (tutoriels, exemples de code) et une communauté active pour le support.

Design Challenge:
Rolex Inspiration: The complexity and perfection of Rolex watch designs present a stimulating challenge to replicate, even with limited resources.

Resources and Community:
Numerous online resources (tutorials, code examples) and an active community for support.  

Page zéro : menu

Changement de pages en cliquant sur les triangles.

First page : menu

Change pages by clicking on the triangles.

Calcul du <Y> central de l'aiguille des heures

Méthode de remplissage par un triangle et trois quads.

Inconvénient: les cotés du triangle sont visibles.

Calculation of the central <Y> of the hour needle

Method of filling by a triangle and three quads.

Disadvantage: the sides of the triangle are visible.

Calcul identique,
mais remplissage par un vertex reliant tous les points.

C'est plus propre, sans traits parasites

Vocabulaire : Un VERTEX est une position (un point) défini par ses coordonnées <x> and <y>. : vertex (x,y);
Un segment a deux vertex, un triangle trois…
Une forme est constituée par une série de vertex.

Same calculation,
but filling with a vertex connecting all the points.

It's cleaner, without parasitic lines

Vocabulary: A VERTEX is a is a position defined by an <x> and <y> coordinate. : vertex (x,y);
A line has two VERTICES, a triangle has three…
A shape is constructed by an array of vertices.

Aiguille des minutes, très simple.

Partie grise par vertex, pour la mème raison

Minute needle, very simple.

Grey part by vertices, for the same reason

Aiguille des secondes.

Le disque fluo inférieur est optionnel.

Chacune des trois aiguilles peut être réalisée en objet mère vertex incluant des enfants, c'est plus propre.

Second needle.

The lower fluorescent disk is optional.

Each of the three needles can be made into a vertices mother object including children, it's cleaner.

void draw()
{
varGrey = (int)((250 - colorSteelBase) * sin ((timeS)/4.0));

Since it's impossible to accurately represent the reflection of steel, a simple animation was used to vary the grey density of the needle colors from medium grey to white. You can remove this effect by commenting out the first line of the draw function that changes the grey level sinusoidally.

Démonstration de 4 formats, mais toute autre taille est possible, les calculs étant vectoriels.
Il suffit de changer l'image de fond indiquant le rayon de base.

Il faut moins de 20 milli secondes pour calculer, afficher les quatre horloges et changer d'écran, 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 !

Choix vitesse maximale ou heure réelle.

Demonstration of 4 formats, but any other size is possible, the calculations are vector.
Just change the background image indicating the base radius.

It takes less than 20 milliseconds to calculate, display the four clocks and change screens, it is extremely fast.
As a reminder, retinal persistence is 25 images per second, or one image every 40 milliseconds, there is room for improvement!

Choose maximum speed or real time.

Horloge pour fond d'écran animé.

La réalisation du fond d’écran sous Photoshop m’a pris plus de temps que l’écriture du code source.

Clock for animated wallpaper.

Making the wallpaper in Photoshop took me longer than writing the source code.

Méthode rotate

Il existe deux méthodes pour faire bouger les aiguilles.

La méthode utilisée ici consiste à calculer les points de chaque aiguille à chaque seconde et de remplir.
Il s’agit de rotation vectorielle.

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 avec un gris uni terne.

Rotate method

There are two methods to make the needles move.

The method used here is to calculate the points of each needle every second and fill in.
This is vector rotation.

The big problem is to transcribe the impression of polished shiny metal of the original needles which are of a superb design, impossible to reproduce with a dull plain grey.

Autre méthode, toutes les aiguilles sont des images en <.png> transparents, ou calculées verticalement en position minuit une seule fois.

C'est l'approche très performante de LVGL pour les sprites.
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 !

Another method, all the needles are images in <.png> transparent, or calculated vertically in midnight position only once.

This is the very efficient approach of LVGL for sprites. Then, for each one, the rotation of the right angle is applied, but be careful each call of a rotation is done in relation to the previous one.

So, you have to deduce the previous angle each time!

Cette approche a l'avantage de pouvoir utiliser des formes très tarabiscotées, dessinées sous Photosphop ou Gimp, avec des couleurs complexes, trop difficiles à calculer sous Processing.

Chaque aiguille est posée sur le pivot avec le bon angle sans faire intervenir Sinus, Cosinus.

Pour illustrer cela récupèrons sur le net une image d'aiguilles farfelues, en extrayant chaque aiguille en png transparent.

This approach has the advantage of being able to use very convoluted shapes, drawn under Photoshop or Gimp, with complex colors, too difficult to calculate under Processing.

Each needle is placed on the pivot with the right angle without involving Sinus, Cosinus.

To illustrate this, let's retrieve an image of wacky needles from the net, extracting each needle in transparent png.

Il suffit maintenant de les poser sur un fond comme le montre la très simple démonstration bâclée en 10 minutes <rotate.pde> dans les sources joints.

L’affichage d’une image pleine page au format <.png> ne prend que 2 millisecondes, c’est très rapide.

Un effet de réflexion en mouvement est désormais possible, avec une petite collection d'aiguilles différentes.

Now all you have to do is place them on a background as shown in the very simple, botched 10-minute demonstration <rotate.pde> in the attached sources.

Displaying a full page image in <.png> takes only 2 millisesonds, it’s very fast.

An effect of moving reflect is now possible, with a small collection of different needles.

Interpréteur Processing

Les chapitres précédents utilisent seulement Processing pour faire tout le travail, sans connexion à un ESP32.

J'évoque une toute autre aproche dans
<Interpréteur Processing> consistant à faire travailler Processing comme un tableau blanc vide.

Il attend des commandes basiques envoyées par un ESP32 en Wifi et les exécute, comme par exemple : dessine un point (x,y, couleur), un segment, un cercle (rempli ou non), etc...

Une collection de commandes simples permet de tout faire afficher à distance par Processing, sans intervenir pour le reprogrammer, tous les calculs étant effectués par l'ESP32 distant.

Processing interpreter

The previous chapters only use Processing to do all the work, without connecting to an ESP32.

I discuss a completely different approach in
<Interpréteur Processing>, which consists of making Processing work like an empty white blackboard.

It waits for basic commands sent by an ESP32 in Wifi and executes them, such as: draws a point (x,y,color), a segment, a circle (filled or not), etc...

A collection of simple commands allows to have everything displayed remotely by Processing, without intervening to reprogram it, all the calculations being done by the remote ESP32.

Particularités de Processing:

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 !

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.

void setup()
{
size(1920, 1080);
…

Special features of Processing:

The Processing language is very close to C and Arduino, there are however some curiosities.
In the setup, you have to pass the window size in hard!

This will prove very annoying in the following example of the interpreter because all the commands are passed by the Arduino except this first one.
There will be no possibility to resize the window afterwards.

Small detail: the #define, #if…, do not exist, but we can get around it with variables.

  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 Processing

  Conclusion

First download the tool from the mother site Processing.org and install it, it's very fast. Then dig into the multiple examples on the site and then on the Net to start understanding the possibilities...

The following page will show you, thanks to my Processing interpreter, how everything can be done from Arduino, in order to have the ultimate graphic terminal:
Data logger via terminal and Processing interpreter

Mise à jour 03/10/2024

Vous trouverez tous les logiciels de cette page dans cette archive sur --->
You will find all softwares of this page in this archive on --->