Étape 1 : Planter le décor (Le Terminal)

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont('monospace');
  angleMode(DEGREES);
  noCursor();
}

function draw() {
  // Le fond noir bleuté de plgrnd.cc avec une légère traînée
  background(12, 13, 18, 90); 
}

« Pour commencer, on initialise notre espace de travail. On crée un Canvas qui prend tout l’écran. J’utilise la typographie monospace pour rappeler l’esthétique du code et des terminaux boursiers. Dans la boucle draw, qui s’exécute 60 fois par seconde, je pose un fond très sombre, avec une légère transparence (90). Cela va nous permettre de garder une trace fantomatique des données qui vont s’afficher, créant cet effet de mouvement typique de l’art génératif. »

Étape 2 : Brancher l’écoute (L’API Web Speech)

let motsCaptures = [];
let reconnaissance;

// Dans le setup() :
let SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
reconnaissance = new SpeechRecognition();
reconnaissance.continuous = true;
reconnaissance.lang = 'fr-FR';

reconnaissance.onresult = function(event) {
  let phrase = event.results[event.resultIndex][0].transcript.toUpperCase();
  let motsArray = phrase.trim().split(" ");
  
  for (let i = 0; i < motsArray.length; i++) {
    if (motsArray[i].length > 3) {
      motsCaptures.push({
        texte: motsArray[i],
        valeur: random(10, 999).toFixed(2) // Le prix spéculatif
      });
    }
  }
};
reconnaissance.start();

« C’est ici que la magie opère. Au lieu d’utiliser un texte statique, nous allons écouter la salle. J’utilise l’API SpeechRecognition native du navigateur. Pas besoin de serveurs complexes. Dès que l’un de vous parle, l’algorithme capte la phrase, la découpe mot par mot avec .split(" "), et ne garde que les mots significatifs. La touche ‘Word Broker’ ? À l’instant où un mot est capté, la fonction random() lui attribue immédiatement un prix en dollars. La parole devient une donnée financière stockée dans notre tableau motsCaptures. »

Étape 3 : La Géométrie 

// Dans le draw() :
translate(width / 2, height / 2); // On se place au centre

let nbMots = motsCaptures.length;
let angleStep = 360 / nbMots; // Répartition en cercle

for (let i = 0; i < nbMots; i++) {
  let motData = motsCaptures[i];
  
  let rayon = 200 + sin(frameCount * 2 + i * 15) * 20; // Respiration
  let angle = i * angleStep + frameCount * 0.1; // Rotation
  
  // Trigonométrie de base pour le placement polaire
  let x = cos(angle) * rayon;
  let y = sin(angle) * rayon;
  
  // Affichage
  fill(247, 247, 247, 150);
  text(motData.texte, x, y);
}

« Maintenant, il faut visualiser cette donnée. Pour construire notre projet, on se place au centre de l’écran avec translate(). Pour répartir nos mots en cercle, on divise 360 degrés par le nombre de mots captés. Ensuite, on utilise les mathématiques fondamentales de l’art génératif : le Sinus et le Cosinus (sin et cos). Ils transforment notre angle et notre rayon en coordonnées X et Y. J’ajoute la variable frameCount (le temps qui passe) pour que la structure tourne et respire perpétuellement. »

Étape 4 : Le Maillage (Les lignes de connexion)

// Toujours dans la boucle for du draw(), avant le text() :
stroke(247, 247, 247, 30);
strokeWeight(1);
line(0, 0, x, y); // Ligne du centre vers le mot

// Pour relier les mots entre eux (Zellige)
if (i > 0) {
  let prevMot = motsCaptures[i - 1];
  let prevAngle = (i - 1) * angleStep + frameCount * 0.1;
  let prevX = cos(prevAngle) * rayon;
  let prevY = sin(prevAngle) * rayon;
  line(x, y, prevX, prevY);
}

« Un design n’est pas fait de points isolés, c’est un réseau de connexions. Avec la fonction line(), je tire un fil depuis le centre absolu (le cœur de l’algorithme) vers chaque mot. Puis, je relie chaque mot au mot précédent. Visuellement, on passe d’un nuage de mots à une architecture sacrée et structurée. C’est l’ordre algorithmique qui s’impose sur le chaos de la parole. »

Étape 5 : L’Extraction (L’Intervention du Broker)

// On récupère la position de la souris par rapport au centre
let mx = mouseX - width / 2;
let my = mouseY - height / 2;
let distanceSouris = dist(mx, my, x, y);

// Si la souris s'approche (Extraction)
if (distanceSouris < 100) {
  stroke(255, 138, 157, 150); // Le rose néon de Playground
  line(mx, my, x, y);
  fill(255, 138, 157); // Le mot s'illumine
  textSize(24);
}

J’utilise la fonction dist() pour calculer l’écart entre mon curseur (ma souris) et chaque mot de la structure. Si je m’approche à moins de 100 pixels, la condition if se déclenche. La ligne et le texte prennent ce rose néon intense, et le mot grossit. Je force la connexion. C’est le moment exact de l’extraction de la valeur, l’illustration parfaite du capitalisme algorithmique qui cible une donnée précise. »