Workshop Cables.gl
Cables.gl est une plateforme web de programmation visuelle nodale, conçue pour créer des expériences interactives, de la data visualisation connectées à des services en ligne ou des capteurs. Cables.gl permet aux designers, artistes et digital communicants, de générer du contenu dynamique sans nécessairement écrire de code, en tissant des "nœuds" ("nodes") entre des fonctions à travers une interface graphique.
La plateforme est créer par le Studio Undev, elle utilise des technologies modernes comme WebGL, javascript et html/css pour un rendu graphique moderne dans le navigateur. Le projet est gratuit, OpenSource et permet de publier ses projets en ligne.
Note: Une souris est fortement conseillée pour le confort d'utilisation plutôt qu'un trackpad!
Voir et éditer ce Patch, exemple fabriquée pour le worksop avec cables.gl
Un programme Cables.gl s'appelle un patch (voir ci dessus exemple d'interface et menu aide accessible avec un clic droit)
Pour démarrer
Nous utiliserons la version en ligne de cables.gl pour plus de facilité durant le workshop, mais il est possible d'installer une version autonome (standalone) pour Windows / MacOS / Linux par la suite.
1 - Créez un compte en utilisant le navigateur Chrome sur https://cables.gl/
2 - Connectez-vous et rejoignez l'équipe La Rochelle Université -> "demander l'accès"
Prise en main de l'Interface
Voir la documentation pour plus d'informations sur l'interface du logiciel
Vocabulaire
- Patch : Un programme réalisé avec cables.gl. "patcher" s'utilise comme synonyme de "programmer". Le résultat est ici audiovisuel.
- Canvas : L'écran d'affichage, le résultat graphique, dessin, vidéo etc...
- Node Editor : La fenêtre d'arborescence pour connecter les Opérateurs ou "Op"
- Op / Operator : Une boîte qui effectue une FONCTION (codée en javascript, GLSL..) en utilisant des PARAMETRES.
- Input Port : Ports d'entrée, peuvent STOCKER des informations ou en recevoir d'autres opérateur
- Output Port : Ports de sortie, retournent les données traitées par l'opérateur, peut les renvoyer à d'autres opérateurs
- Parameters : Les VALEURS stockées dans un opérateur (ex: color RGB = "255,0,0" Translate XYZ = "0,0,20"). Il existe différents TYPES
- Number : Type de donnée contenant un nombre (Integer = entier / float = décimal)
- Boolean : Type de donnée contenant deux 2 états: TRUE or FALSE ( vrai / faux )
- String : Type de donnée contenant un ou plusieurs caractère : "a" ... "salut" etc.
- Array : Type de donnée contenant une liste de valeur : "1 , 2 , 3"... "one, two, three" etc.
- Object : Type de donnée plus complexes permettant de stocker des données javascript ( Json / Texture / Audio ...)
Tutoriels vidéo
Aide
- Discuter sur le Discord Cables.gl
- Opérateur pour Enregistrer une vidéo du patch
- Modèle Chat GPT pour écrire ses propres opérateurs en javascript
- Télécharger des textures gratuites chez texturelabs