Interfaces spatiales (spatial UI)

Le concept

Une interface spatiale place les éléments UI dans l'espace 3D plutôt que sur un plan 2D. On distingue : UI dièse (head-locked, suit la tête), UI du monde (world-locked, ancrée dans l'espace), UI du corps (body-locked). Les règles : lisibilité à 1-4m, taille angulaire minimale, éviter la fatigue visuelle par un placement en zone confort.

Le code

// Spatial UI: elements positioned in virtual space
// Simulated with perspective projection
let panels = [
  {x:-160, y:0, z:200, label:'Galerie'},
  {x:0,    y:0, z:180, label:'Info'},
  {x:160,  y:0, z:200, label:'Carte'},
];
let t = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20); t += 0.01;
  for (let p of panels) {
    let px = p.x * cos(t*0.3) - p.z * sin(t*0.3);
    let pz = p.x * sin(t*0.3) + p.z * cos(t*0.3);
    let scale = 200 / (pz + 300);
    let sx = width/2 + px * scale;
    let sy = height/2 + p.y * scale;
    let sz = max(60*scale, 20);
    noStroke(); fill(30,40,55,200);
    rectMode(CENTER); rect(sx, sy, sz, sz*0.6, 4);
    fill(55,227,195,200); textAlign(CENTER,CENTER); textSize(sz*0.18);
    text(p.label, sx, sy);
  }
}

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.