Picking_quat

/**PICKING AND DRAG 3D sans modelXYZ mais avec Quaternion

 *Jacques Maire

 * le 4/11/2017

 **/

​

var mobiles=[];

var angles, angleR;

var omegaMouse, nPlanRose, mouse, centreOmega;

var impactRayonMouse, laTrans, centre;

var choix;

var numero;

var dist0;

var qua;

var centre2O;

function setup() {

​

  createCanvas(800, 800, WEBGL);

  centre2O=0.5*height/tan(PI/6.0);

  impactRayonMouse = createVector(0, 0, 0);

  angles = createVector(0, 0, 0);

  angleR = createVector(PI/6, PI/3, 0);

  choix=false;

  laTrans = createVector(150, -160, -1500);

  centre=createVector(0, 0, 0);

  mobiles=[3];

  mobiles[0]= new Mobile(-300, -300, 0);

  mobiles[1]= new Mobile(300, 350, 0);

  mobiles[2]= new Mobile(400, -300, 0);

  qua=new Quat();

  centreOmega=createVector(0, 0, centre2O);

}

​

function draw() { 

  background(0); 

  rectMode(CENTER );

  mouse=createVector(-width/2.0+mouseX, mouseY-height/2.0, 0);

  omegaMouse=createVector(-width/2.0+mouseX, mouseY-height/2.0, -centre2O);

  nPlanRose=local2Global(createVector(0, 0, 100));

​

  //plan rose 

  push();

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

  rotation();

  fill(255, 250,250,200);

  rect(0, 0, 2000, 2000);

  pop();  

  for (var i=0; i<3; i++) {

    mobiles[i].display();

  }  

  if (mouseIsPressed) { //1  

    if (mouseButton == RIGHT && choix==false) {//2

      impactRayonMouse=intersection( omegaMouse, nPlanRose);     

      numero=3;

      dist0=5000;

      for (var i0=0; i0<3; i0++) {//3

        var vecdis=p5.Vector.sub(impactRayonMouse,mobiles[i0].global);

        var dis=p5.Vector.mag(vecdis);

        if (dis<dist0) {

          numero=i0;

          dist0=dis;

        }

      }//3

      if (numero<3 && dist0<100) {

        choix=true; 

      }

    }//2

    if (choix==true  && mouseButton==RIGHT) {

      impactRayonMouse=intersection( omegaMouse, nPlanRose);

      dessinI(impactRayonMouse);

      mobiles[numero].global=comb(0.95, mobiles[numero].global, 0.05, impactRayonMouse);

      mobiles[numero].display();

    }

if ( mouseButton==LEFT) {//4

      angles.x=map(mouse.y, 0, height, -0.5, 0.5);

      angles.y=map(-mouse.x, 0, width, -0.5, 0.5);

      angleR=comb(0.9, angleR, 0.1, angles);

      for (var i=0; i<3; i++) {

        mobiles[i].calculG(angleR);

      }

    }//4

  }//1

}//0

function dessinI(v){

push();

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

fill(255);

box(30);

pop();

}

​

function mouseReleased() {

  choix=false;

} 

​

function rotation() {

  rotateX(angleR.x);

  rotateY(angleR.y);

  rotateZ(angleR.z);

}

​

function repere(lo) {

  var ee=7;

  push();

  translate(lo/2.0, 0, 0);

  fill(255, 0, 0);

  box(lo, ee, ee);

  translate(-lo/2.0, lo/2.0, 0);

  fill(0, 255, 0);

  box(ee, lo, ee);

  translate(0,-lo/2.0, lo/2.0);

  fill(0, 0, 255);

  box(ee, ee, lo);

  pop();

}

​

function comb( a1, v1, a2, v2) {

  var v3=p5.Vector.mult(v1, a1);

  var v4=p5.Vector.mult(v2, a2);

  return p5.Vector.add(v3, v4);

}

​

​

function local2Global( cote) {

  var qx=new Quat(cos(angleR.x/2.0), sin(angleR.x/2.0), 0, 0);

  var qy=new Quat(cos(angleR.y/2.0), 0, sin(angleR.y/2.0), 0);

  var qz=new Quat(cos(angleR.z/2.0), 0, 0, sin(angleR.z/2.0));

  var q=qx.mul(qy.mul(qz));

  var v= q.tourner(cote);

  return v;

}

​

function intersection(omegMouse, normRose) {

  var oeilOrigin=p5.Vector.sub(laTrans, centreOmega);

  var lambda=p5.Vector.dot(oeilOrigin, normRose)/p5.Vector.dot(omegMouse, normRose);  

  impactRayonMouse=p5.Vector.add(p5.Vector.mult( omegMouse,lambda),centreOmega);

  return impactRayonMouse;

}

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

​

 function Mobile(locx,locy,locz){

 this.local=createVector(locx,locy,locz);

 this.global=p5.Vector.add(this.globalize(this.local),laTrans);

 this.angles=angleR;

 }

 Mobile.prototype.calculG=function(angl){ 

   this.angles=angl;

 this.global=p5.Vector.add(this.globalize(this.local),laTrans);

 }

Mobile.prototype.calculL=function(){

  var globalQ=p5.Vector.sub(this.global,laTrans);

 this.local=localize(globalQ); 

 } 

 Mobile.prototype.display=function(){   

 push();

 translate(this.global.x,this.global.y,this.global.z);

 rotation();

 repere(200);

 noFill();

 stroke(255,0,0);

 sphere(20);

 pop();

 }

 Mobile.prototype.globalize=function( cote) {

 var qx=new Quat(cos(angles.x/2.0), sin(angles.x/2.0), 0, 0);

 var qy=new Quat(cos(angles.y/2.0), 0, sin(angles.y/2.0), 0);

 var qz=new Quat(cos(angles.z/2.0), 0, 0, sin(angles.z/2.0));

 var qua=qx.mul(qy.mul(qz));

 return qua.tourner(cote);

 }

 Mobile.prototype.localize=function( cote) {

 var qz=new Quat(cos(-angles.z/2.0), 0, 0, sin(-angles.z/2.0));

 var qy=new Quat(cos(-angles.y/2.0), 0, sin(-angles.y/2.0), 0);

 var qx=new Quat(cos(-angles.x/2.0), sin(-angles.x/2.0), 0, 0);

 var q= qz.mul(qy.mul(qx));

 return q.tourner(cote);

 }

 //************************************************************ 

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

 // Quat simple 

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

 function Quat (w, x, y, z) {

 this.w = (w !== undefined) ? w : 1.0;

 this.x = (x !== undefined) ? x : 0.0;

 this.y = (y !== undefined) ? y : 0.0;

 this.z = (z !== undefined) ? z : 0.0;

 }

 Quat.prototype.reset = function () {

 this.w = 1;

 this.x = 0;

 this.y = 0;

 this.z = 0;

 }

 Quat.prototype.mag = function () {

 var m = Math.sqrt(sq( this.x) + sq( this.y)+ sq(this.z) + sq(this.w));

 return m;

 }

 Quat.prototype.setFromAxisAngle = function (axis, angle) {

 var s = sin(angle * 0.5);

 return new Quat(

 cos(angle * 0.5), axis.x * s, axis.y * s, axis.z * s);

 }

 Quat.prototype.toAxisAngle = function (targetAxis) {

 this.normalize();

 var angle = 2 * Math.acos(this.w);

 var s = Math.sqrt(1 - this.w * this.w);

 if (s < 0.001) {

 targetAxis.x = this.x

 targetAxis.y = this.y

 targetAxis.z = this.z

 } else {

 targetAxis.x = this.x / s

 targetAxis.y = this.y / s

 targetAxis.z = this.z / s

 }

 return targetAxis;

 }

 Quat.prototype.mul = function ( q2) {

 q1 = this;

 q2 = q2 || new Quat(1,0,0,0);

 var res = new Quat();

 res.w = q1.w * q2.w - q1.x * q2.x - q1.y * q2.y - q1.z * q2.z;

 res.x = q1.w * q2.x + q1.x * q2.w + q1.y * q2.z - q1.z * q2.y;

 res.y = q1.w * q2.y + q1.y * q2.w + q1.z * q2.x - q1.x * q2.z;

 res.z = q1.w * q2.z + q1.z * q2.w + q1.x * q2.y - q1.y * q2.x;

 return res

 }

 Quat.prototype.conjugate = function (targ) {

 targ = targ || new Quat();

 targ.w = this.w;

 targ.x = -this.x;

 targ.y = -this.y;

 targ.z = -this.z;

 return targ;

 };

 Quat.prototype.normalize = function () {

 var l = Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z + this.w * this.w);

 if (l === 0) {

 this.x = 0;

 this.y = 0;

 this.z = 0;

 this.w = 0;

 } else {

 l = 1 / l

 this.x *= l;

 this.y *= l;

 this.z *= l;

 this.w *= l ;

 }

 }

 Quat.prototype.vmult = function (v, target) {

 target = target || createVector(0,0,0);

 var x = v.x;

 var y = v.y;

 var z = v.z;

 var qx = this.x,

 qy = this.y,

 qz = this.z,

 qw = this.w;

 // q*v

 var ix = qw * x + qy * z - qz * y,

 iy = qw * y + qz * x - qx * z,

 iz = qw * z + qx * y - qy * x,

 iw = -qx * x - qy * y - qz * z;

 target.x = ix * qw + iw * -qx + iy * -qz - iz * -qy;

 target.y = iy * qw + iw * -qy + iz * -qx - ix * -qz;

 target.z = iz * qw + iw * -qz + ix * -qy - iy * -qx;

 return target;

 }

 Quat.prototype.copy = function () {

 var res=new Quat(this.w,this.x,this.y,this.z);

 return res;

 }

 Quat.prototype.tourner = function(v) {

 var qv = new Quat(0.0, v.x, v.y, v.z);

 var qc = this.conjugate();

 var q1 = qv.mul( qc);

 var q = this.mul( q1);

 return createVector(q.x, q.y, q.z);

 }