iOS15: How to use rotationX, accelerationX

p5.js Beginners
1

Hi,

I’d like to write some webapps with my students, but the old code doesn’t work anymore, because of security reasons, I think. So found this video: https://www.youtube.com/watch?v=AbB9ayaffTc and tried it, but it doesn’t work because of the following error near line 13 (" DeviceOrientationEvent.requestPermission().catch(() => { ") with “SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)”

This my code and a link to it https://editor.p5js.org/ingo.bartling/sketches/lrU8VeAmC

Any help and tipps would be great.

Thanks in advance,
Ingo

let permissionGranted = false;
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(() => {
  		//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);
}
2

You’re invoking method Promise::then() empty, w/o passing any callback parameters to it:

Instead your fat-arrow function gotta be inside Promise::then()'s parentheses:

      .then(() => permissionGranted = true)

There’s no builtin function called typeOf() in JS. Instead JS has a unary operator called typeof:

Also ‘undfined’ isn’t 1 of the 8 possible strings. Rather it’s ‘undefined’:
typeof DeviceOrientationEvent != 'undefined'

if (typeof DeviceOrientationEvent != 'undefined' && DeviceOrientationEvent.requestPermission) {

The code block above can be significantly shortened like this:

    .then(response => permissionGranted = response == 'granted')
3

Thank you! Looks great. I’ll give it a try.