A place to cache linked articles (think custom and personal wayback machine)
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 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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` element
  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>Scanner à genoux (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://blank.blue/creas/scanner-a-genoux/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Scanner à genoux</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://blank.blue/creas/scanner-a-genoux/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Retour sur une création.</p>
  71. <p>Pour la commande des images pour le site de l’<a href="https://lorganon.ca/">Organon</a>, j’ai appréhendé, peut-être pour la première fois les yeux ouverts, la question du <em>care</em> vis-à-vis de laquelle je me pensai complètement étrangère, n’envisageant pas mes créations comme des soins autrement que comme de violents exhutoires.</p>
  72. <p>Ce qui en ressort se résume par la série des Pansemains<sup id="fnref:1"></sup>.</p>
  73. <h2 id="penser-parà-la-main">
  74. Penser par/à la main
  75. <a class="anchor" href="#penser-par%c3%a0-la-main">#</a>
  76. </h2>
  77. <p>Pour penser le geste dans son rapport au corps et à ce qui peut être projeté d’expression sur ce dernier, les créations devaient décliner les rencontres entre plusieurs niveaux de matière et donc, pour faire chair, de visibilité<sup id="fnref:2"></sup>.</p>
  78. <p>Outre le dessin, laissé au rang d’esquisse au crayon de papier imparfait, et le calque qui vient donner le cadre d’une forme, il y a la matière, terme large qui a la même amplitude que le <em>média</em> de McLuhan : végétal, terre, liquide, granularité, vêtement, peau, fibres.</p>
  79. <p>L’huile des calques<sup id="fnref:3"></sup> sert de liant entre l’esquisse et le corps.</p>
  80. <p>Le Pansemain 2 devait inclure de la fibre humaine, poils, qui parce la forme du cadre était le principe de l’horizontal, devaient être suffisamment long pour parcourir la page.</p>
  81. <p>Bien en ont voulu les aléas génétiques et astres familiaux, ma composition capilaire est plutôt dense et expansive.</p>
  82. <p>Composant les niveaux de moi-même, la numérisation finale venait fixer les états pour composer un objet, somme des manipulations et relations, le Pansemain.</p>
  83. <h2 id="mise-à-genoux">
  84. Mise à genoux
  85. <a class="anchor" href="#mise-%c3%a0-genoux">#</a>
  86. </h2>
  87. <p>Si pour tous les autres Pansemains, la délicatesse de la numérisation résidait dans les manipulations cérémonielles :</p>
  88. <pre><code> positionner correctement les éléments pour leur donner à chacun leurs espaces d'expression,
  89. limiter à seulement trois tentatives d'accordement
  90. éviter que les éléments ne se mêlent trop entre eux
  91. (que la terre vienne trop imprégner l'esquisse de traces de dérapage de pneus),
  92. prendre soin du scanner (alors transformé en panier salade par l'huile déteignant),
  93. </code></pre>
  94. <p>la naissance du Pansemain 2 – « Démêler les doigts » – a pris une tournure de performance autant absurde que contemporaine.</p>
  95. <p>À la diférence des autres création qui disposaient de matières indépendantes et dissociées de ma personne, le Pansemain 2 impliquait directement mon scalp, me prenait littéralement la tête.</p>
  96. <p>Pas de photographies à l’appui, mais un témoignage,</p>
  97. <pre><code> celui d'une écartelée
  98. à genoux devant un scanner dégoulinant d'huile d'olive,
  99. le crâne en prière sur le capot,
  100. la chevelure avalée par la machine,
  101. une main sur le maintien de la vitre,
  102. une main tendue vers le clavier de l'ordinateur associé,
  103. </code></pre>
  104. <p>pour lancer la numérisation d’une partie de mon être, sans bouger les mèches appartenant momentanément au Pansemain numéro 2.</p>
  105. <h2 id="faire-corps-avec-la-machine">
  106. Faire corps avec la machine
  107. <a class="anchor" href="#faire-corps-avec-la-machine">#</a>
  108. </h2>
  109. <p>Entre <em>Crash</em> et <em>Scanners</em> de Cronenberg, la question de l’intimité avec ma machine s’est posée sous un nouvel angle, un angle un peu plus tordu et plié.</p>
  110. <pre><code>j'ai pu entendre, comme un intrigué, les murmures du scanner
  111. voir dans l'angle, comme un amant, sa face
  112. attendre, comme un langui, qu'il se décide à me prendre en lui
  113. et m'impatienter sur le résultat de notre imprégnation commune.
  114. </code></pre>
  115. <p>J’avais déjà prêté mon corps à l’expression pour le <a href="https://blank.blue/meditions/manifeste-des-petites-mains/#pr%c3%aater-son-corps-%c3%a0-lexpression">Manifeste des petites mains</a><sup id="fnref:4"></sup>, et je témoigne ici sans autre but que de garder le souvenir d’un marivaudage technique<sup id="fnref:5"></sup>.</p>
  116. <h2 id="notes-qui-peuvent-ne-pas-être-prises-en-note">
  117. Notes qui peuvent ne pas être prises en note
  118. <a class="anchor" href="#notes-qui-peuvent-ne-pas-%c3%aatre-prises-en-note">#</a>
  119. </h2>
  120. <p><strong>En écho</strong> <a href="https://blank.blue/creas/serie-des-pansemains/">Série des Pansemains</a>, la section <a href="https://blank.blue/meditions/manifeste-des-petites-mains/#pr%c3%aater-son-corps-%c3%a0-lexpression">Prêter son corps du Manifeste</a> et la question générale du <a href="https://blank.blue/meditions/le-corps-technique-des-petites-mains/">corps des petites mains</a>.</p>
  121. </article>
  122. <hr>
  123. <footer>
  124. <p>
  125. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  127. </svg> Accueil</a> •
  128. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  129. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  130. </svg> Suivre</a> •
  131. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  132. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  133. </svg> Pro</a> •
  134. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  135. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  136. </svg> Email</a> •
  137. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  138. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  139. </svg> Légal</abbr>
  140. </p>
  141. <template id="theme-selector">
  142. <form>
  143. <fieldset>
  144. <legend><svg class="icon icon-brightness-contrast">
  145. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  146. </svg> Thème</legend>
  147. <label>
  148. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  149. </label>
  150. <label>
  151. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  152. </label>
  153. <label>
  154. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  155. </label>
  156. </fieldset>
  157. </form>
  158. </template>
  159. </footer>
  160. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  161. <script>
  162. function loadThemeForm(templateName) {
  163. const themeSelectorTemplate = document.querySelector(templateName)
  164. const form = themeSelectorTemplate.content.firstElementChild
  165. themeSelectorTemplate.replaceWith(form)
  166. form.addEventListener('change', (e) => {
  167. const chosenColorScheme = e.target.value
  168. localStorage.setItem('theme', chosenColorScheme)
  169. toggleTheme(chosenColorScheme)
  170. })
  171. const selectedTheme = localStorage.getItem('theme')
  172. if (selectedTheme && selectedTheme !== 'undefined') {
  173. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  174. }
  175. }
  176. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  177. window.addEventListener('load', () => {
  178. let hasDarkRules = false
  179. for (const styleSheet of Array.from(document.styleSheets)) {
  180. let mediaRules = []
  181. for (const cssRule of styleSheet.cssRules) {
  182. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  183. continue
  184. }
  185. // WARNING: Safari does not have/supports `conditionText`.
  186. if (cssRule.conditionText) {
  187. if (cssRule.conditionText !== prefersColorSchemeDark) {
  188. continue
  189. }
  190. } else {
  191. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  192. continue
  193. }
  194. }
  195. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  196. }
  197. // WARNING: do not try to insert a Rule to a styleSheet you are
  198. // currently iterating on, otherwise the browser will be stuck
  199. // in a infinite loop…
  200. for (const mediaRule of mediaRules) {
  201. styleSheet.insertRule(mediaRule.cssText)
  202. hasDarkRules = true
  203. }
  204. }
  205. if (hasDarkRules) {
  206. loadThemeForm('#theme-selector')
  207. }
  208. })
  209. </script>
  210. </body>
  211. </html>