Archives par mot-clé : génératif

Liste des cours Processing + P5JS 2016-2017 [Digital Lab]

Retrouvez la liste complètes des cours de digital lab — processing/P5js (3e. année, option) sur l’année 2016-2017

Semestre 1

Expérimentations typographiques interactives

L’option Digital Lab a pour objectif de sensibiliser les étudiants à la conception graphique générative et interactive par l’étude de la forme depuis une approche géométrique et mathématique ainsi que par l’étude de la programmation par l’intermédiaire de Processing. Durant ces cours les étudiants sont amenés à appréhender les méthodes itératives, la création de tableaux et d’objets, la notion de comportement, la gestion d’un espace 2D/3D, les différents type d’aléatoire…

Après plusieurs cours portant sur la création d’objets aux comportements propres — programmation orientée objet — l’aléatoire et la gestion de chaîne de caractère, il leur a été demandé à chacun de réaliser une expérimentation typographique interactive.

Le Brief & les contraintes :

« Réaliser une expérimentation typographique interactive à partir d’une citation qui vous sera donnée. »

À travers cet exercice les étudiants se sont interrogés sur le sens des citations choisies, sur la composition graphique et typographique au sein d’un espace génératif ainsi que sur le comportement dont peut disposer un caractère typographique.

Temps de production : 4 cours

Étudiants :
Cindy Texeira
Savinien Fruhauf
Cyrus Bruns
Vincent Roure
Alice Zhu
Laurine Munsch
Justine Gaudin
Nadège Calegari
Anis Chouk
Romy Kombet
Stefania Giraldo-Garcia

Expérimentations Typographiques

Les expérimentations graphiques et typographiques sont depuis longtemps un des terrains de jeux préférés des graphistes. Entre respect et transgression des règles typographiques et de lectures, de nombreux graphistes tels que Roger Excoffon, Paul Rand, Milton Glaser ou encore Stefan Sagmeister, se sont prêtés à ces exercices. Il en est de même dans le domaine du design interactif et on compte de nombreuses expérimentations typographiques comme Alaphabet interactif de Murielle Lefèvre, Frédéric Durieu et Jean-Jacques Birgé en 1999 ou encore LetterScape en 2002 de Peter Cho, étudiant de John Maeda. À travers ce cours nous allons apprendre à utiliser et mettre un forme un texte à l’aide de processing mais aussi à manipuler les variables de types textes afin de les utiliser par la suite.

Variables textes et méthodes text();

Processing différencie deux types de variables pouvant contenir du texte, la variable de type String et la variable de type char

Comme son nom l’indique la variable de type String est une suite (chaîne) de caractères, elle permet de stocker des mots. Elle se déclare de la manière suivante :

La variable de type char, permet de ne stocker qu’un seul caractère. Elle se déclare de la manière suivante :

Il est important de noter que les suites de caractères sont encadrés par des doubles guillemets «  » là ou le caractère simple n’est encadré que par des simples guillemets  »

Lorsque nous souhaitons afficher un texte dans notre programme nous utilisons la méthode text(), celle-ci nous permettra d’afficher un texte à un endroit précis de notre programme. Cette méthode peut s’utiliser de différentes manières

Enfin la méthode textSize() nous permet de modifier le corps du texte. Comme toutes méthodes de mise en forme, celle-ci doit être placée avant la méthode d’affichage du texte.

Nous verrons un peu plus bas les méthodes de mise en forme de texte avancées.

Manipulations des variables String et char

Lors d’une expérimentation typographique il est souvent utile de pouvoir manipuler le texte.
Nous verrons, dans cette partie, différentes méthodes nous permettant de manipuler nos variables String et char

charAt()

La méthode charAt() permet de connaître un caractère à une position donnée dans une chaîne de caractères.

Ici la variable caractere sera égale à o car il s’agit du 4ème caractère de la variable monTexte

NB : il est important de noter que notre programme commence son calcul à 0. Il compte donc de la sorte :

  • charAt(0) = H
  • charAt(1) = e
  • charAt(2) = l
  • charAt(3) = l
  • charAt(4) = o
  • charAt(5) = (espace)
  • charAt(6) = W

 

substring()

substring() permet d’extraire une chaîne de caractères au sein d’une autre. Nous obtenons ainsi une partie ou un extrait de cette chaîne de caractères.

Ici la variable subst sera égale à World qui correspond à la chaîne de caractères comprise entre le caractère 6 et 11 de la variable monTexte.

length()

Comme pour les tableaux statiques, length() permet de connaitre une taille. Appliquée à une variable de type String, cette méthode nous permet de connaître la taille, en caractère, d’une chaîne de caractères.

Ici la variable len sera égale à 29 car la variable monTexte possède 29 caractères.

indexOf()

La méthode indexOf() permet de connaitre la position d’un caractère dans une chaîne de caractères. Elle correspond à l’inverse de la méthode charAt()

Ici la variable indexMonTexte sera égale à 24 car ‘b’ est en 24ème position de la variable monTexte.

toLowerCase() & toUpperCase()

Ces deux méthodes, plus apparentées à des méthodes de mise en forme, permettent de réécrire une chaîne de caractère en capitale ou bas de casse.

Ici la variable bdc sera égale à « hello world, welcome on board » et CAP à « HELLO WORLD, WELCOME EN BOARD », soit, respectivement, la variable mon monTexte en bas de casse et capitale.

str()

La méthode str() permet de convertir des variables de type int ouf float (nombre entier ou décimal) en chaîne de caractères.

Ici la variable numberToString sera égale à la chaîne de caractères « 2014 ».

char() & int()

Les méthodes char() & int() permettent respectivement de convertir un caractère en sa valeur numérique et vice versa (notamment utilisé en ASCII).

Ici la variable caractere sera égale à ‘A’ qui est la lettre correspondant à la valeur ’65’ et la variable numberChar sera égale à ’69’ qui est la valeur correspondante à ‘E’.

NB : Vous pouvez retrouver les correspondances ASCII ici : Tables de correspondance ASCII

join(), split(), splitTokens()

La méthode join() permet d’assembler les éléments d’un tableau de String en une seule chaîne de caractères. Elle s’emploie de la manière suivante : join(nomDuTableau, « séparateur »);. Séparateur correspond au caractère ou chaîne de caractères que nous souhaitons utiliser pour séparer nos mots.

Ici la variable ensemble sera égale à « les étudiants sont : prénom1, prénom2, prénom3, prénom4, prénom5 » où « ,  » sera le séparateur de chacun de nos mots.

La méthode split() effectue l’inverse de la méthode join(). Elle permet de convertir en tableau de type String une chaîne de caractères. Elle s’emploie de la manière suivante : split(variableString, « séparateur »);. Séparateur correspond au caractère ou chaîne de caractères que nous souhaitons utiliser pour séparer nos mots dans notre variable String.

Ici notre tableau prénom contiendra alors les éléments suivant : prénom1, prénom2, prénom3, prénom4, prénom5.

splitTokens effectue la même action que la méthode split() à cela près qu’elle permet d’utiliser divers séparateurs.

Ici notre tableau phrase contiendra les éléments : « Hello World » et « Welcome on Board » soit notre chaîne de caractères monTexte séparée à chaque ponctuation ‘!’ et ‘.’.

toCharArray()

La méthode toCharArray() permet de convertir en tableau de type char une chaîne de caractères. Elle permet ainsi d’isoler l’ensemble des caractères d’une phrase ou d’un mot.

Ici la tableau car contiendra les éléments suivant : H, e, l, l, o, ,W, o, r, l, d, !.

Ces méthodes constituent les principales méthodes nécessaire à des expérimentations typographique. Il existe évidement encore d’autres méthodes permettant de traiter des variables textes dont vous pourrez retrouver les références sur le site processing

Mise en forme (avancée) de texte

Utiliser une typographie

Comme pour beaucoup de programmes, si nous souhaitons utiliser une typographie spécifique il nous faudra la charger dans notre programme. Processing utilisant une format spécifique pour ses fichiers typographiques, il nous faudra dans un premier temps créer puis charger notre typographie. Cela va se faire très facilement à l’aide de l’outil Create Font disponible via le menu Tools de notre fenêtre processing. Cet outil nous permettra, via la pop-up suivante, de choisir puis créer notre typographie au corps souhaité.

createFont

Une fois notre typographie créée nous pouvons la retrouver dans le dossier /data présent à la racine de notre sketch. Celui portera le nom que nous lui aurons donné précédemment (filename).

Afin de pouvoir utiliser notre typographie dans notre programme il est nécessaire de la charger dans une variable de type PFont. PFont pour processing font est un variable de type typographie. Elle permet de stocker une typographie chargée. Elle s’utilise de la manière suivante :

Nous pouvons alors utiliser notre typographie au sein de notre méthode draw() afin de mettre en forme notre texte. Pour cela nous utiliserons la méthode suivante textFont(nomDeMaVariableFont);

Nous remarquons que notre texte est automatiquement mise en forme au corps auquel nous avons créer notre font (Size dans l’outil de création font). Il nous est cependant possible de changer celle-ci à l’aide de la méthode textSize();

textAlign()

Cette méthode nous permet de mettre en forme l’alignement d’un texte.

  • CENTER pour un alignement centré
  • LEFT pour un alignement à gauche
  • RIGHT pour un alignement à droite

Elle s’utilise de la manière suivante :

Il est également possible de gérer l’alignement vertical d’un texte. Pour se faire nous utiliserons toujours la méthode textAlign() auquel nous ajouterons un argument. Nous aurons donc textAlign(alignementHorizontal, alignementVertical). Les alignements verticaux possible étant:

  • TOP pour un alignement haut
  • BOTTOM pour un alignement bas
  • CENTER pour un alignement centré
  • BASELINE pour un alignement sur la ligne de base

Nous l’utilisons donc la manière suivante :

textLeading()

La méthode textLeading() permet de manipuler, en pixel, l’interlignage d’un texte. Elle s’utilise de la manière suivante :

NB : Il est possible dans une variable String d’indiquer un retour à la ligne. Pour se faire il suffit d’inclure la chaîne de caractères suivante « \n » avant chaque retour à la ligne dans notre variable String. Dans l’exemple ci-dessus nous avons donc écrit : Hello World!\nHello You.\nHello Me afin d’indiquer un retour à la ligne avant chaque nouvelle phrase.

textWidth()

textWidth() permet de connaitre, en pixel, la largeur d’un texte affiché par notre programme.

textAscent() & textDescent()

La méthode textAscent() permet de connaitre la hauteur de jambage supérieur (hampe ou longue ascendante) de la typographie utilisée dans notre programme. Cette hauteur est calculée depuis la ligne de pied de notre typographie.
Elle s’utilise de manière suivante :

La méthode textDescent() permet de connaitre la hauteur de jambage inférieur (hampe ou longue descendante) de la typographie utilisée dans notre programme. Cette hauteur est calculée depuis la ligne de pied de notre typographie.
Elle s’utilise de manière suivante :

En combinant ces deux méthode nous pouvons alors calculer la hauteur d’une ligne en fonction de la typographie utilisée.

Part_05. Exemple d’expérimentation typographique

experimentation_0764

Dans l’exemple suivant nous allons voir comment exploiter les méthodes précédentes afin de réaliser une expérimentation typographique interactive.
Pour cet exemple nous allons utiliser une citation de Charles Eames : « Design is a plan for arranging elements in such a way as best to accomplish a particular purpose. »

Nous souhaitons disposer l’ensemble des caractères formant cette citation sur une grille 3D. Celle-ci effectuera une rotation sur différents axes.
Enfin nous allons voir comment mettre en exergue certaines lettres de cette citation lorsque l’utilisateur appuie sur la touche de son clavier correspondant. Celles-ci avanceront sur l’axe z puis changeront de couleurs.

Nous allons commencer par créer un classe Lettre. Celle-ci permettra de stocker et gérer nos objets caractères. Nous voulons positionner nos lettres dans un espace x, y, z et que nous souhaitons en changer la couleur. Nous aurons donc besoins des variables suivantes :

  • La variable char correspondant à la lettre de la citation
  • La position x,y,z (float)
  • La couleur HSB de la lettre (float)
  • Une variable boolean afin de savoir si notre lettre et appuyée ou non

Cela nous donnera le début de classe suivante :

Nous aurons par ailleurs besoins de diverses méthodes dont :

  • Le constructeur de notre objet
  • Une méthode permettant de définir la lettre et la couleur de notre objet defineLetter(char lettre_)
  • Une méthode permettant de changer le comportement de la lettre si celle-ci est appuyée changeBehavior()
  • Une méthode permettant d’afficher notre lettre display()
  • Une méthode globale permettant d’appeler les méthodes nécessaires à notre programme run()

Ajoutons notre première méthode, à savoir, notre constructeur. Celui-ci va nous permettre de définir la position de notre objet. Nous définirons la lettre puis la couleur dans une seconde méthode afin de s’éviter un calcul de correspondance entre une grille et un suite de caractères.

Nous allons ensuite ajouter notre méthode permettant de définir la lettre et la couleur de notre objet. Nous n’allons pas choisir la couleur de nos lettre au hasard mais allons mapper leur valeurs en ASCII sur des valeurs de bleu du cercle chromatique. Pour ce faire nous allons utiliser la méthode int() vu précédemment puis nous mapperons les valeurs à l’aide d’une méthode map(). Nous définirons le caractère de notre objet en découpant la citation, donc en dehors de l’objet en lui même, nous devrons donc passer la variable caractère à notre méthode. Pour ce faire nous allons utiliser la syntaxe suivante fonction(typeDeVariable nomDeVariable)

Nous ajoutons ensuite nos méthodes changeBehavior() et display(). La première nous permettra de changer la position z et la saturation de notre objet si sa lettre correspondante est appuyée par l’utilisateur. Nous utilisons une simple condition ainsi que notre variable booléenne.

Notre méthode display() dessinera notre lettre au centre de sa position. Nous dessinerons également une tige à notre lettre afin d’accentuer graphiquement notre mise en valeur des lettre appuyées.

Enfin nous regroupons nos deux méthodes changeBehavior() et display dans une méthode run()

Nous obtenons alors la classe suivante

Nous allons à présent nous occuper de découper notre citation puis l’afficher sur scène. Si nous analysons le programme voulu et son design, nous remarquons que nous aurons besoins de

  • Découper notre citation en tableau de caractères
  • Positionner nos caractères sur un grille d’une certaines taille, avec un espace précis entre chacun d’eux
  • Positionner notre grille sur la scène
  • Effectuer une rotation de notre scène

Nous aurons besoins des variables suivantes :

  • Taille de la scène
  • Citation et Auteur
  • Tableau pour stocker l’ensemble des caractères formant la citation
  • Tableau pour stocker l’ensemble de nos objets Lettre
  • La typographie pour notre mise en forme du texte
  • La taille de notre grille
  • les marge haute et basse pour positionner notre grille
  • la résolution en largeur et hauteur de notre grille
  • Les angles x, y, z de notre scène

Soit :

Nous pouvons à présent définir notre setup(). C’est dans ce dernier que nous effectuerons l’analyse de notre texte, la création des objets Lettre et leur position.
Nous commençons par les paramètres de base de notre programme ainsi que le chargement de la typographie créée au préalable :

Puis, à l’aide de la méthode toCharArray() nous allons créer un tableau contenant tout les caractères de la variable citation.

Nous définissons ensuite les paramètres de notre grille, puis à l’aide d’une double boucle for, nous créons et positionnons nos objets de type Lettre.

Enfin nous n’avons plus qu’à définir les lettres de chacun de nos objets. Si nous observons notre grille, nous remarquons qu’il s’agit d’une grille de 100 emplacements. Or notre citation fait 97 caractères. Nous devrons donc, à l’aide d’une condition, définir un caractère vide ‘ ‘ pour tout nous objets n’ayant pas de caractères correspondant (de l’emplacement 98 à 100).

Nous obtenons donc le setup() suivant

Nous allons désormais définir notre draw(). Nous souhaitons pouvoir effectuer une rotation de notre grille. Cela implique donc l’utilisation d’une déplacement de matrice et d’une rotation sur des axes x, y et z. Pour afficher nos objets nous utilisons un simple boucle for() afin d’appeler leur méthodes run().

Une fois notre affichage créé, il ne nous reste plus qu’à réaliser la partie interactive de notre expérimentation. Nous allons utiliser une méthode keyPressed() dans laquelle nous comparons la touche du clavier appuyée par l’utilisateur avec le lettres de nos objets. Si celles-ci correspondent, nous passerons alors les variables booléenne clicked de nos objets en vrai, sinon en faux.

Nous obtenons alors l’expérimentation suivante pour le code suivant :

Analyse audio et l’utilisation de données FFT

L’animation d’images synchronisées sur une musique est un procédé reconnu et utilisé depuis longtemps tant dans le VJing que dans les divers domaines de l’animation. De nombreux outils comme after effect nous permettent de synchroniser, de manière automatique ou plus maîtrisée, une animation sur un son, il en est de même avec les outils de creative coding.
Processing permet, par l’utilisation de la librairie Minim, de jouer et analyser un son. Les valeurs récupérées peuvent ensuite être utilisées de manière différente comme dans l’exemple ci-dessous où l’analyse audio permet de gérer la déformation d’un mesh 3D ou le comportement d’un flocon de neige.

Nous verrons ici comment utiliser la librairie Minim et créer un objet nous permettant de récupérer l’amplitude des bandes FFT (issues de la transformation de Fourier) afin d’animer des objets.

Analyse audio et les FFT

Lorsque nous écoutons un son nous entendons les diverses notes jouées. Cependant lorsque nous analysons un son, ce dernier n’est pas représenté en terme de notes mais en amplitudes/temps.
D’une manière simple, l’amplitude à un instant T d’un son correspond à son volume à ce même instant T. Si nous souhaitons représenter un son nous obtenons alors le graphique suivant :

son-amplitude-01-01

Nous pouvons facilement utiliser l’amplitude d’un son comme valeur pour une animation. Dans l’exemple suivant nous avons mappé la valeur y d’une ellipse sur l’amplitude de notre musique.
Pour ce faire, nous avons utilisé after effect afin de convertir les données audio en keyFrame afin de pouvoir lire cette amplitude. Nous avons ensuite mappé la valeur y de notre objet à l’aide de l’expression suivante.

Nous obtenons alors l’animation suivante :

Dans le cas d’une animation simple cela pourrait nous suffir, mais dans le cadre d’un clip génératif par exemple nous souhaitons obtenir plus de variations et pouvoir différencier des notes, des graves ou des aïgues. Pour ce faire nous allons utiliser la transformée de Fourier. La transformée de Fourier est une fonction inventée par Jean Baptiste Joseph Fourier permettant de transformer un spectre en fréquences. Dans notre cas nous allons nous en servir pour transposer l’amplitude de notre son en fréquences Hertz.

Un son est composé d’un ensemble de fréquences Hertz, chacun de ces hertz aura une amplitude différente. Si nous traçons cela nous obtenons le graphique suivant (pour l’instant T, l’amplitude des fréquence changeant à chaque instant)

son-hertz-01-01

Cependant on pourrait se demander en quoi cela nous intéresse de transformer l’amplitude d’un son en fréquence.
Il faut savoir que chaque son possède une fréquence majeure, il s’agit de la fréquence dont l’amplitude sera la plus haute. Chaque son étant différent il est alors possible d’isoler pour chacun d’entre un leur fréquence majeure, cela devient leur empreinte. On peut donc facilement reconnaître une note par sa fréquence majeure, ainsi la fréquence d’un La (octave 2) sera de 220hz.
Evidemment dans le cadre d’une musique, il faut prendre en compte le fait que plusieurs instruments joueront en même temps, il sera donc très difficile d’extraire une note exacte par sa fréquence puisque nous obtenons l’amplitude des fréquences pour l’ensemble des instruments enregistrés.

Un autre élément intéressant des fréquences est leur ordre croissant. Les fréquences audible par l’homme vont en moyenne de 3 hz à 22 000 hz, et il est intéressant de savoir que les sons associés aux fréquences les plus basses sont les sons graves contre les sons aux fréquences hautes qui seront les plus aiguës. Les fréquences peuvent donc nous aider à obtenir des variations tant sur les graves, les médiums que les aiguës. Ils nous offrent alors beaucoup de possibilités en terme d’animation.

Nous avons vu, dans les grandes lignes, ce que nous pouvons analyser d’un son. Passons à la pratique en essayant d’extraire les données de notre musique à l’aide de processing.

L’utilisation d’une librairie intégrée dans processing

Processing ne gère pas de manière « native » la lecture/analyse d’un son. Pour se faire nous allons utiliser une librairie intégrée : Minim. Il s’agit d’une librairie dédiée au traitement de son et permettant à la fois la gestion, lecture, écriture, analyse d’un son. Cette librairie fait depuis longtemps partie du package processing étant donné ses grandes capacités. Minim étant une librairie nous aurons besoins de l’importer dans notre skecth afin de pouvoir accéder à ses méthodes. Pour se faire nous utilisons le code suivant :

Création d’une classe FFTObject – variables et constructeur

Afin de faciliter l’analyse des fréquences tout au long de notre code nous allons créer un objet que nous appellerons fftObject. Cet objet nous permettra à la fois de charger et jouer un son mais aussi d’accéder à l’analyse des bandes FFT de ce même son.

Nous aurons besoins de divers objets liés à la librairie Minim, à savoir :

  • Un objet minim de type Minim permettant de gérer l’ensemble des objets de chargement, lecture et analyse d’un son
  • Un objet music de type AudioPlayer afin de lire notre musique
  • Un objet fft de type FFT afin de réaliser et utiliser la transformée de fourier

Nous aurons ensuite besoins de la variable suivant :

  • Une variable timeSize définissant la taille du buffer de notre son à analyser

Nous pouvons donc commencer à créer notre classe fftObject de la manière suivante :

Passons maintenant au constructeur de notre objet.
Nous allons définir notre variable timeSize à 1024. Il s’agit de la taille du buffer dédié au son. Le buffer est une mémoire tampon, il permet de stocker à l’avance les données du son devant être lues. Ce buffer nous servira lors de l’initialisation de l’objet music.

Nous devons ensuite initialiser notre objet minim de la manière suivante :

Nous remarquons l’ajout d’une variable parent, celle-ci correspond au contexte. En effet lors de son initialisation l’objet minim a besoins de connaitre le contexte dans lequel il va être appelé. Dans notre cas il s’agit de notre application processing. Si nous avions initialisé notre objet dans le setup, nous aurions utilisé la variable this permettant de cibler notre application comme étant le contexte.
Puisque nous somme dans un objet, la variable this ne cible plus l’application comme contexte mais l’objet en lui même. Il nous faudra alors la passer dans notre objet lors de son initialisation. Pour ce faire nous avons ajouté au constructeur une variable parent de type PApplet.

Nous pouvons ensuite initialisé l’objet music. Ce dernier aura besoins de l’url de notre son à jouer ainsi que de la taille du buffer que l’application devra lui allouer.

L’objet fft aura aussi besoins de la taille du buffer ainsi que la fréquence à laquelle la musique a été échantillonné. Cette dernière valeur nous est donnée par l’objet music à l’aide de la méthodes suivante :

Nous obtenons donc pour l’objet fft

Enfin, une fois l’ensemble de nos objets construit nous lançons la lecture de notre son à l’aide de la méthode suivante

Nous obtenons alors, pour notre classe fftObject le constructeur suivant :

Création d’une classe FFTObject – les méthodes

Une fois notre constructeur défini nous avons besoins de créer les diverses méthodes dont notre objet aura besoins. Dans notre cas nous avons besoins des méthodes suivantes :

  • Une méthode getFFTLevel nous renvoyant l’amplitude d’une fréquence souhaitée
  • Une méthode displayFFT permettant de dessiner les amplitudes de chacune de nos fréquences sous forme d’égaliseur

Commençons par la méthode getFFTLevel, celle-ci sera relativement simple.
Nous allons utiliser une méthode de type float. Les méthodes typées (float, int, boolean…) sont des méthodes renvoyant des variables une fois exécutée.

Si on écrit :

Alors x sera égale à valeur
Dans notre cas nous souhaitons pouvoir connaitre l’amplitude d’une bande i et ceux à n’importe quel endroit de notre code. Nous allons donc créer une méthode nous permettant par la suite de dire :

où x sera égale à la valeur de l’amplitude de la fréquence i.

Cette méthode getFFTLevel se composera alors de la manière suivante :

Nous allons désormais définir la méthode displayFFT. Celle-ci nous permettra d’afficher sous forme d’égaliseur les amplitudes de nos fréquences.
Nous aurons besoins de passer diverses variables dans cette méthode, à savoir :

  • la position x de notre égaliseur
  • la position y de notre égaliseur
  • la hauteur maximum heightBande de nos fréquences
  • le nombre nbBandes de fréquences voulues (de nombreuses fréquences n’étant pas couvertes ou non présentes dans notre échantillons nous n’aurons pas besoins de dessiner les 22000 hertz)

enfin à l’aide d’une boucle for nous dessinerons l’ensemble de nos fréquences. Cela nous donnera :

Utilisation de notre class FFTObject

Maintenant que nous avons créé notre classe FFTObject il ne nous reste plus qu’à l’utiliser. Dans notre feuille principale nous allons déclarer un objet fftObj de type FFTObject ainsi qu’une variable parent de type PApplet.

Nous initialisons l’ensemble de nos variables et objets dans notre setup

Nous pouvons désormais dessiner notre égaliseur dans notre boucle draw() à l’aide de la méthode suivante

De la même manière nous pouvons dessiner un lot de 20 ellipses dont la taille pourra varier en fonction de bandes FFT comprises en 0 et 20.

Ils ne vous reste plus qu’à expérimenter à votre tour à créer votre propre application réactive au son.

taille

Bibliographie

Ce cours a été réalisé à l’aide des informations suivantes :

Amplitude et Décibels, Topos générals préliminaires sur l’audio numérique.

Transformation de Fourier

Définition des Hertz

Notes de musique et correspondance en fréquences hertz

échantillonage d’un son

Minim, références