let cx, cy;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  cx = width/2;

  cy = height/2;

  if (typeOf(DeviceOrientationEvent) !== 'undfined' && typeOf(DeviceOrientationEvent.requestPermission) === 'function') {

    //iOS13+

    DeviceOrientationEvent.requestPermission().catch(permissionState => {

        //permission dialog

        let button = createButton("Click to allow sensors");

        button.style("font-size","24px");

        button.center();

        button.mousePressed(requestAccess);

        throw error;

      })

      .then() => {

        permissionGranted = true;

      }

  } else {

    textSize(48);

    text("no IOS13+ device");

  }

}

​

function requestAccess() {

    DeviceOrientationEvent.requestPermission()

        .then(response => {

            if (response == 'granted') {

                permissionGranted = true;   

            } else {

                permissionGranted = false;  

            }

        })

        .catch(console.error);

    this.remove();

}

​

function draw() {

    if (!permissionGranted) return;

​

    background(255);

    const dx = constrain(rotationX,-3,3);

    const dy = constrain(rotationY,-3,3);

    cx += dx;

    cy += dy;

    ellipse (cx,cy,200,200);

}

​