From fa6a4da8d6f9cd85cd60e505e8eb5a9becc40ed6 Mon Sep 17 00:00:00 2001 From: Sébastien Dailly Date: Fri, 17 Sep 2021 10:16:06 +0200 Subject: Update plugin configuration --- content/Glyphes/2021-01-03-calligraphie.rst | 106 +++++++++++++++++++++++ content/Informatique/2021-01-03-calligraphie.rst | 106 ----------------------- content/Perso/2013-05-18-traitment.rst | 1 + content/Perso/2013-06-01-marelle.rst | 1 + 4 files changed, 108 insertions(+), 106 deletions(-) create mode 100755 content/Glyphes/2021-01-03-calligraphie.rst delete mode 100755 content/Informatique/2021-01-03-calligraphie.rst (limited to 'content') diff --git a/content/Glyphes/2021-01-03-calligraphie.rst b/content/Glyphes/2021-01-03-calligraphie.rst new file mode 100755 index 0000000..3fd6e30 --- /dev/null +++ b/content/Glyphes/2021-01-03-calligraphie.rst @@ -0,0 +1,106 @@ +.. -*- 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… 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… diff --git a/content/Perso/2013-05-18-traitment.rst b/content/Perso/2013-05-18-traitment.rst index 14a6298..b5613d3 100644 --- a/content/Perso/2013-05-18-traitment.rst +++ b/content/Perso/2013-05-18-traitment.rst @@ -9,6 +9,7 @@ Cachez-moi ce menu que je ne saurais voir :tags: Humeur :summary: |summary| :logo: {static}/images/traitement/logo.jpg +:status: hidden .. figure:: https://farm1.staticflickr.com/214/4555895229_880a76beb7_q.jpg diff --git a/content/Perso/2013-06-01-marelle.rst b/content/Perso/2013-06-01-marelle.rst index f658be9..98cc359 100644 --- a/content/Perso/2013-06-01-marelle.rst +++ b/content/Perso/2013-06-01-marelle.rst @@ -9,6 +9,7 @@ La marelle romaine : les solutions :tags: Jeux :logo: /images/marelle/logo.jpg :summary: |summary| +:status: hidden .. image:: {static}/images/marelle/extract.jpeg :width: 150 -- cgit v1.2.3