How to display text sequentially using P5.js deviceMoved() function?

I am currently trying to make a program where the text changes as the phone moves every couple value(s) using the P5.JS deviceMoved() function. (the gif below displays how i wanted the text to change eventually as the device moved)

As seen on the code below, I’ve put all the text in the array and I wanted to change the index to +1 each time say the move value ads 30 and repeat until all the text is gone.

let button;
let permissionGranted = false;
let nonios13device = false;

let cx, cy

let value = 0;

var myMessages = ["The", "Quick", "Brown", "Fox", "Jumped", "Over", "The", "Lazy", "Dog"];
var index = 0;


function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255)

  text(myMessages[index], width / 2, height / 2);
  fill(value);
  text(value, width / 3, height / 3);
  textSize(30)
}

function deviceMoved() {
  value = value + 5;
  if (value > 255) {
    value = 0;
  }
}

function onMove() {
  var currentValue = value + 30;

  if (value = currentValue) {
    index++;
    return;
  }

  if (index >= myMessages.length) {
    index = 0;
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

I think my problem is within the onMove function, where I need to define the current value and what values could change the text, I’m fairly new at this so any insight/solution to do this would be highly appreciated 🙂

Thank you!

Answer

There are several issues related to the onMove function. First and foremost it is never called, and unlike deviceMoved it is not a special function that p5.js automatically invokes. Additional issues:

function onMove() {
  // You create a currentValue variable that is just value + 30.
  // Within the same function, checking if value is >= currentValue, 
  // assuming that is what you intended, will be fruitless because it
  // is never true.
  // What you probably want to do is declare "currentValue" as a global
  // variable and check the difference between value and currentValue.
  var currentValue = value + 30;

  // This is the assignment operator (single equal sign), I think you meant
  // to check for equality, or more likely greater than or equal to.
  if (value = currentValue) {
    index++;
    // You definitely do not want to return immediately here. This is where
    // you need to check for the case where index is greater than or equal
    // to myMessages.length
    return;
  }

  if (index >= myMessages.length) {
    index = 0;
  }
}

Here’s a fixed version:

function deviceMoved() {
  value = value + 5;
  if (value > 255) {
    // When value wraps around we need to update currentValue as well to
    // keep track of the relative change.
    currentValue = 255 - value;
    value = 0;
  }

  onMove();
}

let currentValue = 0;
function onMove() {
  if (value - currentValue >= 30) {
    // Update currentValue so that we will wait until another increment of
    // 30 before making the next change.
    currentValue = value;
    index++;

    // We only need to make this check after we've incremented index.
    if (index >= myMessages.length) {
      index = 0;
    }
  }
}

In order to test this out on my mobile device (iOS 14) I had to add some code to request access to the DeviceMotionEvent, and host it in an environment using HTTPS and not embedding in an iframe. You can see my code on glitch and run it live here.