Kalibracija, zogice

kegel
Jurij Podgoršek 2022-11-30 12:55:09 +01:00
parent ec796bafab
commit 7053531f40
3 changed files with 164 additions and 47 deletions

View File

@ -207,11 +207,10 @@ 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();
}
} }
}; };

View File

@ -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) {

198
test.js
View File

@ -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,30 +335,41 @@ 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);
} }
}; };
// Inicializiraj // Inicializiraj
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(); }
}
}; };
// Lep risajz // Lep risajz
@ -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 {