< Autoplay >

Exercice : Forme & Son (durée : 2 semaines)

Contexte

Le web n’est pas seulement un espace de lecture et d’information, il peut aussi devenir un medium d'expérientation visuel et de recherche de nouvelles esthétiques. Depuis les années 2000, des artistes et designers utilisent HTML, CSS et JavaScript pour créer des expériences visuelles et sonores interactives.
L’objectif de cet exercice est d’explorer la relation entre son et forme visuelle : comment un son peut-il être traduit en couleur, mouvement ou composition graphique au sein d'une page web ?

Consigne

  • Choisir une musique (ou un univers sonore) qui vous inspire. Format en .mp3.
  • Créer une page web (one page) qui en propose une interprétation visuelle : affiche web, expérience interactive, animation rythmée, etc.
  • La page doit :
  • contenir au minimum une structure HTML correcte (doctype, head, body),
  • utiliser le CSS pour définir formes, couleurs et mise en page,
  • (optionnel) intégrer un peu de JavaScript pour ajouter de l’interactivité (réaction au clic, au mouvement, au son).
  • Rendu le 16 octobre

Moyens techniques

  • Éditeur de code : VS Code, Sublime Text ou autre.
  • Langages : HTML + CSS (JavaScript optionnel).
  • Rendu attendu : une page web autonome (fichiers .html, .css, et éventuellement .js).

Notions que nous allons voir

  • Intégration d’un fichier sonore dans une page web (<audio> HTML, contrôle et lecture). Exemple ici
  • Animation et transition CSS (changement de couleur, déplacement, transformation, hover effects). Exemple ici et ici
  • Filtres CSS (filter: blur(), grayscale(), hue-rotate(), etc.) pour transformer visuellement les formes. Exemple ici

Références