Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Chaos — David Larlet</title>
  13. <meta name="description" content="Des explications relatives à cette vidéo.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Chaos</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/10/22/" title="Publication précédente : Grand-écart">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. • <a rel="next" href="/david/2020/11/27/" title="Publication suivante : Perles">→</a>
  61. </p>
  62. </nav>
  63. <hr>
  64. <main>
  65. <p><em>Des explications relatives à <a href="https://vimeo.com/473661570/46af2e921e">cette vidéo</a>.</em></p>
  66. <h2 id="contexte">Contexte <a href="#contexte" title="Ancre vers cette partie">#</a></h2>
  67. <blockquote>
  68. <p>L’ennui ne me fait aucune peur. Il y a morsure plus douloureuse : le chagrin de ne pas partager avec un être aimé la beauté des moments vécus. La solitude : ce que les autres perdent à n’être pas auprès de celui qui l’éprouve.</p>
  69. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  70. </blockquote>
  71. <p>Nouvelle sortie dans les bois avec l’envie de partager des choses en vidéo. Je ne sais pas encore trop quoi ni comment transmettre des ambiances et émotions par ce biais là. Et c’est aussi ce qui me motive : apprendre de nouvelles pratiques.</p>
  72. <p>En arrivant, il fait 1°C comme toute la durée du séjour mais surtout il y a de la neige, une première neige très humide qui est tombée dans la nuit et qui continue de me mouiller à chaque petit coup de vent.</p>
  73. <p>C’est la saison de la chasse et j’ai choisi d’aller à un endroit que je connais relativement bien, au moins pour passer en sifflotant devant les affûts…</p>
  74. <h2 id="mise-en-scene">Mise en scène <a href="#mise-en-scene" title="Ancre vers cette partie">#</a></h2>
  75. <blockquote>
  76. <p>Les hommes qui ressentent douloureusement la fuite du temps ne supportent pas la sédentarité. En mouvement, il s’apaisent. Le défilement de l’espace leur donne l’illusion du ralentissement du temps, leur vie prend l’allure d’une danse de Saint-Guy. Ils s’agitent.<br />
  77. L’alternative c’est l’ermitage.</p>
  78. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  79. </blockquote>
  80. <p>Une première chose que j’ai du mal à gérer, c’est la mise en scène de ma propre personne. Difficile de faire plus mégalo et en même temps je sens bien qu’en enchaînant des séquences de plans — aussi enneigés soient-ils — ça risque d’être assez <em>plate</em> (fade en français).</p>
  81. <p>À force de regarder <a href="https://www.youtube.com/c/WildGreenJohanna/">des personnes</a> <a href="https://www.youtube.com/c/NagualeroArt">dans les bois</a> <a href="https://www.youtube.com/user/MyMethead">sur Youtube</a>, j’ai un peu la théorie, je ne sais pas si j’ai envie d’aller jusqu’à partager la vie de camp. Encore moins de parler à une caméra au milieu de la forêt !</p>
  82. <p>Le bon côté du matériel basique que j’emporte, c’est de ne pas avoir le loisir de vérifier les prises de vue et de les multiplier. Une seule prise, si elle est mauvaise elle ne sera pas sélectionnée en post-production.</p>
  83. <p>L’avantage de partir sans fil rouge, c’est de ne pas s’étrangler avec.</p>
  84. <h2 id="materiel">Matériel <a href="#materiel" title="Ancre vers cette partie">#</a></h2>
  85. <blockquote>
  86. <p>La contemplation, c’est le mot que les gens malins donnent à la paresse pour la justifier aux yeux des sourcilleux qui veillent à ce que « chacun trouve sa place dans la société active ».</p>
  87. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  88. </blockquote>
  89. <p>Je voulais essayer de m’en tenir à mon téléphone pour les prises de vue, de toute façon je suis obligé de l’avoir avec moi donc autant qu’il serve. En accessoires, j’avais aussi une <em>gimbal</em>, un mini-trépied qui s’accroche (aux arbres), des objectifs (je n’ai utilisé que le grand angle) et un filtre à densité neutre qui m’a bien servi pour ne pas cramer les plans enneigés.</p>
  90. <p>Ma principale frustration n’a pas été la batterie car j’avais de quoi recharger mais la capacité de stockage restante sur l’appareil. J’ai pris environ 37 minutes de vidéos au cours des deux jours et ça m’a pris… 36 Go en bonne qualité 4K !</p>
  91. <p>Le capteur montre aussi ses limites dans la dernière scène avec un bruit important, je ne sais pas si c’était une erreur de réglage de mon côté (il était tôt) ou si le téléphone avait un peu trop froid.</p>
  92. <h2 id="son">Son <a href="#son" title="Ancre vers cette partie">#</a></h2>
  93. <blockquote>
  94. <p>La cabane est le lieu du <em>pas de côté</em>. Le havre de vide où l’on n’est pas forcé de <em>réagir</em> à tout. Comment mesurer le confort de ces jours libérés de la mise en demeure de <em>répondre</em> aux questions ? Je sais à présent le caractère agressif d’une conversation. Prétendant s’intéresser à vous, un interlocuteur fracasse le halo du silence, s’immisce sur la rive du temps et vous somme de répondre à ce qu’il vous demande. <mark>Tout dialogue est une lutte.</mark></p>
  95. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  96. </blockquote>
  97. <p>Une autre frustration, c’est la captation du son, notamment lorsqu’il y a du vent. C’est aussi la raison pour laquelle il me faut un fond sonore pour pallier la médiocrité du micro natif de mon téléphone. J’envisage peut-être d’avoir un outil externe pour cela, il pourrait aussi me servir à <a href="https://timberfestival.org.uk/soundsoftheforest-soundmap/">conserver et partager des sons</a> en bonne qualité.</p>
  98. <p>J’ai choisi une reprise de Pomme car je l’avais en tête toute la durée du séjour. Ironie, la vidéo n’est plus accessible depuis le Canada, heureusement que je l’avais sauvegardée avec <code>youtube-dl</code>. :troll:</p>
  99. <p>J’ai d’autres pistes à explorer comme la voix <em>off</em> ou faire ma propre musique. Je ne voudrais pas non plus m’ajouter trop de contraintes avant de pouvoir publier.</p>
  100. <h2 id="inattention">Inattention <a href="#inattention" title="Ancre vers cette partie">#</a></h2>
  101. <blockquote>
  102. <p>Je suis incapable de prendre la moindre photo. Ce serait double injure : je pêcherais par inattention ; j’insulterais l’instant.</p>
  103. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  104. </blockquote>
  105. <p>Il y a un moment qui n’a pas été saisi en vidéo entre les deux ponts que je traverse et qui <em>eux</em> étaient vraiment critiques. La même configuration mais avec moins de fond et j’ai glissé pour me retrouver avec les deux pieds dans l’eau gelée jusqu’aux genoux. La sensation a été brutale avec les deux chaussures immédiatement remplies, j’ai passé toute une après-midi à tenter de faire sécher le pantalon, les chaussettes et les chaussures…</p>
  106. <p>Je ne voulais pas hypothéquer sur ma nuit en utilisant ma paire de chaussettes de rechange mais j’aurais au moins dû mettre mon collant car au fil de la journée, l’humidité ambiante n’aidant pas, je me suis pas mal refroidi. Le plus frustrant est d’avoir eu des guêtres. <em>Au fond du sac.</em></p>
  107. <p>Difficile de savoir si cette inattention était liée au fait que j’avais un téléphone à la main et/ou mes pensées déjà tournées vers le prochain pont. En tout cas j’ai eu le temps de méditer sur l’importance d’être dans le présent, même pour le partager.</p>
  108. <h2 id="epilogue">Épilogue <a href="#epilogue" title="Ancre vers cette partie">#</a></h2>
  109. <blockquote>
  110. <p>Le courage serait de regarder les choses en face : ma vie, mon époque et les autres. La nostalgie, la mélancolie, la rêverie donnent aux âmes romantiques l’illusion d’une échappée vertueuse. Elles passent pour d’esthétiques moyens de résistance à la laideur mais ne sont que le cache-sexe de la lâcheté. <mark>Que suis-je ?</mark> Un pleutre, affolé par le monde, reclus dans une cabane, au fond des bois. Un couard qui s’alcoolise en silence pour ne pas risquer d’assister au spectacle de son temps ni de croiser sa conscience faisant les cent pas sur la grève.</p>
  111. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  112. </blockquote>
  113. <p>Je ne sais pas s’il y en aura d’autres, je mesure mieux la difficulté à être en capacité de transmettre tout en profitant du moment. En fait, je retrouve les <a href="/david/blog/2013/photographie-exclusion/">travers de la photo</a> mais à une autre échelle. J’espère que <a href="https://vimeo.com/473661570/46af2e921e">cette publication</a> — dont je ne vois plus que les défauts — saura vous embarquer pour un petit bout de chemin avec moi dans la forêt québécoise.</p>
  114. <figure class="unsquared">
  115. <a href="https://vimeo.com/473661570/46af2e921e">
  116. <img src="/static/david/2020/video_chaos.jpg" alt="Ma silhouette devant un lac" />
  117. </a>
  118. <figcaption>
  119. Promis pour la prochaine vidéo je fais un <em>embed</em> correct.
  120. </figcaption>
  121. </figure>
  122. </main>
  123. <nav>
  124. <p class="center">
  125. <a rel="prev" href="/david/2020/10/22/" title="Publication précédente : Grand-écart">←</a> •
  126. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  127. • <a rel="next" href="/david/2020/11/27/" title="Publication suivante : Perles">→</a>
  128. </p>
  129. </nav>
  130. </article>
  131. <hr>
  132. <footer>
  133. <p>
  134. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  135. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  136. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  137. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  138. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  139. </p>
  140. <template id="theme-selector">
  141. <form>
  142. <fieldset>
  143. <legend>Thème</legend>
  144. <label>
  145. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  146. </label>
  147. <label>
  148. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  149. </label>
  150. <label>
  151. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  152. </label>
  153. </fieldset>
  154. </form>
  155. </template>
  156. </footer>
  157. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  158. <script type="text/javascript">
  159. function loadThemeForm(templateName) {
  160. const themeSelectorTemplate = document.querySelector(templateName)
  161. const form = themeSelectorTemplate.content.firstElementChild
  162. themeSelectorTemplate.replaceWith(form)
  163. form.addEventListener('change', (e) => {
  164. const chosenColorScheme = e.target.value
  165. localStorage.setItem('theme', chosenColorScheme)
  166. toggleTheme(chosenColorScheme)
  167. })
  168. const selectedTheme = localStorage.getItem('theme')
  169. if (selectedTheme && selectedTheme !== 'undefined') {
  170. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  171. }
  172. }
  173. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  174. window.addEventListener('load', () => {
  175. let hasDarkRules = false
  176. for (const styleSheet of Array.from(document.styleSheets)) {
  177. let mediaRules = []
  178. for (const cssRule of styleSheet.cssRules) {
  179. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  180. continue
  181. }
  182. // WARNING: Safari does not have/supports `conditionText`.
  183. if (cssRule.conditionText) {
  184. if (cssRule.conditionText !== prefersColorSchemeDark) {
  185. continue
  186. }
  187. } else {
  188. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  189. continue
  190. }
  191. }
  192. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  193. }
  194. // WARNING: do not try to insert a Rule to a styleSheet you are
  195. // currently iterating on, otherwise the browser will be stuck
  196. // in a infinite loop…
  197. for (const mediaRule of mediaRules) {
  198. styleSheet.insertRule(mediaRule.cssText)
  199. hasDarkRules = true
  200. }
  201. }
  202. if (hasDarkRules) {
  203. loadThemeForm('#theme-selector')
  204. }
  205. })
  206. </script>
  207. </body>
  208. </html>