Please create manual about pointerLock with p5.js it is very important in WebGL

[Worseize]

I am still do not understand how it works . I read article 10 times

• https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
  But there is no p5.js library , so i try to include pointerLock in my project and can`t

-My problem is that after i go fullscreen and then trying to lockPointer it unlock at the same time (I see that in console).

-SETUP:

  myCanvas = createCanvas(width, height, WEBGL);
  myCanvas.mouseClicked(tryToMouseLock); 
  canvas = document.getElementById('defaultCanvas0');
  canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
  document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
  document.addEventListener('pointerlockchange', lockChangeAlert, false);
  document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

-FUNCTIONS:

function lockChangeAlert() {
  if (document.pointerLockElement === canvas ||
      document.mozPointerLockElement === canvas) {
    console.log('The pointer lock status is now locked');
    document.addEventListener("mousemove", updatePosition, false);
  } else {
    console.log('The pointer lock status is now unlocked');  
    document.removeEventListener("mousemove", updatePosition, false);
  }
}
function updatePosition(e) {
  console.log(e.movementX + "   " + e.movementY);
}
function tryToMouseLock(){
    fullscreen(!fullscreen());
    canvas.requestPointerLock();
}

[Worseize]

I did it! https://worseize.github.io/webGL_rocket_3D/ live example
wierd thing is that to get access to canvas I should use pure js without p5 or I know less than it should be.

function setup(){
     pointerLockSetup();
}
function pointerLockSetup(){
	var canvas = document.querySelector('canvas');
	canvas.onclick = function(){
		if(scene === 0){
		  scene = 1;
		  //AIM
		  createAim('img/aim.png');
		  //GUN
		  endReload('img/akInHands.png');
		  canvas.requestPointerLock();
		}else if (scene === 1){
			if(pointerLock === false){
				scene = 0;
				removeElements();
			}
		}
	};
	canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;

	document.addEventListener('pointerlockchange', lockChangeAlert, false);
	document.addEventListener('mozpointerlockchange', lockChangeAlert, false);

}

function lockChangeAlert() {
  if (document.pointerLockElement === canvas || document.mozPointerLockElement === canvas) {
    console.log('The pointer lock status is now locked');
    document.addEventListener("mousemove", updatePosition, false);
    pointerLock = true;
  } else {
    console.log('The pointer lock status is now unlocked');  
    document.removeEventListener("mousemove", updatePosition, false);
    pointerLock = false;
  }
}

function updatePosition(e){
  prevX = -e.movementX + mouseX;
  prevY = -e.movementY + mouseY;
}

[shiffman]

Wow, great work! Sorry I wasn't able to get to look at it until now! I think this is a bit beyond the scope of the book, but incredibly useful info! If you have a specific suggestion as to where I should include a reference feel free to let me know!