kegel/web/izris.js

379 lines
9.0 KiB
JavaScript
Raw Normal View History

console.log("Hello, Sky!");
/**** ******
/ KEGLI *
************/
// Vidni kot
var FOV = 90;
var deformiraj = 0;
const izbraniStolpicki = [0, 4, 8, 12]
// "Napihni" kegle?
let napihni = 1
// Scena, kamera in render
var scene = new THREE.Scene;
window.scene = scene;
/*
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;
// Polozaj kamere
camera.position.z = 40;
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
// Belo ozadje
renderer.setClearColor(0xFFFFFF, 1);
// Črno ozadje
//renderer.setClearColor(0x000000, 1);
var barvnePalete = [
[0x0a2d2e, 0x1c4e4f, 0x436e6f, 0x6a8e8f, 0x879693, 0xa49e97, 0xdeae9f, 0xefd7cf, 0xf7ebe7, 0xffffff],
// https://colorkit.co/palette/0a2d2e-1c4e4f-436e6f-6a8e8f-879693-a49e97-deae9f-efd7cf-f7ebe7-ffffff/
[0x80558c, 0xaf7ab3, 0xcba0ae, 0xd8b9a0, 0xe4d192],
// https://colorkit.co/palette/80558c-af7ab3-cba0ae-d8b9a0-e4d192/
[0xf68aa2, 0xcf6d93, 0xa85183, 0x813474, 0x5a1765],
// https://colorkit.co/palette/f68aa2-cf6d93-a85183-813474-5a1765/
[0x03071e, 0x211c1b, 0x3d3019, 0x594417, 0x745814, 0x906b12, 0xac7f0f, 0xc8930d, 0xe3a60a, 0xffba08]
// https://colorkit.co/palette/03071e-211c1b-3d3019-594417-745814-906b12-ac7f0f-c8930d-e3a60a-ffba08/
]
var barvnePaleteIdx = [0, 0, 0, 0]
let dodatniKegli = 0
/*
var barvnaPaleta = [
new THREE.Color(0x003F5C),
new THREE.Color(0x58508D),
new THREE.Color(0xBC5090),
new THREE.Color(0xFF6361),
new THREE.Color(0xFFA600),
// Simetrija
new THREE.Color(0xFF6361),
new THREE.Color(0xBC5090),
new THREE.Color(0x58508D),
];
console.log(barvnaPaleta);
var barvnaPaletaIdx = 0;
*/
const objekti = []
for (let i = 0; i < ST_KEGLOV; i++) {
objekti.push(getKegel())
// Popravki polozajev keglov!
objekti[i].position.x = 12
2023-06-28 19:04:11 +02:00
objekti[i].position.y = -40
objekti[i].position.z = 20
}
objekti[0].position.z = 20
// "Zunanji" kegel
const zunanjiScale = 20
//const DRUG = (IZBRAN + 1) % 2
const DRUG = 1
objekti[DRUG].scale.x = zunanjiScale
objekti[DRUG].scale.z = zunanjiScale
objekti[DRUG].scale.y = zunanjiScale
var dodatniObjekti = []
var krogle = []
var stevec = 0
let fraktalni_objekti = []
let fraktalni_timer = null;
function dodajFraktal(viden = false) {
//console.log('dodajam frakt!')
const i = fraktal_stevec % ST_KEGLOV
const fract = objekti[i].clone()
//fract.scale = fraktal_meje[1].clone()
fract.scale.x = fraktal_meje[1].x
fract.scale.y = fraktal_meje[1].x
fract.scale.z = fraktal_meje[1].x
fract.material = objekti[i].material.clone()
if (!viden) {
fract.material.opacity = 0.05
}
fract.i = i
fract.qStart = objekti[i].quaternion.clone()
fract.qStart.conjugate()
//console.log('dodajam fract', fract, fraktal_stevec)
fraktalni_objekti.push(fract)
scene.add(fract)
// Odstrani odvecne
while (fraktalni_objekti.length > fraktal_limit) {
scene.remove(fraktalni_objekti[0])
fraktalni_objekti.shift()
}
fraktal_stevec += 1
}
function skrijFraktale(fraktali) {
let konec = false
fraktali.forEach(f => {
if (f.material.opacity < 0.05) {
scene.remove(f)
konec = true
} else {
f.material.opacity *= 0.9
}
})
if (konec) {
fraktali.forEach(f => scene.remove(f))
fraktalni_objekti = []
} else {
setTimeout(() => skrijFraktale(fraktali), 50)
}
}
function fraktalTranzicija(fraktaliziraj) {
// Pocisti
if (!fraktaliziraj) {
skrijFraktale(fraktalni_objekti)
} else {
dodajFraktal(true)
}
// Prikazi/skrij osnovne kegle
for (let i = 0; i < ST_KEGLOV; i++) {
if (fraktaliziraj) {
scene.remove(objekti[i])
} else {
scene.add(objekti[i])
}
}
// Dodajanje novih
dodajFraktalTimeout()
}
function dodajFraktalTimeout() {
setTimeout(() => {
if (fraktaliziraj) {
dodajFraktal()
dodajFraktalTimeout()
}
}, fraktal_interval)
}
fraktalTranzicija(fraktaliziraj)
// Zacetna orientacija kegla
scene.rotation.x = 90
scene.rotation.z = 270
let cakajDeformiraj = false
let cakajZogice = false
let cakajDodatniKegli = false
function render () {
requestAnimationFrame(render)
renderer.render(scene, camera)
stevec += 1
objAnim()
inputHandle()
while (krogle.length > 50) {
scene.remove(krogle[0])
krogle.shift()
}
// Fraktaliziraj?
if (fraktaliziraj) {
fraktalni_objekti.forEach(f => {
// Pomanjsaj
f.scale.multiply(fraktal_sprememba)
// Vidnost (fade in)
if (f.material.opacity < 1) {
f.material.opacity *= 1.1
}
// Rotacija
const qF = qWW[f.i + 1].clone()
qF.multiply(f.qStart)
f.setRotationFromQuaternion(qF)
})
}
}
var cakajDodatni = false
// Funkcija za animacijo objektov
function objAnim() {
// FFT
if (analyser) {
analyser.getByteFrequencyData(stolpicki)
//deformiraj = (stolpicki[3] + stolpicki[4] + stolpicki[5]) / 30 * deformiraj
//console.log('FFT!', stolpicki)
//napihni = 1 + stolpicki[0] / 10
}
// Kalibracija rotacije kegla
if (calibrate) {
for (let i = 1; i <= ST_KEGLOV; i++) {
qStart[i] = qWW[i].clone();
qStart[i].conjugate();
}
calibrate = false;
console.log("RESET!");
}
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
for (let i = 0; i < ST_KEGLOV; i++) {
const j = i + 1
qObj[j] = qWW[j].clone()
qObj[j].multiply(qStart[j])
objekti[i].setRotationFromQuaternion(qObj[j]);
//console.log('deformiraj za', deformiraj)
deformirajKegel(objekti[i], izbraniStolpicki, deformiraj)
objekti[i].geometry.attributes.position.needsUpdate = true;
/*
obj.scale.z = napihni
// Utripanje ob zogicah
if (napihni > 1) {
obj.scale.x = napihni * 2
obj.scale.y = napihni * 2
napihni = Math.max(napihni * 0.9, 1)
} else {
obj.scale.x = 1
obj.scale.y = 1
}
*/
}
//const obj = objekti[IZBRAN]
// Ce je dodatnih objektov prevec, pucaj
while (dodatniObjekti.length > 100) {
scene.remove(dodatniObjekti[0]);
dodatniObjekti.shift();
}
dodatniObjekti.map(function (obj) {
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
//qObj[i] = 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.998;
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;
var scaleF = 0.05;
obj.scale.x += scaleF;
obj.scale.y += scaleF;
obj.scale.z += scaleF;
});
/* ?????
if (objekti[IZBRAN].scale.x > 1) {
objekti[IZBRAN].scale.x *= 0.95;
}
if (objekti[IZBRAN].scale.z > 1) {
objekti[IZBRAN].scale.z *= 0.95;
}
*/
// kegel.material.color.offsetHSL(2 / 1000, 0, 0);
// Dupliranje keglov
if (dodatniKegli) {
var vsota = Math.abs(acc[IZBRAN].x) + Math.abs(acc[IZBRAN].z)
if (vsota > 2 && !cakajDodatni) {
cakajDodatni = true
2023-06-28 19:04:11 +02:00
var dodatni = objekti[IZBRAN - 1].clone();
dodatni.renderOrder = stevec;
2023-06-28 19:04:11 +02:00
var dodatniMat = objekti[IZBRAN - 1].material.clone();
//var dodatniBarva = barvaDodatni.clone();
2023-06-28 19:04:11 +02:00
var bId = (IZBRAN == 1) ? 0 : 1
var dodatniBarva = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]])
dodatniMat.color = dodatniBarva;
dodatni.material = dodatniMat;
dodatni.premakniAxis = new THREE.Vector3(
Math.random(),
Math.random(),
Math.random()
);
dodatni.premakniKolicina = vsota;
var rQ = qWW[IZBRAN].clone();
rQ.invert();
2023-06-28 19:04:11 +02:00
rQ.multiply(qPrej[IZBRAN]);
dodatni.rotirajQ = rQ;
//dodatni.qStart = kegel.quaternion.clone();
dodatniObjekti.push(dodatni);
scene.add(dodatni);
barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
}
if (cakajDodatni && vsota < 1) {
cakajDodatni = false
}
}
}
// Inicializiraj
document.onreadystatechange = function () {
if (document.readyState === 'complete') {
document.getElementById("anim-container").appendChild(renderer.domElement)
render()
setTimeout(() => {
calibrate = true
// Zacni audio analizo
//zacniAnalizo()
}, 1000)
}
}
// Lep risajz
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);