Code B3

Appearance

Arduino

La carte Arduino Rev 4 WiFi
La carte Arduino Rev 4 WiFi

Objectif ​

  1. Le but est de créer une mini-demo de récupération de valeurs d'un capteur branché sur une carte Arduino pour expérimenter les similitudes entre p5.js et Arduino. Ce sera extrêmement simple.
  2. Dans un second temps, "brancher" ça sur un sketch p5.js pour modifier la couleur de fond d'une page web en fonction des valeurs du capteur.

Pré-requis et matériel ​

  • Installer l'IDE Arduino (Integrated Development Environment - Une interface sur mesure, en somme)
  • Une carte Arduino et son alimentation (USB est plus secure question tension)
  • Une breadboard
  • L'un ou l'autre capteur en fonction de ce que l'on veut faire.

Installer l'Arduino IDE ​

Exemple 1 - capter la lumière ​

On utilisera ici une photoresistance – capteur analogique de luminosité (En anglais LDR pour Light Dependent Resistor).

js
const int monCapteur = A0;

void setup() {
  Serial.begin(9600);
}

void loop() {
  int value = analogRead(monCapteur); // 0–1023
  Serial.println(value);
  delay(10);
}

Exemple 2 — Capter un niveau d'eau ​

Ici on utilise un capteur de niveau d'eau, avec un branchement similaire.

c
const int monCapteur = A1;

void setup() {
  Serial.begin(9600);
}

void loop() {
  int raw = analogRead(monCapteur);   // 0–1023
  // Ajuste les valeurs en fonction de notre capteur
  int level = map(raw, 0, 1023, 0, 100);

  // Cadrage forcé, au cas où..
  if (level < 0) level = 0;
  if (level > 100) level = 100;

  Serial.println(level);  // Envoie juste un nombre par ligne. ON peut utiliser print si on veut les mettre à la suite l'un de l'autre
  delay(100);             // 10 fois par seconde
}

Allumer/Éteindre une page web ​

Pour ceci, on va utiliser, p5.WebSerial, une bibliothèque p5 qui va faciliter la communication entre notre carte Arduino et un sketch p5.js.

On va donc, comme d'habitude, créer un dossier pour notre projet, avec :

html
<!--- index.html -->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Capteur → background</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
    <script src="https://unpkg.com/p5-webserial@0.1.1/build/p5.webserial.js"></script>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button id="connectButton">Connecter l'Arduino</button>
    <script src="sketch.js"></script>
  </body>
</html>

Ainsi qu'un sketch.js :

js
let serial;
let latestValue = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);

  if ("serial" in navigator) {
    serial = new p5.WebSerial();

    serial.on("noport", () => {
      console.log("Clique sur le bouton pour choisir un port.");
    });

    serial.on("portavailable", () => {
      serial.open({ baudRate: 9600 });
      console.log("Port série ouvert");
    });

    serial.on("data", gotData);
    serial.on("requesterror", (err) => console.error(err));
    serial.getPorts();
  } else {
    console.log("WebSerial non supporté dans ce navigateur.");
  }

  document.getElementById("connectButton").addEventListener("click", () => {
    if (serial) serial.requestPort();
  });
}

function gotData() {
  let line = serial.readLine();   // 1. on lit la ligne
  if (line === null) return;      // 2. si rien, on sort
  line = line.trim();             // 3. on nettoie
  if (line === "") return;        // 4. si ligne vide, on sort
  const v = int(line); //fonction p5.js pour convertier en entier. sous le capot: const v = parseInt(line, 10);
  if (!isNaN(v)) {               // si c'est un nombre  
    latestValue = v;              // 6. on garde la dernière valeur
  }
}

function draw() {
  const g = map(latestValue, 400, 0, 0, 255);
  // debug
  console.log("Brut:", latestValue, "→ Gris:", g);
  background(g);
}

Et une petite feuille de style minimale :

css
body {
    margin:0;
    overflow:hidden;
}

button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    padding: 10px 20px;
    font-size: 16px;
    border-radius:10px;
    border:none;
}

Autres liens ​