1. Le personnage qui vous observe

Référence cinéma : Le cadrage émotionnel

Au cinéma, le réalisateur utilise le cadrage pour guider l’émotion du spectateur :

Gros plan : intimité, tension
Plan large : solitude, distance
Cadrage décentré : malaise, déséquilibre

Dans In the Mood for Love de Wong Kar-wai, la distance entre les personnages dans le cadre reflète leur relation émotionnelle. Quand ils sont éloignés dans le cadre, leur connexion est fragile. Quand ils se rapprochent, l’intimité grandit.

Sur le web, c’est vous qui cadrez. Votre mouvement de souris devient le regard de la caméra, et le personnage réagit à votre présence.

Expérience interactive

Testez l’expérience ci-dessous. Bougez votre souris dans l’espace et observez comment le personnage réagit à votre “regard” :

▶ Résultat ●

Ce que vous venez d’expérimenter

Vous n’avez pas simplement “bougé une souris”. Vous avez :

Établi une relation avec un personnage
Influencé son état émotionnel par votre proximité
Créé un rythme par vos mouvements (nerveux ou calmes)
Choisi le ton de l’histoire (intimidant, curieux, bienveillant)

Ce que le web permet

Au cinéma : Wong Kar-wai décide de la distance entre la caméra et les personnages. Vous regardez son choix.

Sur le web : Vous êtes le cadreur. Chaque spectateur crée sa propre version de la scène, avec son propre rythme émotionnel.

Le code expliqué

Voici comment cette expérience est construite. Nous utilisons un langage narratif plutôt que du jargon technique.

1. Les données de la scène

Nous commençons par définir les éléments de notre scène :

// Éléments de la scène
const personnage = document.querySelector('#personnage');
const texteEmotion = document.querySelector('#emotion');

// États émotionnels possibles
const emotions = {
  proche: "Vous êtes si près... Je me sens observé.",
  distant: "Vous vous éloignez... Je suis seul.",
  centre: "Votre regard me réchauffe.",
  bord: "Vous regardez ailleurs, comme toujours."
};

Équivalent After Effects : C’est comme définir vos calques et vos variables au début de votre composition.

2. Capter le mouvement

Nous écoutons les mouvements de la souris pour connaître la position du “regard” :

// QUAND le spectateur bouge sa souris
document.addEventListener('mousemove', (geste) => {

  // Capturer la position de son regard
  const regardX = geste.clientX;
  const regardY = geste.clientY;

  // Le personnage est au centre de l'écran
  const centreX = window.innerWidth / 2;
  const centreY = window.innerHeight / 2;

  // Calculer la distance entre le regard et le personnage
  const distanceX = regardX - centreX;
  const distanceY = regardY - centreY;
  const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
});

Équivalent After Effects :

geste.clientX/Y = position d’un null object que vous animez
distance = expression length(position1, position2)

3. Les réactions du personnage

En fonction de la distance calculée, le personnage change d’état émotionnel :

// EMBRANCHEMENT NARRATIF : réaction selon la distance
if (distance < 100) {
  // Regard très proche : intimité
  personnage.classList.add('proche');
  texteEmotion.textContent = emotions.proche;

} else if (distance < 300) {
  // Regard à distance moyenne : présence
  texteEmotion.textContent = emotions.centre;

} else {
  // Regard éloigné : solitude
  personnage.classList.add('distant');
  texteEmotion.textContent = emotions.distant;
}

// Le personnage suit le regard selon un axe de rotation
const rotationX = (distanceY / window.innerHeight) * 10;
const rotationY = (distanceX / window.innerWidth) * 10;
personnage.style.transform = `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;

Équivalent After Effects :

Les if/else = expressions conditionnelles comme vous en utilisez déjà
style.transform = propriétés Transform des calques (scale, rotation)

Ce code raconte une histoire en 3 actes :

Exposition : “Quand le spectateur bouge sa souris…” → établit la règle d’interaction
Conflit : “Calculer la distance…” → mesure la relation entre spectateur et personnage
Résolution : “Embranchement narratif…” → l’histoire réagit à cette relation

Variations narratives possibles

Cette même mécanique d’interaction peut raconter des histoires très différentes :

Version contemplative

Un personnage solitaire qui trouve du réconfort quand vous vous approchez doucement

Version inquiétante

Une créature qui vous traque, dont les yeux vous suivent partout

Version romantique

Deux personnages dont la connexion se renforce selon votre regard

Version abstraite

Des formes/couleurs qui dansent selon vos mouvements, comme une peinture vivante

Exercices

Exercice 1 : Changer l’émotion

Modifiez les textes dans l’objet emotions pour raconter une histoire différente :

Un personnage timide qui a peur quand vous approchez ?
Un guide mystérieux qui vous donne des indices selon votre position ?
Un narrateur sarcastique qui commente vos mouvements ?

Exercice 2 : Ajouter du son

Intégrez un élément audio qui change de volume selon la distance :

// Quand le spectateur est proche, le son devient plus fort
const musique = document.querySelector('#musique-ambiance');
musique.volume = 1 - (distance / 500); // Volume inversement proportionnel à la distance

Exercice 3 : Multiples personnages

Et si plusieurs personnages réagissaient différemment à votre regard ?

Un qui vous fuit
Un qui vous suit
Un qui reste indifférent

Ce que vous avez appris

Interaction = Narration

Un simple mouvement de souris devient un outil pour raconter une relation, une émotion, une histoire

Le code comme scénario

Les conditions (if/else) sont des embranchements narratifs, pas juste de la logique

Le spectateur co-auteur

Chaque personne crée sa propre version de la scène par ses gestes

Prochaine étape

Dans le chapitre suivant, nous explorerons comment les clics deviennent des choix narratifs avec “L’histoire à plusieurs voix”.

Vous passerez du rôle de cadreur à celui de monteur, tissant une histoire à partir de fragments audio.

Chapitre 2 : L’histoire à plusieurs voix →