​

function draw_object() {                         //_________________called by / from inside PTZ

  squircle(20, 30, 4); // (w,h,r)

  //axis();

}

​

//__________________________________________________________ SQUIRCLE

function squircle( wx, wy, r) {

  push();

  beginShape();

  stroke(0, 0, 200);

  strokeWeight(5);

  fill(0, 200, 0);

  for (let t = 0; t < TWO_PI; t += TWO_PI / 160) { // 160 vertex points is too much

    let x1 = pow(abs(cos(t)), 0.5) * r * wx * sign(cos(t));

    let y1 = pow(abs(sin(t)), 0.5) * r * wy * sign(sin(t));

    vertex(x1, y1);

  }

  endShape(CLOSE);

  pop();

}

​

function sign(input) {

  if (input < 0) return -1.0;

  if (input > 0) return 1.0;

  return 0.0;

}

​

function axis() {

  push();

  stroke(200, 0, 0);

  box(100,4,4);

  ellipse(0, 0, height / 2, height / 2, 50);

  rotateX(HALF_PI);

  stroke(0, 200, 0);

  box(4,100,4);

  ellipse(0, 0, height / 2, height / 2, 50);

  rotateY(HALF_PI);

  stroke(0, 0, 200);

  box(100,4,4);

  ellipse(0, 0, height / 2, height / 2, 50);

  pop();

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

  noFill();

  noSmooth();

  strokeWeight(2);

  info_print();

}

​

function draw() {

  background(0,0,80);

  PTZ();

}

​

document.oncontextmenu = function() {

  return false;

}

​

//_____________________________________ PTZ tab

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);

  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");

}

​

​