VR Comfort (Vignetting, Anchors)

The concept

Cybersickness is caused by the conflict between vestibular (no real movement) and visual (perceived movement) systems. Solutions: dynamic vignetting (darken edges during movement), fixed visual anchors (virtual nose, cockpit frame), reducing FOV during acceleration.

The code

// VR comfort: dynamic vignette on movement
let speed = 0, posX = 0;
function setup() { createCanvas(400, 280); }
function draw() {
  background(11, 15, 20);
  // Virtual world (moves)
  posX += speed; speed *= 0.92;
  if (keyIsDown(LEFT_ARROW)) speed -= 0.4;
  if (keyIsDown(RIGHT_ARROW)) speed += 0.4;
  push();
  translate(posX % width, 0);
  for (let x = -width; x < width*2; x += 60) {
    stroke(60,70,90,120); strokeWeight(1);
    line(x, 0, x, height);
  }
  pop();
  // Vignette (increases with speed)
  let v = min(abs(speed)*8, 200);
  noStroke();
  for (let r = min(width,height)/2; r > 0; r -= 4) {
    let alpha = map(r, 0, min(width,height)/2, v, 0);
    fill(0, 0, 0, alpha);
    ellipse(width/2, height/2, r*2, r*2);
  }
  fill(255); textAlign(CENTER);
  text('← → pour se déplacer', width/2, height-20);
}

Going further

Explore other free courses on the Workshops page.