From 7053531f40bbca6b8f6aef81fdeb9cd1751db002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jurij=20Podgor=C5=A1ek?= Date: Wed, 30 Nov 2022 12:55:09 +0100 Subject: [PATCH] Kalibracija, zogice --- anim.js | 9 ++- osctl.js | 4 ++ test.js | 198 +++++++++++++++++++++++++++++++++++++++++++------------ 3 files changed, 164 insertions(+), 47 deletions(-) diff --git a/anim.js b/anim.js index c4d013f..69825e7 100644 --- a/anim.js +++ b/anim.js @@ -207,11 +207,10 @@ function addObj(w, h) { obj.setRotationFromQuaternion(qObj); // Pocisti za seboj - if (objekti.push(obj) > obj_limit) { - while (objekti.length > obj_limit) { - scene.remove(objekti[0]); - objekti.shift(); - } + objekti.push(obj); + while (objekti.length > obj_limit) { + scene.remove(objekti[0]); + objekti.shift(); } }; diff --git a/osctl.js b/osctl.js index d611763..1b3916d 100644 --- a/osctl.js +++ b/osctl.js @@ -3,6 +3,10 @@ var oscPort = new osc.WebSocketPort({ metadata: true }); +function sendAll (address, args) { + oscPort.send({ address, args }) +} + oscPort.on("ready", function () { console.log("OSC listening!") oscPort.on("message", function (msg) { diff --git a/test.js b/test.js index 74e7aca..56524df 100644 --- a/test.js +++ b/test.js @@ -4,8 +4,11 @@ console.log("Hello, Sky!"); /☭☭☭☭ Test skripta ☭☭☭☭ * ******☭☭☭☭☭☭☭☭☭☭☭☭******/ -// Odmik kamere -var odmik_kamere = 100; +// Ker kegel imamo? +var izbranKegel = 1; +if (window.location.hash.indexOf('kegel') > -1) { + izbranKegel = window.location.hash.split('=')[1]; +} // Vidni kot var FOV = 90; @@ -24,11 +27,15 @@ var accZ = 0.000; var scene = new THREE.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; -renderer = new THREE.WebGLRenderer({ +var renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); @@ -38,7 +45,7 @@ renderer.setClearColor(0xFFFFFF, 1); // Črno ozadje //renderer.setClearColor(0x000000, 1); -var skupina = new THREE.Group(); +//var skupina = new THREE.Group(); // Dodaj test skatlo @@ -150,21 +157,56 @@ for (var n = 0; n < radialnihSegmentov; n += 1) { } */ -var barva = new THREE.Color(); -barva.setHSL(0.6, 1.0, 0.5); +var barva = new THREE.Color(0, 0, 0); +var barvaDodatni = new THREE.Color(); +barvaDodatni.setHSL(0.6, 1.0, 0.5); var mat = new THREE.MeshBasicMaterial({ //color: 0xff00ff, color: barva, - wireframe: true + wireframe: true, + transparent: true }); window.mat = mat; //var mat = new THREE.LineBasicMaterial({ color: 0xff00ff }); var kegel = new THREE.Mesh(geo, mat); kegel.position.z += 64; -kegel.position.y += 32; +//kegel.position.y += 32; +kegel.position.y = -100; 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 var gAX = new THREE.CylinderGeometry(10, 10, 10, 16); @@ -174,10 +216,12 @@ var AX = new THREE.Mesh(gAX, mAX); //skupina.add(AX); // Damo vse skupaj v kader -scene.add(skupina); +// scene.add(skupina); +scene.add(kegel); // Quaternioni za rotacijo in kalibracijo var qWW = new THREE.Quaternion(); +var qPrej = new THREE.Quaternion(); var qObj = new THREE.Quaternion(); var qStart = new THREE.Quaternion(); var reset = false; @@ -185,29 +229,44 @@ var calibrate = true; var objekti = [kegel]; +var dodatniObjekti = []; +var krogle = []; +var stevec = 0; -// Zacetna orientacija -camera.position.y = -100 +// Zacetna orientacija kegla scene.rotation.x = 90; -scene.rotation.z = -270; +scene.rotation.z = 270; -skupina.position.z = 64; -skupina.position.y = -34; +// Polozaj kamere +//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 () { requestAnimationFrame(render); renderer.render(scene, camera); + stevec += 1; objAnim(); + inputHandle(); + + if (stevec % 10 == 0) { + novaKrogla(); + } }; // Funkcija za animacijo objektov function objAnim() { - if (kbdPressed.c) { - calibrate = true; - } - // Rotacija kegla objekti.map(function (obj) { // Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.) @@ -217,6 +276,42 @@ function objAnim() { 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 if (calibrate) { @@ -240,30 +335,41 @@ function objAnim() { kegel.scale.z *= 0.95; } - // 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...."); - } + + // Dupliranje keglov + //console.log(accX); + kegel.material.color.offsetHSL(2 / 1000, 0, 0); + if (accX > 1/* && (stevec % 10) == 0*/) { + var dodatni = kegel.clone(); + dodatni.renderOrder = stevec; + var dodatniMat = kegel.material.clone(); + var dodatniBarva = barvaDodatni.clone(); + dodatniMat.color = dodatniBarva; + dodatni.material = dodatniMat; + 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 document.onreadystatechange = function () { - if (document.readyState === 'complete') { - document.getElementById("anim-container").appendChild(renderer.domElement); - - render(); - } + if (document.readyState === 'complete') { + document.getElementById("anim-container").appendChild(renderer.domElement); + render(); + } }; // Lep risajz @@ -281,8 +387,8 @@ var keysPressed = [0, 0, 0, 0]; const getVal = function (msg) { return msg.value; } - -var prepend = '/ww/0/ww/0'; +var prepend = `/ww/0/ww/${izbranKegel}`; +console.log('prepend!', prepend); var oscCallbacks = {}; @@ -291,6 +397,7 @@ oscCallbacks[`${prepend}'/keys`] = function(args) { }; oscCallbacks[`${prepend}/quaternion`] = function (args) { // 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); }; oscCallbacks[`${prepend}/accel`] = function (args) { @@ -299,9 +406,16 @@ oscCallbacks[`${prepend}/accel`] = function (args) { oscCallbacks[`${prepend}/gyro`] = function (args) { [rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal); }; +oscCallbacks['/ww/calibrate'] = function () { + calibrate = true; +}; oscCallbacks['/midi'] = function (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) { kegel.scale.x *= 1.5; } else {