aboutsummaryrefslogtreecommitdiff
path: root/content/Informatique/2021-01-03-calligraphie.rst
diff options
context:
space:
mode:
authorSébastien Dailly <sebastien@chimrod.com>2021-09-17 10:16:06 +0200
committerSébastien Dailly <sebastien@chimrod.com>2021-11-18 14:46:42 +0100
commitfa6a4da8d6f9cd85cd60e505e8eb5a9becc40ed6 (patch)
tree1b5a6b6d5c7d0c0b0de95731731b0a0707caf770 /content/Informatique/2021-01-03-calligraphie.rst
parentb10b8aaaa255f88ddc246c8cd0acd24f6d2b744b (diff)
Update plugin configuration
Diffstat (limited to 'content/Informatique/2021-01-03-calligraphie.rst')
-rwxr-xr-xcontent/Informatique/2021-01-03-calligraphie.rst106
1 files changed, 0 insertions, 106 deletions
diff --git a/content/Informatique/2021-01-03-calligraphie.rst b/content/Informatique/2021-01-03-calligraphie.rst
deleted file mode 100755
index 3fd6e30..0000000
--- a/content/Informatique/2021-01-03-calligraphie.rst
+++ /dev/null
@@ -1,106 +0,0 @@
-.. -*- mode: rst -*-
-.. -*- coding: utf-8 -*-
-
-================================
-De la calligraphie en javascript
-================================
-
-:date: 2021-01-03
-:tags: javascript
-:summary: |summary|
-
-.. default-role:: literal
-
-.. |summary| replace::
-
- Un petit bilan après avoir réalisé une application de calligraphie sur le
- blog :)
-
-À 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`_.
-
-.. _l'ardoise calligraphique: {filename}/pages/script.it/script.rst#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.
-
-.. _A Primer on Bézier Curves: https://pomax.github.io/bezierinfo/
-
-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 :
-
-.. _ucla: https://www.math.ucla.edu/~baker/149.1.02w/handouts/dd_splines.pdf
-
-.. math::
-
- \begin{bmatrix}4 && 1 && 0 && 0 \\\\ 1 && 4 && 1 && 0 \\\\0 && 1 && 4 && 1 \\\\0 && 0 && 1 && 4 \end{bmatrix}
- \begin{bmatrix} B_1 \\\\ B_2 \\\\ B_3 \\\\ B_4 \end{bmatrix}
- =
- \begin{bmatrix} (6 S_1 - S_0) \\\\ 6S_2 \\\\ 6 S_3 \\\\ (6S_4 - S_5) \end{bmatrix}
-
-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.
-
-.. _quelques librairies: https://github.com/kandluis/ocaml-matrix
-
-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.
-
-.. _brr: https://erratique.ch/software/brr
-
-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.
-
-.. _webworkers: https://developer.mozilla.org/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers
-
-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…
-
-.. _extrémité: https://pomax.github.io/bezierinfo/#extremities
-
-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.
-
-.. _web storage: https://developer.mozilla.org/fr/docs/Web/API/Web_Storage_API
-
-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…