Spatial Interfaces (Spatial UI)

The concept

A spatial interface places UI elements in 3D space rather than a 2D plane. Types: head-locked (follows head), world-locked (anchored in space), body-locked. Rules: legible at 1-4m, minimum angular size, avoid visual fatigue by placing in comfort zone.

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

Going further

Explore other free courses on the Workshops page.