333 lines
8.0 KiB
JavaScript
333 lines
8.0 KiB
JavaScript
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 = 30;
|
|
|
|
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 zogice = false
|
|
let dodatniKegli = false
|
|
/*
|
|
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;
|
|
*/
|
|
|
|
var objekti = [getKegel(), getKegel()];
|
|
|
|
for (let i = 0; i < ST_KEGLOV; i++) {
|
|
//objekti[i].rotation = qWW[i]
|
|
}
|
|
|
|
// "Zunanji" kegel
|
|
objekti[1].scale.x = 10
|
|
objekti[1].scale.z = 10
|
|
objekti[1].scale.y = 10
|
|
|
|
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() {
|
|
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.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 fraktalInit() {
|
|
for (let i = 0; i < ST_KEGLOV; i++) {
|
|
fraktalni_objekti = []
|
|
//objekti[i].material.opacity = 0
|
|
scene.remove(objekti[i])
|
|
}
|
|
fraktal_interval = setInterval(() => dodajFraktal(), fraktal_interval)
|
|
}
|
|
|
|
fraktalInit()
|
|
|
|
// Zacetna orientacija kegla
|
|
scene.rotation.x = 90
|
|
scene.rotation.z = 270
|
|
|
|
var cakajDeformiraj = false
|
|
var cakajZogice = false
|
|
var 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.02
|
|
}
|
|
|
|
// Rotacija
|
|
const qF = qWW[f.i].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
|
|
//console.log('FFT!', stolpicki)
|
|
//napihni = 1 + stolpicki[0] / 10
|
|
}
|
|
|
|
// Kalibracija rotacije kegla
|
|
if (calibrate) {
|
|
for (let i = 0; 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++) {
|
|
qObj[i] = qWW[i].clone()
|
|
qObj[i].multiply(qStart[i])
|
|
objekti[i].setRotationFromQuaternion(qObj[i]);
|
|
|
|
deformirajKegel(objekti[i], izbraniStolpicki)
|
|
objekti[i].geometry.attributes.position.needsUpdate = true;
|
|
}
|
|
|
|
// Rotacija kegla
|
|
//const obj = objekti[IZBRAN]
|
|
|
|
/*
|
|
//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
|
|
}
|
|
*/
|
|
|
|
// 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 = obj.clone();
|
|
dodatni.renderOrder = stevec;
|
|
var dodatniMat = objekti[IZBRAN].material.clone();
|
|
//var dodatniBarva = barvaDodatni.clone();
|
|
var bId = IZBRAN == 0 ? 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.clone();
|
|
rQ.invert();
|
|
rQ.multiply(qPrej);
|
|
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()
|
|
}
|
|
}
|
|
|
|
// Lep risajz
|
|
function onWindowResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
|