Le monde physique

PiPhone→ Ouvrir le lien

Il est très intéressant d’utiliser P5js ou Processing pour manipuler des fichiers numériques, créer des images, produire des sons, etc. Mais les notions évoquées durant ce workshop pourraient également nous servir pour interagir avec des éléments du monde physique. Gérer des lumières sur une scène, déclencher certains événements d’une installation interactive, construire un robot, un controlleur Midi, piloter un traceur, etc..

Nous utiliserions pour ce faire certaines interface physiques comme les cartes Arduino, Micro:bit ou Raspberry Pi. Tous ces projets sont des projets Open-Source, souvent créés pour apprendre, donc également assez abordables.

Si vous chipotez un jour avec une de ces cartes, vous risquez de vous frotter à Wiring (langage de programmation pour les cartes Arduino/Genuino) ou Python, souvent utilisé sur les Raspberry. Les notions de bases abordées ici avec javascript seront les mêmes dans ces différents langages.

Arduino

https://www.arduino.cc/

L’idée ici sera de faire communiquer Arduino et Processing pour, par exemple, allumer une diode (ou démarrer une voiture..), quand je passe ma souris sur une image, ou que je clique sur un bouton ou, comme je l’avais vu un jour, faire sonner une cloche chaque fois qu’un nouvel article est posté sur Wikipedia. Pour bon nombre de projets, Processing ne sera même pas nécessaire. Vous migrerez alors vers d’autres langages, comme Javascript ou Python.

Arduino

L’interface d’Arduino est très proche de celle de processing. Le langage diffère légèrement, mais vous passerez sans souci de l’un à l’autre, après 2-3 heures de travail.

Arduino et Processing

Micro:bit

https://microbit.org/fr/

Le BBC micro:bit est un petit ordinateur de poche (4 × 5 cm), conçu au Royaume-Uni pour l’éducation. Là où une carte Arduino demande de câbler soi-même ses capteurs, la micro:bit en embarque déjà beaucoup : deux boutons, un logo tactile, une matrice de 25 LED, un accéléromètre, une boussole, un capteur de lumière et de température, un micro et un haut-parleur (V2), ainsi qu’une radio et le Bluetooth. On peut donc commencer à interagir avec le monde physique sans fer à souder ni breadboard, puis ajouter des composants via les broches (pinces crocodile sur les anneaux 0, 1 et 2).

La micro:bit V2, face avant et face arrière (source : microbit.org)→ Toutes les fonctionnalités

Elle se programme dans le navigateur, en blocs, en JavaScript (MakeCode) ou en Python (Python Editor). La page Scratch & Micro:bit présente la carte et ses éditeurs plus en détail.

Micro:bit et p5.js

La micro:bit peut servir de manette ou de capteur pour un sketch p5.js. Le principe : la carte envoie des valeurs à l’ordinateur par le câble USB (liaison série), et le sketch les lit grâce à l’API Web Serial du navigateur (Chrome ou Edge uniquement).

Côté micro:bit, dans MakeCode (onglet JavaScript), on envoie en continu l’inclinaison de la carte :

basic.forever(function () {
    serial.writeLine("" + input.acceleration(Dimension.X))
    basic.pause(20)
})

Côté p5.js, un bouton ouvre la connexion (le navigateur demande de choisir la carte), puis chaque ligne reçue met à jour la variable valeur :

let valeur = 0;
let tampon = '';

function setup() {
  createCanvas(400, 400);
  createButton('Connecter la micro:bit').mousePressed(connecter);
}

function draw() {
  background(220);
  // en inclinant la carte, valeur varie environ de -1024 à 1024
  let x = map(valeur, -1024, 1024, 0, width, true);
  circle(x, height / 2, 50);
}

async function connecter() {
  const port = await navigator.serial.requestPort();
  await port.open({ baudRate: 115200 });
  const reader = port.readable.pipeThrough(new TextDecoderStream()).getReader();
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    tampon += value;
    const lignes = tampon.split('\n');
    tampon = lignes.pop(); // la dernière ligne est peut-être incomplète
    for (const ligne of lignes) {
      if (ligne.trim() !== '') valeur = Number(ligne);
    }
  }
}

On peut évidemment envoyer d’autres valeurs (boutons, lumière, son…) ou faire le chemin inverse : le sketch écrit sur le port série et la micro:bit réagit (LED, son, moteur branché sur une broche).

MakeyMakey

Le MakeyMakey est un dispositif d’émulation de clavier à partir d’objets du quotidien : la manipulation de tout objet conducteur relié au MakeyMakey va envoyer un signal à un ordinateur, qui réagira avec la fonction que vous avez défini, en fonction du logiciel que vous utilisez.

MakeyMakey propose un détournement “Do It Yourself” de la manette de jeu et du clavier : ce que vous voulez créer comme interaction ne dépend que de vous. Facile à utiliser, sans danger, il permet une infinité d’interaction avec un ordinateur. (src: http://labenbib.fr)

Raspberry Pi

https://www.raspberrypi.org/

Raspberry Pi est un nano ordinateur. Il est, pour son prix (+-40 EUR), extrêmement puissant. Il s’agit ici de matériel(hardware) libre, comme l’est également la carte Arduino.

Raspberry Pi