Atelier PureData, Pôle numérique des beaux arts de Paris, les 17, 18, 19 avril 2023.
Cables.gl: prise en main et écriture nodale
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 du code.
Cette approche de programmation visuelle la rend accessible aux créatifs qui ne sont pas nécessairement des programmeurs. La plateforme utilise WebGL pour le rendu des graphismes dans le navigateur.
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
- Créez un compte en utilisant le navigateur Chrome sur https://cables.gl/
- Connectez-vous et rejoignez l'équipe Beaux-art Paris (-> "demander l'accès")
Note: Pour des raisons pratiques, nous utiliserons la version en ligne durant le workshop, mais il est possible d'installer une version autonome pour PC Windows / MacOS / Linux
Interface
Voir la documentation pour manipuler l'interface du logiciel
Vocabulaire
- Patch : Le programme réalisé avec cables.gl
- Op / Operator : Une boîte qui effectue une FUNCTION (codée en javascript ou en GLSL)
- Input Port : Ports d'entrées, peuvent stocker des informations ou les recevoir d'autres opérateur
- Output Port : Retourne des données traitées, peut les envoyer à un autre opérateur
- Parameters : Les valeurs stockées dans un opérateur (ex: color RGB = "255,0,0" Translate XYZ = "0,0,20")
- Canvas : L'écran ou on dessine... affiche le rendu graphique, vidéo etc...
- Node Editor : La fenêtre d'arborescence ou on connecte les Opérateurs
- 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 ...)
Capteurs avec Arduino et Cables.gl
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.
L’Arduino est un microcontrôleur (et non un ordinateur) qui permet de contrôler des moteurs, déclencher de la lumière etc... Il s'agit d'une carte électronique qui a révolutionné et simplifié la création interactive en 2005. Projet open-source, il est devenu aujourd’hui l’un des outils les plus utilisés par les makers et les artistes.
TinkerKit est un Kit compatible Arduino permettant de créer des projets interactifs de manière simplifiée. Il se compose d'une carte "Shield" qui se clipse sur l'arduino et permet de connecter facilement 6 capteurs en entrées et 6 effecteurs en sortie, ainsi qu'un système modulaire constitué de différents blocs capteurs qu'il suffit de brancher à l'aide de câbles à "clipser".
Capteurs analogiques à 3 fils :
Correspondance numéro de broches (ou "Pin") entre le "Shield Tinkerkit" vers logiciel Arduino IDE :
Les opérateurs [ArduinoInput] et [ArduinoOutput] permettent de discuter facilement avec les cartes Arduino ainsi que le shield tinkerkit.
Matériel workshop de la base digital
Sept valisettes de formation sont disponibles. Elles contiennent le matériel de base pour réaliser les exercices:
Contenu de la valisette de formation:
Cartes électroniques:
- Arduino Uno + 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:
Arduino IDE
Initiation à la carte arduino de manière indépendante (sans ordinateur ni puredata) pour réaliser de petits projets autonomes. 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 dans la mémoire de la carte arduino, qui peut même être alimentée sur batterie.
Pilotage de Lumière et machines de spectacle en DMX
Pour des raisons de sécurité, la haute tension (220v) ne se fera pas directement sur arduino
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 des installations complexes
- Compatibilité avec le monde du spectacle (nombreux matériel et logiciels disponibles)
Tutoriels vidéo
DecodeGL tutorial -> Recent tutorial
Chat GPT Model for cables (Help to write your own Op):