kegel/web/izris.js

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