Kalibracija, zogice
parent
ec796bafab
commit
7053531f40
3
anim.js
3
anim.js
|
@ -207,12 +207,11 @@ function addObj(w, h) {
|
||||||
obj.setRotationFromQuaternion(qObj);
|
obj.setRotationFromQuaternion(qObj);
|
||||||
|
|
||||||
// Pocisti za seboj
|
// Pocisti za seboj
|
||||||
if (objekti.push(obj) > obj_limit) {
|
objekti.push(obj);
|
||||||
while (objekti.length > obj_limit) {
|
while (objekti.length > obj_limit) {
|
||||||
scene.remove(objekti[0]);
|
scene.remove(objekti[0]);
|
||||||
objekti.shift();
|
objekti.shift();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
qK = new THREE.Quaternion()
|
qK = new THREE.Quaternion()
|
||||||
|
|
4
osctl.js
4
osctl.js
|
@ -3,6 +3,10 @@ var oscPort = new osc.WebSocketPort({
|
||||||
metadata: true
|
metadata: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function sendAll (address, args) {
|
||||||
|
oscPort.send({ address, args })
|
||||||
|
}
|
||||||
|
|
||||||
oscPort.on("ready", function () {
|
oscPort.on("ready", function () {
|
||||||
console.log("OSC listening!")
|
console.log("OSC listening!")
|
||||||
oscPort.on("message", function (msg) {
|
oscPort.on("message", function (msg) {
|
||||||
|
|
190
test.js
190
test.js
|
@ -4,8 +4,11 @@ console.log("Hello, Sky!");
|
||||||
/☭☭☭☭ Test skripta ☭☭☭☭ *
|
/☭☭☭☭ Test skripta ☭☭☭☭ *
|
||||||
******☭☭☭☭☭☭☭☭☭☭☭☭******/
|
******☭☭☭☭☭☭☭☭☭☭☭☭******/
|
||||||
|
|
||||||
// Odmik kamere
|
// Ker kegel imamo?
|
||||||
var odmik_kamere = 100;
|
var izbranKegel = 1;
|
||||||
|
if (window.location.hash.indexOf('kegel') > -1) {
|
||||||
|
izbranKegel = window.location.hash.split('=')[1];
|
||||||
|
}
|
||||||
|
|
||||||
// Vidni kot
|
// Vidni kot
|
||||||
var FOV = 90;
|
var FOV = 90;
|
||||||
|
@ -24,11 +27,15 @@ var accZ = 0.000;
|
||||||
var scene = new THREE.Scene;
|
var scene = new THREE.Scene;
|
||||||
window.scene = scene;
|
window.scene = scene;
|
||||||
|
|
||||||
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
|
/*
|
||||||
camera.position.z = odmik_kamere;
|
const axesHelper = new THREE.AxesHelper( 5 );
|
||||||
|
scene.add( axesHelper );
|
||||||
|
*/
|
||||||
|
|
||||||
|
var camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
|
||||||
window.camera = camera;
|
window.camera = camera;
|
||||||
|
|
||||||
renderer = new THREE.WebGLRenderer({
|
var renderer = new THREE.WebGLRenderer({
|
||||||
alpha: true
|
alpha: true
|
||||||
});
|
});
|
||||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
@ -38,7 +45,7 @@ renderer.setClearColor(0xFFFFFF, 1);
|
||||||
// Črno ozadje
|
// Črno ozadje
|
||||||
//renderer.setClearColor(0x000000, 1);
|
//renderer.setClearColor(0x000000, 1);
|
||||||
|
|
||||||
var skupina = new THREE.Group();
|
//var skupina = new THREE.Group();
|
||||||
|
|
||||||
// Dodaj test skatlo
|
// Dodaj test skatlo
|
||||||
|
|
||||||
|
@ -150,21 +157,56 @@ for (var n = 0; n < radialnihSegmentov; n += 1) {
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var barva = new THREE.Color();
|
var barva = new THREE.Color(0, 0, 0);
|
||||||
barva.setHSL(0.6, 1.0, 0.5);
|
var barvaDodatni = new THREE.Color();
|
||||||
|
barvaDodatni.setHSL(0.6, 1.0, 0.5);
|
||||||
var mat = new THREE.MeshBasicMaterial({
|
var mat = new THREE.MeshBasicMaterial({
|
||||||
//color: 0xff00ff,
|
//color: 0xff00ff,
|
||||||
color: barva,
|
color: barva,
|
||||||
wireframe: true
|
wireframe: true,
|
||||||
|
transparent: true
|
||||||
});
|
});
|
||||||
window.mat = mat;
|
window.mat = mat;
|
||||||
//var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
|
//var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
|
||||||
var kegel = new THREE.Mesh(geo, mat);
|
var kegel = new THREE.Mesh(geo, mat);
|
||||||
kegel.position.z += 64;
|
kegel.position.z += 64;
|
||||||
kegel.position.y += 32;
|
//kegel.position.y += 32;
|
||||||
|
kegel.position.y = -100;
|
||||||
kegel.rotation.z = 180;
|
kegel.rotation.z = 180;
|
||||||
|
|
||||||
skupina.add(kegel);
|
if (izbranKegel == 0) {
|
||||||
|
kegel.position.x = 40;
|
||||||
|
}
|
||||||
|
|
||||||
|
var barvaKrogleO = new THREE.Color();
|
||||||
|
barvaKrogleO.setHSL(Math.random(), 0.8, 0.5);
|
||||||
|
function novaKrogla () {
|
||||||
|
var barvaKrogle = barvaKrogleO.clone();
|
||||||
|
var mat = new THREE.MeshBasicMaterial({
|
||||||
|
color: barvaKrogle,
|
||||||
|
wireframe: true,
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
var velikost = 1 + Math.random() * 5;
|
||||||
|
var kroglaGeo = new THREE.SphereGeometry(velikost, 12, 12);
|
||||||
|
var krogla = new THREE.Mesh(kroglaGeo, mat);
|
||||||
|
|
||||||
|
krogla.position.x = (Math.random() - 1) * 200;
|
||||||
|
krogla.position.y = (Math.random() - 1) * 10;
|
||||||
|
krogla.position.z = (Math.random() - 1) * 300;
|
||||||
|
|
||||||
|
krogla.position.y -= 100;
|
||||||
|
krogla.position.x += 150;
|
||||||
|
krogla.position.z += 230; // gor/dol
|
||||||
|
|
||||||
|
|
||||||
|
//krogla.position.y += 200;
|
||||||
|
|
||||||
|
scene.add(krogla);
|
||||||
|
krogle.push(krogla);
|
||||||
|
}
|
||||||
|
|
||||||
|
//skupina.add(kegel);
|
||||||
|
|
||||||
// Za pospeskomer - os X
|
// Za pospeskomer - os X
|
||||||
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
|
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
|
||||||
|
@ -174,10 +216,12 @@ var AX = new THREE.Mesh(gAX, mAX);
|
||||||
//skupina.add(AX);
|
//skupina.add(AX);
|
||||||
|
|
||||||
// Damo vse skupaj v kader
|
// Damo vse skupaj v kader
|
||||||
scene.add(skupina);
|
// scene.add(skupina);
|
||||||
|
scene.add(kegel);
|
||||||
|
|
||||||
// Quaternioni za rotacijo in kalibracijo
|
// Quaternioni za rotacijo in kalibracijo
|
||||||
var qWW = new THREE.Quaternion();
|
var qWW = new THREE.Quaternion();
|
||||||
|
var qPrej = new THREE.Quaternion();
|
||||||
var qObj = new THREE.Quaternion();
|
var qObj = new THREE.Quaternion();
|
||||||
var qStart = new THREE.Quaternion();
|
var qStart = new THREE.Quaternion();
|
||||||
var reset = false;
|
var reset = false;
|
||||||
|
@ -185,29 +229,44 @@ var calibrate = true;
|
||||||
|
|
||||||
|
|
||||||
var objekti = [kegel];
|
var objekti = [kegel];
|
||||||
|
var dodatniObjekti = [];
|
||||||
|
var krogle = [];
|
||||||
|
var stevec = 0;
|
||||||
|
|
||||||
// Zacetna orientacija
|
// Zacetna orientacija kegla
|
||||||
camera.position.y = -100
|
|
||||||
scene.rotation.x = 90;
|
scene.rotation.x = 90;
|
||||||
scene.rotation.z = -270;
|
scene.rotation.z = 270;
|
||||||
|
|
||||||
skupina.position.z = 64;
|
// Polozaj kamere
|
||||||
skupina.position.y = -34;
|
//camera.position.y = -64;
|
||||||
|
camera.position.z = 60;
|
||||||
|
|
||||||
|
//skupina.position.z = 32;
|
||||||
|
//skupina.position.y = -100;
|
||||||
|
|
||||||
|
function inputHandle () {
|
||||||
|
if (kbdPressed.c) {
|
||||||
|
calibrate = true;
|
||||||
|
sendAll('/ww/calibrate');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function render () {
|
function render () {
|
||||||
requestAnimationFrame(render);
|
requestAnimationFrame(render);
|
||||||
renderer.render(scene, camera);
|
renderer.render(scene, camera);
|
||||||
|
stevec += 1;
|
||||||
|
|
||||||
objAnim();
|
objAnim();
|
||||||
|
inputHandle();
|
||||||
|
|
||||||
|
if (stevec % 10 == 0) {
|
||||||
|
novaKrogla();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Funkcija za animacijo objektov
|
// Funkcija za animacijo objektov
|
||||||
function objAnim() {
|
function objAnim() {
|
||||||
if (kbdPressed.c) {
|
|
||||||
calibrate = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Rotacija kegla
|
// Rotacija kegla
|
||||||
objekti.map(function (obj) {
|
objekti.map(function (obj) {
|
||||||
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||||
|
@ -217,6 +276,42 @@ function objAnim() {
|
||||||
|
|
||||||
AX.scale.x = accX / 1000;
|
AX.scale.x = accX / 1000;
|
||||||
});
|
});
|
||||||
|
// Ce jih je prevec, pucaj
|
||||||
|
while (dodatniObjekti.length > 100) {
|
||||||
|
scene.remove(dodatniObjekti[0]);
|
||||||
|
dodatniObjekti.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
dodatniObjekti.map(function (obj) {
|
||||||
|
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||||
|
qObj = qWW.clone();
|
||||||
|
//qObj.multiply(obj.qStart).multiply(qStart);
|
||||||
|
//obj.setRotationFromQuaternion(qObj);
|
||||||
|
|
||||||
|
obj.translateOnAxis(obj.premakniAxis, obj.premakniKolicina);
|
||||||
|
|
||||||
|
// obj.material.color.offsetHSL(0, 0, 0.003);
|
||||||
|
obj.material.opacity *= 0.98;
|
||||||
|
obj.premakniKolicina *= 0.98;
|
||||||
|
|
||||||
|
var dQ = obj.quaternion.multiply(obj.rotirajQ);
|
||||||
|
/*
|
||||||
|
dQ.multiply(obj.rotirajQ);
|
||||||
|
obj.setRotationFromQuaternion(dQ);
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
obj.premakni.x *= 1.1;
|
||||||
|
obj.premakni.y *= 1.1;
|
||||||
|
obj.premakni.z *= 1.1;
|
||||||
|
*/
|
||||||
|
obj.material.opacity *= 0.98;
|
||||||
|
});
|
||||||
|
|
||||||
|
barvaKrogleO.offsetHSL(-(2/1000), 0, 0);
|
||||||
|
krogle.map(function (obj) {
|
||||||
|
obj.material.opacity *= 0.98;
|
||||||
|
});
|
||||||
|
|
||||||
// Kalibracija rotacije kegla
|
// Kalibracija rotacije kegla
|
||||||
if (calibrate) {
|
if (calibrate) {
|
||||||
|
@ -240,19 +335,31 @@ function objAnim() {
|
||||||
kegel.scale.z *= 0.95;
|
kegel.scale.z *= 0.95;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Drzimo vse stiri gumbe (reset)? - kalibracija!
|
|
||||||
if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) {
|
// Dupliranje keglov
|
||||||
if (!reset) {
|
//console.log(accX);
|
||||||
qStart = qWW.clone();
|
kegel.material.color.offsetHSL(2 / 1000, 0, 0);
|
||||||
qStart.conjugate();
|
if (accX > 1/* && (stevec % 10) == 0*/) {
|
||||||
reset = true;
|
var dodatni = kegel.clone();
|
||||||
console.log("RESET!");
|
dodatni.renderOrder = stevec;
|
||||||
}
|
var dodatniMat = kegel.material.clone();
|
||||||
} else {
|
var dodatniBarva = barvaDodatni.clone();
|
||||||
if (reset) {
|
dodatniMat.color = dodatniBarva;
|
||||||
reset = false;
|
dodatni.material = dodatniMat;
|
||||||
console.log("reset off....");
|
dodatni.premakniAxis = new THREE.Vector3(
|
||||||
}
|
Math.random(),
|
||||||
|
Math.random(),
|
||||||
|
Math.random()
|
||||||
|
);
|
||||||
|
dodatni.premakniKolicina = (Math.random() - 1) * 10;
|
||||||
|
var rQ = qWW.clone();
|
||||||
|
rQ.invert();
|
||||||
|
rQ.multiply(qPrej);
|
||||||
|
dodatni.rotirajQ = rQ;
|
||||||
|
|
||||||
|
//dodatni.qStart = kegel.quaternion.clone();
|
||||||
|
dodatniObjekti.push(dodatni);
|
||||||
|
scene.add(dodatni);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -261,7 +368,6 @@ function objAnim() {
|
||||||
document.onreadystatechange = function () {
|
document.onreadystatechange = function () {
|
||||||
if (document.readyState === 'complete') {
|
if (document.readyState === 'complete') {
|
||||||
document.getElementById("anim-container").appendChild(renderer.domElement);
|
document.getElementById("anim-container").appendChild(renderer.domElement);
|
||||||
|
|
||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -281,8 +387,8 @@ var keysPressed = [0, 0, 0, 0];
|
||||||
const getVal = function (msg) {
|
const getVal = function (msg) {
|
||||||
return msg.value;
|
return msg.value;
|
||||||
}
|
}
|
||||||
|
var prepend = `/ww/0/ww/${izbranKegel}`;
|
||||||
var prepend = '/ww/0/ww/0';
|
console.log('prepend!', prepend);
|
||||||
|
|
||||||
var oscCallbacks = {};
|
var oscCallbacks = {};
|
||||||
|
|
||||||
|
@ -291,6 +397,7 @@ oscCallbacks[`${prepend}'/keys`] = function(args) {
|
||||||
};
|
};
|
||||||
oscCallbacks[`${prepend}/quaternion`] = function (args) {
|
oscCallbacks[`${prepend}/quaternion`] = function (args) {
|
||||||
// Popravimo osi (w x y z po defaultu HMM)
|
// Popravimo osi (w x y z po defaultu HMM)
|
||||||
|
[qPrej.w, qPrej.x, qPrej.y, qPrej.z] = [qWW.w, qWW.x, qWW.y, qWW.z];
|
||||||
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
||||||
};
|
};
|
||||||
oscCallbacks[`${prepend}/accel`] = function (args) {
|
oscCallbacks[`${prepend}/accel`] = function (args) {
|
||||||
|
@ -299,9 +406,16 @@ oscCallbacks[`${prepend}/accel`] = function (args) {
|
||||||
oscCallbacks[`${prepend}/gyro`] = function (args) {
|
oscCallbacks[`${prepend}/gyro`] = function (args) {
|
||||||
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
||||||
};
|
};
|
||||||
|
oscCallbacks['/ww/calibrate'] = function () {
|
||||||
|
calibrate = true;
|
||||||
|
};
|
||||||
oscCallbacks['/midi'] = function (args) {
|
oscCallbacks['/midi'] = function (args) {
|
||||||
//console.log("MAMOMO MIDI!", args);
|
//console.log("MAMOMO MIDI!", args);
|
||||||
kegel.material.color.offsetHSL(args[2].value / 1000, 0, 0);
|
var minus = (izbranKegel == 1) ? -1 : 1;
|
||||||
|
// kegel.material.color.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||||
|
barvaDodatni.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||||
|
|
||||||
|
|
||||||
if (Math.random() < 0.5) {
|
if (Math.random() < 0.5) {
|
||||||
kegel.scale.x *= 1.5;
|
kegel.scale.x *= 1.5;
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Reference in New Issue