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 →