OrbitCam and RawMouse

/*

trackball type camera controls without libraries or quaternions

uses two matrices instead

this is the p5js version

processingjs version here: https://www.openprocessing.org/sketch/550454

*/

​

// var canvas, pointerLock;

let sensitivity = 0.1;

let acc, delta;

let camEye, camUp, camPitch;

let eye, up;

​

// var pointerLock;

// var dx, dy;

// document.addEventListener('pointerlockchange', function(){pointerLock = !pointerLock;}, false);

// document.addEventListener("mousemove", function(e){dx = e.movementX; dy = e.movementY; moved();}, false);

// var canvas = document.getElementById("pjs");

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  stroke(255);

  noFill();

​

  acc = p5.Matrix.identity();

  delta = p5.Matrix.identity();

  camEye = createVector(0, 0, 500);

  eye = camEye.copy();

  camUp = createVector(0, 1, 0);

  up = camUp.copy();

  camPitch = createVector(1, 0, 0);

}

​

// function mouseClicked() {

//  if(pointerLock) {

//    document.exitPointerLock();

//  } else {

//    canvas.requestPointerLock();

//  }

// }

​

// function moved() {

//  if(!pointerLock) return;

//  // ends up opposite of the processingjs version for some reason

//  var xx = -dx * sensitivity;

//  var yy = -dy * sensitivity;

​

//   eye = mult(acc, camEye.copy());

//   up = mult(acc, camUp.copy());

//   var pitch = mult(acc, camPitch.copy());

​

//   delta.rotate(xx*sensitivity, up.x, up.y, up.z);

//   delta.rotate(yy*sensitivity, pitch.x, pitch.y, pitch.z);

//  acc = delta.mult(acc);

//  delta = p5.Matrix.identity();

// }

​

function mouseDragged() {

  let xx = (pmouseX - mouseX) * sensitivity;

  let yy = (pmouseY - mouseY) * sensitivity;

​

  eye = mult(acc, camEye.copy());

  up = mult(acc, camUp.copy());

  let pitch = mult(acc, camPitch.copy());

​

  delta.rotate(-xx*sensitivity, up.x, up.y, up.z);

  delta.rotate(yy*sensitivity, pitch.x, pitch.y, pitch.z);

  // acc.preApply(delta);

  delta.mult(acc);

  acc = delta.copy();

  // delta.reset();

  delta = p5.Matrix.identity();

}

​

function mult(mat, pv) {

  return createVector(

    mat.mat4[0]*pv.x + mat.mat4[1]*pv.y + mat.mat4[2]*pv.z + mat.mat4[3],

    mat.mat4[4]*pv.x + mat.mat4[5]*pv.y + mat.mat4[6]*pv.z + mat.mat4[7],

    mat.mat4[8]*pv.x + mat.mat4[9]*pv.y + mat.mat4[10]*pv.z + mat.mat4[11]

  );

}

​

function draw() {

  // if(frameCount%60==0)println(frameRate());

  background(0);

  camera(

    eye.x, eye.y, eye.z,

    0, 0, 0,

    up.x, up.y, up.z

  );

  box(100);

  translate(110, 0, 0);

  box(100);

  translate(-110, -110, 0);

  box(100);

}