Prototyping an AR Experience

The concept

Prototyping an AR experience always starts on paper (wizard of oz): simulate interactions in front of a jury before coding. Tools: p5.js + webcam (2D prototype), Three.js + WebXR (web AR prototype), Unity + AR Foundation (native prototype). Priority: test utility before testing tech.

The 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; }

Going further

Explore other free courses on the Workshops page.