De la calligraphie en javascript
À la suite de mon article précédent, j’ai essayé d’aller un peu plus loin dans ce qu’il était possible de faire en javascript. La page pour construire les graphes montrait déjà qu’il était possible de charger du javascript dans la page, et modifier directement le contenu du blog à partir du code exécuté.
En suivant toujours la même démarche (code en OCaml, compilé en javascript), j’ai mis en place une ardoise dans laquelle je souhaitais retrouver sur PC le rendu que l’on peut avoir avec une plume dans la main : l’ardoise calligraphique.
Ce que j’ai appris
Les courbes de beziers ! Je ne pensais pas qu’il y aurait autant à faire avec ! Pour ceux que cela intéresse, la page A Primer on Bézier Curves est une référence avec tout ce qu’il faut pour mettre en place ses propres librairies.
Afin d’avoir un tracé souple de la courbe, j’ai suivi un document de l’UCLA qui explique comment construire les courbes de beziers en suivant une série de points, ce qui m’a fait faire un détour par les produits matriciels pour résoudre ce genre d’équations :
A priori, il n’existe pas de librairie pour faire de la réduction de matrice en javascript, mais l’avantage d’utiliser OCaml est d’avoir sous la main quelques librairies permettant de faire le boulot directement.
Ensuite, travailler le DOM. Vu que le site est statique, j’ai choisi de modifier la page directement à partir du code javascript. En ajoutant un élément, en retirant ceux dont je n’avais nécessité, cela permet de changer l’apparence directement pour se construire son application. Cela m’a permis de me plonger dans la librairie brr qui permet d’interagir avec la page via des évènements fonctionnels.
Enfin, les webWorkers, qui sont des threads pouvant être lancés dans le code javascript. Dans l’application, je les utilise pour lisser la courbe une fois que celle-ci a été construite une première fois.
Ce qu’il faudrait continuer
Il me manque tout un cadre mathématique pour aller plus loin, j’aurai par exemple besoin de déterminer l’extrémité exacte de la courbe afin de traiter ces cas de manière précise, et j’ai besoin de comprendre le code avant de m’y mettre…
Par conséquent, l’export SVG est un peu biaisé, on retrouve bien ce qui est affiché sur l’écran, mais cela donne quelque chose qui n’est pas vraiment éditable comme je l’aurai souhaité.
Il faudrait aussi aller plus loin dans les mouvements de plumes, permettre des rotations locales, juste sur un segment et non pas sur la totalité du tracé, enfin des petits ajustements pour qu’il y ait vraiment une plus-value.
D’autres pistes
Cela m’a aussi donné d’autres pistes pour continuer avec javascript et le blog. En utilisant l’API Web Storage, on peut également stocker des données comme si l’on travaillait sur un fichier, les données étant stockées dans l’espace du navigateur. En combinant cela avec le côté statique du site, je pense à une page de prise de note, qui dont le code serait uniquement exécuté dans le navigateur, sans avoir besoin de serveur comme support.
Le blog offrant un espace dans lequel je peux mettre en ligne mes applications, cela me donne envie de continuer et m’en servir comme petit terrain d’exipérimentation…
