Prototyper une expérience AR

Le concept

Prototyper une expérience AR commence toujours sur papier (wizard of oz) : simuler les interactions devant un jury avant de coder. Les outils : p5.js + webcam (prototype 2D), Three.js + WebXR (prototype web AR), Unity + AR Foundation (prototype natif). La priorité : tester l'utilité avant de tester la techno.

Le code

// AR prototype: overlay on simulated camera
let phase = 0; // 0=paper, 1=digital
function setup() { createCanvas(400, 280); }
function draw() {
  if (phase === 0) {
    // Paper prototype phase: grey world
    background(80, 75, 70);
    fill(200,190,180); noStroke();
    rect(30,40,160,120,4); // "camera view"
    rect(220,60,80,60,4);
    fill(0,0,0,100); textAlign(CENTER);
    text('Maquette papier', width/2, height-30);
  } else {
    // Digital prototype: colored overlay
    background(40, 50, 60);
    fill(55,227,195,150); noStroke();
    ellipse(mouseX, mouseY, 60, 60); // AR overlay
    fill(255,200,0,120);
    rect(mouseX-30, mouseY-10, 60, 20, 4);
    fill(255); textAlign(CENTER);
    text('Prototype digital', width/2, height-30);
  }
}
function mousePressed() { phase = 1-phase; }

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.