g1smo
/
wavey-wind
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP quaternioni

rob
Jurij Podgoršek 2021-12-24 07:17:42 +01:00
parent 381fed824e
commit 02ec213e1d
6 changed files with 181 additions and 4374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
anim.js
View File

@ -46,10 +46,24 @@ var barva_mod = 0.003;
var saturacija = 1; var saturacija = 1;
var svetlost = 0.4; var svetlost = 0.4;
// Rotiranje kamere
var kameraX = 0; var kameraX = 0;
var kameraY = 0; var kameraY = 0;
var kameraZ = 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 qObj = new THREE.Quaternion(-1, 0, 0, 0);
var qOld = 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 // Scena, kamera in render
scene = new THREE.Scene; scene = new THREE.Scene;
@ -72,26 +86,50 @@ renderer.setClearColor(0x000000, 1);
function render () { function render () {
requestAnimationFrame(render); requestAnimationFrame(render);
stevec += 1; stevec += 1;
// Dodaj objekt vcasih // Dodaj objekt vcasih
if (stevec % gostota_obj === 0) { if (stevec % gostota_obj === 0) {
addObj(width, width); addObj(width, width);
} }
renderer.render(scene, camera); renderer.render(scene, camera);
objAnim(); modulirajParametre();
camRotate(); 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
qObj = qWW.clone();
qObj.multiply(qStart);
if (calibrate) {
qStart = qWW.clone();
qStart.conjugate();
calibrate = false;
console.log("RESET!");
}
// Rotiranje manualno (z rocnimi gibi "iz sredine")
if (keysPressed[2]) {
objekti[0].rotation.apply
}
}
// Funkcija za animacijo objektov // Funkcija za animacijo objektov
function objAnim() { function objAnim() {
objekti.map(function (obj) { objekti.map(function (obj) {
obj.rotation.x += drotacijaX / 100; obj.rotation.x += drotacijaX / 100;
obj.rotation.y += drotacijaY / 100; obj.rotation.y += drotacijaY / 100;
obj.rotation.z += drotacijaZ / 100; obj.rotation.z += drotacijaZ / 100;
obj.setRotationFromQuaternion(quaternion);
obj.scale.z += width / 4; obj.scale.z += width / 4;
obj.scale.y += width / 4; obj.scale.y += width / 4;
@ -103,36 +141,42 @@ function objAnim() {
// Funkcija za dodajanje novih objektov // Funkcija za dodajanje novih objektov
function addObj(w, h) { function addObj(w, h) {
var col = new THREE.Color(); var col = new THREE.Color();
col.setHSL(stevec * barva_mod, saturacija, svetlost); col.setHSL(stevec * barva_mod, saturacija, svetlost);
var mat = new THREE.LineBasicMaterial({ var mat = new THREE.LineBasicMaterial({
color: col 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)); // Karo
geo.vertices.push(new THREE.Vector3(-offset, 0, 0), new THREE.Vector3(0, -offset, 0)); var vertices = new Float32Array([
geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(0, offset, 0)); -offset, 0, 0, 0, offset, 0,
geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(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); scene.add(obj);
obj.rotation.x = rotacijaX; obj.rotation.x = rotacijaX;
obj.rotation.y = rotacijaY; obj.rotation.y = rotacijaY;
obj.rotation.z = rotacijaZ; obj.rotation.z = rotacijaZ;
// Pocisti za seboj // Pocisti za seboj
if (objekti.push(obj) > obj_limit) { if (objekti.push(obj) > obj_limit) {
while (objekti.length > obj_limit) { while (objekti.length > obj_limit) {
scene.remove(objekti[0]); scene.remove(objekti[0]);
objekti.shift(); objekti.shift();
}
} }
}
}; };
var xAksa = new THREE.Vector3(0, 1, 0); var xAksa = new THREE.Vector3(0, 1, 0);
@ -175,10 +219,6 @@ function onWindowResize() {
window.addEventListener('resize', onWindowResize, false); 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) { const getVal = function (msg) {
return msg.value; return msg.value;
} }
@ -189,14 +229,23 @@ oscCallbacks = {
keysPressed = args.map(getVal); keysPressed = args.map(getVal);
} }
], ],
'/quaternion/': [
function (args) {
console.log(1);
// 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;
}
],
/*
'/gyro/': [ '/gyro/': [
function (args) { function (args) {
var [gx, gy, gz] = args.map(getVal); var [gx, gy, gz] = args.map(getVal);
console.log(keysPressed) console.log(keysPressed)
if (keysPressed[0] && keysPressed[1] && keysPressed[2] && keysPressed[3]) {
window.location.reload()
}
if (keysPressed[2]) { if (keysPressed[2]) {
rotacijaX += gyro[0] - gx rotacijaX += gyro[0] - gx
@ -224,5 +273,6 @@ oscCallbacks = {
gyro = [gx, gy, gz] gyro = [gx, gy, gz]
} }
] ],
*/
} }

9
index.html
View File

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

1
osctl.js
View File

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

4319
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

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

94
test.js
View File

@ -15,11 +15,16 @@ var width = 25;
var height = 150; var height = 150;
var depth = 50; var depth = 50;
// Parametri animacije (euler) // Parametri rotacije (euler)
var rotacijaX = 0.000; var rotacijaX = 0.000;
var rotacijaY = 0.000; var rotacijaY = 0.000;
var rotacijaZ = 0.000; var rotacijaZ = 0.000;
// Parametri pospeska
var accX = 0.000;
var accY = 0.000;
var accZ = 0.000;
// Scena, kamera in render // Scena, kamera in render
scene = new THREE.Scene; scene = new THREE.Scene;
@ -36,56 +41,73 @@ renderer.setClearColor(0xFFFFFF, 1);
// Črno ozadje // Črno ozadje
//renderer.setClearColor(0x000000, 1); //renderer.setClearColor(0x000000, 1);
var skupina = new THREE.Group();
// Dodaj test skatlo // Dodaj test skatlo
var geo = new THREE.BoxGeometry(width, height, depth); var geo = new THREE.BoxGeometry(width, height, depth);
var mat = new THREE.MeshBasicMaterial({ var mat = new THREE.MeshBasicMaterial({
color: 0xff00ff, color: 0xff00ff,
wireframe: true wireframe: true
}); });
var cube = new THREE.Mesh(geo, mat);
var start = false; skupina.add(cube);
// Za pospeskomer - os X
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
var mAX = new THREE.MeshBasicMaterial({ color: 0xff0000 });
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 qWW = new THREE.Quaternion();
var qObj = new THREE.Quaternion(-1, 0, 0, 0); var qObj = new THREE.Quaternion(-1, 0, 0, 0);
var qStart = null; var qStart = new THREE.Quaternion(-1, 0, 0, 0);
var qCalibrate = new THREE.Quaternion();
var reset = false;
var cube = new THREE.Mesh(geo, mat);
scene.add(cube); //
var objekti = [cube]; var objekti = [cube];
function render () { function render () {
requestAnimationFrame(render); requestAnimationFrame(render);
renderer.render(scene, camera); renderer.render(scene, camera);
if (start) { objAnim();
objAnim();
} else {
if (qWW) {
qStart = qWW.clone();
qStart.inverse();
start = true;
}
}
}; };
// Funkcija za animacijo objektov // Funkcija za animacijo objektov
function objAnim() { function objAnim() {
objekti.map(function (obj) { objekti.map(function (obj) {
//obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ')); //obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
//newq = quaternion.clone(); // Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
//newq.multiplyQuaternions(quaternion, conjugation); qObj = qWW.clone();
//newq.multiply(conjugation); qObj.multiply(qStart);
//quaternion.premultiply(conjugation); obj.setRotationFromQuaternion(qObj);
//quaternion.normalize();
//console.log(quaternion); AX.scale.x = accX;
//obj.setRotationFromQuaternion(THREE.Quaternion.multiplyQuaternions(quaternion, conjugation)); console.log(accX);
//quaterion = new THREE.Quaternion(-1, 0, 0, 0);
//qObj = qWW.clone();
//qObj.multiply(qStart);
obj.setRotationFromQuaternion(qWW);
//obj.setRotationFromQuaternion(conjugation);
console.log(obj.rotation.x);
}); });
// 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....");
}
}
}; };
@ -117,12 +139,22 @@ const getVal = function (msg) {
oscCallbacks = { oscCallbacks = {
'/keys/': [ '/keys/': [
function(args) { function(args) {
keysPressed = [...args]; keysPressed = args.map(getVal);
} }
], ],
'/quaternion/': [ '/quaternion/': [
function (args) { function (args) {
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal); // Popravimo osi (w x y z po defaultu HMM)
[qWW.w, qWW.z, qWW.x, qWW.y] = args.map(getVal);
// Dve sta obratno :)
qWW.x *= -1;
qWW.z *= -1;
}
],
'/accel/': [
function (args) {
console.log('accel', args.map(getVal));
[accX, accY, accZ] = args.map(getVal);
} }
], ],
'/gyro/': [ '/gyro/': [