WIP scheme verzije, izboljsane kontrole, debagiranje
parent
471b4a68d3
commit
77a8d52749
File diff suppressed because it is too large
Load Diff
|
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"description": "kiberkegel",
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"midi": "^2.0.0",
|
||||
"nodemon": "^2.0.16",
|
||||
"osc": "^2.4.2",
|
||||
|
|
@ -10,6 +11,7 @@
|
|||
"ws": "^7.3.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npx nodemon kegel.js"
|
||||
"start": "npx nodemon kegel.js",
|
||||
"serve": "node server.js"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
||||
|
|
@ -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))
|
||||
|
||||
|
|
@ -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 PROTO = 'ws'
|
||||
|
||||
|
|
@ -9,5 +10,6 @@ const IZBRAN = (window.location.hash.indexOf('kegel') > -1)
|
|||
console.log('izbran kegel: ', IZBRAN);
|
||||
|
||||
const ST_KEGLOV = 2
|
||||
const PREPEND = `/ww/0/ww/`
|
||||
//const PREPEND = `/ww/0/ww/`
|
||||
const PREPEND = `/`
|
||||
console.log('OSC predpona', PREPEND);
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@ button {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gumb {
|
||||
.krmilnik {
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
|
|
|||
14
web/ctl.html
14
web/ctl.html
|
|
@ -16,24 +16,14 @@
|
|||
NASTAVITVE
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>šum 1</td>
|
||||
<td class="gumb">
|
||||
<button id="sum1"> </button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>šum 2</td>
|
||||
<td class="gumb">
|
||||
<button id="sum1"> </button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<script src="node_modules/three/build/three.js"></script>
|
||||
<script src="node_modules/osc/dist/osc-browser.js"></script>
|
||||
<script src="config.js"></script>
|
||||
<script src="osctl.js"></script>
|
||||
<script src="osc_callbacks.js"></script>
|
||||
<script src="ctl.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
183
web/ctl.js
183
web/ctl.js
|
|
@ -7,22 +7,159 @@ const scene = {
|
|||
}
|
||||
}
|
||||
|
||||
const gumbi = {
|
||||
'kalibriraj': () => {
|
||||
console.log('kalibriram')
|
||||
sendAll('/ww/calibrate')
|
||||
}
|
||||
}
|
||||
const parametri = [
|
||||
{
|
||||
napis: 'kalibriraj',
|
||||
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 qsa = s => document.querySelectorAll(s)
|
||||
const ce = e => document.createElement(e)
|
||||
const Qs = s => document.querySelector(s)
|
||||
const Qsa = s => document.querySelectorAll(s)
|
||||
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 = ' '
|
||||
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', () => {
|
||||
// Dodaj scene
|
||||
const sceneTD = qs('#scene')
|
||||
const sceneTD = Qs('#scene')
|
||||
Object.keys(scene).forEach(ime => {
|
||||
const b = ce('button')
|
||||
const b = Ce('button')
|
||||
b.innerHTML = ime
|
||||
b.onclick = () => {
|
||||
console.log('izbiram ', ime)
|
||||
|
|
@ -32,25 +169,9 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
})
|
||||
|
||||
// Dodaj gumbe
|
||||
const gumbiT = qs('#ctl')
|
||||
Object.keys(gumbi).forEach(ime => {
|
||||
const v = ce('tr')
|
||||
const ic = ce('td')
|
||||
ic.append(ime)
|
||||
v.append(ic)
|
||||
|
||||
const g = ce('button')
|
||||
g.id = 'gumb_' + ime
|
||||
g.innerHTML = ' '
|
||||
const gc = ce('td')
|
||||
gc.append(g)
|
||||
v.append(gc)
|
||||
|
||||
g.onclick = () => {
|
||||
console.log('spreminjam', ime)
|
||||
gumbi[ime]()
|
||||
}
|
||||
|
||||
gumbiT.append(v)
|
||||
const gumbiT = Qs('#ctl')
|
||||
parametri.forEach(p => {
|
||||
const el = ustvariElement(p)
|
||||
gumbiT.appendChild(el)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 " "))))
|
||||
(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)
|
||||
|
|
@ -22,13 +22,12 @@ function zacniAnalizo() {
|
|||
analyser.smoothingTimeConstant = 0.85;
|
||||
analyser.fftSize = fftSize
|
||||
source.connect(analyser)
|
||||
analiziramZvok = true
|
||||
},
|
||||
() => {
|
||||
console.log('napaka nalaganja mikrofona', arguments)
|
||||
analiziramZvok = false
|
||||
}
|
||||
)
|
||||
|
||||
analiziramZvok = true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<body>
|
||||
<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="config.js"></script>
|
||||
<script src="osctl.js"></script>
|
||||
|
|
|
|||
12
web/input.js
12
web/input.js
|
|
@ -15,7 +15,6 @@ function inputHandle () {
|
|||
sendAll('/ww/reload');
|
||||
window.location.reload();
|
||||
}
|
||||
/*
|
||||
if (kbdPressed.d && !cakajDeformiraj) {
|
||||
deformiraj = !deformiraj
|
||||
cakajDeformiraj = true
|
||||
|
|
@ -26,7 +25,6 @@ function inputHandle () {
|
|||
sendAll('/ww/zoom', args)
|
||||
setTimeout(() => cakajDeformiraj = false, 200)
|
||||
}
|
||||
*/
|
||||
if (kbdPressed.g && !cakajZogice) {
|
||||
zogice = !zogice
|
||||
cakajZogice = true
|
||||
|
|
@ -66,9 +64,7 @@ window.addEventListener('mousedown', e => {
|
|||
case 0:
|
||||
kbdPressed['miska'] = true
|
||||
|
||||
if (!analiziramZvok) {
|
||||
zacniAnalizo()
|
||||
}
|
||||
zacniAnalizo()
|
||||
break;
|
||||
case 2:
|
||||
kbdPressed['miskaD'] = true
|
||||
|
|
@ -86,17 +82,22 @@ window.addEventListener('mouseup', e => {
|
|||
|
||||
var skrolam = false;
|
||||
var zadnjiSkrol = 0;
|
||||
|
||||
window.addEventListener('mousemove', e => {
|
||||
if (kbdPressed['miska']) {
|
||||
/*
|
||||
const sprememba = (e.movementX + e.movementY) / 10
|
||||
|
||||
spremeniZoom(sprememba)
|
||||
console.log('nov zoom', sprememba)
|
||||
const args = [{
|
||||
type: "f",
|
||||
value: sprememba
|
||||
}];
|
||||
sendAll('/ww/zoom', args)
|
||||
*/
|
||||
}
|
||||
/*
|
||||
if (kbdPressed['miskaD']) {
|
||||
const sprememba = (e.movementX + e.movementY) / 10
|
||||
|
||||
|
|
@ -107,4 +108,5 @@ window.addEventListener('mousemove', e => {
|
|||
}];
|
||||
sendAll('/ww/deformiraj', args)
|
||||
}
|
||||
*/
|
||||
})
|
||||
|
|
|
|||
162
web/izris.js
162
web/izris.js
|
|
@ -25,7 +25,7 @@ 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;
|
||||
camera.position.z = 40;
|
||||
|
||||
var renderer = new THREE.WebGLRenderer({ alpha: true });
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
|
@ -47,8 +47,7 @@ var barvnePalete = [
|
|||
]
|
||||
var barvnePaleteIdx = [0, 0, 0, 0]
|
||||
|
||||
let zogice = false
|
||||
let dodatniKegli = false
|
||||
let dodatniKegli = 0
|
||||
/*
|
||||
var barvnaPaleta = [
|
||||
new THREE.Color(0x003F5C),
|
||||
|
|
@ -65,36 +64,34 @@ console.log(barvnaPaleta);
|
|||
var barvnaPaletaIdx = 0;
|
||||
*/
|
||||
|
||||
var objekti = [getKegel(), getKegel()];
|
||||
|
||||
const objekti = []
|
||||
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
|
||||
objekti[1].scale.x = 10
|
||||
objekti[1].scale.z = 10
|
||||
objekti[1].scale.y = 10
|
||||
const zunanjiScale = 20
|
||||
//const DRUG = (IZBRAN + 1) % 2
|
||||
const DRUG = 1
|
||||
objekti[DRUG].scale.x = zunanjiScale
|
||||
objekti[DRUG].scale.z = zunanjiScale
|
||||
objekti[DRUG].scale.y = zunanjiScale
|
||||
|
||||
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() {
|
||||
function dodajFraktal(viden = false) {
|
||||
//console.log('dodajam frakt!')
|
||||
const i = fraktal_stevec % ST_KEGLOV
|
||||
|
||||
const fract = objekti[i].clone()
|
||||
|
|
@ -103,7 +100,10 @@ function dodajFraktal() {
|
|||
fract.scale.y = 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.qStart = objekti[i].quaternion.clone()
|
||||
fract.qStart.conjugate()
|
||||
|
|
@ -120,24 +120,62 @@ function dodajFraktal() {
|
|||
|
||||
fraktal_stevec += 1
|
||||
}
|
||||
function fraktalInit() {
|
||||
for (let i = 0; i < ST_KEGLOV; i++) {
|
||||
function skrijFraktale(fraktali) {
|
||||
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 = []
|
||||
//objekti[i].material.opacity = 0
|
||||
scene.remove(objekti[i])
|
||||
} else {
|
||||
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
|
||||
scene.rotation.x = 90
|
||||
scene.rotation.z = 270
|
||||
|
||||
var cakajDeformiraj = false
|
||||
var cakajZogice = false
|
||||
var cakajDodatniKegli = false
|
||||
let cakajDeformiraj = false
|
||||
let cakajZogice = false
|
||||
let cakajDodatniKegli = false
|
||||
|
||||
function render () {
|
||||
requestAnimationFrame(render)
|
||||
|
|
@ -161,11 +199,11 @@ function render () {
|
|||
|
||||
// Vidnost (fade in)
|
||||
if (f.material.opacity < 1) {
|
||||
f.material.opacity *= 1.02
|
||||
f.material.opacity *= 1.1
|
||||
}
|
||||
|
||||
// Rotacija
|
||||
const qF = qWW[f.i].clone()
|
||||
const qF = qWW[f.i + 1].clone()
|
||||
qF.multiply(f.qStart)
|
||||
f.setRotationFromQuaternion(qF)
|
||||
})
|
||||
|
|
@ -180,14 +218,14 @@ function objAnim() {
|
|||
// FFT
|
||||
if (analyser) {
|
||||
analyser.getByteFrequencyData(stolpicki)
|
||||
deformiraj = (stolpicki[3] + stolpicki[4] + stolpicki[5]) / 30
|
||||
//deformiraj = (stolpicki[3] + stolpicki[4] + stolpicki[5]) / 30 * deformiraj
|
||||
//console.log('FFT!', stolpicki)
|
||||
//napihni = 1 + stolpicki[0] / 10
|
||||
}
|
||||
|
||||
// Kalibracija rotacije kegla
|
||||
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].conjugate();
|
||||
}
|
||||
|
|
@ -197,30 +235,31 @@ function objAnim() {
|
|||
|
||||
// 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]);
|
||||
const j = i + 1
|
||||
qObj[j] = qWW[j].clone()
|
||||
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;
|
||||
}
|
||||
|
||||
// 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]
|
||||
|
||||
/*
|
||||
//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) {
|
||||
|
|
@ -230,7 +269,7 @@ function objAnim() {
|
|||
|
||||
dodatniObjekti.map(function (obj) {
|
||||
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||
qObj[i] = qWW.clone();
|
||||
//qObj[i] = qWW.clone();
|
||||
//qObj.multiply(obj.qStart).multiply(qStart);
|
||||
//obj.setRotationFromQuaternion(qObj);
|
||||
|
||||
|
|
@ -282,11 +321,11 @@ function objAnim() {
|
|||
var vsota = Math.abs(acc[IZBRAN].x) + Math.abs(acc[IZBRAN].z)
|
||||
if (vsota > 2 && !cakajDodatni) {
|
||||
cakajDodatni = true
|
||||
var dodatni = obj.clone();
|
||||
var dodatni = objekti[IZBRAN].clone();
|
||||
dodatni.renderOrder = stevec;
|
||||
var dodatniMat = objekti[IZBRAN].material.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]])
|
||||
dodatniMat.color = dodatniBarva;
|
||||
dodatni.material = dodatniMat;
|
||||
|
|
@ -296,7 +335,7 @@ function objAnim() {
|
|||
Math.random()
|
||||
);
|
||||
dodatni.premakniKolicina = vsota;
|
||||
var rQ = qWW.clone();
|
||||
var rQ = qWW[IZBRAN].clone();
|
||||
rQ.invert();
|
||||
rQ.multiply(qPrej);
|
||||
dodatni.rotirajQ = rQ;
|
||||
|
|
@ -319,6 +358,13 @@ document.onreadystatechange = function () {
|
|||
if (document.readyState === 'complete') {
|
||||
document.getElementById("anim-container").appendChild(renderer.domElement)
|
||||
render()
|
||||
|
||||
setTimeout(() => {
|
||||
calibrate = true
|
||||
|
||||
// Zacni audio analizo
|
||||
//zacniAnalizo()
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
12
web/kegel.js
12
web/kegel.js
|
|
@ -103,8 +103,7 @@ function getKegel() {
|
|||
const geo = getKegelGeo();
|
||||
|
||||
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({
|
||||
//color: 0xff00ff,
|
||||
color: barva,
|
||||
|
|
@ -114,6 +113,10 @@ function getKegel() {
|
|||
window.mat = mat;
|
||||
//var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
|
||||
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.y = -30; // levo / desno
|
||||
kegel.position.x = 12; // levo / desno drugic
|
||||
|
|
@ -123,13 +126,14 @@ function getKegel() {
|
|||
kegel.position.y += 8;
|
||||
kegel.position.z += 3;
|
||||
}
|
||||
*/
|
||||
|
||||
scene.add(kegel);
|
||||
return kegel;
|
||||
}
|
||||
|
||||
// Deformiranje kegla!
|
||||
function deformirajKegel(obj, fft) {
|
||||
function deformirajKegel(obj, fft, faktor) {
|
||||
const koti = obj.geometry.attributes.position.array;
|
||||
/*
|
||||
// Random 500 zamaknemo
|
||||
|
|
@ -143,7 +147,7 @@ function deformirajKegel(obj, fft) {
|
|||
for (let k = 0; k < kotov; k += 1) {
|
||||
const zamik = Math.floor(Math.random() * 3)
|
||||
//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)
|
||||
/*
|
||||
if (k % 30 == 0) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const oscCallbacks = {}
|
||||
|
||||
// Quaternioni za rotacijo in kalibracijo
|
||||
var calibrate = true
|
||||
let calibrate = true
|
||||
const qWW = []
|
||||
const qPrej = []
|
||||
const qObj = []
|
||||
|
|
@ -13,7 +13,21 @@ const rotacija = []
|
|||
// Parametri pospeska
|
||||
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()
|
||||
qPrej[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
|
||||
for (let i = 0; i < ST_KEGLOV; i++) {
|
||||
for (let i = 1; i <= ST_KEGLOV; i++) {
|
||||
oscCallbacks[`${PREPEND}${i}/quaternion`] = function (args) {
|
||||
// Popravimo osi (w x y z po defaultu HMM)
|
||||
qPrej[i].copy(qWW[i])
|
||||
|
|
@ -60,12 +74,27 @@ oscCallbacks['/ww/deformiraj'] = args => {
|
|||
}
|
||||
oscCallbacks['/ww/kegli'] = args => {
|
||||
const [ali] = args.map(getVal)
|
||||
kegli = ali
|
||||
dodatniKegli = ali
|
||||
}
|
||||
oscCallbacks['/ww/zogice'] = args => {
|
||||
const [ali] = args.map(getVal)
|
||||
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) {
|
||||
/*
|
||||
const noviDeformiraj = deformiraj + (kolicina / 2)
|
||||
//console.log('deform', noviDeformiraj)
|
||||
if (noviDeformiraj > 0) {
|
||||
|
|
@ -82,14 +112,19 @@ function spremeniDeformiraj (kolicina) {
|
|||
} else {
|
||||
deformiraj = 0
|
||||
}
|
||||
*/
|
||||
deformiraj = kolicina
|
||||
}
|
||||
|
||||
function spremeniZoom (kolicina) {
|
||||
/*
|
||||
const noviZum = camera.position.z * (1 + kolicina / 25)
|
||||
console.log(noviZum)
|
||||
//console.log(noviZum)
|
||||
if ((noviZum > 0.1) && (noviZum < 300)) {
|
||||
camera.position.z = noviZum
|
||||
}
|
||||
*/
|
||||
camera.position.z = kolicina
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -97,10 +132,9 @@ function spremeniZoom (kolicina) {
|
|||
// Zogice
|
||||
function zogicaCB(args) {
|
||||
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);
|
||||
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) {
|
||||
|
|
@ -114,9 +148,10 @@ function zogicaCB(args) {
|
|||
//kegel.scale.z *= 1 + (args[2] / 100000);
|
||||
|
||||
if (zogice) {
|
||||
//console.log('nova krogla!')
|
||||
novaKrogla();
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,14 @@
|
|||
* ZOGICE *
|
||||
*********/
|
||||
|
||||
let zogice = 0
|
||||
|
||||
var barvaKrogleO = new THREE.Color();
|
||||
barvaKrogleO.setHSL(Math.random(), 0.8, 0.5);
|
||||
function novaKrogla () {
|
||||
//var barvaKrogle = barvaKrogleO.clone();
|
||||
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 mat = new THREE.MeshBasicMaterial({
|
||||
color: barvaKrogle,
|
||||
|
|
@ -31,4 +33,9 @@ function novaKrogla () {
|
|||
|
||||
scene.add(krogla);
|
||||
krogle.push(krogla);
|
||||
|
||||
setTimeout(() => {
|
||||
scene.remove(krogla)
|
||||
krogle.shift()
|
||||
}, 4000)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue