3D-sound-processing

3D & son / Synesthésie

Qu’est ce que la troi­sième dimen­sion ? Une courte ani­ma­tion pour intro­duire la chose de manière détendue :

Inter­mis­sion in the 3rd dimen­sion, Don Hertz­feldt, 2003

La 3D dans Processing

Pour pou­voir tra­vailler la 3D dans pro­ces­sing, il nous faut d’abord télé­char­ger 1 biblio­thèque qui va nous sim­pli­fier le travail :

• pour impor­ter notre modèle 3D : biblio­thèque obj loa­der (pour voir toutes les fonc­tions, la réfé­rence de la biblio­thèque)

Espace

Sens des dif­fé­rentes coor­don­nées dans la repré­sen­ta­tion 3D de Processing

Nous voici avec une troi­sième coor­don­nées, Z, après X et Y.

Les dif­fé­rentes fonc­tions de la 3D et leurs para­mètres dans processing

Camera http://processing.org/reference/camera_.html

camera(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ)

Paramètres :
eyeX : coordonnées x de 'l'oeil' (variable de type float) - placement en x de la camera
eyeY : coordonnées y de 'l'oeil' (variable de type float) - placement en y de la camera
eyeZ : coordonnées z de 'l'oeil' (variable de type float) - placement en z de la camera
centerX : coordonnées x du point vers lequel pointe la camera (variable de type float)
centerY : coordonnées y du point vers lequel pointe la camera (variable de type float)
centerZ : coordonnées z du point vers lequel pointe la camera (variable de type float)
upX : usuellement 0.0, 1.0, or -1.0
upY : usuellement 0.0, 1.0, or -1.0
upZ : usuellement 0.0, 1.0, or -1.0

Lumière

lights()

http://processing.org/reference/lights_.html

ambientLight(v1, v2, v3, x, y, z)

http://processing.org/reference/ambientLight_.html

Paramètres :
v1 : int or float: red or hue value
v2 : int or float: green or hue value
v3 : int or float: blue or hue value
x : int or float: x-coordinate of the light
y : int or float: y-coordinate of the light
z : int or float: z-coordinate of the light

spotLight(v1, v2, v3, x, y, z)

http://processing.org/reference/spotLight_.html

Paramètres :
v1 : int or float: red or hue value
v2 : int or float: green or hue value
v3 : int or float: blue or hue value
x : int or float: x-coordinate of the light
y : int or float: y-coordinate of the light
z : int or float: z-coordinate of the light

directionalLight(v1, v2, v3, nx, ny, nz)

http://processing.org/reference/directionalLight_.html

Paramètres :
v1 : int or float: red or hue value
v2 : int or float: green or hue value
v3 : int or float: blue or hue value
nx : int or float: direction along the x axis
ny : int or float: direction along the y axis
nz : int or float: direction along the z axis

pointLight(v1, v2, v3, x, y, z)

http://processing.org/reference/pointLight_.html

Paramètres :
v1 : int or float: red or hue value
v2 : int or float: green or hue value
v3 : int or float: blue or hue value
x : int or float: x-coordinate of the light
y : int or float: y-coordinate of the light
z : int or float: z-coordinate of the light

Dépla­ce­ment (rota­tion, translation)

— trans­la­tion

translate(x, y, z)
Paramètres:
x : translation sur les coordonnées x
y : translation sur les coordonnées y
z : translation sur les coordonnées z

— rota­tion

rotateX(angle)
Paramètres:
angle : angle en radians qui détermine la rotation sur les axes des x
rotateY(angle)
Paramètres:
angle : angle en radians qui détermine la rotation sur les axes des y
rotateZ(angle)
Paramètres:
angle : angle en radians qui détermine la rotation sur les axes des z

Notions OpenGL Exer­cice 1

Impor­ter un modèle 3D généré dans Blen­der (cf cours Vincent) en se basant sur l’exemple OBJLoader_BoundingBox de la biblio­thèque Obj Loader

// on importe une bibliotheque permettant d'afficher la 3D
import processing.opengl.*;
// on importe la bibliothèque obj loader qui nous permet 
// d'importer le fichier .obj
import saito.objloader.*;

// on créée un objet dans cette bibliotheque
// on le nomme model
OBJModel model;

// BoundingBox is a class within OBJModel. Check docs for all it can do.
// objet qui délimite les limites de notre objet 3D (boite rose)
BoundingBox bbox;

void setup()
{
  // taille de notre sketch complété de l'appel du mode d'affichage
  // opengl
  size(600, 400, OPENGL);

  //on appelle notre objet model
  // et on lui donne ses caracteristiques (le fichier .obj lié...)
  model = new OBJModel(this, "map_ground_path_s.obj", "relative", QUADS);
  // activation mode debug
  // model.enableDebug();

  //on indique l'echelle de notre objet
  model.scale(200);
  model.translateToCenter();

  // indication des parametres de la bounding box (boite rose)
  bbox = new BoundingBox(this, model);
}

void draw() {
  background(128);
  // les lumieres de la scene
  lights();
  //on deplace notre scene de width/2 pour les x, de height/2 pour les y, et de 0 pour les z
  translate(width/2, height/2, 0);
  // rotaion de la scene autour de l'axe Y
  //rotateX(radians(frameCount)/2);
  rotateY(radians(frameCount)/2);

  //en appliquant la fonction draw à notre objet 'model'
  // on le fait se dessiner
  model.draw();
  /*
 //ce qui nous permet de répeter l'affichage de nos 3 maisons
 for(int i = -1; i  pushMatrix();  translate(0,0,i*bbox.getWHD().z);  model.draw();  popMatrix();  }  */ //on desactive le dessin des contours noStroke(); // tout ce qui suit concerne notre boite rose // j'ai commenté les lignes pour désactiver l'affichage de la boite rose /*  noFill();  stroke(255, 0, 255);  bbox.draw();  noStroke();  */ } }

Télé­char­ger le sketch pro­ces­sing avec ses fichiers externes.

Exer­cice 2

Faire bou­ger la scène avec la souris.

// on importe une bibliotheque permettant d'afficher la 3D
import processing.opengl.*;
// on importe la bibliothèque obj loader qui nous permet 
// d'importer le fichier .obj
import saito.objloader.*;

// on créée un objet dans cette bibliotheque
// on le nomme model
OBJModel model;

void setup()
{
  // taille de notre sketch complété de l'appel du mode d'affichage
  // opengl
  size(600, 400, OPENGL);

  //on appelle notre objet model
  // et on lui donne ses caracteristiques (le fichier .obj lié...)
  model = new OBJModel(this, "map_ground_path_s.obj", "relative", QUADS);
  // activation mode debug
  // model.enableDebug();

  //on indique l'echelle de notre objet
  model.scale(200);
  //on le déplace au centre de notre scène
  model.translateToCenter();
}

void draw() {
  background(128);
  // les lumieres de la scene
  lights();
  //on deplace notre scene de width/2 pour les x, de height/2 pour les y, et de 0 pour les z
  translate(width/2, height/2, 0);
  // rotaion de la scene autour de l'axe Y, en fonction du deplacement
  // horizontal de notre souris (mouseX)
  // pour une cohérence entre notre mouvement
  // et sa conséquence interactive à l'écran
  rotateY(radians(mouseX)/2);
  // rotaion de la scene autour de l'axe Y, en fonction du deplacement
  // vertical de notre souris (mouseY)
  // pour une cohérence entre notre mouvement
  // et sa conséquence interactive à l'écran
  rotateX(radians(mouseY)/2);

  //en appliquant la fonction draw à notre objet 'model'
  // on le fait se dessiner
  model.draw();
}

Télé­char­ger le sketch pro­ces­sing avec ses fichiers externes. Exer­cice 3

Pour faire suite au cours sur le Tra­cking, incor­po­rer votre modèle 3D et le faire se dépla­cer grâce au tra­cking via la web­cam de votre ordi­na­teur. Nous devons per­ce­voir qu’il s’agit d’un objet 3D.

Le son dans Processing

La biblio­thèque par défaut (déjà inté­grée dans pro­ces­sing) per­met­tant de géné­rer le son s’appelle minim. Voici le site où vous pour­rez trou­ver les exemples et expli­ca­tions liés à cette bibliothèque.

Une page avec plu­sieurs exemples basiques d’utilisation de minim. La réfé­rence de toutes les fonc­tions de Minim Les prin­ci­pales com­po­santes d’un son

Repré­sen­ta­tion gra­phique du son : ampli­tude (dB) en fonc­tion de la fré­quence (Hz)

Le volume

désigne la puis­sance d’un son

Dif­fé­rents ins­tru­ments musi­caux et leur gamme de fréquences

La (les) fréquence(s)

La fré­quence d’un son est expri­mée en hertz (Hz), elle est direc­te­ment liée à la hau­teur d’un son perçu, mais n’en est qu’une des com­po­santes. À une fré­quence faible cor­res­pond un son grave, à une fré­quence éle­vée un son aigu.

L’audition humaine s’étend de 20 Hertz (fré­quences basses) à 20 kilo­Hertz (fré­quences aigües).

[wpau­dio url=”http://julien-drochon.net/ESA_old/wp-content/uploads/2012/03/20-15000hz-normalise.mp3″ text=”Fichier son de test 20 Hz – 15 kHz”]

FFT : Fou­rier transformation

Une trans­for­ma­tion de Fou­rier est un algo­rithme qui trans­forme un signal capté dans le temps en un signal en fré­quence, sou­vent appelé spectre.

Exer­cice 1

Faire inter­agir le volume sonore capté par le micro­phone de votre ordi­na­teur avec une forme simple (sa cou­leur, son contour, sa taille…).

//importation des différents éléments de la bibliothèque minim
// importation de la base de la bibliothèque
import ddf.minim.*;
// importation du module de traitement de signal de la bibliothèque
import ddf.minim.signals.*;
// importation du module d'analyse de signal de la bibliothèque
import ddf.minim.analysis.*;
// importation du module d'effets sonores de la bibliothèque
import ddf.minim.effects.*;

// je créé le nom de mon objet son
Minim monObjetSon;
// je créée le nom d'un objet entrée son
AudioInput entreeSon;
// je crée une variable qui me permettra de sortir la valeur du volume hors de la boucle d'itération (voir plus bas)
float monVolumeSon;

void setup() {
  size (200, 200);
  //je crée mon objet son
  monObjetSon = new Minim(this);
  // je précise les caractéristiques de mon objet entreeSon : stereo, avec une memoire tampon (buffer) de 512 ko
  entreeSon = monObjetSon.getLineIn(Minim.STEREO, 512);
}

void draw() {
  background(255);
  // Nous avons besopin d'une iteration pour récpérer tous les échantillons sonores présents dans la mémoire tampon
  for (int i = 0; i < entreeSon.bufferSize() - 1; i++)
  {
    // Je donne à ma variable monVolumeSon la somme des valeurs d'entrées gauche et droite du microphone que je multiplie par 50 pour la valeur soit exploitable
    monVolumeSon =   (entreeSon.left.get(i)+entreeSon.right.get(i)/2)*50;
  }
  // je donne à mon épaisseur de ligne la valeur de la variable monVolumeSon définie juste au-dessus. Avec la fonction 'abs()' je transforme les valeurs de ma varibla à être positives
  strokeWeight(abs(monVolumeSon));
  // je donne à ma ligne la couleur rouge
  stroke(255, 0, 0);
  // je dessine ma ligne
  line(width/4, height/2, width*3/4, height/2);
  // maintenant, quand je fais du bruit l'épaisseur de ma ligne rouge varie en fonction du volume ambiant
}

void stop()
{
  // Je ferme l'entree son et arrete l'objet son quand je quitte mon sketch afin de ne pas continuer à stocker les valeurs dans la memoire tampon quand j'ai fini
  entreeSon.close();
  monObjetSon.stop();

  super.stop();
}

Télé­char­ger le sketch pro­ces­sing Exer­cice 2

Faire inter­agir les fré­quences sonores cap­tées par le micro­phone de votre ordi­na­teur avec une forme simple (sa cou­leur, son contour, sa taille…).

Ici plus le son capté par le micro est grave, plus le contour est épais.

//importation des différents éléments de la bibliothèque monObjetSon
// importation de la base de la bibliothèque
import ddf.minim.*;
// importation du module d'analyse de signal de la bibliothèque
import ddf.minim.analysis.*;

// je créé le nom de mon objet son
Minim monObjetSon;
// je créée le nom d'un objet entrée son
AudioInput entreeSon;
//Je créée un objet pour analyser les fréquences audio appelé 'fft'
FFT fft;

void setup()
{
size(400, 400);

// initialisation de l'objet 'monObjetSon' dans la bibliothèque minim
monObjetSon = new Minim(this);

// specification de la taille de memoire tampon pour la captation de 'entreeSon'
entreeSon = monObjetSon.getLineIn(Minim.STEREO, 512);

// spécification de l'analyse de fréquence de l'objet sonore 'entreeSon'
fft = new FFT(entreeSon.bufferSize(), entreeSon.sampleRate());
}

void draw()
{
background(255);
smooth();
// 'enregistrement de 'fft'
fft.forward(entreeSon.mix);

// couleur de contour noir pour le cercle dessiné plus bas
stroke(0);
//
for(int i = 0; i < fft.specSize(); i++)
{
//epaisseur du contour du cercle dessiné plus bas en fonction
// de la fréquence sonore captée. Je multiplie par 30
// pour que l'influence de la fréquence captée soit
// perceptible
strokeWeight(fft.getBand(i)*30);

}

// couleur de remplissage jaune pour le cercle dessiné plus bas
fill(255,255,0);

//je dessine mon cercle
ellipse(width/2, height/2, width-200, height-200);
}

void stop()
{
  // Je ferme l'entree son et arrete l'objet son quand je quitte mon sketch afin de ne pas continuer à stocker les valeurs dans la memoire tampon quand j'ai fini

entreeSon.close();
monObjetSon.stop();

super.stop();
}

Télé­char­ger le sketch processing

SYNESTHÉSIE & 3D

Un motif gra­phique généré à par­tir de la musique ambiante de Sogar

La synes­thé­sie est un phé­no­mène qui consiste à asso­cier plu­sieurs sens. J’ai ten­dance à la voir comme un des nom­breux ancêtres de l’interactivité. L’interactivité, après tout, est un phé­no­mène qui consiste à lier le corps, un organe doté d’un sens (le doigt/la main pour le tou­cher, l’œil pour la vue…) via un pro­cédé (qu’il soit mul­ti­me­dia, infor­ma­tique ou autre) à une réponse qu’un autre sens peut percevoir.

Un article avec quelques exemples (pas inter­ac­tifs) concer­nant la synesthésie.

Nous allons main­te­nant voir com­ment nous allons lier les exer­cices concer­nant la 3D et ceux concer­nant le son, afin de réa­li­ser une synes­thé­sie entre notre modele 3D et le son capté par le micro de notre ordinateur.

Exer­cice 1

Obser­va­tion et ana­lyse : quels para­mètres sur les­quels influer et com­ment les relier. Faire inter­agir la fré­quence du son capté par le micro de votre ordi­na­teur sur le modèle 3D importé dans votre sketch. Nous devons per­ce­voir que le modèle 3D est un objet 3D.

Vous pou­vez influer, je vous le rap­pelle et je vous mâche le tra­vail, sur la lumière, la taille, le dépla­ce­ment, la rotation…

Réflé­chis­sez bien au contexte de cap­ta­tion et au sens que cela peut prendre sur l’interaction de votre objet 3D.

Exer­cice 2

Mélan­ger tra­cking, son et 3D

Pour aller plus loin

La 3D

Uti­li­sa­tion des lumières (colo­rées) : http://processing.org/learning/3d/lights2.html

Uti­li­sa­tion de lumières direc­tio­nelles : http://processing.org/learning/3d/directional.html

Dépla­ce­ment de camera avec la sou­ris : http://processing.org/learning/3d/perspective.html

Tex­tures et volumes : http://processing.org/learning/3d/texturecube.html Le son D’autres exemples, en fran­çais, concer­nant le son : http://fr.flossmanuals.net/processing/ch028_la-lecture-du-son

& son / Synesthésie'" href="http://lessons.julien-drochon.net/3d-sie/#comments">0