Antoine Boucher

Kinectron + p5.js — contrôle du sketch et export GIF

Introduction

Ce tutoriel montre comment monter un sketch Kinectron dans p5.js avec arrêt / lecture du sketch et enregistrement en GIF.

Prérequis

  • Bases JavaScript et p5.js.
  • Bibliothèque Kinectron installée.
  • Bibliothèque p5.js installée.
  • Kinect v2 ou Azure Kinect DK.
  • Serveur Kinectron en marche.
  • Environnement local ou en ligne compatible JavaScript et p5.js.

Étape 1 : environnement

Inclure p5.js et Kinectron dans le HTML.

<html>
  <head>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"
      type="text/javascript"
    ></script>
    <script
      type="text/javascript"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
    <script
      src="./client/dist/kinectron-client.js"
      type="text/javascript"
    ></script>
    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body></body>
</html>

Étape 2 : variables

Dans sketch.js, définir les variables nécessaires.

// Kinectron setup function
function Kinectron() {
  // Types d’articulations Kinectron
}

let kinectron = new Kinectron();

const liveData = false;
let stopButton, playButton, saveGifButton;
let recorded_skeleton;

function preload() {
  // Charger les données enregistrées si liveData est false
}

Étape 3 : canvas et boutons

function setup() {
  createCanvas(640, 480);
  background(0);

  if (liveData) {
    // Kinectron en direct
  } else {
    // Données préenregistrées et boutons
  }
}

Étape 4 : draw

function draw() {
  // Données live ou enregistrées
}

Étape 5 : gestes

function checkForGestures(body) {
  // Détecter et afficher les gestes
}

function isClapping(body) { /* ... */ }
function isOKSign(body) { /* ... */ }
// Autres fonctions de gestes

Étape 6 : boutons

function stopSketch() {
  noLoop();
  console.log("Sketch stopped.");
}

function playSketch() {
  loop();
  console.log("Sketch playing.");
}

function startCreatingGif() {
  saveGif('mySketch', 5);
  // Téléchargement du GIF, etc.
}

Étape 7 : lancer le sketch

Exécuter dans un environnement compatible p5.js.

Vous avez maintenant un sketch Kinectron dans p5.js avec contrôle de lecture et export GIF. Expérimentez d’autres gestes pour enrichir le sketch.