somewhat better
This commit is contained in:
@ -1,19 +0,0 @@
|
||||
<script>
|
||||
import Info from "$lib/components/Info.svelte"
|
||||
</script>
|
||||
|
||||
# Qu'est-ce que le live-coding ?
|
||||
|
||||
<Info info="Le <i>live coding</i> est une pratique artistique qui fait de l'acte de programmation un geste expressif et performatif. Les <i>live coders</i> considèrent l'interface de programmation comme un instrument de musique. Le <i>live coding</i> est un art au croisement entre synthèse sonore, improvisation musicale et musique algorithmique générative.<br><br> Le <i>live coding</i> est au croisement de plusieurs arts et encourage des approches transdisciplinaires de la création : musique, arts visuels, informatique, jeux vidéos, danse, etc. Plus largement, le <i>live coding</i> est un domaine critique qui encourage les artistes à repenser leur rapport à l'informatique. Le <i>live coding</i> est traversé par la culture <i>hacker</i>, par la philosophie du logiciel libre et <i>open source</i>. Il souhaite également développer une nouvelle forme d'expressivité au sein des arts, en considérant l'ordinateur comme une interface pour la <i>programmation exploratoire</i> ou <i>programmation conversationnelle</i>." markdown=false />
|
||||
|
||||
Historiquement, le _live coding_ est un type de création porté par le collectif [TOPLAP](https://toplap.org). Il existe de nombreux groupes en Europe et dans le monde qui sont issus de ce collectif : [TOPLAP Barcelona](https://toplap.cat/en/home), [Livecode NYC](https://livecode.nyc/), parmi d'autres. La pratique du _live coding_ s'est popularisée au travers du [Manifeste TOPLAP]() et des [Algoraves](https://algorave.com) (_algorithmic rave parties_). Il s'agit pourtant de _l'arbre qui cache la forêt_ : le _live coding_ est une pratique qui existe depuis la fin des années 1980, et que l'on retrouve un peu partout dans les arts numériques.
|
||||
|
||||
# À propos de ce site
|
||||
|
||||
Ce site est une collection de ressources. Il est conçu pour combler un vide. La communauté francophone du _live coding_ ne possédait pas de site permettant aux artistes et musiciens français de se trouver et d'échanger facilement. Disposer d'un site dédié permet de rompre avec la nécessité de se tenir informé sans cesse sur les réseaux sociaux sous peine de manquer une information. Ce site est conçu et maintenu par [Raphaël Forment](https://raphaelforment.fr) (BuboBubo).
|
||||
|
||||
L'information sur chacune des pages est randomisée pour favoriser la découverte.
|
||||
|
||||
# Comment contribuer ?
|
||||
|
||||
Le site est hébergé sur [GitHub](https://github.com/Bubobubobubobubo/livecodingfr). Pour ajouter une information au site, veuillez créer une [Pull Request](https://docs.github.com/fr/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request). Vous pouvez aussi contacter l'un des membres qui se chargera de transmettre l'information.
|
||||
@ -1,7 +0,0 @@
|
||||
<script>
|
||||
import Info from "$lib/components/Info.svelte"
|
||||
</script>
|
||||
|
||||
# Contact
|
||||
|
||||
<Info info="<b>Livecoding.fr</b> n'est pas ni un collectif ni une organisation. L'objectif de ce site est uniquement de centraliser l'information et de donner plus de visibilité à la scène <i>live coding</i> francophone." markdown=false />
|
||||
@ -1,29 +0,0 @@
|
||||
<script>
|
||||
import Calendar from "$lib/components/Calendar.svelte";
|
||||
import Info from "$lib/components/Info.svelte";
|
||||
import Evenements from "$lib/data/evenements.json";
|
||||
const passe = Evenements.passe;
|
||||
const avenir = Evenements.avenir;
|
||||
</script>
|
||||
|
||||
# Évènements
|
||||
|
||||
<Info info="Cette page recense tout les évènements dédiés au <i>live coding</i> organisés par la scène francophone. Ajoutez vos évènements. N'oubliez pas de fournir un lien si possible. Renseignez les évènements pour archivage !" markdown=false />
|
||||
|
||||
## Agenda (Cookie Collective)
|
||||
|
||||
<iframe width="100%" height="700" src="https://framagenda.org/apps/calendar/embed/zpDjE9gGFeFZAmdz"></iframe>
|
||||
|
||||
## À venir
|
||||
|
||||
<!-- Format attendu : 3 Fev 2023 -->
|
||||
|
||||
{#each avenir as {title, description, date, link}, i}
|
||||
<Calendar date={date} description={description} title={title} link={link} />
|
||||
{/each}
|
||||
|
||||
## Passés
|
||||
|
||||
{#each passe as {title, description, date, link}, i}
|
||||
<Calendar date={date} description={description} title={title} link={link} />
|
||||
{/each}
|
||||
@ -1,4 +0,0 @@
|
||||
# Tutorials
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec odio et
|
||||
quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec.
|
||||
@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import Portrait from "$lib/components/Portrait.svelte";
|
||||
import Membres from "$lib/data/membres.json";
|
||||
import { shuffleArray } from "$lib/utils";
|
||||
let members = Membres;
|
||||
shuffleArray(members);
|
||||
</script>
|
||||
|
||||
# Membres
|
||||
|
||||
<div class="lg:grid sm:grid grid-cols-2 md:grid-cols-3 grid-rows-2 md:grid-rows-3 mx-auto gap-4">
|
||||
{#each members as {name, description, image, site, mail}, i}
|
||||
<div>
|
||||
<Portrait name={name} description={description} image={image} site={site} mail={mail}/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import SoftwareCard from "$lib/components/SoftwareCard.svelte";
|
||||
import Software from "$lib/data/outils.json";
|
||||
import { shuffleArray } from "$lib/utils";
|
||||
let softwares = Software;
|
||||
shuffleArray(softwares);
|
||||
</script>
|
||||
|
||||
# Outils
|
||||
|
||||
Si vous souhaitez consulter une liste fréquemment mise à jour de logiciels et d'interfaces pour le _live coding_, consulter [Awesome LiveCoding](https://github.com/toplap/awesome-livecoding). Pour élargir un petit peu, consultez également [Awesome Music](https://github.com/noteflakes/awesome-music).
|
||||
|
||||
{#each softwares as {name, creator, description, image, link}}
|
||||
<SoftwareCard name={name} creator={creator} description={description} image={image} link={link} />
|
||||
{/each}
|
||||
|
||||
Éditez le site pour rajouter votre outil ! **Toutes les contributions sont acceptées !**
|
||||
@ -1,15 +0,0 @@
|
||||
<script>
|
||||
import Press from "$lib/components/Press.svelte";
|
||||
import Presse from "$lib/data/presse.json";
|
||||
import { shuffleArray } from "$lib/utils";
|
||||
let general_press = Presse;
|
||||
shuffleArray(general_press);
|
||||
</script>
|
||||
|
||||
# Presse
|
||||
|
||||
<div class="lg:grid sm:grid grid-cols-2 md:grid-cols-3 grid-rows-2 md:grid-rows-3 mx-auto gap-4">
|
||||
{#each general_press as {title, picture, link, author}, i}
|
||||
<Press title={title} description={author} image={picture} link={link} />
|
||||
{/each}
|
||||
</div>
|
||||
@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import SoftwareCard from "$lib/components/SoftwareCard.svelte";
|
||||
import Info from "$lib/components/Info.svelte";
|
||||
import Reseaux from "$lib/data/reseaux.json";
|
||||
import { shuffleArray } from "$lib/utils";
|
||||
let reseaux = Reseaux;
|
||||
shuffleArray(reseaux);
|
||||
</script>
|
||||
|
||||
# Réseaux
|
||||
|
||||
<Info info="Il existe plusieurs collectifs et groupes qui promeuvent la pratique du <i>live coding</i>. Cette page est un recensement des groupes connus. Si vous êtes actifs, ajoutez quelque chose ici." markdown=false />
|
||||
|
||||
{#each reseaux as {name, place, description, image, link}, i}
|
||||
<SoftwareCard name={name} creator={place} description={description}
|
||||
image={image} link={link} />
|
||||
{/each}
|
||||
@ -1,43 +0,0 @@
|
||||
<script>
|
||||
import Info from "$lib/components/Info.svelte";
|
||||
</script>
|
||||
|
||||
# Ressources
|
||||
|
||||
<Info info="Cette page est une liste de ressources généralistes sur le <i>live
|
||||
coding</i>. Au vu de l'objectif poursuivi par ce site, il est préférable de
|
||||
mentionner les sources francophones en premier puis d'inclure des liens
|
||||
généralistes." markdown=false />
|
||||
|
||||
## Sites internet
|
||||
|
||||
- [TOPLAP](https://toplap.org) : **TOPLAP** est le collectif historique qui a
|
||||
promu la pratique du _live coding_ à partir de sa fondation en 2004. Le
|
||||
collectif est toujours actif et a aujourd'hui évolué pour constituer un grand
|
||||
réseau international de chercheurs et d'artistes travaillant autour de la
|
||||
question du _live coding_ dans l'ensemble les arts (son, visuels, chorégraphie,
|
||||
etc).
|
||||
- [Algorave](https://algorave.com) : un site de recensement des _Algoraves_,
|
||||
pour _Algorithmic Rave Parties_. Mouvement d'évènements lancé en 2012 par Nick
|
||||
Collins et Alex McLean, pour une pratique du _live coding_ dans un contexte
|
||||
festif, en imitation des _rave parties_ britanniques.
|
||||
|
||||
- [Awesome Live Coding](https://github.com/toplap/awesome-livecoding) : Une
|
||||
longue liste de ressources liées au _live coding_ : logiciels, liens, sites,
|
||||
archives, etc. La liste est maintenue de longue date et elle reste active. Vous trouverez
|
||||
beaucoup de choses intéressantes là-bas.
|
||||
|
||||
- [Lines Forum](https://llllllll.co/) : initialement, le forum de la communauté
|
||||
**Monome**. Ce forum accueille toutefois beaucoup de musiciens et d'artistes
|
||||
intéressés par la programmation et le **DIY**. Beaucoup de choses intéressantes
|
||||
pour le _live coding_.
|
||||
|
||||
- [SuperCollider Forum](https://scsynth.org/) : le forum officiel dédié à
|
||||
**SuperCollider**. **SuperCollider** est en grande partie responsable de
|
||||
l'émergence de la scène musicale du _live coding_, et pour de bonnes raisons.
|
||||
Foisonnant, infini, logiciel tentaculaire et puissant.
|
||||
|
||||
## Ressources généralistes
|
||||
|
||||
- [Labomedia](https://ressources.labomedia.org/live_coding) : collection de
|
||||
ressources pour le _creative coding_.
|
||||
86
src/lib/components/TitleBar.svelte
Normal file
86
src/lib/components/TitleBar.svelte
Normal file
@ -0,0 +1,86 @@
|
||||
<script lang="ts">
|
||||
export let data;
|
||||
const pages = data.pages;
|
||||
let active_page = pages["accueil"];
|
||||
function changePage(pageName: string): void {
|
||||
const pageKey = pageName.toLowerCase();
|
||||
if (pages[pageKey as keyof typeof pages]) {
|
||||
active_page = pages[pageKey as keyof typeof pages];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<a
|
||||
on:click={() => changePage("Accueil")}
|
||||
class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
|
||||
>livecoding.fr</a
|
||||
>
|
||||
<!-- Mobile menu button -->
|
||||
<div on:click={toggleNavbar} class="flex md:hidden">
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<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 {showMenu
|
||||
? 'flex'
|
||||
: 'hidden'}"
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Evenements")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden"
|
||||
>Évènements</a
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Membres")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden">Membres</a
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Outils")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden">Outils</a
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Guides")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden">Guides</a
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Réseaux")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden">Réseaux</a
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Ressources")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden"
|
||||
>Ressources</a
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Presse")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden">Presse</a
|
||||
>
|
||||
<a
|
||||
on:click={() => changePage("Contact")}
|
||||
class="text-gray-100 hover:text-orange-300 flex md:hidden">Contact</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
export const shuffleArray = (array) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
};
|
||||
13
src/lib/utils.ts
Normal file
13
src/lib/utils.ts
Normal file
@ -0,0 +1,13 @@
|
||||
export const shuffleArray = (array: any[]) => {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
};
|
||||
|
||||
function changePage(pages: any, pageName: string): void {
|
||||
const pageKey = pageName.toLowerCase();
|
||||
if (pages[pageKey as keyof typeof pages]) {
|
||||
active_page = pages[pageKey as keyof typeof pages];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user