Kamel Ghabte · Cours · Gratuit

Ancrage spatial en AR

Comprendre comment ancrer un contenu digital à un point fixe dans l'espace réel.

Le concept

Un ancrage spatial (spatial anchor) attache un objet virtuel à un point du monde réel. Même quand la caméra bouge, l'objet reste à sa position. En AR, on calcule la transformation monde→caméra à chaque frame. En p5.js, on simule en gardant une position fixe et en appliquant un offset selon le mouvement simulé de la caméra.

Le code

// Spatial anchor simulation: object stays fixed as 'camera' moves
let anchorX = 200, anchorY = 140; // fixed world position
let camX = 0, camY = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  // Camera follows mouse slowly (simulating head movement)
  camX = lerp(camX, mouseX - width/2, 0.05);
  camY = lerp(camY, mouseY - height/2, 0.05);
  // World origin indicator
  stroke(60,70,90,80); strokeWeight(1);
  line(0, height/2, width, height/2);
  line(width/2, 0, width/2, height);
  // Anchored object: screen pos = world pos - camera offset
  let sx = anchorX - camX, sy = anchorY - camY;
  noStroke(); fill(55, 227, 195);
  ellipse(sx, sy, 28, 28);
  fill(255,255,255,120); textAlign(CENTER);
  text('anchor', sx, sy + 24);
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.

Pratiquer, collaborer, déployer — en 15 min.

Réserver un appel →