59 lines
10 KiB
HTML
59 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<link rel="icon" href="../favicon.png" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#ffffff">
|
||
|
||
<link href="../_app/immutable/assets/0.2dCqWpGr.css" rel="stylesheet">
|
||
<link rel="modulepreload" href="../_app/immutable/entry/start.5YLs103A.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/scheduler.aZRR5A_O.js">
|
||
<link rel="modulepreload" href="../_app/immutable/entry/app.i08eSpn0.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/preload-helper.0HuHagjb.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/index.kYoizZ4A.js">
|
||
<link rel="modulepreload" href="../_app/immutable/nodes/0.4o9Fw0YJ.js">
|
||
<link rel="modulepreload" href="../_app/immutable/nodes/5.jhkcUtER.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"><nav class="px-8 py-2 flex justify-between items-center"><div class="flex items-center justify-between w-full"><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 class="lg:hidden"><button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400" data-svelte-h="svelte-vbp173"><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="hidden lg:flex lg:items-center lg:space-x-10" data-svelte-h="svelte-1ydj4af"><a href="/evenements" class="titlebar-link">Évènements</a> <a href="/membres" class="titlebar-link">Membres</a> <a href="/outils" class="titlebar-link">Outils</a> <a href="/guides" class="titlebar-link">Guides</a> <a href="/articles" class="titlebar-link">Articles</a> <a href="/reseaux" class="titlebar-link">Réseaux</a> <a href="/ressources" class="titlebar-link">Ressources</a> <a href="/presse" class="titlebar-link">Presse</a> <a href="/contacts" class="titlebar-link">Contact</a></div></nav> <div class="lg:hidden hidden"><div class="px-2 pt-2 pb-3 space-y-1 sm:px-3" data-svelte-h="svelte-1sqq9eu"><a href="/evenements" class="mobile-menu-link block">Évènements</a> <a href="/membres" class="mobile-menu-link block">Membres</a> <a href="/outils" class="mobile-menu-link block">Outils</a> <a href="/guides" class="mobile-menu-link block">Guides</a> <a href="/articles" class="mobile-menu-link block">Articles</a> <a href="/reseaux" class="mobile-menu-link block">Réseaux</a> <a href="/ressources" class="mobile-menu-link block">Ressources</a> <a href="/presse" class="mobile-menu-link block">Presse</a> <a href="/contacts" class="mobile-menu-link block">Contact</a></div></div></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>ChucK Web IDE: le retour de ChucK sur le web</h1> <div class="pt-4 flex justify-between mb-12"><p class="inline font-bold">Publié le : 2024-02-10</p> <p class="inline font-bold">Auteur : Raphaël Maurice Forment</p></div> <div class="lg:px-12 content-center"><img alt="Chuck Logo" src="../images/chuck_logo.png" style="display:block;margin-left:auto;margin-right:auto;max-width:500px;width:90%;height:auto"> <br> <h2 data-svelte-h="svelte-1b3a3mw">Qu’est-ce que ChucK ?</h2> <p data-svelte-h="svelte-1ofrbtt"><a href="https://chuck.stanford.edu/" rel="nofollow">ChucK</a> est l’un des langages importants de ces deux dernières décennies pour
|
||
ce qui concerne la programmation musicale en temps réel. Développé par <a href="https://music.stanford.edu/people/ge-wang" rel="nofollow">Ge
|
||
Wang</a> à l’université de Princeton à
|
||
partir de 2003, il
|
||
est toujours utilisé là-bas par les musiciens du <a href="https://plork.princeton.edu/" rel="nofollow">PlorK</a> (<em>Princeton Laptop
|
||
Orchestra</em>). Il reste également utilisé dans cette même université pour enseigner la musique électronique. ChucK appartient à la même génération que d’autres langages comme <a href="https://extemporelang.github.io/" rel="nofollow">ExTempore</a> d’Andrew Sorensen. L’idée flottait dans l’air à cette époque là qu’il fallait développer des langages permettant de mieux exprimer la relation entre temps, synthèse, écriture musicale et interaction de l’utilisateur. ChucK est désormais utilisé par le <a href="https://slork.stanford.edu/" rel="nofollow">SlorK</a> (<em>Stanford Laptop Orchestra</em>) et par un certain nombre de musiciens <em>live coders</em> tels que <a href="https://www.celestebetancur.com/code.html" rel="nofollow">Celeste Betancur</a>. Le créateur du langage est un défenseur de longue date de la pratique du <em>live coding</em>. Il est également un pionnier du phénomène des <em>Laptop Orchestras</em>, des orchestres d’ordinateur qui cherchent à utiliser les qualités uniques de l’ordinateur portable et des ordinateurs embarqués pour la composition de pièces collaboratives (synchronisation en réseau, spatialisation des musiciens, etc). En fouillant un peu sur internet, on trouve toujours des traces de la pratique du <em>live coding</em> sur ChucK :</p> <br> <iframe width="800" height="400" src="https://www.youtube.com/embed/gj5asouhVkM" title="ChucK Live Code Performance" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen style="display:block;margin-left:auto;margin-right:auto;max-width:800px;width:90%;height:500px"></iframe> <br> <p data-svelte-h="svelte-1smt2e1">ChucK est un langage que l’on rencontre aujourd’hui assez peu dans les discussions autour du <em>live coding</em>. Je n’ai encore jamais vu personne l’utiliser pour une
|
||
performance. Je ne connais (plus) personne qui l’utilise. SuperCollider règne en maître, avec quelques artistes qui
|
||
jurent toujours par CSound, Max/MSP ou Pure Data. C’est d’autant plus étonnant
|
||
que le langage est explicitement conçu pour l’expérimentation temps réel. La
|
||
sémantique et la syntaxe du langage sont construites autour de cette idée et le système des <a href="https://chuck.cs.princeton.edu/doc/language/spork.html" rel="nofollow">shred et du spork</a> fait tout pour encourager l’expérimentation.</p> <h2 data-svelte-h="svelte-197fwi9">ChucK sur le web</h2> <img alt="WebChuck" src="../images/webchuck.png" style="display:block;margin-left:auto;margin-right:auto;max-width:1000px;width:90%;height:auto"> <br> <p data-svelte-h="svelte-4khbq9">J’ai vu passer, il y a peu, des mentions d’une nouvelle version de ChucK qui
|
||
tourne directement dans un navigateur internet : <a href="https://chuck.stanford.edu/ide/" rel="nofollow">voici le lien</a>. Phénomène générationnel là aussi, il s’agit maintenant de tout faire fonctionner à partir de <a href="https://webassembly.org/" rel="nofollow">WebAssembly</a> et des nouvelles technologies de l’audio sur le web. Quelques articles universitaires ont été publiés sur le sujet comme <a href="https://mcd.stanford.edu/publish/files/2023-smc-ide.pdf" rel="nofollow">celui-ci</a> ou <a href="https://www.gewang.com/publish/files/2023-nime-webchuck.pdf" rel="nofollow">celui-là</a>. Le travail est en cours, avance bien, et pour le peu que j’ai pu tester, cela ressemble à s’y méprendre à la version native qui existe toujours et qui tourne toujours très bien sur la plupart des OS. Cela peut valoir le coup de donner une chance à ce langage pour les plus curieux. Beaucoup d’exemples ont déjà été portés et/ou réécrits depuis l’IDE de base qui en fournissait déjà pas mal. Le travail réalisé est déjà impressionnant et il y a fort à parier que cela va se stabiliser très vite.</p> <p class="rounded-lg font-bold border-2 py-2 pl-2 mt-8 bg-neutral-800" data-svelte-h="svelte-o6y0y"><a href="/articles">Revenir à l'index</a></p></div></article></div> <div class="drawer-side no-scrollbar m-0 lg:block hidden" data-svelte-h="svelte-si3uu3"><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_1f3gh83 = {
|
||
base: new URL("..", location).pathname.slice(0, -1),
|
||
env: null
|
||
};
|
||
|
||
const element = document.currentScript.parentElement;
|
||
|
||
const data = [{"type":"data","data":null,"uses":{}},null];
|
||
|
||
Promise.all([
|
||
import("../_app/immutable/entry/start.5YLs103A.js"),
|
||
import("../_app/immutable/entry/app.i08eSpn0.js")
|
||
]).then(([kit, app]) => {
|
||
kit.start(app, element, {
|
||
node_ids: [0, 5],
|
||
data,
|
||
form: null,
|
||
error: null
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|