Zoom na touchpadu, barvne palete za zogice in kegle

osctl.js

@@ -4,6 +4,7 @@ var oscPort = new osc.WebSocketPort({
 });
 
 function sendAll (address, args) {
+  console.log('posiljam', address, args)
   oscPort.send({ address, args })
 }
 

test.js

@@ -175,9 +175,22 @@ if (izbranKegel == 1) {
   kegel.position.z += 3;
 }
 
+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]
+
 /*********
 * ZOGICE *
 *********/
+/*
 var barvnaPaleta = [
   new THREE.Color(0x003F5C),
   new THREE.Color(0x58508D),
@@ -191,12 +204,15 @@ var barvnaPaleta = [
 ];
 console.log(barvnaPaleta);
 var barvnaPaletaIdx = 0;
+*/
 
 var barvaKrogleO = new THREE.Color();
 barvaKrogleO.setHSL(Math.random(), 0.8, 0.5);
 function novaKrogla () {
   //var barvaKrogle = barvaKrogleO.clone();
-  var barvaKrogle = barvnaPaleta[barvnaPaletaIdx];
+  var bId = izbranKegel == 0 ? 2 : 3
+  console.log('id barve:', bId);
+  var barvaKrogle = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]]);
   var mat = new THREE.MeshBasicMaterial({
     color: barvaKrogle,
     wireframe: true,
@@ -221,6 +237,13 @@ function novaKrogla () {
   krogle.push(krogla);
 }
 
+function spremeniZoom (kolicina) {
+  const noviZum = camera.position.z + kolicina
+  if (noviZum > 10 && noviZum < 100) {
+    camera.position.z = noviZum
+  }
+}
+
 //skupina.add(kegel);
 
 // Za pospeskomer - os X
@@ -384,7 +407,9 @@ function objAnim() {
     var dodatni = kegel.clone();
     dodatni.renderOrder = stevec;
     var dodatniMat = kegel.material.clone();
-    var dodatniBarva = barvaDodatni.clone();
+    //var dodatniBarva = barvaDodatni.clone();
+    var bId = izbranKegel == 0 ? 0 : 1
+    var dodatniBarva = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]])
     dodatniMat.color = dodatniBarva;
     dodatni.material = dodatniMat;
     dodatni.premakniAxis = new THREE.Vector3(
@@ -401,6 +426,7 @@ function objAnim() {
     //dodatni.qStart = kegel.quaternion.clone();
     dodatniObjekti.push(dodatni);
     scene.add(dodatni);
+    barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
   }
 };
 
@@ -453,6 +479,11 @@ oscCallbacks['/ww/calibrate'] = function () {
 oscCallbacks['/ww/reload'] = function () {
   window.location.reload();
 };
+oscCallbacks['/ww/zoom'] = args => {
+  console.log('dobil zoom', args)
+  const [kolicina] = args.map(getVal)
+  spremeniZoom(kolicina)
+}
 oscCallbacks['/midi-in'] = function (args) {
   //console.log("MAMOMO MIDI!", args);
   var minus = (izbranKegel == 1) ? -1 : 1;
@@ -461,16 +492,18 @@ oscCallbacks['/midi-in'] = function (args) {
 
     
   if (Math.random() < 0.5) {
-    kegel.scale.x *= 1.5;
+    kegel.scale.x *= 2;
   } else {
-    kegel.scale.z *= 1.5;
+    kegel.scale.z *= 2;
   }
     
   //kegel.scale.y *= 1 + (args[2] / 100000);
   //kegel.scale.z *= 1 + (args[2] / 100000);
 
   novaKrogla();
-  barvnaPaletaIdx = (barvnaPaletaIdx + 1) % barvnaPaleta.length;
+  var bId = izbranKegel == 0 ? 2 : 3
+  console.log('id barve:', bId)
+  barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
 };
 
 
@@ -482,12 +515,38 @@ const kbdPressed = {
   c: false
 };
 
-window.addEventListener('keydown', (e) => {
-  kbdPressed[e.key] = true;
-});
+window.addEventListener('keydown', e => {
+  kbdPressed[e.key] = true
+})
 
-window.addEventListener('keyup', (e) => {
+window.addEventListener('keyup', e => {
   if (e.key in kbdPressed) {
-    kbdPressed[e.key] = false;
+    kbdPressed[e.key] = false
   }
-});
+})
+
+window.addEventListener('mousedown', e => {
+  e.preventDefault()
+  kbdPressed['miska'] = true
+  return false
+})
+window.addEventListener('mouseup', e => {
+  if ('miska' in kbdPressed) {
+    kbdPressed['miska'] = false
+  }
+})
+
+var skrolam = false;
+var zadnjiSkrol = 0;
+window.addEventListener('mousemove', e => {
+  if (kbdPressed['miska']) {
+    const sprememba = (e.movementX + e.movementY) / 10
+
+    spremeniZoom(sprememba)
+    const args = [{
+      type: "f",
+      value: sprememba
+    }];
+    sendAll('/ww/zoom', args)
+  }
+})