let x = 0;

let button;

​

function setup() {

  createCanvas(400, 400);

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

  button.mousePressed(requestOrientationPermission);

  button.position(100, 100)

}

​

function draw() {

  background(220);

  if (!orientationPermissionRequested) {

    drawOrientationRequestButton();

  }

  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();

        } else {

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

        }

      })

      .catch(console.error);

  } else {

    // Handle regular non-iOS 13+ devices.

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

  }

}

​

function mousePressed() {

  // Check if the orientation button is pressed

  const buttonWidth = 200;

  const buttonHeight = 50;

  if (!orientationPermissionRequested &&

      mouseX > width / 2 - buttonWidth / 2 && mouseX < width / 2 + buttonWidth / 2 &&

      mouseY > height / 2 - buttonHeight / 2 && mouseY < height / 2 + buttonHeight / 2) {

    requestOrientationPermission();

    orientationPermissionRequested = true;

  }

​

  // Existing mousePressed code...

}

​

​

function drawOrientationRequestButton() {

  const buttonWidth = 200;

  const buttonHeight = 50;

  const buttonText = 'Enable Orientation';

​

  push(); // Start a new drawing state

  fill(255, 0, 0); // Set button color (red)

  rectMode(CENTER);

  rect(width / 2, height / 2, buttonWidth, buttonHeight, 20); // Draw the button

  fill(255); // Set text color (white)

  textSize(16);

  textAlign(CENTER, CENTER);

  text(buttonText, width / 2, height / 2); // Draw the text on the button

  pop(); // Restore original drawing state

}

​

function handleOrientation(event) {

 x = event.alpha;

}

​

function hideButton(){

 button.hide() 

}