let alpha = 0; // Compass direction

let beta = 0;  // Front-to-back tilt

let gamma = 0; // Left-to-right tilt

​

function setup() {

  createCanvas(200, 200);

  // Create a button to request permission

  let button = createButton('Request Orientation Permission');

  button.mousePressed(requestOrientationPermission);

}

​

function draw() {

  background(240);

  text(`Alpha: ${alpha}`, 10, 70);

  text(`Beta: ${beta}`, 10, 90);

  text(`Gamma: ${gamma}`, 10, 110);

}

​

// Define your event handler function somewhere accessible

function handleOrientation(event) {

  alpha = event.alpha;

  beta = event.beta;

  gamma = event.gamma;

}

​

function requestOrientationPermission() {

  if (typeof DeviceOrientationEvent.requestPermission === 'function') {

    DeviceOrientationEvent.requestPermission()

      .then(permissionState => {

        if (permissionState === 'granted') {

          window.addEventListener('deviceorientation', handleOrientation, false);

        } else {

          console.error("Permission not granted for DeviceOrientation");

        }

      })

      .catch(console.error);

  } else {

    // Handle regular non-iOS 13+ devices.

    window.addEventListener('deviceorientation', handleOrientation, false);

  }

}