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

  document.body.addEventListener('click', function () {

    DeviceOrientationEvent.requestPermission();

    DeviceMotionEvent.requestPermission();

  })

}

​

// Remember the force of the shake

let force = 1;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CENTER);

}

​

function draw() {

  background('white');

  // Map the x location to the left-right tilt of the phone

  let x = map(rotationY, -90, 90, 0, width);

  // Map the y location to the top-down tilt of the phone

  let y = map(rotationX, -90, 90, 0, height);

  noStroke();

  fill('red');

  ellipse(x, y, force*5, force*5); 

  // Map the angle to the horizontal rotation of the phone

  let a = map(rotationZ, 0, 360, 0, TWO_PI);

  // Calculate x and y values at this angle

  let lx = cos(a)*height + width/2;

  let ly = sin(a)*height + height/2;

  stroke('black');

  // Draw a line from the center of the screen to lx and ly

  line(width/2, height/2, lx, ly);

}

​

// Run this code whenever the device is shaken

function deviceShaken(){

  // Calculate the force of the shake

  force = dist(accelerationX, accelerationY, accelerationZ, pAccelerationX, pAccelerationY, pAccelerationZ);

}