let x = 0;

let button; // Declare button globally so it can be accessed by other functions

​

function setup() {

  createCanvas(400, 400);

  button = createButton('Request Orientation Permission');

  button.mousePressed(requestOrientationPermission);

  button.position(100, 100);

}

​

function draw() {

  background(220);

  if (!orientationPermissionRequested) {

    // Since the button is now controlled via p5 DOM, this is likely unnecessary.

  }

  text(x, 200, 200);

  text(deviceOrientation, 250, 200);

}

​

function requestOrientationPermission() {

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

    DeviceOrientationEvent.requestPermission()

      .then(permissionState => {

        if (permissionState === 'granted') {

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

          hideButton(); // Hide the button after permission is granted

        } else {

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

        }

      })

      .catch(console.error);

  } else {

    // Handle regular non-iOS 13+ devices.

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

    hideButton(); // Hide the button since permission is auto-granted on these devices

  }

  orientationPermissionRequested = true; // Ensure this is set to true here

}

​

function hideButton() {

  button.hide(); // This will hide the button

}

​

function handleOrientation(event) {

  x = event.alpha; // Update the global variable 'x' with the alpha value from the event

}

​