379 lines
9.0 KiB
JavaScript
379 lines
9.0 KiB
JavaScript
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
|
|
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
|
|
var dodatni = objekti[IZBRAN - 1].clone();
|
|
dodatni.renderOrder = stevec;
|
|
var dodatniMat = objekti[IZBRAN - 1].material.clone();
|
|
//var dodatniBarva = barvaDodatni.clone();
|
|
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();
|
|
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);
|
|
|