Workshop Ensaama - Olivier de Serres - 2025
Design interactif & Physical computing "De l'analogique au numérique"
Voir et éditer ce Patch, exemple réalisé pour le worksop avec 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.
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!
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 si besoin par la suite.
1 - Créez un compte en utilisant le navigateur Chrome sur https://cables.gl/
2 - Connectez-vous et rejoignez la team Ensaama -> "demander l'accès"
Les patch du workshop seront tous accessibles dans la team
- Télécharger les Medias pour les exercices
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 ...)
Voir la documentation pour manipuler l'interface du logiciel
Publication des projets
Vos projets peuvent être partagés de différentes manières:
Ils sont enregistré en Privé par defaut! Il faut autoriser "Unlisted" dans Patch Settings)
Lien vers Patch page : Page du projet avec informations - Ex: https://cables.gl/p/NB2hht
Lien vers Editeur : Accéder au patch - Ex: https://cables.gl/edit/NB2hht
Lien vers Player en plein écran: Ex: https://cables.gl/view/NB2hht
Dans une iframe (intégrer facilement sur votre site) : NomDuProjet -> Export -> Embed
Dans une Application Executable (Pour une expo ou un musée): NomDuProjet -> Export -> Executable
Télécharger votre Patch (Sources pour sauvegarde ou transfer vers application cables.gl) : NomDuProjet -> Export -> Patch
Télécharger votre Patch en structure html (à héberger sur votre serveur en ligne) : NomDuProjet -> Export -> Download HTML
Tutoriels Vidéo
Informations Carte microcontrôleur "Uno 328 Plus"
La carte peut nécessiter l'installation de drivers CH340 sous Windows
Télécharger le code à Uploader sur la carte Arduino:
Modules Capteurs (entrée) pour les exercices:
Modules effecteurs (sortie):
Sélection de modules capteurs et actionneurs (exemple):
- Download all modules test code for Arduino IDE
Informations utile programmation Arduino IDE:
Structure
Carte structure globale
Function "if"
Carte de la condition "if".
fonction "while"
Carte de la condition "while".
Référence matériel Workshop (exemple achat Amazon)
Carte Microcontrôleur type Arduino Uno + broches capteurs 3 fils:
Arduino Sensor shield Keyesutio 328P
Modules Capteurs:
Modules Capacitive Touch sensors
Capteur distance Infrarouge Sharp
Modules accéléromètres analogiques
Modules Effecteurs:
Magasins électroniques et Arduino à Paris
- Letmeknow https://letmeknow.fr/
- R.A.M électronique https://www.vdram.com/
- Hackspark https://hackspark.fr/