var para;

var rotateToggle=false;

var button;

​

function setup() { 

  createCanvas(windowWidth, windowHeight, WEBGL);

  para = createP("");

  para.position(10, 0);

  button = createButton("Click to rotate 0.3 around x");

  button.mousePressed(buttonAction);

  button.position(50, 150);

  // fix for EasyCam to work with p5 v0.7.2

  fix();

  easycam = new Dw.EasyCam(this._renderer, {distance:300, center:[0,0,0], rotation:[1,0,0,0]});

  _text = createGraphics(600, 500);

    _text.textFont('Source Code Pro');

    //_text.background(64);

    _text.textAlign(CENTER);

    _text.textSize(100);

    _text.fill(0);

    _text.text('test', 100, 100);

} 

​

​

// fix for EasyCam to work with p5 v0.7.2

function fix()

{

  Dw.EasyCam.prototype.apply = function(n) {

      var o = this.cam;

      n = n || o.renderer,

      n && (this.camEYE = this.getPosition(this.camEYE),

            this.camLAT = this.getCenter(this.camLAT), 

            this.camRUP = this.getUpVector(this.camRUP), 

            n._curCamera.camera(this.camEYE[0], this.camEYE[1], this.camEYE[2], this.camLAT[0], this.camLAT[1], this.camLAT[2], this.camRUP[0], this.camRUP[1], this.camRUP[2])

           )

    };

}

​

function draw(){

  background(164);

  // Draw x,y,z axes

  stroke(255, 0, 0);

  line(0, 0, 0, 100, 0, 0);

  stroke(50, 230, 50);

  line(0, 0, 0, 0, 100, 0);

  stroke(50, 100, 230);

  line(0, 0, 0, 0, 0, 100);

  // Draw Box

  fill(200,100,255);

  box(100);  

  var camDist=easycam.getDistance();

  if(camDist<300 && rotateToggle==false)

  {  rotateToggle=true;

     // this function does not get done properly while zooming

     // but it works fine in mousePressed()

     moveCameraXYZ_v2(1,1,0); 

   print(" <300 toggle false");

  }

  else if(camDist>300 && rotateToggle==true)

  {  rotateToggle=false;

   print(" >300 toggle true");

     // this function does not get done properly while zooming

     // but it works fine in mousePressed()

     moveCameraXYZ_v2(0.3,0,0);  

  }

​

  var st=easycam.getState();

  var rotXYZ = QuaternionToEuler(st.rotation[0], st.rotation[1], st.rotation[2], st.rotation[3]);

  var rotQuat=st.rotation;

  var str='rotate toggle '+ rotateToggle+' camDist '+camDist.toFixed(1)+' rot XYZ: '+(rotXYZ[0]).toFixed(3)+' '+(rotXYZ[1]).toFixed(3)+' '+(rotXYZ[2]).toFixed(3)+', rot Quat: '+(rotQuat[0]).toFixed(3)+' '+(rotQuat[1]).toFixed(3)+' '+(rotQuat[2]).toFixed(3)+' '+(rotQuat[3]).toFixed(3);

  para.html(str);

}

​

function buttonAction() 

{

 moveCameraXYZ_v2(0.3,0,0);

}

​

​

function moveCameraXYZ_v2(x,y,z)

{

  var st=easycam.getState();

  var rotXYZ = QuaternionToEuler(st.rotation[0], st.rotation[1], st.rotation[2], st.rotation[3]);

  st.rotation=EulerToQuaternion(rotXYZ[0]+x,rotXYZ[1]+y,rotXYZ[2]+z)

  easycam.setState(st);

}

​

​

function EulerToQuaternion(x,y,z)

{

   // Abbreviations for the various angular functions

    var cy = cos(z * 0.5);

    var sy = sin(z * 0.5);

    var cp = cos(y * 0.5);

    var sp = sin(y * 0.5);

    var cr = cos(x * 0.5);

    var sr = sin(x * 0.5);

    // convert to Quaternion

    var qw = cy * cp * cr + sy * sp * sr;

    var qx = cy * cp * sr - sy * sp * cr;

    var qy = sy * cp * sr + cy * sp * cr;

    var qz = sy * cp * cr - cy * sp * sr;

    //console.log('converted from Euler',x,y,z,'To Quaternion',qw,qx,qy,qz);     

    return [qw,qx,qy,qz];

}

​

function QuaternionToEuler(q0, q1, q2, q3) //qw, qx, qy, qz

{ 

  // Convert Rotation from Quaternion To XYZ (from wikipedia)

  // roll (x-axis rotation)

  var sinr_cosp = +2.0 * (q0 * q1 + q2 * q3);

  var cosr_cosp = +1.0 - 2.0 * (q1 * q1 + q2 * q2);

  var x = atan2(sinr_cosp, cosr_cosp);

  // pitch (y-axis rotation)

  var sinp = +2.0 * (q0 * q2 - q3 * q1);

  var y;

  if (abs(sinp) >= 1)

    y = copysign(M_PI / 2, sinp); // use 90 degrees if out of range

  else

    y = asin(sinp);

  // yaw (z-axis rotation)

  var siny_cosp = +2.0 * (q0 * q3 + q1 * q2);

  var cosy_cosp = +1.0 - 2.0 * (q2 * q2 + q3 * q3);

  var z = atan2(siny_cosp, cosy_cosp);

​

  return [x,y,z];

}

​

// add kll

document.oncontextmenu = function() {

  return false;

}

​