Créez des effets webcam spectaculaires avec Processing et Java : Tutoriel complet

Processing est un outil puissant pour créer de l'art via le code. Il combine une bibliothèque Java pour les graphiques et un IDE intuitif pour coder et exécuter facilement vos projets.

De nombreux projets d'animation et graphiques pour débutants utilisent Processing, mais il excelle aussi dans la manipulation de vidéo en direct.

Aujourd'hui, réalisez un diaporama d'effets vidéo en direct contrôlés par la souris avec la bibliothèque vidéo de Processing. Vous retournerez la vidéo, la redimensionnerez, la colorerez et la ferez suivre le curseur.

Configuration du projet

Téléchargez Processing et ouvrez une esquisse vierge. Ce tutoriel est testé sur Windows, mais compatible avec tout OS doté d'une webcam.

Installez la bibliothèque Processing Video via Esquisse > Importer une bibliothèque > Ajouter une bibliothèque. Recherchez video et installez celle de The Processing Foundation.

Vous êtes prêt ! Téléchargez le croquis complet si besoin, mais suivez les étapes pour bien comprendre.

Utiliser une webcam avec Processing

Importez la bibliothèque et configurez l'esquisse :

import processing.video.*;
Capture cam;
void setup() {
  size(640, 480);
  cam = new Capture(this, 640, 480);
  cam.start();
}

Après l'import, cam stocke les données webcam. size() crée une fenêtre 640x480 pixels. cam.start() active la caméra.

Ajoutez la fonction draw() pour afficher la vidéo :

void draw() {
  if (cam.available()) {
    cam.read();
  }
  image(cam, 0, 0);
}

draw() s'exécute à chaque image : si des données sont disponibles, on les lit et on les affiche en (0,0).

Enregistrez et lancez (bouton play).

Succès ! Vérifiez syntaxe si erreur (parenthèses, points-virgules). Attendez quelques secondes pour l'accès webcam.

Retourner l'image

Remplacez image(cam,0,0); par :

scale(-1, 1);
image(cam, -width, 0);

scale(-1,1) inverse horizontalement ; positionnez à -width pour centrer.

Pour retournement vertical :

scale(-1, -1);
image(cam, -width, -height);

Faire cycler les effets

Ajoutez int switcher = 0; en haut :

import processing.video.*;
int switcher = 0;
Capture cam;

Metdez à jour draw() :

void draw() {
  if (cam.available()) {
    cam.read();
  }
  if (switcher == 0) {
    image(cam, 0, 0);
  } else if (switcher == 1) {
    scale(-1, 1);
    image(cam, -width, 0);
  } else if (switcher == 2) {
    scale(-1, -1);
    image(cam, -width, -height);
  } else {
    println("Switcher remis à 0");
    switcher = 0;
  }
}

Utiliser la souris

Ajoutez :

void mousePressed() {
  switcher++;
}

Cliquez pour cycler les orientations.

Ajouter plus d'effets

Ajoutez avant else l'effet Warhol 4 couleurs :

else if (switcher == 3) {
  tint(255, 0, 0);
  image(cam, 0, 0, width/2, height/2);
  tint(0, 255, 0);
  image(cam, width/2, 0, width/2, height/2);
  tint(0, 0, 255);
  image(cam, 0, height/2, width/2, height/2);
  tint(255, 0, 255);
  image(cam, width/2, height/2, width/2, height/2);
}

tint(r,g,b) colore chaque quadrant (RVB 0-255). Modifiez pour tester !

Faire suivre la souris

Ajoutez avant else :

else if (switcher == 4) {
  image(cam, mouseX, mouseY, width/2, height/2);
}

mouseX/mouseY positionnent l'image.

Finaliser le code

Ajoutez en haut de draw() pour corriger traînées et couleurs persistantes :

void draw() {
  tint(255);
  background(0);
  // suite du code...
}

Effets webcam : Art par le code

Processing est idéal pour l'art génératif, animations ou robotique.

Préférez JavaScript ? Essayez p5.js pour animations browser-based.

Crédit image : Syda_Productions/Depositphotos