Open In App

p5.js requestpointerlock() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The function requestPointerLock() is used to  locks the pointer to its current position and  then makes it invisible. All browser does not support this method. It requests that the pointer be locked to a DOM element target.

We can use movedX and movedY to get the difference the mouse was moved since the last call of draw.

It enables us to create a sceneries that are not dependent on the movement of mouse.

In the locked state the system mouse cursor must be hidden. Movement and button presses of the mouse must not cause the window to lose focus

 

Syntax:

requestPointerLock()

Example:

Javascript




// Set the function
function setup() {
  
    // Set the frame rate  
    frameRate(5);
  
    // Set the canvas size
    createCanvas(600, 400, WEBGL);
  
    // Set the request pointer lock function 
    requestPointerLock();
}
  
// Set the draw function
function draw() {
  
    // Set the background colour
    background(175);
  
    // Set the camera
    let cX = random(-10, 10);
    let cY = random(-10, 10);
    let cZ = random(-10, 10);
  
    camera(cX, cY,
        cZ + (height / 2) / tan(PI / 6),
        cX, 0, 0, 0, 1, 0);
  
    ambientLight(255);
  
    rotateX(-movedX * 0.1);
    rotateY(movedY * 0.1);
  
    noStroke();
    normalMaterial();
  
    box(100, 100, 100);
}


Output:

In the above example, we can see that the pointer becoming invisible when we are making any changes in the code we have to click “Esc” button for again making pointer visible.


Last Updated : 01 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads