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
- Adresse Api web pour la météo à Paris et l'objet httpRequest:
https://api.open-meteo.com/v1/forecast?latitude=48.8566&longitude=2.3522¤t=temperature_2m,wind_speed_10m
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 ...)
Interface
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 dans le menu "Patch Settings"!
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/