Interactive Narrative & Branching

The concept

Interactive narrative replaces linearity with a state graph. Each node is a scene, edges are choices. Model as a finite state machine (FSM). In XR design, branches represent spatial exploration paths. Challenge: ensure all paths lead to satisfying resolution.

The code

// Interactive narrative: FSM with choices
let state = 'intro';
const story = {
  intro: {text:'Vous entrez dans la médina.', choices:[{label:'Aller au souk',to:'souk'},{label:'Aller au hammam',to:'hammam'}]},
  souk: {text:'Le souk est animé. Vous trouvez un zelligeur.', choices:[{label:'Parler',to:'zelligeur'},{label:'Repartir',to:'intro'}]},
  hammam: {text:'Vapeur et silence. Une vieille dame vous sourit.', choices:[{label:'La saluer',to:'end'},{label:'Repartir',to:'intro'}]},
  zelligeur: {text:'Il vous montre comment coder un motif.', choices:[{label:'Fin',to:'end'}]},
  end: {text:'Vous repartez, quelque chose a changé.', choices:[]},
};
function setup() { createCanvas(400, 280); }
function draw() {
  background(11,15,20);
  let s = story[state];
  fill(200); textAlign(LEFT); textWrap(WORD);
  text(s.text, 20, 40, 360);
  s.choices.forEach((c,i) => {
    fill(mouseY>120+i*44&&mouseY<156+i*44 ? [55,227,195]:[100,150,140]);
    text('› '+c.label, 20, 140+i*44);
  });
}
function mousePressed() {
  story[state].choices.forEach((c,i) => { if(mouseY>120+i*44&&mouseY<156+i*44) state=c.to; });
}

Going further

Explore other free courses on the Workshops page.