Razlika v quaternionih

README.org

@@ -10,3 +10,9 @@ Also see https://git.kompot.si/g1smo/pifcamp-2021
    - https://kreten.si/spin-upgrade/
    - https://kreten.si/spin-space/
    - https://vis.kreten.si/ / https://vis.kreten.si/ctl
+
+** history
+
+   The original animation, modularized with sliders, was first "exhibited" on [[https://radiostudent.si/kultura/humanistika/delo-in-tehnologija][october 6th 2017]] in [[http://atrog.org/prostori/modri-kot][Modri kot]], a beautiful space for performance that used to be on the side of the [[https://tovarna.org/][autonomous factory Rog]] in Ljubljana, which was evicted by force on january 19th 2021 by the municipality to pave way for future gentrification.
+   Special thanks to Zala and Lio for hosting me during early development and Tisa Neža for curating the first performance.
+

anim.js

@@ -46,15 +46,29 @@ var barva_mod = 0.003;
 var saturacija = 1;
 var svetlost = 0.4;
 
+// Rotiranje kamere
 var kameraX = 0;
 var kameraY = 0;
 var kameraZ = 0;
 
+// Quaternioni za rotacijo in kalibracijo
+var qWW = new THREE.Quaternion(-1, 0, 0, 0);
+var qWWo = new THREE.Quaternion(-1, 0, 0, 0);
+var qWWd = new THREE.Quaternion(-1, 0, 0, 0);
+var qObj = new THREE.Quaternion(-1, 0, 0, 0);
+var qStart = new THREE.Quaternion(-1, 0, 0, 0);
+var qCalibrate = new THREE.Quaternion();
+var calibrate = true;
+var reset = false;
+
+// Gumbi in pa pospesek
+var keysPressed = [0, 0, 0, 0];
+var accel = [0, 0, 0];
 
 // Scena, kamera in render
 scene = new THREE.Scene;
 
-camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
+camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 1, 10000);
 camera.position.z = odmik_kamere;
 
 renderer = new THREE.WebGLRenderer({
@@ -72,25 +86,59 @@ renderer.setClearColor(0x000000, 1);
 
 
 function render () {
-    requestAnimationFrame(render);
-    stevec += 1;
+  requestAnimationFrame(render);
+  stevec += 1;
 
-    // Dodaj objekt vcasih
-    if (stevec % gostota_obj === 0) {
-        addObj(width, width);
-    }
-    renderer.render(scene, camera);
+  // Dodaj objekt vcasih
+  if (stevec % gostota_obj === 0) {
+    addObj(width, width);
+  }
+  renderer.render(scene, camera);
 
-    objAnim();
-    camRotate();
+  modulirajParametre();
+  objAnim();
+  camRotate();
 };
 
+function modulirajParametre() {
+  // Vsi gumbi? => RESET
+  if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4 && !reset) {
+    reset = true;
+    window.location.reload()
+  }
+
+  // Posodobi kvaternion polozaja kontrolerja
+
+  if (calibrate) {
+    qStart = qWW.clone();
+    qStart.conjugate();
+    calibrate = false;
+    console.log("RESET!");
+  }
+
+  // Rotiranje manualno (z rocnimi gibi "iz sredine")
+  if (keysPressed[3]) {
+    var k = objekti.slice(-1)[0];
+    qObj.multiply(qWWd);
+    k.quaternion.multiply(qWWd);
+  }
+  if (keysPressed[2]) {
+    drotacijaX += qWWd.x / 10;
+    drotacijaY += qWWd.y / 10;
+    drotacijaZ += qWWd.z / 10;
+  }
+  if (keysPressed[0]) {
+    width += qWWd.x * 10;
+    barva_mod += qWW.y / 10000;
+  }
+}
+
 // Funkcija za animacijo objektov
 function objAnim() {
   objekti.map(function (obj) {
-    obj.rotation.x += drotacijaX / 100;
-    obj.rotation.y += drotacijaY / 100;
-    obj.rotation.z += drotacijaZ / 100;
+    obj.rotation.x += drotacijaX;
+    obj.rotation.y += drotacijaY;
+    obj.rotation.z += drotacijaZ;
 
     obj.scale.z += width / 4;
     obj.scale.y += width / 4;
@@ -102,36 +150,40 @@ function objAnim() {
 
 // Funkcija za dodajanje novih objektov
 function addObj(w, h) {
-    var col = new THREE.Color();
-    col.setHSL(stevec * barva_mod, saturacija, svetlost);
+  var col = new THREE.Color();
+  col.setHSL(stevec * barva_mod, saturacija, svetlost);
 
-    var mat = new THREE.LineBasicMaterial({
-        color: col
-    });
+  var mat = new THREE.LineBasicMaterial({
+    color: col
+  });
 
-    var geo = new THREE.Geometry();
+  var geo = new THREE.BufferGeometry();
 
-    var offset = h / 2;
+  var offset = h / 2;
 
-    geo.vertices.push(new THREE.Vector3(-offset, 0, 0), new THREE.Vector3(0, offset, 0));
-    geo.vertices.push(new THREE.Vector3(-offset, 0, 0), new THREE.Vector3(0, -offset, 0));
-    geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(0, offset, 0));
-    geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(0, -offset, 0));
+  // Karo
+  var vertices = new Float32Array([
+    -offset, 0, 0,   0,  offset, 0,
+    -offset, 0, 0,   0, -offset, 0,
+     offset, 0, 0,   0,  offset, 0,
+     offset, 0, 0,   0, -offset, 0
+  ]);
 
-    var obj = new THREE.Line(geo, mat, THREE.LineSegments);
+  // 3d objekt (3 komponente na vertex)
+  geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+    
+  var obj = new THREE.Line(geo, mat, THREE.LineSegments);
 
-    scene.add(obj);
-    obj.rotation.x = rotacijaX;
-    obj.rotation.y = rotacijaY;
-    obj.rotation.z = rotacijaZ;
+  scene.add(obj);
+  obj.setRotationFromQuaternion(qObj);
 
-    // Pocisti za seboj
-    if (objekti.push(obj) > obj_limit) {
-        while (objekti.length > obj_limit) {
-            scene.remove(objekti[0]);
-            objekti.shift();
-        }
+  // Pocisti za seboj
+  if (objekti.push(obj) > obj_limit) {
+    while (objekti.length > obj_limit) {
+      scene.remove(objekti[0]);
+      objekti.shift();
     }
+  }
 };
 
 var xAksa = new THREE.Vector3(0, 1, 0);
@@ -174,10 +226,6 @@ function onWindowResize() {
 window.addEventListener('resize', onWindowResize, false);
 
 
-var keysPressed = [0, 0, 0, 0];
-var gyro = [0, 0, 0];
-var accel = [0, 0, 0];
-
 const getVal = function (msg) {
   return msg.value;
 }
@@ -188,14 +236,25 @@ oscCallbacks = {
       keysPressed = args.map(getVal);
     }
   ],
+  '/quaternion/': [
+    function (args) {
+      // Popravimo osi (w x y z po defaultu HMM)
+      qWWo = qWW.clone();
+      [qWW.w, qWW.z, qWW.x, qWW.y] =  args.map(getVal);
+      // Dve sta obratno :)
+      qWW.x *= -1;
+      qWW.z *= -1;
+      qWWd = qWW.clone();
+      qWWd.conjugate();
+      qWWd.multiply(qWWo);
+    }
+  ],
+  /*
   '/gyro/': [
     function (args) {
       var [gx, gy, gz] = args.map(getVal);
       console.log(keysPressed)
 
-      if (keysPressed[0] && keysPressed[1] && keysPressed[2] && keysPressed[3]) {
-        window.location.reload()
-      }
 
       if (keysPressed[2]) {
         rotacijaX += gyro[0] - gx
@@ -223,5 +282,6 @@ oscCallbacks = {
 
       gyro = [gx, gy, gz]
     }
-  ]
+  ],
+    */
 }

index.html

@@ -3,15 +3,12 @@
     <meta charset="UTF-8">
     <title>wavey wind</title>
     <style type="text/css">
-     body {
-         margin: 0
-     }
-
+      body { margin: 0; }
     </style>
   </head>
   <body>
-      <div id="anim-container">
-      </div>
+      <div id="anim-container"></div>
+
       <script src="node_modules/three/build/three.min.js"></script>
       <script src="node_modules/osc/dist/osc-browser.js"></script>
       <script src="anim.js"></script>

osctl.js

@@ -20,7 +20,6 @@ oscPort.on("ready", function () {
   });
   */
   oscPort.on("message", function (msg) {
-    //console.log("OSC message", msg.address, oscCallbacks);
     oscCallbacks[msg.address].forEach(cb => cb(msg.args))
   });
 });

package.json

@@ -8,7 +8,7 @@
     "nouislider": "14.6.2",
     "osc": "^2.4.2",
     "pm2": "^5.1.0",
-    "three": "0.120.1",
+    "three": "0.135.0",
     "ws": "^7.3.1"
   },
   "scripts": {

server.js

@@ -54,7 +54,9 @@ function openSerial() {
   // Arduino OSC gre v web
   scon.on('osc', msg => {
     // Debug incoming osc
-    //console.log('tty osc', msg.address, ...msg.args.map(val => Math.round(val * 1000) / 1000))
+    if (msg.address.indexOf('quaternion') > -1) {
+      console.log('tty osc', msg.address, ...msg.args.map(val => Math.round(val * 1000) / 1000))
+    }
     sendAll(msg, null, null, osclients)
   })
 

test.js

@@ -1,15 +1,12 @@
 console.log("Hello, Sky!");
 
 /**** ☭☭☭☭☭☭☭☭☭☭☭☭ ******
-/☭☭☭☭ Parametri razni ☭☭☭☭ *
+/☭☭☭☭  Test skripta   ☭☭☭☭ *
 ******☭☭☭☭☭☭☭☭☭☭☭☭******/
 
 // Odmik kamere
 var odmik_kamere = 100;
 
-// Rotacija kamere
-var cam_rot_offset = 1;
-
 // Vidni kot
 var FOV = 140;
 
@@ -18,26 +15,15 @@ var width = 25;
 var height = 150;
 var depth = 50;
 
-// Stevec, za razno animiranje
-var stevec = 0;
-
-// Parametri animacije
+// Parametri rotacije (euler)
 var rotacijaX = 0.000;
 var rotacijaY = 0.000;
 var rotacijaZ = 0.000;
 
-// Pozicija
-var posX = 0;
-var posY = 0;
-var posZ = 0;
-
-// Zamik pri novem objektu
-var barva = 0.333;
-var saturacija = 1;
-var svetlost = 0.4;
-
-// Drugi parametri
-var wDiff = 0.5;
+// Parametri pospeska
+var accX = 0.000;
+var accY = 0.000;
+var accZ = 0.000;
 
 // Scena, kamera in render
 scene = new THREE.Scene;
@@ -55,80 +41,76 @@ renderer.setClearColor(0xFFFFFF, 1);
 // Črno ozadje
 //renderer.setClearColor(0x000000, 1);
 
+var skupina = new THREE.Group();
+
 // Dodaj test skatlo
 var geo = new THREE.BoxGeometry(width, height, depth);
 var mat = new THREE.MeshBasicMaterial({
   color: 0xff00ff,
   wireframe: true
 });
-//quaternion = new THREE.Quaternion();
-quaternion = null;
 var cube = new THREE.Mesh(geo, mat);
-scene.add(cube);                // 
+
+skupina.add(cube);
+
+// Za pospeskomer - os X
+var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
+var mAX = new THREE.MeshBasicMaterial({ color: 0xff000055 });
+var AX = new THREE.Mesh(gAX, mAX);
+
+skupina.add(AX);
+
+// Damo vse skupaj v kader
+scene.add(skupina);
+
+// Quaternioni za rotacijo in kalibracijo
+var qWW = new THREE.Quaternion();
+var qObj = new THREE.Quaternion(-1, 0, 0, 0);
+var qStart = new THREE.Quaternion(-1, 0, 0, 0);
+var qCalibrate = new THREE.Quaternion();
+var reset = false;
+
+
 
 var objekti = [cube];
 
 function render () {
-    requestAnimationFrame(render);
+  requestAnimationFrame(render);
+  renderer.render(scene, camera);
 
-    stevec += 1;
-    renderer.render(scene, camera);
-
-    objAnim();
-    //camRotate();
+  objAnim();
 };
 
 // Funkcija za animacijo objektov
 function objAnim() {
   objekti.map(function (obj) {
-    obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
-    /*
-    if (quaternion) {
-      obj.setRotationFromQuaternion(new THREE.Quaternion(...quaternion));
-    }
-    */
+    //obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
+    // Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
+    qObj = qWW.clone();
+    qObj.multiply(qStart);
+    obj.setRotationFromQuaternion(qObj);
 
-    /*
-    obj.rotation.y = -rotacijaX;
-    obj.rotation.x = rotacijaY;
-    obj.rotation.z = rotacijaZ;
-    */
-
-    /*
-    const cor = 0.8;
-    obj.position.x += posX / 1000;
-    obj.position.x *= cor;
-    obj.position.y += posY / 1000;
-    obj.position.y *= cor;
-    obj.position.z += posZ / 1000;
-    obj.position.z *= cor;
-    */
+    AX.scale.x = accX / 1000;
+    console.log(accX);
   });
+
+  // Drzimo vse stiri gumbe (reset)? - kalibracija!
+  if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) {
+    if (!reset) {
+      qStart = qWW.clone();
+      qStart.conjugate();
+      reset = true;
+      console.log("RESET!");
+    }
+  } else {
+    if (reset) {
+      reset = false;
+      console.log("reset off....");
+    }
+  }
 };
 
 
-var xAksa = new THREE.Vector3(0, 1, 0);
-function camRotate () {
-    // rotiraj po z osi
-    camera.translateX(cam_rot_offset);
-    camera.translateZ(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
-
-    /*
-    camera.translateY(cam_rot_offset);
-    camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
-
-    camera.translateY(cam_rot_offset);
-    camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
-
-
-
-    camera.position.x = Math.sin((stevec % 10) / 10) * cam_rot_offset;
-    camera.position.y = Math.cos((stevec % 10) / 10) * cam_rot_offset;
-    */
-
-    camera.lookAt(scene.position);
-};
-
 // Inicializiraj
 document.onreadystatechange = function () {
     if (document.readyState === 'complete') {
@@ -150,22 +132,35 @@ window.addEventListener('resize', onWindowResize, false);
 // Poslusaj OSC evente
 keysPressed = [0, 0, 0, 0];
 
+const getVal = function (msg) {
+  return msg.value;
+}
+
 oscCallbacks = {
   '/keys/': [
     function(args) {
-      keysPressed = [...args];
+      keysPressed = args.map(getVal);
     }
   ],
-  /*
   '/quaternion/': [
     function (args) {
-      quaternion = args.map(function (a) { return a.value; });
+      // Popravimo osi (w x y z po defaultu HMM)
+      [qWW.w, qWW.z, qWW.x, qWW.y] =  args.map(getVal);
+      // Dve sta obratno :)
+      // Ali pac? Vcasih da, drugic ne. Zanimivo.
+      qWW.x *= -1;
+      qWW.z *= -1;
     }
-  ]
-  */
+  ],
+  '/accel/': [
+    function (args) {
+      console.log('accel', args.map(getVal));
+      [accX, accY, accZ] = args.map(getVal);
+    }
+  ],
   '/gyro/': [
     function (args) {
-      [rotacijaX, rotacijaY, rotacijaZ] = args.map(function (a) { return a.value; });
+      [rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
     }
   ]
 }