wavey-wind/test.js

console.log("Hello, Sky!");

/**** ☭☭☭☭☭☭☭☭☭☭☭☭ ******
/☭☭☭☭  Test skripta   ☭☭☭☭ *
******☭☭☭☭☭☭☭☭☭☭☭☭******/

// Odmik kamere
var odmik_kamere = 100;

// Vidni kot
var FOV = 90;

// Parametri rotacije (euler)
var rotacijaX = 0.000;
var rotacijaY = 0.000;
var rotacijaZ = 0.000;

// Parametri pospeska
var accX = 0.000;
var accY = 0.000;
var accZ = 0.000;

// Scena, kamera in render
scene = new THREE.Scene;

camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.z = odmik_kamere;

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 skupina = new THREE.Group();

// Dodaj test skatlo

// Sirina in visina test objekta
var width = 16;
var height = 128;

var radialnihSegmentov = 4;
var visinskihSegmentov = 128;
var geo = new THREE.BufferGeometry();
var offset = width;
var polozaji = [];

// visina: 128 segmentov
// sirina: 9 segmentov

var sirinaSegmentov = 9;
// Najprej "spodnja buba" 
var faktor = [
  2/sirinaSegmentov,  2/sirinaSegmentov
];

// Pol rocaj (1.4 do 2.8 segmenta, dolgo 62 segmentov)
var rocajSegmentov = 46;
for (var i = 0; i <= rocajSegmentov; i++) {
  faktor.push((1.4 + i / rocajSegmentov * 1.4) / sirinaSegmentov);
}

// pol stresica dol (2.8 do 7.4 segmenta)
var stresicaSegmentov = 48;
for (i = 0; i <= stresicaSegmentov; i++) {
  faktor.push((2.8 + i / stresicaSegmentov * 4.6) / sirinaSegmentov);
}

// Pa se zadnji naklon (7.4 do 3 segmente)
var konecSegmentov = 30;
for (i = 0; i <= konecSegmentov; i++) {
  faktor.push((7.4 - i / konecSegmentov * 4.4) / sirinaSegmentov);
}

console.log(faktor);

// spodnji krog
for (var s = 0; s < radialnihSegmentov; s++) {
  polozaji.push(
    0.0,
    0.0,
    0.0,
    Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[0],
    Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[0],
    0.0,
    Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[0],
    Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[0],
    0.0
  );
}
console.log(polozaji);
// vmesni segmenti
for (var h = 0; h < visinskihSegmentov; h++) {
  for (s = 0; s < radialnihSegmentov; s++) {
    polozaji.push(
      Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[h],
      Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[h],
      h * height / visinskihSegmentov,
      Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
      Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
      h * height / visinskihSegmentov,
      Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
      Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[h],
      (h + 1) * height / visinskihSegmentov,
    );
  }
}

// zgornji krog
for (s = 0; s < radialnihSegmentov; s++) {
  polozaji.push(
    0,
    0,
    height,
    Math.sin(2 * Math.PI * s / radialnihSegmentov) * width * faktor[31],
    Math.cos(2 * Math.PI * s / radialnihSegmentov) * width * faktor[31],
    height,
    Math.sin(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[31],
    Math.cos(2 * Math.PI * (s + 1) / radialnihSegmentov) * width * faktor[31],
    height
  );
}


// Spremeni v vertexe
var vertices = new Float32Array(polozaji);
geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

window.geo = geo;

/*
// Deformiramo za kegel
for (var n = 0; n < radialnihSegmentov; n += 1) {
  geo.attributes.position.array[1 + n * 3] += 10;
  geo.attributes.position.array[1 + n * 3 + 1] += 30;
  geo.attributes.position.needsUpdate = true
}
*/

var barva = new THREE.Color();
barva.setHSL(0.6, 1.0, 0.5);
var mat = new THREE.MeshBasicMaterial({
  //color: 0xff00ff,
  color: barva,
  wireframe: true
});
window.mat = mat;
//var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
var kegel = new THREE.Mesh(geo, mat);
kegel.position.z += 64;
kegel.position.y += 32;

skupina.add(kegel);

// Za pospeskomer - os X
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
var mAX = new THREE.MeshBasicMaterial({ color: 0xff000055 });
var AX = new THREE.Mesh(gAX, mAX);

//skupina.add(AX);

// Damo vse skupaj v kader
scene.add(skupina);

// Quaternioni za rotacijo in kalibracijo
var qWW = new THREE.Quaternion();
var qObj = new THREE.Quaternion();
var qStart = new THREE.Quaternion();
var reset = false;



var objekti = [kegel];

skupina.rotation.x = -90;
skupina.position.z = 64;
skupina.position.y = -34;


function render () {
  requestAnimationFrame(render);
  renderer.render(scene, camera);

  objAnim();
};

// Funkcija za animacijo objektov
function objAnim() {
  objekti.map(function (obj) {
    // Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
    qObj = qWW.clone();
    qObj.multiply(qStart);
    obj.setRotationFromQuaternion(qObj);

    AX.scale.x = accX / 1000;
  });

  // rotiramo skupino da se vidi
  //skupina.rotation.x += 0.003;
  //skupina.rotation.y += 0.005;
  //skupina.rotation.z += 0.007;

  if (kegel.scale.x > 1) {
    kegel.scale.x *= 0.95;
  }

  if (kegel.scale.z > 1) {
    kegel.scale.z *= 0.95;
  }

  // Drzimo vse stiri gumbe (reset)? - kalibracija!
  if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) {
    if (!reset) {
      qStart = qWW.clone();
      qStart.conjugate();
      reset = true;
      console.log("RESET!");
    }
  } else {
    if (reset) {
      reset = false;
      console.log("reset off....");
    }
  }
};


// Inicializiraj
document.onreadystatechange = function () {
    if (document.readyState === 'complete') {
        document.getElementById("anim-container").appendChild(renderer.domElement);

        render();
    }
};

// Lep risajz
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);


// Poslusaj OSC evente
var keysPressed = [0, 0, 0, 0];

const getVal = function (msg) {
  return msg.value;
}

var prepend = '/ww/0/ww/0';

var oscCallbacks = {};

oscCallbacks[`${prepend}'/keys`] = function(args) {
  keysPressed = args.map(getVal);
};
oscCallbacks[`${prepend}/quaternion`] = function (args) {
  // Popravimo osi (w x y z po defaultu HMM)
  [qWW.w, qWW.x, qWW.y, qWW.z] =  args.map(getVal);
};
oscCallbacks[`${prepend}/accel`] = function (args) {
  [accX, accY, accZ] = args.map(getVal);
};
oscCallbacks[`${prepend}/gyro`] = function (args) {
  [rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
};
oscCallbacks['/midi'] = function (args) {
  //console.log("MAMOMO MIDI!", args);
  //kegel.material.color.offsetHSL(args[2].value / 1000, 0, 0);
  if (Math.random() < 0.5) {
    kegel.scale.x *= 1.5;
  } else {
    kegel.scale.z *= 1.5;
  }
    
  //kegel.scale.y *= 1 + (args[2] / 100000);
  //kegel.scale.z *= 1 + (args[2] / 100000);
};