WIP scheme verzije, izboljsane kontrole, debagiranje

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "description": "kiberkegel",
   "dependencies": {
+    "express": "^4.18.2",
     "midi": "^2.0.0",
     "nodemon": "^2.0.16",
     "osc": "^2.4.2",
@@ -10,6 +11,7 @@
     "ws": "^7.3.1"
   },
   "scripts": {
-    "start": "npx nodemon kegel.js"
+    "start": "npx nodemon kegel.js",
+    "serve": "node server.js"
   }
 }

server.js

@@ -0,0 +1,9 @@
+const express = require("express")
+const path = require("path")
+const PORT = 8080
+
+const app = express()
+
+app.use(express.static('./web'))
+app.listen(PORT, () => console.log("Poslusam na ", PORT))
+

server.scm

@@ -0,0 +1,11 @@
+(define express (node-require "express"))
+(define path (node-require "path"))
+(define PORT 8080)
+
+(define app (express))
+
+(print (js-eval "__dirname"))
+
+(js-invoke app "use" (js-invoke express "static" "./web"))
+(js-invoke app "listen" PORT (print "Poslusam na " PORT))
+

web/config.js

@@ -1,4 +1,5 @@
-const SERVER_IP = '192.168.1.101'
+//const SERVER_IP = '192.168.1.101'
+const SERVER_IP = '127.0.0.1'
 const SERVER_PORT = 6676
 const PROTO = 'ws'
 
@@ -9,5 +10,6 @@ const IZBRAN = (window.location.hash.indexOf('kegel') > -1)
 console.log('izbran kegel: ', IZBRAN);
 
 const ST_KEGLOV = 2
-const PREPEND = `/ww/0/ww/`
+//const PREPEND = `/ww/0/ww/`
+const PREPEND = `/`
 console.log('OSC predpona', PREPEND);

web/ctl.css

@@ -23,6 +23,11 @@ button {
   flex-direction: row;
 }
 
-.gumb {
+.krmilnik {
   width: 5rem;
 }
+
+input[type=checkbox] {
+  width: 1.5rem;
+  height: 1.5rem;
+}

web/ctl.html

@@ -16,24 +16,14 @@
                       NASTAVITVE
                   </th>
               </tr>
-              <tr>
-                  <td>šum 1</td>
-                  <td class="gumb">
-                      <button id="sum1">&nbsp;</button>
-                  </td>
-              </tr>
-              <tr>
-                  <td>šum 2</td>
-                  <td class="gumb">
-                      <button id="sum1">&nbsp;</button>
-                  </td>
-              </tr>
           </table>
       </section>
 
+      <script src="node_modules/three/build/three.js"></script>
       <script src="node_modules/osc/dist/osc-browser.js"></script>
       <script src="config.js"></script>
       <script src="osctl.js"></script>
+      <script src="osc_callbacks.js"></script>
       <script src="ctl.js"></script>
   </body>
 </html>

web/ctl.js

@@ -7,22 +7,159 @@ const scene = {
   }
 }
 
-const gumbi = {
+const parametri = [
-  'kalibriraj': () => {
+  {
+    napis: 'kalibriraj',
+    tip: 'button',
+    sprememba: ev => {
       console.log('kalibriram')
       sendAll('/ww/calibrate')
     }
-}
+  },
+  {
+    napis: 'fraktaliziraj',
+    tip: 'toggle',
+    sprememba: ev => {
+      sendAll('/ww/fraktaliziraj', [{
+        type: 'i',
+        value: ev.currentTarget.checked ? 1 : 0
+      }])
+    }
+  },
+  {
+    napis: 'fraktaliziraj',
+    tip: 'slider',
+    min: 100,
+    max: 2000,
+    step: 1,
+    value: 1200,
+    sprememba: ev => {
+      sendAll('/ww/fraktal-interval', [{
+        type: 'i',
+        value: ev.currentTarget.value
+      }])
+    }
+  },
+  {
+    napis: 'napihuj',
+    tip: 'toggle',
+    sprememba: ev => {
+      sendAll('/ww/napihuj', [{
+        type: 'i',
+        value: ev.currentTarget.checked ? 1 : 0
+      }])
+    }
+  },
+  {
+    napis: 'zogice',
+    tip: 'toggle',
+    sprememba: ev => {
+      sendAll('/ww/zogice', [{
+        type: 'i',
+        value: ev.currentTarget.checked ? 1 : 0
+      }])
+    }
+  },
+  {
+    napis: 'duhovi',
+    tip: 'toggle',
+    sprememba: ev => {
+      sendAll('/ww/kegli', [{
+        type: 'i',
+        value: ev.currentTarget.checked ? 1 : 0
+      }])
+    }
+  },
+  {
+    napis: 'osvezi',
+    tip: 'button',
+    sprememba: ev => {
+      sendAll('/ww/reload')
+    }
+  },
+  {
+    napis: 'zoom',
+    tip: 'slider',
+    min: 3,
+    max: 300,
+    value: 40,
+    step: 'any',
+    sprememba: ev => {
+      console.log('zoom!', ev.currentTarget.value)
+      sendAll('/ww/zoom', [{
+        type: 'f',
+        value: ev.currentTarget.value
+      }])
+    }
+  },
+  {
+    napis: 'deformiraj (po zvoku)',
+    tip: 'slider',
+    min: 0,
+    max: 10,
+    value: 0,
+    step: 'any',
+    sprememba: ev => {
+      sendAll('/ww/deformiraj', [{
+        type: 'f',
+        value: ev.currentTarget.value
+      }])
+    }
+  },
+]
 
-const qs = s => document.querySelector(s)
+const Qs = s => document.querySelector(s)
-const qsa = s => document.querySelectorAll(s)
+const Qsa = s => document.querySelectorAll(s)
-const ce = e => document.createElement(e)
+const Ce = e => document.createElement(e)
+
+function ustvariElement(p) {
+  const vrstica = Ce('tr')
+
+  // Napis
+  const napis = Ce('td')
+  napis.innerHTML = p.napis
+  vrstica.appendChild(napis)
+
+  // Krmilnik
+  let krmilnik
+  switch (p.tip) {
+
+  case 'button':
+    krmilnik = Ce('button')
+    krmilnik.innerHTML = ' '
+    krmilnik.onclick = p.sprememba
+    break
+
+  case 'toggle':
+    krmilnik = Ce('input')
+    krmilnik.setAttribute('type', 'checkbox')
+    krmilnik.onchange = p.sprememba
+    break
+
+  case 'slider':
+    krmilnik = Ce('input')
+    krmilnik.setAttribute('type', 'range')
+    krmilnik.setAttribute('min', p.min)
+    krmilnik.setAttribute('max', p.max)
+    krmilnik.setAttribute('step', p.step)
+    krmilnik.setAttribute('value', p.value)
+    krmilnik.oninput = p.sprememba
+    break
+  }
+
+  const krmilnikCelica = Ce('td')
+  krmilnikCelica.className = "krmilnik"
+  krmilnikCelica.appendChild(krmilnik)
+  vrstica.appendChild(krmilnikCelica)
+
+  return vrstica
+}
 
 window.addEventListener('DOMContentLoaded', () => {
   // Dodaj scene
-  const sceneTD = qs('#scene')
+  const sceneTD = Qs('#scene')
   Object.keys(scene).forEach(ime => {
-    const b = ce('button')
+    const b = Ce('button')
     b.innerHTML = ime
     b.onclick = () => {
       console.log('izbiram ', ime)
@@ -32,25 +169,9 @@ window.addEventListener('DOMContentLoaded', () => {
   })
 
   // Dodaj gumbe
-  const gumbiT = qs('#ctl')
+  const gumbiT = Qs('#ctl')
-  Object.keys(gumbi).forEach(ime => {
+  parametri.forEach(p => {
-    const v = ce('tr')
+    const el = ustvariElement(p)
-    const ic = ce('td')
+    gumbiT.appendChild(el)
-    ic.append(ime)
-    v.append(ic)
-
-    const g = ce('button')
-    g.id = 'gumb_' + ime
-    g.innerHTML = ' '
-    const gc = ce('td')
-    gc.append(g)
-    v.append(gc)
-
-    g.onclick = () => {
-      console.log('spreminjam', ime)
-      gumbi[ime]()
-    }
-
-    gumbiT.append(v)
   })
 })

web/ctl.scm

@@ -0,0 +1,55 @@
+;; Oblika parametra
+(define-record-type parameter
+  (fields napis tip sprememba))
+
+(define (poslji-vsem msg . args)
+  (if (> (length args) 0)
+      ((js-eval "sendAll") msg args)
+      ((js-eval "sendAll") msg)))
+
+  (console-log "poslji vsem" msg args)
+  (console-log ((js-eval "sendAll") msg args)))
+  ;(js-eval "window" "sendAll" msg args))
+
+;;;;;;;;;;;;;;;;;;;;;;;
+;; Seznam parametrov ;;
+;;;;;;;;;;;;;;;;;;;;;;;
+(define parametri
+  (list
+   ;; Kalibracija
+   (make-parameter
+    "kalibriraj"
+    "button"
+    (lambda (ev) (poslji-vsem "/ww/calibrate")))))
+
+
+(define p-kontejner ($ "#ctl"))
+
+(define (ustvari-element p)
+  (let ((vrstica (element-new '(tr)))
+        (napis (element-new `(td ,(parameter-napis p)))))
+    (case (parameter-tip p)
+      (("button")
+       (let ((gumb (element-new '(button " "))))
+         (element-append-child! vrstica napis)
+         (add-handler! gumb "click" (parameter-sprememba p))
+         (console-log gumb)
+         (element-append-child!
+          vrstica
+          (element-append-child! (element-new '(td)) gumb))
+         vrstica))
+      (else #f))))
+
+(define (dodaj-parametre parametri)
+  (if (> (length parametri) 0)
+      (let* ((p (car parametri))
+             (vrstica (ustvari-element p)))
+        (element-append-child! p-kontejner vrstica)
+        (console-log "dodal" vrstica))))
+
+;(add-handler!
+; (js-eval "window") "DOMContentLoaded"
+; (lambda (ev)
+;   (console-log "dodajam parametre")
+; (dodaj-parametre parametri)))
+(dodaj-parametre parametri)

web/fft.js

@@ -22,13 +22,12 @@ function zacniAnalizo() {
         analyser.smoothingTimeConstant = 0.85;
         analyser.fftSize = fftSize
         source.connect(analyser)
+        analiziramZvok = true
       },
       () => {
         console.log('napaka nalaganja mikrofona', arguments)
         analiziramZvok = false
       }
     )
-
-    analiziramZvok = true
   }
 }

web/index.html

@@ -9,7 +9,7 @@
   <body>
       <div id="anim-container"></div>
 
-      <script src="node_modules/three/build/three.min.js"></script>
+      <script src="node_modules/three/build/three.js"></script>
       <script src="node_modules/osc/dist/osc-browser.js"></script>
       <script src="config.js"></script>
       <script src="osctl.js"></script>

web/input.js

@@ -15,7 +15,6 @@ function inputHandle () {
     sendAll('/ww/reload');
     window.location.reload();
   }
-  /*
   if (kbdPressed.d && !cakajDeformiraj) {
     deformiraj = !deformiraj
     cakajDeformiraj = true
@@ -26,7 +25,6 @@ function inputHandle () {
     sendAll('/ww/zoom', args)
     setTimeout(() => cakajDeformiraj = false, 200)
   }
-  */
   if (kbdPressed.g && !cakajZogice) {
     zogice = !zogice
     cakajZogice = true
@@ -66,9 +64,7 @@ window.addEventListener('mousedown', e => {
   case 0:
     kbdPressed['miska'] = true
 
-    if (!analiziramZvok) {
     zacniAnalizo()
-    }
     break;
   case 2:
     kbdPressed['miskaD'] = true
@@ -86,17 +82,22 @@ window.addEventListener('mouseup', e => {
 
 var skrolam = false;
 var zadnjiSkrol = 0;
+
 window.addEventListener('mousemove', e => {
   if (kbdPressed['miska']) {
+    /*
     const sprememba = (e.movementX + e.movementY) / 10
 
     spremeniZoom(sprememba)
+    console.log('nov zoom', sprememba)
     const args = [{
       type: "f",
       value: sprememba
     }];
     sendAll('/ww/zoom', args)
+    */
   }
+  /*
   if (kbdPressed['miskaD']) {
     const sprememba = (e.movementX + e.movementY) / 10
 
@@ -107,4 +108,5 @@ window.addEventListener('mousemove', e => {
     }];
     sendAll('/ww/deformiraj', args)
   }
+  */
 })

web/izris.js

@@ -25,7 +25,7 @@ scene.add( axesHelper );
 var camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
 window.camera = camera;
 // Polozaj kamere
-camera.position.z = 30;
+camera.position.z = 40;
 
 var renderer = new THREE.WebGLRenderer({ alpha: true });
 renderer.setSize(window.innerWidth, window.innerHeight);
@@ -47,8 +47,7 @@ var barvnePalete = [
 ]
 var barvnePaleteIdx = [0, 0, 0, 0]
 
-let zogice = false
+let dodatniKegli = 0
-let dodatniKegli = false
 /*
 var barvnaPaleta = [
   new THREE.Color(0x003F5C),
@@ -65,36 +64,34 @@ console.log(barvnaPaleta);
 var barvnaPaletaIdx = 0;
 */
 
-var objekti = [getKegel(), getKegel()];
+const objekti = []
-
 for (let i = 0; i < ST_KEGLOV; i++) {
-  //objekti[i].rotation = qWW[i]
+  objekti.push(getKegel())
+
+  // Popravki polozajev keglov!
+  objekti[i].position.x = 12
+  objekti[i].position.y = -30
+  objekti[i].position.z = 20
 }
+objekti[0].position.z = 20
 
 // "Zunanji" kegel
-objekti[1].scale.x = 10
+const zunanjiScale = 20
-objekti[1].scale.z = 10
+//const DRUG = (IZBRAN + 1) % 2
-objekti[1].scale.y = 10
+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
 
-// Fraktaliziraj (kegel znotraj kegla manjsanje)
-let fraktaliziraj = 1
-let fraktal_meje = [
-  new THREE.Vector3(0.1, 0.1, 0.1),
-  new THREE.Vector3(10, 10, 10)
-]
-let fraktal_sprememba = new THREE.Vector3(0.98, 0.98, 0.98)
-let fraktal_interval = 2500
-let fraktal_stevec = 0
-const fraktal_limit = 100
-
 let fraktalni_objekti = []
 let fraktalni_timer = null;
 
-function dodajFraktal() {
+function dodajFraktal(viden = false) {
+  //console.log('dodajam frakt!')
   const i = fraktal_stevec % ST_KEGLOV
   
   const fract = objekti[i].clone()
@@ -103,7 +100,10 @@ function dodajFraktal() {
   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()
@@ -120,24 +120,62 @@ function dodajFraktal() {
 
   fraktal_stevec += 1
 }
-function fraktalInit() {
+function skrijFraktale(fraktali) {
-  for (let i = 0; i < ST_KEGLOV; i++) {
+  let konec = false
-    fraktalni_objekti = []
+  fraktali.forEach(f => {
-    //objekti[i].material.opacity = 0
+    if (f.material.opacity < 0.05) {
-    scene.remove(objekti[i])
+      scene.remove(f)
+      konec = true
+    } else {
+      f.material.opacity *= 0.9
     }
-  fraktal_interval = setInterval(() => dodajFraktal(), fraktal_interval)
+  })
+  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()
 }
 
-fraktalInit()
+function dodajFraktalTimeout() {
+  setTimeout(() => {
+    if (fraktaliziraj) {
+      dodajFraktal()
+      dodajFraktalTimeout()
+    }
+  }, fraktal_interval)
+}
+
+fraktalTranzicija(fraktaliziraj)
 
 // Zacetna orientacija kegla
 scene.rotation.x = 90
 scene.rotation.z = 270
 
-var cakajDeformiraj = false
+let cakajDeformiraj = false
-var cakajZogice = false
+let cakajZogice = false
-var cakajDodatniKegli = false
+let cakajDodatniKegli = false
 
 function render () {
   requestAnimationFrame(render)
@@ -161,11 +199,11 @@ function render () {
 
       // Vidnost (fade in)
       if (f.material.opacity < 1) {
-        f.material.opacity *= 1.02
+        f.material.opacity *= 1.1
       }
 
       // Rotacija
-      const qF = qWW[f.i].clone()
+      const qF = qWW[f.i + 1].clone()
       qF.multiply(f.qStart)
       f.setRotationFromQuaternion(qF)
     })
@@ -180,14 +218,14 @@ function objAnim() {
   // FFT
   if (analyser) {
     analyser.getByteFrequencyData(stolpicki)
-    deformiraj = (stolpicki[3] + stolpicki[4] + stolpicki[5]) / 30
+    //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 = 0; i < ST_KEGLOV; i++) {
+    for (let i = 1; i <= ST_KEGLOV; i++) {
       qStart[i] = qWW[i].clone();
       qStart[i].conjugate();
     }
@@ -197,19 +235,17 @@ function objAnim() {
 
   // Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
   for (let i = 0; i < ST_KEGLOV; i++) {
-    qObj[i] = qWW[i].clone()
+    const j = i + 1
-    qObj[i].multiply(qStart[i])
+    qObj[j] = qWW[j].clone()
-    objekti[i].setRotationFromQuaternion(qObj[i]);
+    qObj[j].multiply(qStart[j])
+    objekti[i].setRotationFromQuaternion(qObj[j]);
 
-    deformirajKegel(objekti[i], izbraniStolpicki)
+    //console.log('deformiraj za', deformiraj)
+    deformirajKegel(objekti[i], izbraniStolpicki, deformiraj)
     objekti[i].geometry.attributes.position.needsUpdate = true;
-  }
-
-  // Rotacija kegla
-  //const obj = objekti[IZBRAN]
 
     /*
-  //obj.scale.z = napihni
+    obj.scale.z = napihni
 
     // Utripanje ob zogicah
     if (napihni > 1) {
@@ -221,6 +257,9 @@ function objAnim() {
       obj.scale.y = 1
     }
     */
+  }
+  //const obj = objekti[IZBRAN]
+
 
   // Ce je dodatnih objektov prevec, pucaj
   while (dodatniObjekti.length > 100) {
@@ -230,7 +269,7 @@ function objAnim() {
     
   dodatniObjekti.map(function (obj) {
     // Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
-    qObj[i] = qWW.clone();
+    //qObj[i] = qWW.clone();
     //qObj.multiply(obj.qStart).multiply(qStart);
     //obj.setRotationFromQuaternion(qObj);
 
@@ -282,11 +321,11 @@ function objAnim() {
     var vsota = Math.abs(acc[IZBRAN].x) + Math.abs(acc[IZBRAN].z)
     if (vsota > 2 && !cakajDodatni) {
       cakajDodatni = true
-      var dodatni = obj.clone();
+      var dodatni = objekti[IZBRAN].clone();
       dodatni.renderOrder = stevec;
       var dodatniMat = objekti[IZBRAN].material.clone();
       //var dodatniBarva = barvaDodatni.clone();
-      var bId = IZBRAN == 0 ? 0 : 1
+      var bId = (IZBRAN == 0) ? 0 : 1
       var dodatniBarva = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]])
       dodatniMat.color = dodatniBarva;
       dodatni.material = dodatniMat;
@@ -296,7 +335,7 @@ function objAnim() {
         Math.random()
       );
       dodatni.premakniKolicina = vsota;
-      var rQ = qWW.clone();
+      var rQ = qWW[IZBRAN].clone();
       rQ.invert();
       rQ.multiply(qPrej);
       dodatni.rotirajQ = rQ;
@@ -319,6 +358,13 @@ document.onreadystatechange = function () {
   if (document.readyState === 'complete') {
     document.getElementById("anim-container").appendChild(renderer.domElement)
     render()
+
+    setTimeout(() => {
+      calibrate = true
+
+      // Zacni audio analizo
+      //zacniAnalizo()
+    }, 1000)
   }
 }
 

web/kegel.js

@@ -103,8 +103,7 @@ function getKegel() {
   const geo = getKegelGeo();
 
   var barva = new THREE.Color(0, 0, 0);
-  var barvaDodatni = new THREE.Color();
+
-  barvaDodatni.setHSL(0.6, 1.0, 0.5);
   var mat = new THREE.MeshBasicMaterial({
     //color: 0xff00ff,
     color: barva,
@@ -114,6 +113,10 @@ function getKegel() {
   window.mat = mat;
   //var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
   var kegel = new THREE.Mesh(geo.clone(), mat);
+  kegel.barvaDodatni = new THREE.Color();
+  kegel.barvaDodatni.setHSL(0.6, 1.0, 0.5);
+
+  /*
   kegel.position.z = 20;  //  gor / dol
   kegel.position.y = -30; // levo / desno
   kegel.position.x = 12;  // levo / desno drugic
@@ -123,13 +126,14 @@ function getKegel() {
     kegel.position.y += 8;
     kegel.position.z += 3;
   }
+  */
 
   scene.add(kegel);
   return kegel;
 }
 
   // Deformiranje kegla!
-function deformirajKegel(obj, fft) {
+function deformirajKegel(obj, fft, faktor) {
   const koti = obj.geometry.attributes.position.array;
   /*
   // Random 500 zamaknemo
@@ -143,7 +147,7 @@ function deformirajKegel(obj, fft) {
   for (let k = 0; k < kotov; k += 1) {
     const zamik = Math.floor(Math.random() * 3)
     //const neg = (Math.random() > 0.5) ? 1 : -1
-    const vrednost = stolpicki[Math.floor(k / kotov * fft.length) + zamik] /* * neg*/ / 30
+    const vrednost = stolpicki[Math.floor(k / kotov * fft.length) + zamik] /* * neg*/ / 30 * faktor
     const kot = koti.length - (k * 3 + zamik)
     /*
     if (k % 30 == 0) {

web/osc_callbacks.js

@@ -1,7 +1,7 @@
 const oscCallbacks = {}
 
 // Quaternioni za rotacijo in kalibracijo
-var calibrate = true
+let calibrate = true
 const qWW = []
 const qPrej = []
 const qObj = []
@@ -13,7 +13,21 @@ const rotacija = []
 // Parametri pospeska
 const acc = []
 
-for (let i = 0; i < ST_KEGLOV; i++) {
+// "Napihnuj" kegle? (ko zogice padajo)
+let napihuj = 1
+
+// Fraktaliziraj (kegel znotraj kegla manjsanje)
+let fraktaliziraj = 0
+let fraktal_meje = [
+  new THREE.Vector3(0.1, 0.1, 0.1),
+  new THREE.Vector3(10, 10, 10)
+]
+let fraktal_sprememba = new THREE.Vector3(0.98, 0.98, 0.98)
+let fraktal_interval = 1200
+let fraktal_stevec = 0
+const fraktal_limit = 100
+
+for (let i = 1; i <= ST_KEGLOV; i++) {
   qWW[i] = new THREE.Quaternion()
   qPrej[i] = new THREE.Quaternion()
   qObj[i] = new THREE.Quaternion()
@@ -26,7 +40,7 @@ for (let i = 0; i < ST_KEGLOV; i++) {
 
 
 // rotacije in pospeski keglov
-for (let i = 0; i < ST_KEGLOV; i++) {
+for (let i = 1; i <= ST_KEGLOV; i++) {
   oscCallbacks[`${PREPEND}${i}/quaternion`] = function (args) {
     // Popravimo osi (w x y z po defaultu HMM)
     qPrej[i].copy(qWW[i])
@@ -60,12 +74,27 @@ oscCallbacks['/ww/deformiraj'] = args => {
 }
 oscCallbacks['/ww/kegli'] = args => {
   const [ali] = args.map(getVal)
-  kegli = ali
+  dodatniKegli = ali
 }
 oscCallbacks['/ww/zogice'] = args => {
   const [ali] = args.map(getVal)
   zogice = ali
 }
+oscCallbacks['/ww/fraktaliziraj'] = args => {
+  const [ali] = args.map(getVal)
+  if (fraktaliziraj !== ali) {
+    fraktalTranzicija(ali)
+  }
+  fraktaliziraj = ali
+}
+oscCallbacks['/ww/napihuj'] = args => {
+  const [ali] = args.map(getVal)
+  napihuj = ali
+}
+oscCallbacks['/ww/fraktal-interval'] = args => {
+  const [faktor] = args.map(getVal)
+  fraktal_interval = faktor
+}
 
 
 
@@ -75,6 +104,7 @@ const getVal = function (msg) {
 }
 
 function spremeniDeformiraj (kolicina) {
+  /*
   const noviDeformiraj = deformiraj + (kolicina / 2)
   //console.log('deform', noviDeformiraj)
   if (noviDeformiraj > 0) {
@@ -82,14 +112,19 @@ function spremeniDeformiraj (kolicina) {
   } else {
     deformiraj = 0
   }
+*/
+  deformiraj = kolicina
 }
 
 function spremeniZoom (kolicina) {
+  /*
   const noviZum = camera.position.z * (1 + kolicina / 25)
-  console.log(noviZum)
+  //console.log(noviZum)
   if ((noviZum > 0.1) && (noviZum < 300)) {
     camera.position.z = noviZum
   }
+  */
+  camera.position.z = kolicina
 }
 
 
@@ -97,10 +132,9 @@ function spremeniZoom (kolicina) {
 // Zogice
 function zogicaCB(args) {
   console.log("MAMOMO MIDI!", args[0].value, args[1].value, args[2].value);
-  var minus = (IZBRAN == 1) ? -1 : 1;
+  var minus = (IZBRAN == 1) ? -1 : 1
   // kegel.material.color.offsetHSL(minus * args[2].value / 1000, 0, 0);
-  barvaDodatni.offsetHSL(minus * args[2].value / 1000, 0, 0);
+  objekti[IZBRAN].barvaDodatni.offsetHSL(minus * args[2].value / 1000, 0, 0)
-
 
   /*
   if (Math.random() < 0.5) {
@@ -114,9 +148,10 @@ function zogicaCB(args) {
   //kegel.scale.z *= 1 + (args[2] / 100000);
 
   if (zogice) {
+    //console.log('nova krogla!')
     novaKrogla();
     var bId = IZBRAN == 0 ? 2 : 3
-    console.log('id barve:', bId)
+    // console.log('id barve krogle:', bId)
     barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
   }
 

web/zoga.js

@@ -2,12 +2,14 @@
 * ZOGICE *
 *********/
 
+let zogice = 0
+
 var barvaKrogleO = new THREE.Color();
 barvaKrogleO.setHSL(Math.random(), 0.8, 0.5);
 function novaKrogla () {
   //var barvaKrogle = barvaKrogleO.clone();
   var bId = IZBRAN == 0 ? 2 : 3
-  console.log('id barve:', bId);
+  //console.log('id barve:', bId);
   var barvaKrogle = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]]);
   var mat = new THREE.MeshBasicMaterial({
     color: barvaKrogle,
@@ -31,4 +33,9 @@ function novaKrogla () {
 
   scene.add(krogla);
   krogle.push(krogla);
+
+  setTimeout(() => {
+    scene.remove(krogla)
+    krogle.shift()
+  }, 4000)
 }