print("from https://editor.p5js.org/kll/sketches/omvJ6Pfff ");

  print("to https://editor.p5js.org/kll/sketches/MHyC8T2OS ");

  print("ref JAVA https://discourse.processing.org/t/pvector-rotate-use-for-3d/10958 ");

  print("test here https://editor.p5js.org/kll/sketches/BeuQw5dfM ");

}

​

// https://p5js.org/reference/#/p5.Vector/fromAngles

// hack MWPP use [v] mouseX mouseY mouseWheel to create a 3D Vector

​

let p1, p2;

let p2theta, p2phi, p2length;

​

function setup() {

  createCanvas(600, 600, WEBGL);

  info();

  info_print();

  p1 = createVector(0, 0, 0); //20, 20, 20);

  p2 = createVector(100, 100, 100);

  p2length = p2.mag();

  print_ang();

}

​

function draw() {

  background(100, 100, 0);

  PTZ();

}

​

function draw_object() { //_________________ called by / from inside PTZ

  strokeWeight(2);

  stroke(200, 0, 200);

  PVline(p1, p2); //________________________ draw a line from Pvector 

  vline(p1, p2); //_________________________ the tool to rotate coordinate system so 3D primitives can be drawn on any line

}

​

let xang = 0; //____________________________ mousewheelplusplus key x y z

let yang = 0;

let zang = 0;

let headxy = 0;

let headyz = 0;

let headxz = 0;

​

function vline(v1, v2) {

  let vd = p5.Vector.sub(v2, v1);

​

  push();

  axis(100, 2); //_______________________________________ system ORIGIN

  translate(p1.x, p1.y, p1.z);

  //line(0, 0, 0, vd.x, vd.y, vd.z);

  PVline(createVector(0, 0, 0), vd);

  // try a 3D heading hack

  let vdxy = createVector(vd.x, vd.y, 0);

  headxy = vdxy.heading();

  let vdyz = createVector(vd.y, vd.z, 0);

  headyz = vdyz.heading();

​

  axis(100, 5); //_______________________________________ system AFTER translation

  let vdxz = createVector(vd.x, vd.z, 0); //__________ step 1

  headxz = vdxz.heading();

  rotateZ(-headxz);

​

​

​

  //  rotateY(-headxy);

  //  rotateZ(headxy);

  //  rotateY(-headxy);

  //  rotateZ(headyz);

  //  rotateX(-headyz);

  rotateZ(zang); // play manually [x][y][z] and mousewheel

  rotateX(xang); //

  rotateY(yang); //

  axis(50, 2);

​

  pop();

}

​

​

function axis(l, w) {

  push();

  strokeWeight(w);

  stroke(200, 0, 0);

  line(0, 0, 0, l, 0, 0); //____________ X RED

  stroke(0, 200, 0);

  line(0, 0, 0, 0, l, 0); //____________ Y GREEN  and cylinder head

  stroke(0, 0, 200);

  line(0, 0, 0, 0, 0, l); //____________ Z BLUE

  translate(0, l, 0);

  noStroke();

  fill(0, 200, 0);

  cylinder(5, 5 * w);

  pop();

}

​

function print_ang() {

  print("xang " + nf(degrees(xang), 0, 2) + " yang " + nf(degrees(yang), 0, 2) + " zang " + nf(degrees(zang), 0, 2) +

    " // headxy " + nf(degrees(headxy), 0, 2) + " headxz " + nf(degrees(headxz), 0, 2) + " headyz " + nf(degrees(headyz), 0, 2));

}

​

function PVline(p1, p2) {

  line(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z);

}

​

​

​

​

​

​

​

​

​

​

​

​

​

//_____________________________________ PTZ tab

​

document.oncontextmenu = function() {

  return false;

}

​

let mode = 0;

let Zmag = 2;

let Zaxis = -30;

let Xmag = 0,

  Ymag = 0;

let newXmag = 0,

  newYmag = 0,

  newZmag = 0;

let newxpos = 0,

  newypos = 0; // for PAN

let xposd = 0,

  yposd = 0; // for PAN

let diagp = false;

​

//_________________________________________________________________ ROTATE / TILDE and MOVE / PAN

function mousePressed() {

  if (mouseButton == LEFT) mode = 1; // ORBIT

  else if (mouseButton == RIGHT) mode = 2; // PAN

}

​

//_________________________________________________________________ mouse PT end

function mouseReleased() {

  mode = 0;

}

​

//_________________________________________________________________ mouseWheel ZOOM

function mouseWheel(event) {

  if (diagp) print(event.delta);

  if (keyIsPressed) { //_________________________________________ this is not PTZ, its MWPP for above vector only

    if (key == 'v') {

      p2theta = map(mouseX, 0, width, 0, TAU);

      p2phi = map(mouseY, 0, height, 0, TAU);

      p2length += event.delta * 1.0;

      p2 = p5.Vector.fromAngles(p2theta, p2phi, p2length);

      print("[v]", nf(p2theta, 0, 2), nf(p2phi, 0, 2), nf(p2length, 0, 2));

    } else {

      if (key == 'x') xang += event.delta * 0.00581;

      if (key == 'y') yang += event.delta * 0.00581;

      if (key == 'z') zang += event.delta * 0.00581;

      print_ang();

    }

  } else //________________________________________________________ PTZ mouse wheel part

    Zmag += event.delta * 0.1;

  if (diagp) print("Zmag: " + nf(Zmag, 1, 2));

  return false;

}

​

//_________________________________________________________________ key up down left right Page up page Down

function keyPressed() {

  if (keyCode == UP_ARROW) Ymag -= 0.1;

  if (keyCode == DOWN_ARROW) Ymag += 0.1;

  if (keyCode == RIGHT_ARROW) Xmag -= 0.1;

  if (keyCode == LEFT_ARROW) Xmag += 0.1;

  if (keyCode == 33) Zmag -= 0.5; // page UP

  if (keyCode == 34) Zmag += 0.5; // page DOWN

​

  if (key == 'i') console.log("windowWidth " + windowWidth + " windowHeight " + windowHeight + " width " + width + " height " + height);

  if (diagp) print("key: " + key + " keyCode: " + keyCode);

}

//_________________________________________________________________ Pan Tilde Zoom

function PTZ() {

  push();

  translate(0, 0, Zaxis); // WEBGL centers automatic

  if (mode == 2) { // PAN ( right mouse button pressed)

    xposd = (mouseX - float(width / 2));

    yposd = (mouseY - float(height / 2));

  }

  newxpos = xposd; // xposd = 0;

  newypos = yposd; // yposd = 0;

  translate(newxpos, newypos, 0); // move object

  if (mode == 1) { // ORBIT ( left mouse button pressed)

    newXmag = mouseX / float(width) * TWO_PI;

    newYmag = mouseY / float(height) * TWO_PI;

    let diff = Xmag - newXmag;

    if (abs(diff) > 0.01) Xmag -= diff / 4.0;

    diff = Ymag - newYmag;

    if (abs(diff) > 0.01) Ymag -= diff / 4.0;

  }

  rotateX(-Ymag);

  rotateY(-Xmag);

  scale(Zmag);

  draw_object(); // THE OBJECT  see main tab

  pop();

}

​

function info_print() {

  print("PTZ info:");

  print("key UP DOWN RIGHT LEFT -> rotate // key PAGE UP DOWN -> zoom");

  print("mouse LEFT press drag up down right left -> rotate // mouse RIGHT press -> move // mouse WHEEL turn -> zoom");

}