MM3B - Récits Interactifs

Bienvenue dans ce parcours dédié à la narration interactive. Vous allez découvrir comment transformer les gestes du spectateur en outils narratifs.

Votre bagage créatif

Vous maîtrisez déjà des outils puissants :

• After Effects : timeline, keyframes, expressions
• Nuke : nodes, flux d’images, compositing
• Maya : animation, déformations procédurales

Le JavaScript n’est qu’une nouvelle syntaxe pour exprimer des idées que vous connaissez déjà. La différence ? Le spectateur devient partie prenante de l’histoire.

Au cinéma vs Sur le web

🎬 Au cinéma

• Le réalisateur choisit le cadrage
• Le monteur décide du rythme
• La chronologie est fixe
• Le spectateur suit un chemin unique

🌐 Sur le web

• Le spectateur choisit où regarder
• Son rythme influence la narration
• La chronologie devient flexible
• Chaque expérience est unique

Références cinématographiques

Ces films explorent déjà la non-linéarité narrative. Nous allons transposer ces techniques au web :

• Rashomon (Kurosawa) : une histoire, plusieurs points de vue → votre clic choisit quelle version entendre
• Mémento (Nolan) : chronologie perturbée → vous décidez dans quel ordre explorer les souvenirs
• Run Lola Run (Tykwer) : variations sur un même événement → votre vitesse change le déroulement
• Timecode (Figgis) : écrans multiples simultanés → votre regard choisit quelle histoire suivre

Les 4 expériences narratives

Nous allons créer ensemble 4 expériences qui explorent différentes formes d’interaction :

1. Le personnage qui vous observe

Interaction : Mouvement de la souris
Concept narratif : Votre regard guide l’émotion
Référence : Le cadrage comme outil émotionnel

2. L’histoire à plusieurs voix

Interaction : Clics + audio
Concept narratif : Vous montez le film en direct
Référence : Rashomon interactif

3. La chambre des souvenirs

Interaction : Survol + vidéo
Concept narratif : Vous choisissez la chronologie
Référence : Mémento spatial

4. La vitesse du temps

Interaction : Défilement + vidéo
Concept narratif : Vous contrôlez le tempo
Référence : Le montage comme rythme

Comment aborder ce parcours

Chaque chapitre suit la même structure :

1. Référence cinéma (30 secondes)

   • Quel film/technique utilise cette approche ?
   • Comment le web peut-il aller plus loin ?

2. Expérience narrative (5 minutes)

   • Testez l’expérience interactive
   • Laissez-vous guider par l’histoire

3. Analyse narrative (pas technique !)

   • Comment l’interaction a-t-elle influencé votre expérience ?
   • Qu’est-ce que le web permet que le cinéma ne peut pas faire ?

4. Le scénario interactif

   • Le code présenté comme un scénario
   • Commentaires en français, langage narratif
   • “SI le spectateur fait ça, ALORS l’histoire devient ça”

Vocabulaire : du cinéma au web

Nous n’utiliserons pas de jargon technique. Voici les équivalences que nous emploierons :

Terme technique	Nous dirons plutôt
addEventListener	Déclencher une action quand…
if/else	Embranchement narratif
function	Séquence d’actions
event	Geste du spectateur
variable	Élément de l’histoire

Prêt ?

L’objectif n’est pas de devenir développeur, mais de comprendre que le code est un langage de création narrative. Comme les expressions dans After Effects ou les nodes dans Nuke, c’est un outil pour donner vie à vos idées.

Commençons par la première expérience : Le personnage qui vous observe →