wavey-wind/anim.js

331 lines
6.9 KiB
JavaScript
Raw Normal View History

2017-09-26 20:11:20 +02:00
console.log("Hello, Sky!");
2017-10-05 02:12:16 +02:00
/**** ******
/ Parametri razni *
************/
// Odmik kamere
var odmik_kamere = 80;
2017-10-05 02:12:16 +02:00
// Rotacija kamere
2022-03-03 21:51:02 +01:00
var cam_rot_offset = 0;
2017-10-05 02:12:16 +02:00
// Vidni kot
2021-08-14 15:15:16 +02:00
var FOV = 90;
2017-10-05 02:12:16 +02:00
// Sirina in visina objektov
2021-08-14 15:15:16 +02:00
var width = 6;
2017-10-05 02:12:16 +02:00
2017-10-05 02:52:46 +02:00
// Limit stevila objektov
var obj_limit = 10;
2017-10-05 02:33:44 +02:00
2017-10-05 02:12:16 +02:00
// Prvotno prazno polje objektov. Lahko bi kak buffer to bil pozneje
var objekti = [];
2017-10-05 02:33:44 +02:00
// Stevec, za razno animiranje
var stevec = 0;
2017-10-05 02:12:16 +02:00
2021-08-14 15:15:16 +02:00
var gostota_obj = 1;
2017-10-05 02:12:16 +02:00
// Parametri animacije
2022-03-03 21:51:02 +01:00
var drotacijaX = 0.000;
var drotacijaY = 0.000;
var drotacijaZ = 0.000;
2021-08-14 15:15:16 +02:00
var rotacijaX = 0;
var rotacijaY = 0;
var rotacijaZ = 0;
2017-10-05 02:12:16 +02:00
var crotacijaX = 0.000;
var crotacijaY = 0.000;
var crotacijaZ = 0.000;
2017-10-05 02:52:46 +02:00
// Premik obstojecih barv
var zamikBarve = 0.01;
2022-05-07 15:30:43 +02:00
var barvapuls = 10;
2017-10-05 02:52:46 +02:00
// Zamik pri novem objektu
var barva_mod = 0.003;
2017-10-05 02:52:46 +02:00
var saturacija = 1;
var svetlost = 0.4;
2017-10-05 02:12:16 +02:00
2021-12-24 07:17:42 +01:00
// Rotiranje kamere
var qKamera = new THREE.Quaternion();
2017-10-05 02:12:16 +02:00
2021-12-24 07:17:42 +01:00
// Quaternioni za rotacijo in kalibracijo
var qWW = new THREE.Quaternion();
var qWWo = new THREE.Quaternion();
var qWWd = new THREE.Quaternion();
var qObj = new THREE.Quaternion();
var qStart = new THREE.Quaternion();
2021-12-24 07:17:42 +01:00
var calibrate = true;
var reset = false;
// Razlika v eulerjih
var dqX = 0;
var dqY = 0;
var dqZ = 0;
2021-12-24 07:17:42 +01:00
// Gumbi in pa pospesek
var keysPressed = [0, 0, 0, 0];
var accel = [0, 0, 0];
2017-10-05 02:12:16 +02:00
// Scena, kamera in render
2017-09-26 20:11:20 +02:00
scene = new THREE.Scene;
2021-09-08 18:56:44 +02:00
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 1, 10000);
2017-10-05 02:12:16 +02:00
camera.position.z = odmik_kamere;
2017-09-26 20:11:20 +02:00
renderer = new THREE.WebGLRenderer({
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
2017-10-05 01:37:36 +02:00
// Belo ozadje
//renderer.setClearColor(0xFFFFFF, 1);
// Črno ozadje
renderer.setClearColor(0x000000, 1);
//var pivot = new THREE.Group();
//scene.add( pivot );
2017-09-26 20:11:20 +02:00
2017-10-05 02:12:16 +02:00
2017-10-05 02:33:44 +02:00
function render () {
2021-12-24 07:17:42 +01:00
requestAnimationFrame(render);
stevec += 1;
// Dodaj objekt vcasih
if (stevec % gostota_obj === 0) {
addObj(width, width);
}
renderer.render(scene, camera);
modulirajParametre();
objAnim();
camRotate();
2017-10-05 02:33:44 +02:00
};
2021-12-24 07:17:42 +01:00
function modulirajParametre() {
// Vsi gumbi? => RESET
if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4 && !reset) {
setTimeout(() => {
if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) {
setTimeout(() => {
window.location.reload()
}, 1000);
}
}, 1000)
2021-12-24 07:17:42 +01:00
}
// 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[0]) {
2022-01-01 22:10:59 +01:00
var k = objekti.slice(-1)[0];
2022-01-02 15:45:06 +01:00
qObj.multiply(qWWd);
k.quaternion.multiply(qWWd);
2022-01-01 22:10:59 +01:00
}
if (keysPressed[1]) {
2022-01-02 15:45:06 +01:00
drotacijaX += qWWd.x / 10;
drotacijaY += qWWd.y / 10;
drotacijaZ += qWWd.z / 10;
}
if (keysPressed[2]) {
crotacijaX += qWWd.x / 30;
2022-05-07 15:30:43 +02:00
//crotacijaY += qWWd.y / 30;
crotacijaZ += qWWd.z / 30;
2022-05-07 15:30:43 +02:00
barvapuls += qWWd.y;
}
if (keysPressed[3]) {
width *= 1 + (dqX / 3);
barva_mod += (dqZ / 1000);
obj_limit *= 1 - dqY;
2021-12-24 07:17:42 +01:00
}
if (kbdPressed['c']) {
crotacijaX *= 0.9;
crotacijaY *= 0.9;
crotacijaZ *= 0.9;
}
2021-12-24 07:17:42 +01:00
}
2017-10-05 02:33:44 +02:00
// Funkcija za animacijo objektov
function objAnim() {
2021-08-14 15:15:16 +02:00
objekti.map(function (obj) {
2022-01-02 15:45:06 +01:00
obj.rotation.x += drotacijaX;
obj.rotation.y += drotacijaY;
obj.rotation.z += drotacijaZ;
2017-10-05 02:52:46 +02:00
2021-08-14 15:15:16 +02:00
obj.scale.z += width / 4;
obj.scale.y += width / 4;
obj.scale.x += width / 4;
2017-10-05 02:52:46 +02:00
2021-08-14 15:15:16 +02:00
obj.material.color.offsetHSL(zamikBarve, 0, 0);
});
2017-10-05 02:12:16 +02:00
};
// Funkcija za dodajanje novih objektov
function addObj(w, h) {
2021-12-24 07:17:42 +01:00
var col = new THREE.Color();
2022-05-07 15:30:43 +02:00
//col.setHSL(stevec * barva_mod, saturacija, svetlost);
col.setHSL(stevec * barva_mod, saturacija, (Math.sin(stevec/barvapuls) / 6) + 0.3);
2017-09-26 20:11:20 +02:00
2021-12-24 07:17:42 +01:00
var mat = new THREE.LineBasicMaterial({
color: col
});
2017-10-05 02:52:46 +02:00
2021-12-24 07:17:42 +01:00
var geo = new THREE.BufferGeometry();
var offset = h / 2;
// Karo
var vertices = new Float32Array([
2022-01-01 22:10:59 +01:00
-offset, 0, 0, 0, offset, 0,
2021-12-24 07:17:42 +01:00
-offset, 0, 0, 0, -offset, 0,
2022-01-01 22:10:59 +01:00
offset, 0, 0, 0, offset, 0,
offset, 0, 0, 0, -offset, 0
2021-12-24 07:17:42 +01:00
]);
// 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);
//pivot.add(obj);
2022-01-02 15:45:06 +01:00
obj.setRotationFromQuaternion(qObj);
2021-12-24 07:17:42 +01:00
// Pocisti za seboj
if (objekti.push(obj) > obj_limit) {
while (objekti.length > obj_limit) {
scene.remove(objekti[0]);
objekti.shift();
2017-10-05 02:52:46 +02:00
}
2021-12-24 07:17:42 +01:00
}
2017-09-26 20:11:20 +02:00
};
qK = new THREE.Quaternion()
2017-10-05 03:15:33 +02:00
function camRotate () {
//scene.setRotationFromQuaternion(qKamera)
scene.rotation.x += crotacijaX
scene.rotation.y += crotacijaY
scene.rotation.z += crotacijaZ
}
2017-09-26 20:11:20 +02:00
// Inicializiraj
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
document.getElementById("anim-container").appendChild(renderer.domElement);
render();
}
2017-10-05 01:37:36 +02:00
};
// Lep risajz
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
2017-09-26 20:11:20 +02:00
}
2017-10-05 01:37:36 +02:00
window.addEventListener('resize', onWindowResize, false);
2021-08-14 15:15:16 +02:00
function getVal(msg) {
2021-08-14 15:15:16 +02:00
return msg.value;
}
const kbdPressed = {
a: false,
s: false,
d: false,
f: false,
c: false
};
window.addEventListener('keydown', (e) => {
kbdPressed[e.key] = true;
})
window.addEventListener('keyup', (e) => {
if (e.key in kbdPressed) {
kbdPressed[e.key] = false;
}
})
var oscCallbacks = {
2022-03-05 12:44:07 +01:00
'/keys': [
2021-08-14 15:15:16 +02:00
function(args) {
keysPressed = args.map(getVal);
keysPressed[0] |= kbdPressed['a'];
keysPressed[1] |= kbdPressed['s'];
keysPressed[2] |= kbdPressed['d'];
keysPressed[3] |= kbdPressed['f'];
//console.log(keysPressed, kbdPressed);
2021-08-14 15:15:16 +02:00
}
],
2022-03-05 12:44:07 +01:00
'/quaternion': [
2021-12-24 07:17:42 +01:00
function (args) {
// Popravimo osi (w x y z po defaultu HMM)
2022-01-02 15:45:06 +01:00
[qWW.w, qWW.z, qWW.x, qWW.y] = args.map(getVal);
}
],
2022-03-05 12:44:07 +01:00
'/quaternionDiff': [
function (args) {
[qWWd.w, qWWd.x, qWWd.y, qWWd.z] = args.map(getVal);
}
],
'/eulerDiff': [
function (args) {
2022-03-05 12:44:07 +01:00
[dqX, dqY, dqZ] = args.map(getVal);
2021-12-24 07:17:42 +01:00
}
],
2022-03-04 20:57:24 +01:00
/* Ne uporabljamo vec
2021-08-14 15:15:16 +02:00
'/gyro/': [
function (args) {
var [gx, gy, gz] = args.map(getVal);
console.log(keysPressed)
if (keysPressed[2]) {
rotacijaX += gyro[0] - gx
rotacijaY += gyro[1] - gy
rotacijaZ += gyro[2] - gz
}
if (keysPressed[3]) {
drotacijaX += gyro[0] - gx
drotacijaY += gyro[1] - gy
drotacijaZ += gyro[2] - gz
}
if (keysPressed[1]) {
kameraX += gyro[0] - gx
FOV *= 1 + (gy - gyro[1])
2021-08-14 15:15:16 +02:00
//kameraY += gyro[1] - gy
//kameraZ += gyro[2] - gz
}
if (keysPressed[0]) {
zamikBarve *= 1 + (gx - gyro[0])
obj_limit *= 1 + (gy - gyro[1])
width *= 1 + (gz - gyro[2])
}
gyro = [gx, gy, gz]
}
2021-12-24 07:17:42 +01:00
],
*/
2021-08-14 15:15:16 +02:00
}