الواجهات المكانية

المفهوم

الواجهة المكانية تضع عناصر UI في الفضاء ثلاثي الأبعاد بدلاً من مستوى ثنائي. أنواع: مرتبط بالرأس، مرتبط بالعالم، مرتبط بالجسم. قواعد: مقروءة من 1-4م.

الكود

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

للمزيد

استكشف الدورات المجانية الأخرى على صفحة الورش.