PRESSURE & TILT CONTROL ON P5js CANVAS

sketch.js

let canvas;
let pointerX = 0;
let pointerY = 0;
let isOnCanvas = false;

let inclinationX = 0;
let inclinationY = 0;

let pressure = 0;
let diameter = 0;

// ROTATION VARIABLES
// Measured from the center of the shape
let pivot_x = pointerX, pivot_y = pointerY;    

// Position at which the pivot point should be moved in the world
let target_x = pointerX, target_y = pointerY; 

let targetAngle = 0;


//-----------------------------------------------------
//-----------------------------------------------------


function setup() {
  canvas = createCanvas(400, 400);
  canvas.id('canvas');
  
  pointerX = mouseX;
  pointerY = mouseY;
  
  let getCanvas = document.getElementById('canvas');

  getCanvas.addEventListener("pointermove", (e) => {
  //console.log("pointerMove");
  
    if (isOnCanvas) {
      inclinationX = event.tiltX;
      inclinationY = event.tiltY;
      pressure = event.pressure;
    
      //console.log(inclinationX + ' ' + inclinationY + ' ' + pressure);
    }
  }, false);

  getCanvas.addEventListener("pointerdown", (e) => {
    //console.log("pointerDown");
    getCanvas.setPointerCapture(e.pointerId);
    isOnCanvas = true;
  
    inclinationX = e.tiltX;
    inclinationY = e.tiltY;
    pressure = e.pressure;
    
  }, false);

  getCanvas.addEventListener("pointerup", (e) => {
    //console.log("pointerUp");
    
    if (isOnCanvas) {
      getCanvas.releasePointerCapture(e.pointerId);
      isOnCanvas = false;
    
      inclinationX = e.tiltX;
      inclinationY = e.tiltY;
      pressure = e.pressure;
    
      //console.log(inclinationX + ' ' + inclinationY + ' ' + pressure);
      
    }
  }, false);

  
} // END SETUP


//-----------------------------------------------------
//-----------------------------------------------------
  
function process_rotate(){
  translate(target_x, target_y); //mouseX & mouseY
  rotate(targetAngle);
  translate(-pivot_x, -pivot_y); // -mouseX & -mouseY
}

function draw() {
  pointerX = mouseX;
  pointerY = mouseY;
  
  pivot_x = pointerX, pivot_y = pointerY;
  target_x = pointerX, target_y = pointerY; 
    
  if(isOnCanvas == false){
    inclinationX = 0;
    inclinationY = 0;
  }
  
  background(220);
  
  // POINTER CENTER    
  noStroke();
  fill(0, 0, 0);
  circle(mouseX, mouseY, 20);
  
  //MAP THE PRESSURE VALUE TO VISIBLE ONES
  diameter = map(pressure, 0, 1, 0, 100);
  
  // ANGLE WE ARE LOOKING FOR TO KEEP TRACK OF THE STYLUS TILT
  targetAngle = atan2(inclinationY,inclinationX);
     
    //soluce from FRANÇOIS with vanilla maths
    // α = 2arctan(y/(x + Math.sqrt(x^2 + y^2)))
    //targetAngle = 2*atan(inclinationY/(inclinationX + Math.sqrt((inclinationX*inclinationX) + (inclinationY*inclinationY))));
    //console.log('angle: ' + (targetAngle))
  
  // LIVE COORDINATES
  text('pressure: ' + pressure, 10, 30);
  text('tilt_X: ' + inclinationX, 10, 50);
  text('tilt_Y: ' + inclinationY, 10, 70);
  text('angle arctan: ' + targetAngle, 10, 90);
  
  // RECTANGLE SHAPE
  push();
    process_rotate()

    noFill();
    stroke(2)
    rectMode(CENTER)
    rect(mouseX,mouseY,diameter,30); // reacts to pen pressure value
    
    noStroke();
    fill('yellow');
    circle(pivot_x, pivot_y, 10); // shows the pivot point 
  pop();
   
  // POINTS FROM STYLUS AT GOOD INCLINATION & PRESSURE VALUE
  push();
    process_rotate();
    noFill();
    stroke(1);
    ellipseMode(CENTER);
    circle(mouseX, mouseY + diameter, 10); // LEFT  || WEST
    circle(mouseX + diameter, mouseY, 10);// DOWN  || SOUTH
    circle(mouseX, mouseY - diameter, 10); // RIGHT || EAST
    circle(mouseX - diameter, mouseY, 10); // UP    || NORTH
  pop();
      
 
  // TILT AXIS & LENGTH
  push();
    fill('red');
    circle(mouseX+inclinationX, mouseY+inclinationY, 10);
  pop();
  
  push();
    fill('blue'); 
    circle(mouseX-inclinationX, mouseY-inclinationY, 10);
  pop();

} // END DRAW