Device Motion API Example

let x = 0;

let y = 0;

let speed = 1;

let radiusMin = 30;

let radius;

​

function setup() {

  var canvas = createCanvas(windowWidth, windowHeight);

  noStroke();

  ellipseMode(CENTER);

  //request access to Device Motion API. 

  OpenProcessing.requestDeviceMotion()

    .then(function() {

      //Once user gives access, this function is called. 

      //Also, all the P5js acceleration variables and functions are accessible.

      loop();

    })

  x = windowWidth / 2;

  y = windowHeight / 5;

  radius = radiusMin;

  noLoop();

​

​

}

​

function draw() {

  background(220);

  fill('red');

  x += rotationY * speed;

  x = max(0, min(windowWidth, x)); //constrain within screen

  y += rotationX * speed;

  y = max(0, min(windowHeight, y)); //constrain within screen

  //reduce radius slowly

  radius = max(radiusMin, radius - 2);

  circle(x, y, radius);

}

​

function deviceShaken() {

  radius += 5;

}