The function deviceShaken() function is called when the device total acceleration changes accelerationX and accelerationY values is more than the threshold value.
The default threshold is set to 30, and it can be changed using setShakeThreshold() function.
It can be used as a sensor in mobile devices like detecting motion, acceleration, rotation, heading, and location.
Syntax:
deviceShaken()
Now we will run some examples on android phones.
Step 1: Open online web editor of p5.js on the mobile phone using any browser “https://editor.p5js.org/”
Step 2: Write the following code in the editor section and run it to see the output.
Example 1:
// Set the variable as 0 var value = 0;
// Set the function function setup() {
createCanvas(windowWidth, windowHeight);
// Set the background as value which
// will be dynamic
background(value);
} // Set the draw function function draw() {
// Set the properties of text
background(value);
fill(0, 0, 255);
textAlign(CENTER, CENTER);
textSize(25);
// Set the limit for value
value = constrain(value - 2, 0, 200)
// If the value is greater than 10
if (value > 10) {
text( "Shaking Device" , width / 2, height / 2);
} else {
text( "Device is Silent " , width / 2, height / 2);
}
} function deviceShaken() {
// Now increase the value.
value = constrain(value + 5, 0, 255)
} |
Output: When we shake the device then we will get the output
Example 2:
// Set value to zero let value = 0; // Set the draw function function draw() {
// When the device is moved
// in the all direction then
// the colour fill filled
fill(value);
// Set the shape of the Graphics
rect(50, 50, 100, 100);
} // Apply the deviceShaken function function deviceShaken() {
// Increment the value everytime by 10
value = value + 10;
// If the value become greater than 255
// then reset the value to zero.
if (value > 255) {
value = 0;
}
} |
Output:
Reference: https://p5js.org/reference/#/p5/deviceShaken