wavey-wind/anim.js

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

/**** ☭☭☭☭☭☭☭☭☭☭☭☭ ******
/☭☭☭☭ Parametri razni ☭☭☭☭ *
******☭☭☭☭☭☭☭☭☭☭☭☭******/

// Odmik kamere
var odmik_kamere = 100;

// Rotacija kamere
var cam_rot_offset = 1;

// Vidni kot
var FOV = 90;

// Sirina in visina objektov
var width = 6;

// Limit stevila objektov
var obj_limit = 600;

// Prvotno prazno polje objektov. Lahko bi kak buffer to bil pozneje
var objekti = [];

// Stevec, za razno animiranje
var stevec = 0;

var gostota_obj = 1;



// Parametri animacije
var drotacijaX = 0.006;
var drotacijaY = 0.001;
var drotacijaZ = 0.003;

var rotacijaX = 0;
var rotacijaY = 0;
var rotacijaZ = 0;

// Premik obstojecih barv
var zamikBarve = 1;

// Zamik pri novem objektu
var barva_mod = 0.333;
var saturacija = 1;
var svetlost = 0.4;

var kameraX = 0;
var kameraY = 0;
var kameraZ = 0;


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





function render () {
    requestAnimationFrame(render);
    stevec += 1;

    // Dodaj objekt vcasih
    if (stevec % gostota_obj === 0) {
        addObj(width, width);
    }
    renderer.render(scene, camera);

    objAnim();
    camRotate();
};

// Funkcija za animacijo objektov
function objAnim() {
  objekti.map(function (obj) {
    obj.rotation.x += drotacijaX / 100;
    obj.rotation.y += drotacijaY / 100;
    obj.rotation.z += drotacijaZ / 100;

    obj.scale.z += width / 4;
    obj.scale.y += width / 4;
    obj.scale.x += width / 4;

    obj.material.color.offsetHSL(zamikBarve, 0, 0);
  });
};

// Funkcija za dodajanje novih objektov
function addObj(w, h) {
    var col = new THREE.Color();
    col.setHSL(stevec * barva_mod, saturacija, svetlost);

    var mat = new THREE.LineBasicMaterial({
        color: col
    });

    var geo = new THREE.Geometry();

    var offset = h / 2;

    geo.vertices.push(new THREE.Vector3(-offset, 0, 0), new THREE.Vector3(0, offset, 0));
    geo.vertices.push(new THREE.Vector3(-offset, 0, 0), new THREE.Vector3(0, -offset, 0));
    geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(0, offset, 0));
    geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(0, -offset, 0));

    var obj = new THREE.Line(geo, mat, THREE.LineSegments);

    scene.add(obj);
    obj.rotation.x = rotacijaX;
    obj.rotation.y = rotacijaY;
    obj.rotation.z = rotacijaZ;

    // Pocisti za seboj
    if (objekti.push(obj) > obj_limit) {
        while (objekti.length > obj_limit) {
            scene.remove(objekti[0]);
            objekti.shift();
        }
    }
};

var xAksa = new THREE.Vector3(0, 1, 0);
function camRotate () {
  // rotiraj po z osi
  camera.translateX(kameraX);
  camera.translateZ(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(kameraX, 2)));

  /*
  camera.translateY(kameraY);
  camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(kameraY, 2)));

  camera.translateZ(kameraZ);
  camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(kameraZ, 2)));

  */
  /*
  camera.position.x = Math.sin((stevec % 10) / 10) * cam_rot_offset;
  camera.position.y = Math.cos((stevec % 10) / 10) * cam_rot_offset;
  */

  camera.lookAt(scene.position);
};

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


var keysPressed = [0, 0, 0, 0];
var gyro = [0, 0, 0];
var accel = [0, 0, 0];

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

oscCallbacks = {
  '/keys/': [
    function(args) {
      keysPressed = args.map(getVal);
    }
  ],
  '/gyro/': [
    function (args) {
      var [gx, gy, gz] = args.map(getVal);
      console.log(keysPressed)

      if (keysPressed[0] && keysPressed[1] && keysPressed[2] && keysPressed[3]) {
        window.location.reload()
      }

      if (keysPressed[2]) {
        rotacijaX += gyro[0] - gx
        rotacijaY += gyro[1] - gy
        rotacijaZ += gyro[2] - gz
      }
      if (keysPressed[3]) {
        drotacijaX += gyro[0] - gx
        drotacijaY += gyro[1] - gy
        drotacijaZ += gyro[2] - gz
      }

      if (keysPressed[1]) {
        kameraX += gyro[0] - gx
        FOV += (gyro[1] - gy) * 10
        //kameraY += gyro[1] - gy
        //kameraZ += gyro[2] - gz
      }

      if (keysPressed[0]) {
        zamikBarve *= 1 + (gx - gyro[0])
        obj_limit *= 1 + (gy - gyro[1])
        width *= 1 + (gz - gyro[2])
      }

      gyro = [gx, gy, gz]
    }
  ]
}