let debugStr = "";

let permissionButton;

​

​

function setup()

{

  createCanvas(windowWidth, windowWidth, WEBGL);

  angleMode(DEGREES);

  permissionButton = createButton("Get Permission");

  permissionButton.mouseClicked(GetAccelerationPermissions);

}

​

​

function draw()

{

  ClearCanvas();

  DrawSquare();

  if (debug)

    Debug();

}

​

​

function ClearCanvas()

{

  background(50, 100);

}

​

​

function DrawSquare()

{

  push();

  {

    rotate(rotationZ || 0);

    strokeWeight(4);

    stroke(255, 250, 40);

    noFill();

    rectMode(CENTER);

    rect(0, 0, 200, 200);

  }

  pop();

}

​

​

function Debug()

{

  push();

  {

    noStroke();

    fill(255);

    textSize(16);

    let x = 40;

    let y = height - 60;

    text(`X Rotation: ${rotationX}`, x, y);

    text(`Y Rotation: ${rotationY}`, x, y + 16);

    text(`Z Rotation: ${rotationZ}`, x, y + 32);

    text(debugStr, x, y + 48);

  }

  pop();

}

​

​

function DebugPrint(obj)

{

  debugStr = `${obj}`;

}

​

​

function GetAccelerationPermissions()

{

  let getPermission = DeviceMotionEvent.requestPermission;

  if (typeof(getPermission) !== "function") return;

  getPermission().then(response =>

  {

    if (response == 'granted')

    {

      DebugPrint("accelerometer permission granted");

      // Do stuff here

    }

  });

}

​