BuboBubo/livecodingfr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

régler quelques warnings

Browse Source
This commit is contained in:
Raphaël Forment
2024-06-07 15:24:32 +02:00
parent f94d4f0e24
commit 446baaa7bb
253 changed files with 425 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
dist/guides/ajouter_information.html vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/guides/ajouter_information.html.br vendored
View File

Binary file not shown.

BIN
dist/guides/ajouter_information.html.gz vendored
View File

Binary file not shown.

24
dist/guides/livecoding_supercollider.html vendored
View File

File diff suppressed because one or more lines are too long

BIN
dist/guides/livecoding_supercollider.html.br vendored
View File

Binary file not shown.

BIN
dist/guides/livecoding_supercollider.html.gz vendored
View File

Binary file not shown.

24
dist/guides/livecoding_supercollider_2.html vendored
View File

@ -6,18 +6,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff">
<link href="../_app/immutable/assets/0.4xzDLrRt.css" rel="stylesheet">
<link rel="modulepreload" href="../_app/immutable/entry/start.rusxyu_H.js">
<link href="../_app/immutable/assets/0.x88-ymMa.css" rel="stylesheet">
<link rel="modulepreload" href="../_app/immutable/entry/start.Jn5WKbrf.js">
<link rel="modulepreload" href="../_app/immutable/chunks/scheduler.aZRR5A_O.js">
<link rel="modulepreload" href="../_app/immutable/entry/app.BbnLBvp1.js">
<link rel="modulepreload" href="../_app/immutable/entry/app.LLQVUDg1.js">
<link rel="modulepreload" href="../_app/immutable/chunks/preload-helper.0HuHagjb.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.AIcdAWo0.js">
<link rel="modulepreload" href="../_app/immutable/nodes/0.IITQFoYl.js">
<link rel="modulepreload" href="../_app/immutable/nodes/9.FHypHKIr.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.kYoizZ4A.js">
<link rel="modulepreload" href="../_app/immutable/nodes/0.K0tPhl4P.js">
<link rel="modulepreload" href="../_app/immutable/nodes/9.FCcoCfVv.js">
<link rel="modulepreload" href="../_app/immutable/chunks/dynamic-import-helper.0gtGTknh.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents"> <div><div class="bg-neutral-800 dark:bg-base-300"><nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8"><div class="flex items-center justify-between"><a href="/" class="website-title" data-svelte-h="svelte-p2w7yu">livecoding.fr</a> <div class="flex md:hidden" data-svelte-h="svelte-glwq61"><button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div></div> <div class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 hidden"><a href="/evenements" class="mobile-menu-link" data-svelte-h="svelte-11zf95a">Évènements</a> <a href="/membres" class="mobile-menu-link" data-svelte-h="svelte-1a3do61">Membres</a> <a href="/outils" class="mobile-menu-link" data-svelte-h="svelte-ee0p45">Outils</a> <a href="/guides" class="mobile-menu-link" data-svelte-h="svelte-5misk3">Guides</a> <a href="/articles" class="mobile-menu-link" data-svelte-h="svelte-kglg6r">Articles</a> <a href="/reseaux" class="mobile-menu-link" data-svelte-h="svelte-6wk0bt">Réseaux</a> <a href="/ressources" class="mobile-menu-link" data-svelte-h="svelte-ziwryh">Ressources</a> <a href="/presse" class="mobile-menu-link" data-svelte-h="svelte-6fl78t">Presse</a> <a href="/contacts" class="mobile-menu-link" data-svelte-h="svelte-1skvj1i">Contact</a></div></nav></div></div> <main class="bg-gray-100 dark:bg-base-100"><div class="drawer lg:drawer-open"><input id="my-drawer-2" type="checkbox" class="drawer-toggle"> <div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8"><article><h1>Introduction au live coding sur SuperCollider (II)</h1> <div class="pt-4 flex justify-between mb-12"><p class="inline font-bold">Publié le : 2023-24-12</p> <p class="inline font-bold">Auteur : Raphaël Maurice Forment</p></div> <div class="lg:px-24 md:px-12 content-center"><article><h2 data-svelte-h="svelte-1ukekoe">Introduction</h2> <h3 data-svelte-h="svelte-tla2tn">Le labyrinthe <strong>SuperCollider</strong></h3> <div style="margin-bottom:100px" data-svelte-h="svelte-u3kyqm"><br> <div><a href="https://www.instagram.com/p/CtHWU0fuOKd/"><img style="min-width: 200px;width:30%;height:auto;float:inline-end;padding-right:20px;margin-left:20px" src="/images/supercollider_meme.png"></a></div> <p>Si vous avez lu et suivi le premier article, tout est en place et vous devriez
<div style="display: contents"> <div><div class="bg-neutral-800"><nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8"><div class="flex items-center justify-between"><a href="/" class="website-title text-2xl font-bold bg-gradient-to-r from-orange-700 via-blue-500 to-green-400 text-transparent bg-clip-text animate-gradient" data-svelte-h="svelte-15xybd8">livecoding.fr</a> <div role="button" class="flex md:hidden" data-svelte-h="svelte-1s4k442"><button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div></div> <div class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 hidden"><a href="/evenements" class="mobile-menu-link" data-svelte-h="svelte-11zf95a">Évènements</a> <a href="/membres" class="mobile-menu-link" data-svelte-h="svelte-1a3do61">Membres</a> <a href="/outils" class="mobile-menu-link" data-svelte-h="svelte-ee0p45">Outils</a> <a href="/guides" class="mobile-menu-link" data-svelte-h="svelte-5misk3">Guides</a> <a href="/articles" class="mobile-menu-link" data-svelte-h="svelte-kglg6r">Articles</a> <a href="/reseaux" class="mobile-menu-link" data-svelte-h="svelte-6wk0bt">Réseaux</a> <a href="/ressources" class="mobile-menu-link" data-svelte-h="svelte-ziwryh">Ressources</a> <a href="/presse" class="mobile-menu-link" data-svelte-h="svelte-6fl78t">Presse</a> <a href="/contacts" class="mobile-menu-link" data-svelte-h="svelte-1skvj1i">Contact</a></div></nav></div></div> <main class="bg-neutral-900"><div class="drawer lg:drawer-open"><input id="my-drawer-2" type="checkbox" class="drawer-toggle"> <div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8"><article><h1>Introduction au live coding sur SuperCollider (II)</h1> <div class="pt-4 flex justify-between mb-12"><p class="inline font-bold">Publié le : 2023-24-12</p> <p class="inline font-bold">Auteur : Raphaël Maurice Forment</p></div> <div class="lg:px-24 md:px-12 content-center"><article><h2 data-svelte-h="svelte-1ukekoe">Introduction</h2> <h3 data-svelte-h="svelte-tla2tn">Le labyrinthe <strong>SuperCollider</strong></h3> <div style="margin-bottom:100px" data-svelte-h="svelte-lfyw9f"><br> <div><a href="https://www.instagram.com/p/CtHWU0fuOKd/"><img style="min-width: 200px;width:30%;height:auto;float:inline-end;padding-right:20px;margin-left:20px" src="/images/supercollider_meme.png" alt="SuperCollider meme"></a></div> <p>Si vous avez lu et suivi le premier article, tout est en place et vous devriez
maintenant être prêt à jouer. L’une des qualités mais aussi l’un des défauts de <strong>SuperCollider</strong> est de ne
pas vous astreindre à suivre une route particulière concernant la manière dont il vous faut approcher la création sonore lorsque vous débutez. Le logiciel est extrêmement générique et chaque
utilisateur développe progressivement ses propres abstractions et une logique qui lui est propre. Il existe plusieurs dizaines de mécanismes
@ -40,7 +40,7 @@ est toutefois possible de développer une certaine expertise pour utiliser <stro
<span class="token operator">~</span>osc <span class="token operator">=</span> <span class="token punctuation">&#123;</span>LPF<span class="token punctuation">.</span><span class="token function">ar</span><span class="token punctuation">(</span>SinOsc<span class="token punctuation">.</span><span class="token function">ar</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> SinOsc<span class="token punctuation">.</span><span class="token function">ar</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token operator">/</span><span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">range</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">0.5</span><span class="token punctuation">&#125;</span><span class="token punctuation">;</span> <span class="token comment">// On remplace la source</span>
<span class="token operator">~</span>osc<span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span>fadeTime<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Fade-out</span>
<span class="token operator">~</span>osc<span class="token punctuation">.</span>clear<span class="token punctuation">;</span> <span class="token comment">// On libère la mémoire</span></code><!-- HTML_TAG_END --></pre> <br> <p data-svelte-h="svelte-mlyqm">Même si tout reste assez primitif pour le moment, on peut déjà faire beaucoup de choses en suivant ce principe. Il est possible d’utiliser n’importe quel algorithme audio et de le mettre à jour graduellement tout au long d’une performance. Ce type de <em>live coding</em> centré autour de la musique à jour d’un générateur sonore se prête plutôt bien à de la musique électro-acoustique, <em>ambient</em>, <em>noise</em>, etc.</p> <br> <h3 data-svelte-h="svelte-1t7im02">Les <code>Ndefs</code> : une autre manière de faire la même chose</h3> <br> <p data-svelte-h="svelte-ngon7m">La technique que nous utilisons avec <code>ProxySpace.push(s.boot)</code> <em>dissimule</em> l’utilisation que nous faisons des <code>NodeProxy</code>. Cette fonctionnalité a été intégrée car elle permet de gagner du temps de frappe mais elle a pour désavantage de rendre plus difficilement perceptible ce que nous sommes réellement en train de faire. À première vue, il semble que <code>~a = 2</code> soit juste une assignation de variable comme dans un langage de programmation classique. Pourtant, il s’agit d’une opération qui crée/modifie un <code>NodeProxy</code>.</p> <br> <p data-svelte-h="svelte-f4v0jn">Nous occultons le fait que les variables globales de <strong>SuperCollider</strong> sont maintenant des <code>NodeProxy</code>. Il est possible de se passer entièrement de <code>Proxyspace.push</code> et de cet avantage/désagrément en utilisant les <code>Ndefs</code>. Il s’agit d’une préférence personnelle, presque d’ordre stylistique.</p> <br> <div class="alert bg-base-300 dark:bg-base-300"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> <span class="text-xl"><!-- HTML_TAG_START -->Pour être plus précis, <code>ProxySpace.push(...)</code> transforme le <em>scope</em> global en un <code>ProxySpace</code>. Seule les variables de <code>a</code> à <code>z</code> sont épargnées.<!-- HTML_TAG_END --></span></div> <br> <p data-svelte-h="svelte-l6ldcg">Le terme de <strong>NDef</strong> est un raccourci pour <em>Node Proxy Definition</em>. On retrouve du vocabulaire familier. C’est une autre manière de désigner exactement le même type d’objet que ce que nous manipulons depuis le début ! Seule la syntaxe diffère. Profitons-en quand même pour évoquer rapidement ce qu’est un <em>node</em> :</p> <br> <div class="pl-8 pt-4 pb-4 bg-base-300" data-svelte-h="svelte-19ar4er"><p><strong>Node:</strong> un <em>node</em> est un objet défini en interne par le serveur audio de <strong>SuperCollider</strong>. Un synthétiseur est un <em>node</em>, beaucoup d’objets présents sur le serveur sont des <em>nodes</em>. Il s’agit d’un objet générique utilisé pour une opération audio : contrôle ou synthétiseur. C’est un objet abstrait, qu’on ne manipule jamais directement. Les fonctions audio que nous venons d’utiliser dans l’exemple précédent sont des <em>nodes</em> que l’on associe à un <em>proxy</em>. Un <em>node</em> tire ce nom du fait que ce sont des <em>noeuds</em> dans un graphe audio, des objets qui ont une position dans un graphe de traitement du signal.</p></div> <br> <p data-svelte-h="svelte-1i92p2x">Les <code>Ndefs</code> ont pour avantage de ne pas se propager dans l’environnement local. Elles rendent tout un petit peu plus clair. Réécrivons l’exemple précédent en utilisant uniquement des <code>Ndefs</code> :</p> <pre class="language-cpp"><!-- HTML_TAG_START --><code class="language-cpp"><span class="token function">Ndef</span><span class="token punctuation">(</span>osc<span class="token punctuation">,</span> <span class="token punctuation">&#123;</span>SinOsc<span class="token punctuation">.</span><span class="token function">ar</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">0.5</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// On associe une source à un NodeProxy, un double oscillateur</span>
<span class="token operator">~</span>osc<span class="token punctuation">.</span>clear<span class="token punctuation">;</span> <span class="token comment">// On libère la mémoire</span></code><!-- HTML_TAG_END --></pre> <br> <p data-svelte-h="svelte-mlyqm">Même si tout reste assez primitif pour le moment, on peut déjà faire beaucoup de choses en suivant ce principe. Il est possible d’utiliser n’importe quel algorithme audio et de le mettre à jour graduellement tout au long d’une performance. Ce type de <em>live coding</em> centré autour de la musique à jour d’un générateur sonore se prête plutôt bien à de la musique électro-acoustique, <em>ambient</em>, <em>noise</em>, etc.</p> <br> <h3 data-svelte-h="svelte-1t7im02">Les <code>Ndefs</code> : une autre manière de faire la même chose</h3> <br> <p data-svelte-h="svelte-ngon7m">La technique que nous utilisons avec <code>ProxySpace.push(s.boot)</code> <em>dissimule</em> l’utilisation que nous faisons des <code>NodeProxy</code>. Cette fonctionnalité a été intégrée car elle permet de gagner du temps de frappe mais elle a pour désavantage de rendre plus difficilement perceptible ce que nous sommes réellement en train de faire. À première vue, il semble que <code>~a = 2</code> soit juste une assignation de variable comme dans un langage de programmation classique. Pourtant, il s’agit d’une opération qui crée/modifie un <code>NodeProxy</code>.</p> <br> <p data-svelte-h="svelte-f4v0jn">Nous occultons le fait que les variables globales de <strong>SuperCollider</strong> sont maintenant des <code>NodeProxy</code>. Il est possible de se passer entièrement de <code>Proxyspace.push</code> et de cet avantage/désagrément en utilisant les <code>Ndefs</code>. Il s’agit d’une préférence personnelle, presque d’ordre stylistique.</p> <br> <div class="alert bg-neutral-600 border-none"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> <span class="text-xl text-white"><!-- HTML_TAG_START -->Pour être plus précis, <code>ProxySpace.push(...)</code> transforme le <em>scope</em> global en un <code>ProxySpace</code>. Seule les variables de <code>a</code> à <code>z</code> sont épargnées.<!-- HTML_TAG_END --></span></div> <br> <p data-svelte-h="svelte-l6ldcg">Le terme de <strong>NDef</strong> est un raccourci pour <em>Node Proxy Definition</em>. On retrouve du vocabulaire familier. C’est une autre manière de désigner exactement le même type d’objet que ce que nous manipulons depuis le début ! Seule la syntaxe diffère. Profitons-en quand même pour évoquer rapidement ce qu’est un <em>node</em> :</p> <br> <div class="pl-8 pt-4 pb-4 bg-base-300" data-svelte-h="svelte-19ar4er"><p><strong>Node:</strong> un <em>node</em> est un objet défini en interne par le serveur audio de <strong>SuperCollider</strong>. Un synthétiseur est un <em>node</em>, beaucoup d’objets présents sur le serveur sont des <em>nodes</em>. Il s’agit d’un objet générique utilisé pour une opération audio : contrôle ou synthétiseur. C’est un objet abstrait, qu’on ne manipule jamais directement. Les fonctions audio que nous venons d’utiliser dans l’exemple précédent sont des <em>nodes</em> que l’on associe à un <em>proxy</em>. Un <em>node</em> tire ce nom du fait que ce sont des <em>noeuds</em> dans un graphe audio, des objets qui ont une position dans un graphe de traitement du signal.</p></div> <br> <p data-svelte-h="svelte-1i92p2x">Les <code>Ndefs</code> ont pour avantage de ne pas se propager dans l’environnement local. Elles rendent tout un petit peu plus clair. Réécrivons l’exemple précédent en utilisant uniquement des <code>Ndefs</code> :</p> <pre class="language-cpp"><!-- HTML_TAG_START --><code class="language-cpp"><span class="token function">Ndef</span><span class="token punctuation">(</span>osc<span class="token punctuation">,</span> <span class="token punctuation">&#123;</span>SinOsc<span class="token punctuation">.</span><span class="token function">ar</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">0.5</span><span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// On associe une source à un NodeProxy, un double oscillateur</span>
<span class="token function">Ndef</span><span class="token punctuation">(</span>osc<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span>fadeTime<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// On lance le NodeProxy avec un fade-in</span>
<span class="token function">Ndef</span><span class="token punctuation">(</span>osc<span class="token punctuation">)</span><span class="token punctuation">.</span>fadeTime <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span> <span class="token comment">// On change le fadeTime général</span>
@ -74,11 +74,11 @@ aussi être une stratégie intéressante dans certains cas.</p> <h2 data-svelte-
<span class="token operator">~</span>source<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span> req<span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// On peut utiliser set pour une valeur statique</span>
<span class="token operator">~</span>freq <span class="token operator">=</span> <span class="token punctuation">&#123;</span> SinOsc<span class="token punctuation">.</span><span class="token function">ar</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token operator">/</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">400</span> <span class="token punctuation">&#125;</span><span class="token punctuation">;</span> <span class="token comment">// Voici un LFO (Low Frequency Oscillator)</span>
<span class="token operator">~</span>source<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>\freq<span class="token punctuation">,</span> <span class="token operator">~</span>freq<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Utilisation de la fonction map</span></code><!-- HTML_TAG_END --></pre> <p data-svelte-h="svelte-548767"><code>.map</code> possède une fonction alternative, nommée <code>.xmap</code>. Elle fonctionne tout
comme <code>.set</code> et <code>.xset</code>.</p> <h2 data-svelte-h="svelte-grw4hp">Conclusion</h2> <p data-svelte-h="svelte-v1qoh8">Dans cette section du guide, nous avons appris :</p> <ul data-svelte-h="svelte-ax6drr"><li>Ce qu’est un <code>NodeProxy</code> et un <code>ProxySpace</code>, l’outil de base offert par <strong>JITLib</strong></li> <li>La différence entre <code>ProxySpace.push</code> et l’utilisation explicite des <code>NDefs</code></li> <li>Comment démarrer, stopper et arrêter un <code>NodeProxy</code></li> <li>Comment contrôler le <em>fade-in</em> et le <em>fade-out</em> et la transition entre algorithmes</li></ul> <p data-svelte-h="svelte-j92gtb">Je ne fais ici qu’effleurer les différentes commandes que possèdent les <code>NodeProxy</code>. Si vous souhaitez en apprendre plus, allez voir la documentation. Nous utiliserons un nombre limité de méthodes au fur et à mesure, lorsque nous en aurons besoin.</p></article></div></article></div> <div class="drawer-side" data-svelte-h="svelte-17zhvxi"><label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay scrollbar-hide whitespace-nowrap overflow-hidden"></label> <ul class="menu sidemenu-style"><li class="sideli"><a class="sidebar-link" href="/evenements">Évènements</a></li> <li class="sideli"><a class="sidebar-link" href="/membres">Membres</a></li> <li class="sideli"><a class="sidebar-link" href="/outils">Outils</a></li> <li class="sideli"><a class="sidebar-link" href="/guides">Guides</a></li> <li class="sideli"><a class="sidebar-link" href="/articles">Articles</a></li> <li class="sideli"><a class="sidebar-link" href="/reseaux">Réseaux</a></li> <li class="sideli"><a class="sidebar-link" href="/ressources">Ressources</a></li> <li class="sideli"><a class="sidebar-link" href="/presse">Presse</a></li> <li class="sideli"><a class="sidebar-link" href="/contacts">Contact</a></li></ul></div></div></main> <footer class="footer-style" data-svelte-h="svelte-1gkeg8z"><div class="flex justify-between"><p class="inline indent-4 text-bold text-white">Raphaël Forment</p> <p><a class="inline pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr">GitHub</a></p></div></footer>
comme <code>.set</code> et <code>.xset</code>.</p> <h2 data-svelte-h="svelte-grw4hp">Conclusion</h2> <p data-svelte-h="svelte-v1qoh8">Dans cette section du guide, nous avons appris :</p> <ul data-svelte-h="svelte-ax6drr"><li>Ce qu’est un <code>NodeProxy</code> et un <code>ProxySpace</code>, l’outil de base offert par <strong>JITLib</strong></li> <li>La différence entre <code>ProxySpace.push</code> et l’utilisation explicite des <code>NDefs</code></li> <li>Comment démarrer, stopper et arrêter un <code>NodeProxy</code></li> <li>Comment contrôler le <em>fade-in</em> et le <em>fade-out</em> et la transition entre algorithmes</li></ul> <p data-svelte-h="svelte-j92gtb">Je ne fais ici qu’effleurer les différentes commandes que possèdent les <code>NodeProxy</code>. Si vous souhaitez en apprendre plus, allez voir la documentation. Nous utiliserons un nombre limité de méthodes au fur et à mesure, lorsque nous en aurons besoin.</p></article> <p class="rounded-lg font-bold border-2 py-2 pl-2 mt-8 bg-neutral-800" data-svelte-h="svelte-1mht20g"><a href="/guides">Revenir à l&#39;index</a></p></div></article></div> <div class="drawer-side no-scrollbar m-0" data-svelte-h="svelte-11ixv29"><label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay scrollbar-hide whitespace-nowrap overflow-hidden no-scrollbar"></label> <ul class="menu sidemenu-style no-scrollbar my-0"><li class="sideli"><a class="sidebar-link" href="/evenements">Évènements</a></li> <li class="sideli"><a class="sidebar-link" href="/membres">Membres</a></li> <li class="sideli"><a class="sidebar-link" href="/outils">Outils</a></li> <li class="sideli"><a class="sidebar-link" href="/guides">Guides</a></li> <li class="sideli"><a class="sidebar-link" href="/articles">Articles</a></li> <li class="sideli"><a class="sidebar-link" href="/reseaux">Réseaux</a></li> <li class="sideli"><a class="sidebar-link" href="/ressources">Ressources</a></li> <li class="sideli"><a class="sidebar-link" href="/presse">Presse</a></li> <li class="sideli"><a class="sidebar-link" href="/contacts">Contact</a></li></ul></div></div></main> <footer class="footer-style" data-svelte-h="svelte-1gkeg8z"><div class="flex justify-between"><p class="inline indent-4 text-bold text-white">Raphaël Forment</p> <p><a class="inline pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr">GitHub</a></p></div></footer>
<script>
{
__sveltekit_14rkk9n = {
__sveltekit_1xnkgn2 = {
base: new URL("..", location).pathname.slice(0, -1),
env: null
};
@ -88,8 +88,8 @@ comme <code>.set</code> et <code>.xset</code>.</p> <h2 data-svelte-h="svelte-grw
const data = [{"type":"data","data":null,"uses":{}},null];
Promise.all([
import("../_app/immutable/entry/start.rusxyu_H.js"),
import("../_app/immutable/entry/app.BbnLBvp1.js")
import("../_app/immutable/entry/start.Jn5WKbrf.js"),
import("../_app/immutable/entry/app.LLQVUDg1.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 9],

BIN
dist/guides/livecoding_supercollider_2.html.br vendored
View File

Binary file not shown.

BIN
dist/guides/livecoding_supercollider_2.html.gz vendored
View File

Binary file not shown.

22
dist/guides/proposer_guide.html vendored
View File

@ -6,26 +6,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#ffffff">
<link href="../_app/immutable/assets/0.4xzDLrRt.css" rel="stylesheet">
<link rel="modulepreload" href="../_app/immutable/entry/start.rusxyu_H.js">
<link href="../_app/immutable/assets/0.x88-ymMa.css" rel="stylesheet">
<link rel="modulepreload" href="../_app/immutable/entry/start.Jn5WKbrf.js">
<link rel="modulepreload" href="../_app/immutable/chunks/scheduler.aZRR5A_O.js">
<link rel="modulepreload" href="../_app/immutable/entry/app.BbnLBvp1.js">
<link rel="modulepreload" href="../_app/immutable/entry/app.LLQVUDg1.js">
<link rel="modulepreload" href="../_app/immutable/chunks/preload-helper.0HuHagjb.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.AIcdAWo0.js">
<link rel="modulepreload" href="../_app/immutable/nodes/0.IITQFoYl.js">
<link rel="modulepreload" href="../_app/immutable/nodes/9.FHypHKIr.js">
<link rel="modulepreload" href="../_app/immutable/chunks/index.kYoizZ4A.js">
<link rel="modulepreload" href="../_app/immutable/nodes/0.K0tPhl4P.js">
<link rel="modulepreload" href="../_app/immutable/nodes/9.FCcoCfVv.js">
<link rel="modulepreload" href="../_app/immutable/chunks/dynamic-import-helper.0gtGTknh.js">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents"> <div><div class="bg-neutral-800 dark:bg-base-300"><nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8"><div class="flex items-center justify-between"><a href="/" class="website-title" data-svelte-h="svelte-p2w7yu">livecoding.fr</a> <div class="flex md:hidden" data-svelte-h="svelte-glwq61"><button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div></div> <div class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 hidden"><a href="/evenements" class="mobile-menu-link" data-svelte-h="svelte-11zf95a">Évènements</a> <a href="/membres" class="mobile-menu-link" data-svelte-h="svelte-1a3do61">Membres</a> <a href="/outils" class="mobile-menu-link" data-svelte-h="svelte-ee0p45">Outils</a> <a href="/guides" class="mobile-menu-link" data-svelte-h="svelte-5misk3">Guides</a> <a href="/articles" class="mobile-menu-link" data-svelte-h="svelte-kglg6r">Articles</a> <a href="/reseaux" class="mobile-menu-link" data-svelte-h="svelte-6wk0bt">Réseaux</a> <a href="/ressources" class="mobile-menu-link" data-svelte-h="svelte-ziwryh">Ressources</a> <a href="/presse" class="mobile-menu-link" data-svelte-h="svelte-6fl78t">Presse</a> <a href="/contacts" class="mobile-menu-link" data-svelte-h="svelte-1skvj1i">Contact</a></div></nav></div></div> <main class="bg-gray-100 dark:bg-base-100"><div class="drawer lg:drawer-open"><input id="my-drawer-2" type="checkbox" class="drawer-toggle"> <div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8"><article><h1>Comment proposer un guide ?</h1> <div class="pt-4 flex justify-between mb-12"><p class="inline font-bold">Publié le : 2023-12-22</p> <p class="inline font-bold">Auteur : Raphaël Maurice Forment</p></div> <div class="lg:px-24 md:px-12 content-center"><article><p data-svelte-h="svelte-1jy9acf">Les guides sont rédigés en <a href="https://en.wikipedia.org/wiki/Markdown" rel="nofollow">MarkDown</a>, un format de balisage léger qui facilite l’écriture et la publication. Une fois ajoutés au site, ces derniers sont automatiquement recensés et publiés. Chaque article reçoit un entête simple qui permet de l’identifier. Voici l’entête de l’article actuel :</p> <pre class="language-yaml"><!-- HTML_TAG_START --><code class="language-yaml"><span class="token punctuation">---</span>
<div style="display: contents"> <div><div class="bg-neutral-800"><nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8"><div class="flex items-center justify-between"><a href="/" class="website-title text-2xl font-bold bg-gradient-to-r from-orange-700 via-blue-500 to-green-400 text-transparent bg-clip-text animate-gradient" data-svelte-h="svelte-15xybd8">livecoding.fr</a> <div role="button" class="flex md:hidden" data-svelte-h="svelte-1s4k442"><button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div></div> <div class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 hidden"><a href="/evenements" class="mobile-menu-link" data-svelte-h="svelte-11zf95a">Évènements</a> <a href="/membres" class="mobile-menu-link" data-svelte-h="svelte-1a3do61">Membres</a> <a href="/outils" class="mobile-menu-link" data-svelte-h="svelte-ee0p45">Outils</a> <a href="/guides" class="mobile-menu-link" data-svelte-h="svelte-5misk3">Guides</a> <a href="/articles" class="mobile-menu-link" data-svelte-h="svelte-kglg6r">Articles</a> <a href="/reseaux" class="mobile-menu-link" data-svelte-h="svelte-6wk0bt">Réseaux</a> <a href="/ressources" class="mobile-menu-link" data-svelte-h="svelte-ziwryh">Ressources</a> <a href="/presse" class="mobile-menu-link" data-svelte-h="svelte-6fl78t">Presse</a> <a href="/contacts" class="mobile-menu-link" data-svelte-h="svelte-1skvj1i">Contact</a></div></nav></div></div> <main class="bg-neutral-900"><div class="drawer lg:drawer-open"><input id="my-drawer-2" type="checkbox" class="drawer-toggle"> <div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8"><article><h1>Comment proposer un guide ?</h1> <div class="pt-4 flex justify-between mb-12"><p class="inline font-bold">Publié le : 2023-12-22</p> <p class="inline font-bold">Auteur : Raphaël Maurice Forment</p></div> <div class="lg:px-24 md:px-12 content-center"><article><p data-svelte-h="svelte-1jy9acf">Les guides sont rédigés en <a href="https://en.wikipedia.org/wiki/Markdown" rel="nofollow">MarkDown</a>, un format de balisage léger qui facilite l’écriture et la publication. Une fois ajoutés au site, ces derniers sont automatiquement recensés et publiés. Chaque article reçoit un entête simple qui permet de l’identifier. Voici l’entête de l’article actuel :</p> <pre class="language-yaml"><!-- HTML_TAG_START --><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> Comment proposer un guide <span class="token punctuation">?</span>
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token string">'2023-12-22'</span>
<span class="token key atrule">author</span><span class="token punctuation">:</span> <span class="token string">"Raphaël Maurice Forment"</span>
<span class="token punctuation">---</span></code><!-- HTML_TAG_END --></pre> <p data-svelte-h="svelte-hsuogf">Il n’est pas nécessaire de répéter le titre au début de votre article. Chaque balise se comprend assez facilement :</p> <ul data-svelte-h="svelte-1objkrr"><li><strong>title</strong> : le titre complet de l’article</li> <li><strong>date</strong> : au format <code>AAAA-MM-JJ</code></li> <li><strong>author</strong> : nom complet ou votre pseudonyme</li></ul> <p data-svelte-h="svelte-uedqlf">Le site utilise ensuite ces données pour générer un entête. Les données peuvent ensuite être utilisées sous plusieurs formes pour faire référence au guide sur d’autres pages.</p> <h2 data-svelte-h="svelte-1g5ta6o">Contenu de l’article</h2> <p data-svelte-h="svelte-13oxmt0">Écrivez ce que vous voulez ! Notez que vous pouvez librement mélanger <strong>MarkDown</strong>, <strong>HTML/CSS</strong> et composants <strong>Svelte</strong> pour les plus confirmés. Vous ne devriez pas avoir de problème pour publier quoi que ce soit sous la forme que vous imaginez ! Si vous écrivez du <strong>MarkDown</strong> pur et simple, votre article recevra le style par défaut utilisé par le site.</p> <h2 data-svelte-h="svelte-qjxet8">Publication</h2> <p data-svelte-h="svelte-pldlgo">Une fois votre article prêt, il vous faudra faire une <a href="https://docs.github.com/fr/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests" rel="nofollow">Pull Request</a> pour que ce dernier soit au <a href="https://github.com/Bubobubobubobubo/livecodingfr" rel="nofollow">dépôt</a> du site et validé par un contributeur. Bonne chance ! Nous avons besoin de guides pour couvrir l’essentiel des plateformes existantes !</p></article></div></article></div> <div class="drawer-side" data-svelte-h="svelte-17zhvxi"><label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay scrollbar-hide whitespace-nowrap overflow-hidden"></label> <ul class="menu sidemenu-style"><li class="sideli"><a class="sidebar-link" href="/evenements">Évènements</a></li> <li class="sideli"><a class="sidebar-link" href="/membres">Membres</a></li> <li class="sideli"><a class="sidebar-link" href="/outils">Outils</a></li> <li class="sideli"><a class="sidebar-link" href="/guides">Guides</a></li> <li class="sideli"><a class="sidebar-link" href="/articles">Articles</a></li> <li class="sideli"><a class="sidebar-link" href="/reseaux">Réseaux</a></li> <li class="sideli"><a class="sidebar-link" href="/ressources">Ressources</a></li> <li class="sideli"><a class="sidebar-link" href="/presse">Presse</a></li> <li class="sideli"><a class="sidebar-link" href="/contacts">Contact</a></li></ul></div></div></main> <footer class="footer-style" data-svelte-h="svelte-1gkeg8z"><div class="flex justify-between"><p class="inline indent-4 text-bold text-white">Raphaël Forment</p> <p><a class="inline pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr">GitHub</a></p></div></footer>
<span class="token punctuation">---</span></code><!-- HTML_TAG_END --></pre> <p data-svelte-h="svelte-hsuogf">Il n’est pas nécessaire de répéter le titre au début de votre article. Chaque balise se comprend assez facilement :</p> <ul data-svelte-h="svelte-1objkrr"><li><strong>title</strong> : le titre complet de l’article</li> <li><strong>date</strong> : au format <code>AAAA-MM-JJ</code></li> <li><strong>author</strong> : nom complet ou votre pseudonyme</li></ul> <p data-svelte-h="svelte-uedqlf">Le site utilise ensuite ces données pour générer un entête. Les données peuvent ensuite être utilisées sous plusieurs formes pour faire référence au guide sur d’autres pages.</p> <h2 data-svelte-h="svelte-1g5ta6o">Contenu de l’article</h2> <p data-svelte-h="svelte-13oxmt0">Écrivez ce que vous voulez ! Notez que vous pouvez librement mélanger <strong>MarkDown</strong>, <strong>HTML/CSS</strong> et composants <strong>Svelte</strong> pour les plus confirmés. Vous ne devriez pas avoir de problème pour publier quoi que ce soit sous la forme que vous imaginez ! Si vous écrivez du <strong>MarkDown</strong> pur et simple, votre article recevra le style par défaut utilisé par le site.</p> <h2 data-svelte-h="svelte-qjxet8">Publication</h2> <p data-svelte-h="svelte-pldlgo">Une fois votre article prêt, il vous faudra faire une <a href="https://docs.github.com/fr/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests" rel="nofollow">Pull Request</a> pour que ce dernier soit au <a href="https://github.com/Bubobubobubobubo/livecodingfr" rel="nofollow">dépôt</a> du site et validé par un contributeur. Bonne chance ! Nous avons besoin de guides pour couvrir l’essentiel des plateformes existantes !</p></article> <p class="rounded-lg font-bold border-2 py-2 pl-2 mt-8 bg-neutral-800" data-svelte-h="svelte-1mht20g"><a href="/guides">Revenir à l&#39;index</a></p></div></article></div> <div class="drawer-side no-scrollbar m-0" data-svelte-h="svelte-11ixv29"><label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay scrollbar-hide whitespace-nowrap overflow-hidden no-scrollbar"></label> <ul class="menu sidemenu-style no-scrollbar my-0"><li class="sideli"><a class="sidebar-link" href="/evenements">Évènements</a></li> <li class="sideli"><a class="sidebar-link" href="/membres">Membres</a></li> <li class="sideli"><a class="sidebar-link" href="/outils">Outils</a></li> <li class="sideli"><a class="sidebar-link" href="/guides">Guides</a></li> <li class="sideli"><a class="sidebar-link" href="/articles">Articles</a></li> <li class="sideli"><a class="sidebar-link" href="/reseaux">Réseaux</a></li> <li class="sideli"><a class="sidebar-link" href="/ressources">Ressources</a></li> <li class="sideli"><a class="sidebar-link" href="/presse">Presse</a></li> <li class="sideli"><a class="sidebar-link" href="/contacts">Contact</a></li></ul></div></div></main> <footer class="footer-style" data-svelte-h="svelte-1gkeg8z"><div class="flex justify-between"><p class="inline indent-4 text-bold text-white">Raphaël Forment</p> <p><a class="inline pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr">GitHub</a></p></div></footer>
<script>
{
__sveltekit_14rkk9n = {
__sveltekit_1xnkgn2 = {
base: new URL("..", location).pathname.slice(0, -1),
env: null
};
@ -35,8 +35,8 @@
const data = [{"type":"data","data":null,"uses":{}},null];
Promise.all([
import("../_app/immutable/entry/start.rusxyu_H.js"),
import("../_app/immutable/entry/app.BbnLBvp1.js")
import("../_app/immutable/entry/start.Jn5WKbrf.js"),
import("../_app/immutable/entry/app.LLQVUDg1.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 9],

BIN
dist/guides/proposer_guide.html.br vendored
View File

Binary file not shown.

BIN
dist/guides/proposer_guide.html.gz vendored
View File

Binary file not shown.