Profondeur et stéréoscopie

Le concept

La stéréoscopie exploite la parallaxe binoculaire : l'œil gauche et le droit voient des images légèrement décalées, le cerveau interprète ce décalage comme une profondeur. En VR, deux caméras sont rendues avec un écart interocculaire (~6.4cm). En p5.js, on simule la profondeur par le flou atmosphérique, l'échelle et la parallaxe de la souris.

Le code

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

Pour aller plus loin

Explorez les autres cours gratuits sur la page Ateliers.