WIP scheme verzije, izboljsane kontrole, debagiranje

main
Jurij Podgoršek 2023-06-28 17:55:44 +02:00
parent 471b4a68d3
commit 77a8d52749
16 changed files with 1520 additions and 127 deletions

1105
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

9
server.js 100644
View File

@ -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))

11
server.scm 100644
View File

@ -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))

View File

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

View File

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

View File

@ -16,24 +16,14 @@
NASTAVITVE NASTAVITVE
</th> </th>
</tr> </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> </table>
</section> </section>
<script src="node_modules/three/build/three.js"></script>
<script src="node_modules/osc/dist/osc-browser.js"></script> <script src="node_modules/osc/dist/osc-browser.js"></script>
<script src="config.js"></script> <script src="config.js"></script>
<script src="osctl.js"></script> <script src="osctl.js"></script>
<script src="osc_callbacks.js"></script>
<script src="ctl.js"></script> <script src="ctl.js"></script>
</body> </body>
</html> </html>

View File

@ -7,22 +7,159 @@ const scene = {
} }
} }
const gumbi = { const parametri = [
'kalibriraj': () => { {
console.log('kalibriram') napis: 'kalibriraj',
sendAll('/ww/calibrate') 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 = '&nbsp;'
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', () => { window.addEventListener('DOMContentLoaded', () => {
// Dodaj scene // Dodaj scene
const sceneTD = qs('#scene') const sceneTD = Qs('#scene')
Object.keys(scene).forEach(ime => { Object.keys(scene).forEach(ime => {
const b = ce('button') const b = Ce('button')
b.innerHTML = ime b.innerHTML = ime
b.onclick = () => { b.onclick = () => {
console.log('izbiram ', ime) console.log('izbiram ', ime)
@ -32,25 +169,9 @@ window.addEventListener('DOMContentLoaded', () => {
}) })
// Dodaj gumbe // 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 = '&nbsp;'
const gc = ce('td')
gc.append(g)
v.append(gc)
g.onclick = () => {
console.log('spreminjam', ime)
gumbi[ime]()
}
gumbiT.append(v)
}) })
}) })

55
web/ctl.scm 100644
View File

@ -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 "&nbsp;"))))
(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)

View File

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

View File

@ -9,7 +9,7 @@
<body> <body>
<div id="anim-container"></div> <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="node_modules/osc/dist/osc-browser.js"></script>
<script src="config.js"></script> <script src="config.js"></script>
<script src="osctl.js"></script> <script src="osctl.js"></script>

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
const oscCallbacks = {} const oscCallbacks = {}
// Quaternioni za rotacijo in kalibracijo // Quaternioni za rotacijo in kalibracijo
var calibrate = true let calibrate = true
const qWW = [] const qWW = []
const qPrej = [] const qPrej = []
const qObj = [] const qObj = []
@ -13,7 +13,21 @@ const rotacija = []
// Parametri pospeska // Parametri pospeska
const acc = [] 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() qWW[i] = new THREE.Quaternion()
qPrej[i] = new THREE.Quaternion() qPrej[i] = new THREE.Quaternion()
qObj[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 // 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) { oscCallbacks[`${PREPEND}${i}/quaternion`] = function (args) {
// Popravimo osi (w x y z po defaultu HMM) // Popravimo osi (w x y z po defaultu HMM)
qPrej[i].copy(qWW[i]) qPrej[i].copy(qWW[i])
@ -60,12 +74,27 @@ oscCallbacks['/ww/deformiraj'] = args => {
} }
oscCallbacks['/ww/kegli'] = args => { oscCallbacks['/ww/kegli'] = args => {
const [ali] = args.map(getVal) const [ali] = args.map(getVal)
kegli = ali dodatniKegli = ali
} }
oscCallbacks['/ww/zogice'] = args => { oscCallbacks['/ww/zogice'] = args => {
const [ali] = args.map(getVal) const [ali] = args.map(getVal)
zogice = ali 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) { function spremeniDeformiraj (kolicina) {
/*
const noviDeformiraj = deformiraj + (kolicina / 2) const noviDeformiraj = deformiraj + (kolicina / 2)
//console.log('deform', noviDeformiraj) //console.log('deform', noviDeformiraj)
if (noviDeformiraj > 0) { if (noviDeformiraj > 0) {
@ -82,14 +112,19 @@ function spremeniDeformiraj (kolicina) {
} else { } else {
deformiraj = 0 deformiraj = 0
} }
*/
deformiraj = kolicina
} }
function spremeniZoom (kolicina) { function spremeniZoom (kolicina) {
/*
const noviZum = camera.position.z * (1 + kolicina / 25) const noviZum = camera.position.z * (1 + kolicina / 25)
console.log(noviZum) //console.log(noviZum)
if ((noviZum > 0.1) && (noviZum < 300)) { if ((noviZum > 0.1) && (noviZum < 300)) {
camera.position.z = noviZum camera.position.z = noviZum
} }
*/
camera.position.z = kolicina
} }
@ -97,11 +132,10 @@ function spremeniZoom (kolicina) {
// Zogice // Zogice
function zogicaCB(args) { function zogicaCB(args) {
console.log("MAMOMO MIDI!", args[0].value, args[1].value, args[2].value); 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); // 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) { if (Math.random() < 0.5) {
kegel.scale.x *= 2; kegel.scale.x *= 2;
@ -114,9 +148,10 @@ function zogicaCB(args) {
//kegel.scale.z *= 1 + (args[2] / 100000); //kegel.scale.z *= 1 + (args[2] / 100000);
if (zogice) { if (zogice) {
//console.log('nova krogla!')
novaKrogla(); novaKrogla();
var bId = IZBRAN == 0 ? 2 : 3 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; barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
} }

View File

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