كمال غابتي · دورة · مجاني

العمق والصور المجسمة

إنشاء تأثيرات العمق ومحاكاة الرؤية المجسمة في p5.js.

المفهوم

الصور المجسمة تستغل تشتت العينين: العين اليسرى واليمنى ترى صورتين منزاحتين قليلاً، يفسر الدماغ هذا كعمق. في VR، تُرسم كاميرتان بمسافة بين العينين (~6.4سم).

الكود

// Depth: parallax layers simulating 3D depth
let layers = [];
function setup() {
  createCanvas(400, 280);
  for (let i = 0; i < 5; i++) {
    layers.push({z:i, objects:[]});
    for (let j = 0; j < 4+i*2; j++) {
      layers[i].objects.push({x:random(width),y:random(height)});
    }
  }
}
function draw() {
  background(11, 15, 20);
  let mx = (mouseX - width/2) / width;
  for (let l of layers) {
    let parallax = mx * (l.z+1) * 15;
    let alpha = map(l.z, 0, 4, 40, 220);
    let sz = map(l.z, 0, 4, 4, 16);
    noStroke(); fill(55,227,195,alpha);
    for (let o of l.objects)
      ellipse(o.x + parallax, o.y, sz, sz);
  }
}

للمزيد

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

تدرب، تعاون، انشر — في 15 دقيقة.

← احجز مكالمة