Gyroscope example for Hydra with p5js

hydraP5jsGyroscope.js

//p5 sketch from https://editor.p5js.org/remarkability/sketches/1D90zhu4a
p = new P5()
let permissionGranted = false;
let cx, cy;
cx = p.width/2;
cy = p.height/2;
  // DeviceOrientationEvent, DeviceMotionEvent
  if (typeof(DeviceOrientationEvent) !== 'undefined' && typeof(DeviceOrientationEvent.requestPermission) === 'function') {
    // ios 13 device
    DeviceOrientationEvent.requestPermission()
      .catch(() => {
        // show permission dialog only the first time
        let button = createButton("click to allow access to sensors");
        button.style("font-size", "24px");
        button.center();
        button.mousePressed( requestAccess );
        throw error;
      })
      .then(() => {
        // on any subsequent visits
        permissionGranted = true;
      })
  } else {
    // non ios 13 device
    p.textSize(48);
    // text("non ios 13 device", 100, 100);
    permissionGranted = true;
  }

function requestAccess() {
  DeviceOrientationEvent.requestPermission()
    .then(response => {
      if (response == 'granted') {
        permissionGranted = true;
      } else {
        permissionGranted = false;
      }
    })
  .catch(console.error);
  
  this.remove();
}
p.draw=()=>{
if (!permissionGranted) return;

  // rotationX, rotationY
  const dx = p.constrain(p.rotationY, -3, 3);
  const dy = p.constrain(p.rotationX, -3, 3);
  cx += dx*2;
  cy += dy*2;
  cx = p.constrain(cx, 0, p.width);
  cy = p.constrain(cy, 0, p.height);
}
shape(4,0.1).scroll(()=>cx/innerWidth,()=>cy/innerHeight).out()