VR Teleportation

The concept

Teleportation is the most comfortable VR locomotion (avoids cybersickness). The user aims at a floor point with a ballistic arc, a marker confirms the destination, and teleportation executes with a fade. Instant (cut), fade, and dash variants offer different comfort levels.

The code

// VR teleportation arc simulation
let destX, destY, teleporting = false, fade = 0;
function setup() { createCanvas(400, 280); destX = width/2; destY = height-40; }
function draw() {
  background(11, 15, 20);
  // Ballistic arc toward mouse
  stroke(55, 227, 195, 150); strokeWeight(2); noFill();
  beginShape();
  for (let t = 0; t <= 1; t += 0.05) {
    let x = lerp(width/2, mouseX, t);
    let y = lerp(height-40, mouseY, t) - sin(t*PI)*80;
    vertex(x, y);
  }
  endShape();
  // Destination marker
  fill(55,227,195,200); noStroke();
  ellipse(mouseX, mouseY, 20, 8);
  // Player
  fill(200,200,255,180);
  ellipse(width/2, height-40, 24, 24);
  // Fade on click
  if (teleporting) fade = min(fade+8, 255);
  if (fade > 0) { fill(0,0,0,fade); rect(0,0,width,height); }
}
function mousePressed() { teleporting=true; }
function mouseReleased() { teleporting=false; fade=0; }

Going further

Explore other free courses on the Workshops page.