Oram - Simon Bouvier

Premier postulat

Le site en ligne propose un contenu textuel autour d'un évènement en rapport avec le son/ musique/ performance. Après avoir demandé l'accès au micro de l'utilisateur, les titrages, le nom de l'évènement (tout le contenu textuel et certains éléments graphiques hormis les blocs de texte informatifs et pratiques) se dispersent, se dilatent en fonction de l'augmentation du volume, sous forme de particules de plus en plus éparpillées et nombreuses, sachant que la lettre/signe se reforme instantanément après que le volume sonore soit redescendu (par ex. un clappement de main produirait une forte dispersion suivie aussitôt d'une reformation de la lettre/signe, tandis qu'un simple bruit de fond lui provoquerait uniquement une légère vibration continue).

Schéma de fonctionnement

 
                                  
                            
                                     +-------------------------+
                                     |  Mesure volume constant |
                                     +-----------+-------------+
                                                 |
                                     +-----------v-------------+
                                     |  Conversion en valeurs  |
                                     |                         |
                                     |        0 — 127          |
                                     +-----------+-------------+
                                                 |
                                                 |
                                +----------------v-------------------+
                                |    Altération du texte/élèments    |
                                |  graphiques en f de cette valeur   |
                                |                                    |
                                +----+-----------+-----------+-------+
                                     |           |           |
                         +-----------+           |           +--------------+
                         |                       |                          |
         +---------------v---------+  +----------v----------------+    +----v-------------------+
         | Déformation circulaire  |  |  Conversion progressive   |    | Dispersion progressive |
         | du squelette du         |  |  de la forme vectorielle  |    | de ces particules      |
         | mouvement de la typo    |  |  en particulre de plus    +---->                        |
         |                         |  |  en plus nombreuses       |    |                        |
         |                         |  |                           |    |                        |
         +-------------------------+  +---------------------------+    +------------------------+

Première version

Déformation typographique

Pour ce projet j'ai utilisé la libraire Opentype.js qui permet d'accèder à la forme des lettres d'une typographie depuis le navigateur.