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);