Workshop Cables.gl

Cables.gl est une plateforme web de programmation visuelle en temps réel, conçue pour créer des animations audiovisuelle interactives, connectés à des services web ou des capteurs. Elle permet aux artistes et développeurs de créer des expériences en connectant des "nœuds" ("nodes") dans une interface graphique, sans nécessairement écrire de code.

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!

Un programme Cables.gl s'appelle un patch (voir ci dessus exemple d'interface et menu aide accessible avec un clic droit)

Voir et éditer ce Patch, exemple réalisé pour le worksop avec cables.gl

 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 si besoin par la suite. 

1 - Créez un compte avec Chrome sur https://cables.gl/

2 - Connectez-vous et rejoignez l'équipe Beaux-art Paris (-> "demander l'accès")

Télécharger les médias

Voir la documentation pour manipuler l'interface du logiciel

Les projets ont deux manières d'être partagés:

Patch page : Visualiser le résultat du projet - Ex: https://cables.gl/p/NB2hht

Editeur : Accéder au patch du projet - Ex: https://cables.gl/edit/NB2hht

Il est possible de n'autoriser que l'un d'entre eux!

- 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 ...) 

Cette deuxième journée montrera les possibilités offertes par l'interfacage de capteurs et d'effecteurs dans les patch Cables.gl via la plateforme arduino. Nous nous pencherons également sur le traitement de signal les plus courants nécessaires à certains capteurs pour les exploiter d'une manière efficace.

Sept valisettes de formation sont disponibles. Elles contiennent le matériel de base pour réaliser les exercices:

 Cartes électroniques:

- Arduino Léonardo + câble usb

- Carte bouclier tinkerkit (carte "shield" sur l'arduino pour connecter vos capteurs / effecteurs)

Capteurs entrée digitale ("tout ou rien"):

- Bouton poussoir

- Capteur  à bille (orientation)

- Capteur capacitif (touché)

Capteurs entrée analogique ("graduels"):

- Slider (réglette linéaire)

- Potentiomètre

- LDR (lumière)

- Température

- Proximètre infrarouge (distance) 

Effecteur (sortie digitale ou pwm):

- Leds divers (variété de couleur)

- Led RGB

- Led de puissance sur aimant (à demander)

- Bande flexible de led RGB (à demander)

- Ventillateur 12v (moteur continu)

- Servomoteur (rotation précise entre 0-> 180 deg)

- Mini servomoteur 9g (rotation continue, avant / arrière))

- Solénoïde 12v serrure (électro-aimant)

- Petit solénoïdes 5v

- Module relais (contrôler un circuit extérieur, jusque 36v)

- Module Mosfet (contrôler un circuit extérieur, en le graduant en pwm)

- Alimentation 12v

Capteurs analogiques sur les entrées de la carte "Input": I0, I1, I2, I3, I4, I5 ( (clic pour détails)

Effecteurs numériques sur les sorties de la carte "Output": O0, O1, O2, O3, O4, O5  (clic pour détails)

Branchement alimentations, Relais / Mosfet:

Initiation au language arduino pour réaliser de petits projets autonomes sans ordinateur / écran. Le language arduino est assez simple et peut convenir pour les projets ne nécessitant pas de traitement graphique ou de traitement audio. Il est ainsi possible de réaliser de petits scénarios stockés dans la mémoire de la carte arduino, qui peut même être alimentée sur batterie.

Pour piloter des appareils de plus haute tension, nous utiliserons le protocole DMX, très utilisé dans le spectacle et au théâtre. Il permet de contrôler des projecteur lumière RGB motorisés, des diffuseurs de fumée, ou plus globalement des blocs de prises appelées "gradateurs".

Les avantages du dmx:

- Haute puissance en toute sécurité (normes électriques respectées, fusibles)

- Longue distance (câble XLR pouvant porter un signal sur 25m et plus)

- Périphériques chaînables et adressables pour gérer facilement des installations complexes

- Compatibilité avec le monde du spectacle (nombreux matériel et logiciels disponibles)

Cables.gl youtube Tutorial

DecodeGL Tutorial

ByteSize Tutorials

- 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