Compare commits
27 Commits
Author | SHA1 | Date |
---|---|---|
Jurij Podgoršek | b898c51bb5 | |
Jurij Podgoršek | 5e402c1168 | |
Jurij Podgoršek | 6f403bc7c5 | |
Jurij Podgoršek | 1e49d7811c | |
Jurij Podgoršek | 4d34baade5 | |
Jurij Podgoršek | 90efd9a13c | |
Jurij Podgoršek | 246391c4e1 | |
Jurij Podgoršek | 870d909845 | |
Jurij Podgoršek | 1c4463c007 | |
Jurij Podgoršek | cb0f516da4 | |
Jurij Podgoršek | 83e7b42ce9 | |
Jurij Podgoršek | 7053531f40 | |
Jurij Podgoršek | ec796bafab | |
Jurij Podgoršek | 726a7ededb | |
Jurij Podgoršek | 1eff20bf21 | |
Jurij Podgoršek | f1b5b69850 | |
Jurij Podgoršek | d784c6dd81 | |
Jurij Podgoršek | e968814b45 | |
Jurij Podgoršek | 0e34584679 | |
Jurij Podgoršek | 3bf7daabc2 | |
Jurij Podgoršek | 2851a67eca | |
Jurij Podgoršek | 7c1fc1b321 | |
Jurij Podgoršek | c35c231c10 | |
Jurij Podgoršek | 4407c45184 | |
Jurij Podgoršek | 413900467c | |
Jurij Podgoršek | 5be48cffe7 | |
Jurij Podgoršek | c5d19367f8 |
24
#test.html#
24
#test.html#
|
@ -1,24 +0,0 @@
|
||||||
<html >
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>cancerainbow test</title>
|
|
||||||
<style type="text/css">
|
|
||||||
body {
|
|
||||||
margin: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.noUi-target {
|
|
||||||
width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table tr td {
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>TEST</h1>
|
|
||||||
<script src="control.js"></script>
|
|
||||||
<script src="test.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
49
anim.js
49
anim.js
|
@ -179,17 +179,17 @@ function objAnim() {
|
||||||
function addObj(w, h) {
|
function addObj(w, h) {
|
||||||
var col = new THREE.Color();
|
var col = new THREE.Color();
|
||||||
//col.setHSL(stevec * barva_mod, saturacija, svetlost);
|
//col.setHSL(stevec * barva_mod, saturacija, svetlost);
|
||||||
col.setHSL(stevec * barva_mod, saturacija, (Math.sin(stevec/barvapuls) / 6) + 0.3);
|
col.setHSL(stevec * barva_mod, saturacija, (Math.sin(stevec/barvapuls) / 6) + 0.5);
|
||||||
|
|
||||||
var mat = new THREE.LineBasicMaterial({
|
var mat = new THREE.LineBasicMaterial({
|
||||||
color: col
|
color: col
|
||||||
});
|
});
|
||||||
|
|
||||||
var geo = new THREE.BufferGeometry();
|
|
||||||
|
|
||||||
var offset = h / 2;
|
var offset = h / 2;
|
||||||
|
|
||||||
// Karo
|
// Karo
|
||||||
|
var geo = new THREE.BufferGeometry();
|
||||||
var vertices = new Float32Array([
|
var vertices = new Float32Array([
|
||||||
-offset, 0, 0, 0, offset, 0,
|
-offset, 0, 0, 0, offset, 0,
|
||||||
-offset, 0, 0, 0, -offset, 0,
|
-offset, 0, 0, 0, -offset, 0,
|
||||||
|
@ -207,28 +207,26 @@ function addObj(w, h) {
|
||||||
obj.setRotationFromQuaternion(qObj);
|
obj.setRotationFromQuaternion(qObj);
|
||||||
|
|
||||||
// Pocisti za seboj
|
// Pocisti za seboj
|
||||||
if (objekti.push(obj) > obj_limit) {
|
objekti.push(obj);
|
||||||
while (objekti.length > obj_limit) {
|
while (objekti.length > obj_limit) {
|
||||||
scene.remove(objekti[0]);
|
scene.remove(objekti[0]);
|
||||||
objekti.shift();
|
objekti.shift();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
qK = new THREE.Quaternion()
|
qK = new THREE.Quaternion()
|
||||||
|
|
||||||
function camRotate () {
|
function camRotate () {
|
||||||
//scene.setRotationFromQuaternion(qKamera)
|
//scene.setRotationFromQuaternion(qKamera)
|
||||||
scene.rotation.x += crotacijaX
|
scene.rotation.x += crotacijaX;
|
||||||
scene.rotation.y += crotacijaY
|
scene.rotation.y += crotacijaY;
|
||||||
scene.rotation.z += crotacijaZ
|
scene.rotation.z += crotacijaZ;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Inicializiraj
|
// Inicializiraj
|
||||||
document.onreadystatechange = function () {
|
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();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -256,41 +254,35 @@ const kbdPressed = {
|
||||||
|
|
||||||
window.addEventListener('keydown', (e) => {
|
window.addEventListener('keydown', (e) => {
|
||||||
kbdPressed[e.key] = true;
|
kbdPressed[e.key] = true;
|
||||||
})
|
});
|
||||||
|
|
||||||
window.addEventListener('keyup', (e) => {
|
window.addEventListener('keyup', (e) => {
|
||||||
if (e.key in kbdPressed) {
|
if (e.key in kbdPressed) {
|
||||||
kbdPressed[e.key] = false;
|
kbdPressed[e.key] = false;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
var oscCallbacks = {
|
var prepend = '/ww/0';
|
||||||
'/keys': [
|
|
||||||
function(args) {
|
var oscCallbacks = {};
|
||||||
|
|
||||||
|
oscCallbacks[prepend + '/keys'] = function(args) {
|
||||||
keysPressed = args.map(getVal);
|
keysPressed = args.map(getVal);
|
||||||
keysPressed[0] |= kbdPressed['a'];
|
keysPressed[0] |= kbdPressed['a'];
|
||||||
keysPressed[1] |= kbdPressed['s'];
|
keysPressed[1] |= kbdPressed['s'];
|
||||||
keysPressed[2] |= kbdPressed['d'];
|
keysPressed[2] |= kbdPressed['d'];
|
||||||
keysPressed[3] |= kbdPressed['f'];
|
keysPressed[3] |= kbdPressed['f'];
|
||||||
//console.log(keysPressed, kbdPressed);
|
};
|
||||||
}
|
oscCallbacks[prepend + '/quaternion'] = function (args) {
|
||||||
],
|
|
||||||
'/quaternion': [
|
|
||||||
function (args) {
|
|
||||||
// Popravimo osi (w x y z po defaultu HMM)
|
// Popravimo osi (w x y z po defaultu HMM)
|
||||||
[qWW.w, qWW.z, qWW.x, qWW.y] = args.map(getVal);
|
[qWW.w, qWW.z, qWW.x, qWW.y] = args.map(getVal);
|
||||||
}
|
};
|
||||||
],
|
oscCallbacks[prepend + '/quaternionDiff'] = function (args) {
|
||||||
'/quaternionDiff': [
|
|
||||||
function (args) {
|
|
||||||
[qWWd.w, qWWd.x, qWWd.y, qWWd.z] = args.map(getVal);
|
[qWWd.w, qWWd.x, qWWd.y, qWWd.z] = args.map(getVal);
|
||||||
}
|
};
|
||||||
],
|
oscCallbacks[prepend + '/eulerDiff'] = function (args) {
|
||||||
'/eulerDiff': [
|
|
||||||
function (args) {
|
|
||||||
[dqX, dqY, dqZ] = args.map(getVal);
|
[dqX, dqY, dqZ] = args.map(getVal);
|
||||||
}
|
};
|
||||||
],
|
|
||||||
/* Ne uporabljamo vec
|
/* Ne uporabljamo vec
|
||||||
|
|
||||||
'/gyro/': [
|
'/gyro/': [
|
||||||
|
@ -327,4 +319,3 @@ var oscCallbacks = {
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
*/
|
*/
|
||||||
}
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
play:
|
||||||
|
chickadee play ww.scm --repl-server
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
(use-modules (guix packages)
|
||||||
|
(gnu packages base)
|
||||||
|
(gnu packages guile)
|
||||||
|
(gnu packages game-development)
|
||||||
|
(gnu packages guile-xyz))
|
||||||
|
|
||||||
|
(packages->manifest (list guile-next guile-chickadee guile-ares-rs guile-websocket gnu-make))
|
|
@ -0,0 +1,156 @@
|
||||||
|
(use-modules (chickadee)
|
||||||
|
(chickadee config)
|
||||||
|
(chickadee graphics text)
|
||||||
|
(chickadee graphics phong)
|
||||||
|
(chickadee graphics engine)
|
||||||
|
(chickadee graphics model)
|
||||||
|
(chickadee graphics mesh)
|
||||||
|
(chickadee graphics light)
|
||||||
|
(chickadee graphics shader)
|
||||||
|
(chickadee graphics buffer)
|
||||||
|
(chickadee graphics polygon)
|
||||||
|
(chickadee math)
|
||||||
|
(chickadee math vector)
|
||||||
|
(chickadee math matrix)
|
||||||
|
(system repl coop-server)
|
||||||
|
(ww init)
|
||||||
|
(ww kamera)
|
||||||
|
(ww obj))
|
||||||
|
|
||||||
|
;; Hitra pomoc:
|
||||||
|
;;
|
||||||
|
;; chickadee play anim.scm --repl-server
|
||||||
|
;; ^ pozene fajl z repl serverjem v ozadju
|
||||||
|
;;
|
||||||
|
;;
|
||||||
|
|
||||||
|
(define repl (spawn-coop-repl-server))
|
||||||
|
|
||||||
|
(define stevec 0)
|
||||||
|
|
||||||
|
(define (input-handle)
|
||||||
|
(cond ((key-pressed? 'h)
|
||||||
|
(set! dX (+ dX 0.1)))
|
||||||
|
((key-pressed? 'l)
|
||||||
|
(set! dX (- dX 0.1)))))
|
||||||
|
|
||||||
|
(define (update dt)
|
||||||
|
;; REPL!
|
||||||
|
(poll-coop-repl-server repl)
|
||||||
|
|
||||||
|
;; Stevec gor
|
||||||
|
(set! stevec (+ stevec 1))
|
||||||
|
(display (string-append (number->string stevec) "\n"))
|
||||||
|
|
||||||
|
(input-handle)
|
||||||
|
|
||||||
|
(obj-anim dt))
|
||||||
|
|
||||||
|
(define rotX 0)
|
||||||
|
(define rotY 0)
|
||||||
|
(define rotZ 0)
|
||||||
|
|
||||||
|
(define dX 0)
|
||||||
|
(define dY 0)
|
||||||
|
(define dZ 0)
|
||||||
|
|
||||||
|
(define (obj-anim dt)
|
||||||
|
(set! rotX (+ rotX (/ dt 0.2) (* dt dX)))
|
||||||
|
(set! rotY (+ rotY (/ dt 0.1)))
|
||||||
|
(set! rotZ (+ rotZ (/ dt 0.5)))
|
||||||
|
|
||||||
|
(matrix4-copy! (matrix4* (matrix4-scale stevec)
|
||||||
|
(matrix4-rotate-x rotX)
|
||||||
|
(matrix4-rotate-y rotY)
|
||||||
|
(matrix4-rotate-z rotZ))
|
||||||
|
model-matrix)
|
||||||
|
(matrix4-copy! (matrix4* (matrix4-scale stevec)
|
||||||
|
(matrix4-rotate-x rotY)
|
||||||
|
(matrix4-rotate-y rotZ)
|
||||||
|
(matrix4-rotate-z rotX))
|
||||||
|
tla-matrix)
|
||||||
|
;(matrix4-scale! model-matrix stevec)
|
||||||
|
;(matrix4-mult! model-matrix model-matrix (matrix4-scale stevec))
|
||||||
|
;(matrix4-rotate-x! model-matrix rotX)
|
||||||
|
;(matrix4-rotate-y! model-matrix rotY)
|
||||||
|
;(matrix4-rotate-z! model-matrix rotZ))
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
(define (key-press key modifiers repeat?)
|
||||||
|
(cond
|
||||||
|
((eq? key 'q)
|
||||||
|
(abort-game))
|
||||||
|
((eq? key 'k)
|
||||||
|
(set! obj (cons (ustvari-objekt stevec) obj)))
|
||||||
|
((eq? key 'r)
|
||||||
|
(load))))
|
||||||
|
|
||||||
|
(define (reset-stevec!)
|
||||||
|
(set! stevec 1))
|
||||||
|
|
||||||
|
(define tla-matrix (make-identity-matrix4))
|
||||||
|
(define position (vec3 0.0 0.0 -4.0))
|
||||||
|
|
||||||
|
(define obj #f)
|
||||||
|
(define tla #f)
|
||||||
|
|
||||||
|
(define nebo #f)
|
||||||
|
|
||||||
|
(define wireframe-shader
|
||||||
|
(load-shader (scope-datadir "shaders/path-stroke-vert.glsl")
|
||||||
|
(scope-datadir "shaders/path-stroke-frag.glsl")))
|
||||||
|
|
||||||
|
(define (draw alpha)
|
||||||
|
(with-graphics-state
|
||||||
|
((g:polygon-mode line-polygon-mode))
|
||||||
|
(with-projection
|
||||||
|
projection
|
||||||
|
|
||||||
|
;; objekti
|
||||||
|
(map (lambda (o)
|
||||||
|
(draw-mesh o
|
||||||
|
#:model-matrix model-matrix
|
||||||
|
#:view-matrix view-matrix
|
||||||
|
#:camera-position position
|
||||||
|
#:lights (list (ustvari-luc))))
|
||||||
|
obj)
|
||||||
|
|
||||||
|
;; "tla"
|
||||||
|
(draw-mesh tla
|
||||||
|
#:model-matrix tla-matrix
|
||||||
|
#:view-matrix view-matrix
|
||||||
|
#:camera-position position
|
||||||
|
#:lights (list (ustvari-luc)))
|
||||||
|
|
||||||
|
;; wireframe test?
|
||||||
|
(map
|
||||||
|
(lambda (p)
|
||||||
|
(shader-apply
|
||||||
|
my-shader
|
||||||
|
(primitive-vertex-array p)))
|
||||||
|
(mesh-primitives tla)))))
|
||||||
|
|
||||||
|
|
||||||
|
;; :( ne dela?
|
||||||
|
|
||||||
|
(define (load)
|
||||||
|
;; Moramo pogledat model
|
||||||
|
(poglej! position)
|
||||||
|
(reset-stevec!)
|
||||||
|
(ustvari-luc)
|
||||||
|
(set! obj (list (ustvari-objekt stevec)))
|
||||||
|
(set! tla (ustvari-tla))
|
||||||
|
(set! nebo (ustvari-nebo)))
|
||||||
|
|
||||||
|
(run-game
|
||||||
|
#:draw draw
|
||||||
|
#:update update
|
||||||
|
#:key-press key-press
|
||||||
|
#:load load
|
||||||
|
;; Okno init
|
||||||
|
#:window-resizable? #t
|
||||||
|
#:window-title "wavey wind"
|
||||||
|
#:clear-color (rgb #xFFFFFF))
|
||||||
|
|
||||||
|
;(reset-stevec!)
|
|
@ -0,0 +1,35 @@
|
||||||
|
(define-module (ww init)
|
||||||
|
#:use-module (chickadee math vector)
|
||||||
|
#:use-module (chickadee graphics color)
|
||||||
|
#:use-module (chickadee graphics mesh)
|
||||||
|
#:use-module (chickadee graphics light)
|
||||||
|
#:use-module (chickadee graphics pbr)
|
||||||
|
#:use-module (chickadee graphics polygon)
|
||||||
|
#:use-module (chickadee graphics skybox)
|
||||||
|
#:use-module (chickadee graphics texture)
|
||||||
|
#:export (ustvari-tla
|
||||||
|
ustvari-nebo
|
||||||
|
ustvari-luc))
|
||||||
|
|
||||||
|
(define (ustvari-tla)
|
||||||
|
(make-plane 0.002
|
||||||
|
0.002
|
||||||
|
(make-pbr-material #:base-color-factor (vec3 1.0 0 0)
|
||||||
|
#:polygon-mode line-polygon-mode)))
|
||||||
|
|
||||||
|
;; (define (ustvari-kvadrat sirina)
|
||||||
|
;; (build-mesh
|
||||||
|
;; "kvadrat"
|
||||||
|
;; (let* ((polovica (/ sirina 2.0))
|
||||||
|
;; (levo-zgoraj (vec3 (- polovica) 0.0 (- polovica))
|
||||||
|
;; (vec2 )))
|
||||||
|
;; (list (vertex (vec3 (- sirina)))))))
|
||||||
|
|
||||||
|
(define (ustvari-nebo)
|
||||||
|
(default-skybox))
|
||||||
|
|
||||||
|
(define (ustvari-luc)
|
||||||
|
(make-directional-light
|
||||||
|
#:direction (vec3 1 1 1)
|
||||||
|
#:color white
|
||||||
|
#:intensity 10))
|
|
@ -0,0 +1,14 @@
|
||||||
|
(define-module (ww kamera)
|
||||||
|
#:use-module (chickadee math)
|
||||||
|
#:use-module (chickadee math vector)
|
||||||
|
#:use-module (chickadee math matrix)
|
||||||
|
#:export (poglej! view-matrix projection))
|
||||||
|
|
||||||
|
(define projection (perspective-projection (/ pi 3.0) (/ 4.0 3.0) 0.1 10.0))
|
||||||
|
(define view-matrix (make-identity-matrix4))
|
||||||
|
|
||||||
|
(define (poglej! position)
|
||||||
|
(look-at! view-matrix
|
||||||
|
position
|
||||||
|
(vec3+ position (vec3 0.0 0.0 1.0))
|
||||||
|
(vec3 0.0 1.0 0.0)))
|
|
@ -0,0 +1,23 @@
|
||||||
|
(define-module (ww obj)
|
||||||
|
#:use-module (chickadee math matrix)
|
||||||
|
#:use-module (chickadee math vector)
|
||||||
|
#:use-module (chickadee graphics mesh)
|
||||||
|
#:use-module (chickadee graphics pbr)
|
||||||
|
#:use-module (chickadee graphics phong)
|
||||||
|
#:use-module (chickadee graphics polygon)
|
||||||
|
#:export (ustvari-objekt model-matrix))
|
||||||
|
|
||||||
|
(define model-matrix (make-identity-matrix4))
|
||||||
|
|
||||||
|
(define (ustvari-objekt stevec)
|
||||||
|
(let ((velikost (/ stevec 2000.0))
|
||||||
|
(barva (vec3 0.2 0.8 0.4)))
|
||||||
|
(make-cube velikost
|
||||||
|
(make-pbr-material #:base-color-factor barva
|
||||||
|
#:polygon-mode line-polygon-mode
|
||||||
|
#:metallic-factor 0.1))
|
||||||
|
|
||||||
|
;(make-plane velikost
|
||||||
|
; velikost
|
||||||
|
; (make-pbr-material))
|
||||||
|
))
|
25
osctl.js
25
osctl.js
|
@ -3,23 +3,20 @@ var oscPort = new osc.WebSocketPort({
|
||||||
metadata: true
|
metadata: true
|
||||||
});
|
});
|
||||||
|
|
||||||
oscPort.open();
|
function sendAll (address, args) {
|
||||||
|
//console.log('posiljam', address, args)
|
||||||
|
oscPort.send({ address, args })
|
||||||
|
}
|
||||||
|
|
||||||
oscPort.on("ready", function () {
|
oscPort.on("ready", function () {
|
||||||
console.log("OSC listening!")
|
console.log("OSC listening!")
|
||||||
// Example send
|
|
||||||
/*
|
|
||||||
oscPort.send({
|
|
||||||
address: "/carrier/frequency",
|
|
||||||
args: [
|
|
||||||
{
|
|
||||||
type: "f",
|
|
||||||
value: 440
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
oscPort.on("message", function (msg) {
|
oscPort.on("message", function (msg) {
|
||||||
oscCallbacks[msg.address].forEach(cb => cb(msg.args))
|
//console.log('msg!', msg);
|
||||||
|
var cb = oscCallbacks[msg.address]
|
||||||
|
if (cb) {
|
||||||
|
cb(msg.args)
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
oscPort.open();
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -7,8 +7,9 @@
|
||||||
"midi": "^2.0.0",
|
"midi": "^2.0.0",
|
||||||
"nodemon": "^2.0.12",
|
"nodemon": "^2.0.12",
|
||||||
"nouislider": "14.6.2",
|
"nouislider": "14.6.2",
|
||||||
"osc": "^2.4.2",
|
"osc": "^2.4.4",
|
||||||
"pm2": "^5.1.0",
|
"pm2": "^5.1.0",
|
||||||
|
"serialport": "^12.0.0",
|
||||||
"three": "0.135.0",
|
"three": "0.135.0",
|
||||||
"ws": "^7.3.1"
|
"ws": "^7.3.1"
|
||||||
},
|
},
|
||||||
|
|
106
server.js
106
server.js
|
@ -14,6 +14,8 @@ const DEBUG = {
|
||||||
// MIDI out
|
// MIDI out
|
||||||
const MIDI = true
|
const MIDI = true
|
||||||
|
|
||||||
|
// Serial baud rate
|
||||||
|
const BAUDRATE = 115200
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -22,6 +24,7 @@ const MIDI = true
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
require('serialport')
|
||||||
const express = require('express')
|
const express = require('express')
|
||||||
const http = require('http')
|
const http = require('http')
|
||||||
const WebSocket = require('ws')
|
const WebSocket = require('ws')
|
||||||
|
@ -31,16 +34,11 @@ const fs = require('fs')
|
||||||
const midi = require('midi')
|
const midi = require('midi')
|
||||||
|
|
||||||
|
|
||||||
// Vzemi iz argumenta
|
// Seznam povezanih tty naprav
|
||||||
const tty = process.argv[2]
|
const tty = process.argv.splice(2)
|
||||||
|
|
||||||
let eulerRotation = [0, 0, 0]
|
let eulerRotation = [0, 0, 0]
|
||||||
|
|
||||||
let baudrate = parseInt(process.argv[3])
|
|
||||||
if (!baudrate) {
|
|
||||||
baudrate = 115200
|
|
||||||
}
|
|
||||||
|
|
||||||
const include_files = [
|
const include_files = [
|
||||||
'/anim.js',
|
'/anim.js',
|
||||||
'/control.js',
|
'/control.js',
|
||||||
|
@ -52,66 +50,87 @@ const include_files = [
|
||||||
'/node_modules/osc/dist/osc-browser.js'
|
'/node_modules/osc/dist/osc-browser.js'
|
||||||
];
|
];
|
||||||
|
|
||||||
|
function isFloat(value) {
|
||||||
|
if (
|
||||||
|
typeof value === 'number' &&
|
||||||
|
!Number.isNaN(value) &&
|
||||||
|
!Number.isInteger(value)
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
const server = http.Server(app);
|
const server = http.Server(app);
|
||||||
|
|
||||||
// Odprti serijski OSC link
|
// Odprti serijski OSC linki
|
||||||
let scon = null
|
let serijskePovezave = {}
|
||||||
|
|
||||||
let mo = null
|
let mo = null
|
||||||
|
let mi = null
|
||||||
if (MIDI) {
|
if (MIDI) {
|
||||||
// Midi port
|
// Midi port
|
||||||
mo = new midi.Output()
|
mo = new midi.Output()
|
||||||
|
mi = new midi.Input()
|
||||||
//mo.getPortCount()
|
//mo.getPortCount()
|
||||||
//mo.getPortName(0)
|
//mo.getPortName(0)
|
||||||
//mo.openPort(0)
|
//mo.openPort(0)
|
||||||
mo.openVirtualPort("kegel")
|
mo.openVirtualPort("kegel")
|
||||||
|
mi.openVirtualPort("ww-midi-in")
|
||||||
}
|
}
|
||||||
|
|
||||||
function openSerial() {
|
function openSerial(ttyAddr) {
|
||||||
console.log('opening ', tty, baudrate)
|
console.log('opening ', ttyAddr, BAUDRATE)
|
||||||
|
|
||||||
scon = new osc.SerialPort({
|
serijskePovezave[ttyAddr] = new osc.SerialPort({
|
||||||
devicePath: tty,
|
devicePath: ttyAddr,
|
||||||
bitrate: baudrate,
|
bitrate: BAUDRATE,
|
||||||
autoOpen: true,
|
autoOpen: true,
|
||||||
useSLIP: true
|
useSLIP: true
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const scon = serijskePovezave[ttyAddr]
|
||||||
|
|
||||||
scon.on('open', e => {
|
scon.on('open', e => {
|
||||||
console.log('serial connection opened')
|
console.log(`serial connection ${ttyAddr} opened`)
|
||||||
//console.log(scon)
|
//console.log(scon)
|
||||||
})
|
})
|
||||||
scon.on('error', e => {
|
scon.on('error', e => {
|
||||||
console.error('tty error', e)
|
console.error(`tty ${ttyAddr} error`, e)
|
||||||
//scon.close()
|
//scon.close()
|
||||||
})
|
})
|
||||||
scon.on('close', e => {
|
scon.on('close', e => {
|
||||||
console.warn('serial connection closed, restarting in 1 second')
|
console.warn(`serial connection ${ttyAddr} closed, restarting in 1 second`)
|
||||||
setTimeout(openSerial, 1000)
|
setTimeout(() => { openSerial(ttyAddr) }, 1000)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Arduino OSC gre v web
|
// Arduino OSC gre v web
|
||||||
scon.on('message', msg => {
|
scon.on('message', msg => {
|
||||||
// Debug incoming osc
|
const index = Object.keys(serijskePovezave).indexOf(ttyAddr)
|
||||||
if (DEBUG.osc) {
|
const prepend = `/ww/${index}`
|
||||||
console.log('osc msg', msg)
|
|
||||||
}
|
|
||||||
|
|
||||||
sendAll(msg, null, null, osclients)
|
// Debug incoming serial osc
|
||||||
|
if (DEBUG.osc) {
|
||||||
|
console.log('osc SERIAL msg', msg.address, msg.args.map((a) => isFloat(a) ? a.toFixed(3) : a), ttyAddr, prepend)
|
||||||
|
}
|
||||||
|
sendAll(msg, null, null, osclients, prepend)
|
||||||
})
|
})
|
||||||
|
|
||||||
scon.open()
|
scon.open()
|
||||||
|
|
||||||
if (scon._closeCode) {
|
if (scon._closeCode) {
|
||||||
scon = null
|
scon = null
|
||||||
console.log('restarting serial connection')
|
console.log('restarting serial connection ', ttyAddr)
|
||||||
setTimeout(openSerial, 1000)
|
setTimeout(openSerial, 1000)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (tty) {
|
if (tty.length > 0) {
|
||||||
openSerial(baudrate)
|
tty.forEach((ttyAddr) => {
|
||||||
|
openSerial(ttyAddr);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
app.get('/', (req, res) => {
|
app.get('/', (req, res) => {
|
||||||
|
@ -188,6 +207,22 @@ scudp.on('error', (e) => {
|
||||||
})
|
})
|
||||||
scudp.open()
|
scudp.open()
|
||||||
|
|
||||||
|
if (MIDI) {
|
||||||
|
mi.on('message', (deltaTime, message) => {
|
||||||
|
// The message is an array of numbers corresponding to the MIDI bytes:
|
||||||
|
// [status, data1, data2]
|
||||||
|
// https://www.cs.cf.ac.uk/Dave/Multimedia/node158.html has some helpful
|
||||||
|
// information interpreting the messages.
|
||||||
|
console.log(`midi in: ${message} d: ${deltaTime}`);
|
||||||
|
mo.send(message)
|
||||||
|
|
||||||
|
sendAll({
|
||||||
|
address: '/midi-in',
|
||||||
|
args: message
|
||||||
|
}, null, null, osclients)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function eulerFromQuaternion(quaternion) {
|
function eulerFromQuaternion(quaternion) {
|
||||||
// Quaternion to matrix.
|
// Quaternion to matrix.
|
||||||
const w = quaternion[0], x = quaternion[1], y = quaternion[2], z = quaternion[3];
|
const w = quaternion[0], x = quaternion[1], y = quaternion[2], z = quaternion[3];
|
||||||
|
@ -221,7 +256,7 @@ function eulerFromQuaternion(quaternion) {
|
||||||
return euler;
|
return euler;
|
||||||
}
|
}
|
||||||
|
|
||||||
const sendAll = (msg, info, oscWS, osclients) => {
|
const sendAll = (msg, info, oscWS, osclients, prepend = '') => {
|
||||||
// Reset euler rotation to 0
|
// Reset euler rotation to 0
|
||||||
if (msg.address == '/keys') {
|
if (msg.address == '/keys') {
|
||||||
if (msg.args[0] && msg.args[1] && msg.args[2] && msg.args[3]) {
|
if (msg.args[0] && msg.args[1] && msg.args[2] && msg.args[3]) {
|
||||||
|
@ -235,7 +270,7 @@ const sendAll = (msg, info, oscWS, osclients) => {
|
||||||
sendAll({
|
sendAll({
|
||||||
address: '/eulerDiff',
|
address: '/eulerDiff',
|
||||||
args: euler
|
args: euler
|
||||||
}, info, oscWS, osclients)
|
}, info, oscWS, osclients, prepend)
|
||||||
|
|
||||||
eulerRotation[0] += euler[0]
|
eulerRotation[0] += euler[0]
|
||||||
eulerRotation[1] += euler[1]
|
eulerRotation[1] += euler[1]
|
||||||
|
@ -244,13 +279,20 @@ const sendAll = (msg, info, oscWS, osclients) => {
|
||||||
sendAll({
|
sendAll({
|
||||||
address: '/euler',
|
address: '/euler',
|
||||||
args: eulerRotation
|
args: eulerRotation
|
||||||
}, info, oscWS, osclients)
|
}, info, oscWS, osclients, prepend)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add prepend
|
||||||
|
let sendMsg = {
|
||||||
|
address: `${prepend}${msg.address}`,
|
||||||
|
args: msg.args
|
||||||
|
}
|
||||||
|
|
||||||
|
// OSC relay
|
||||||
osclients.forEach( client => {
|
osclients.forEach( client => {
|
||||||
if (client && oscWS != client) {
|
if (client && oscWS != client) {
|
||||||
// console.log("sending", msg, info)
|
// console.log("OSC RELAY", sendMsg, info, prepend)
|
||||||
client.send(msg)
|
client.send(sendMsg)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -258,7 +300,7 @@ const sendAll = (msg, info, oscWS, osclients) => {
|
||||||
if (DEBUG.udp) {
|
if (DEBUG.udp) {
|
||||||
console.log("UDP SEND", msg)
|
console.log("UDP SEND", msg)
|
||||||
}
|
}
|
||||||
scudp.send(msg)
|
scudp.send(sendMsg)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
578
test.js
578
test.js
|
@ -4,16 +4,16 @@ console.log("Hello, Sky!");
|
||||||
/☭☭☭☭ Test skripta ☭☭☭☭ *
|
/☭☭☭☭ Test skripta ☭☭☭☭ *
|
||||||
******☭☭☭☭☭☭☭☭☭☭☭☭******/
|
******☭☭☭☭☭☭☭☭☭☭☭☭******/
|
||||||
|
|
||||||
// Odmik kamere
|
// Ker kegel imamo?
|
||||||
var odmik_kamere = 100;
|
var izbranKegel = 1;
|
||||||
|
if (window.location.hash.indexOf('kegel') > -1) {
|
||||||
|
izbranKegel = window.location.hash.split('=')[1];
|
||||||
|
console.log('definiran kegel!');
|
||||||
|
}
|
||||||
|
console.log('izbran kegel: ', izbranKegel);
|
||||||
|
|
||||||
// Vidni kot
|
// Vidni kot
|
||||||
var FOV = 140;
|
var FOV = 90;
|
||||||
|
|
||||||
// Sirina in visina test objekta
|
|
||||||
var width = 25;
|
|
||||||
var height = 150;
|
|
||||||
var depth = 50;
|
|
||||||
|
|
||||||
// Parametri rotacije (euler)
|
// Parametri rotacije (euler)
|
||||||
var rotacijaX = 0.000;
|
var rotacijaX = 0.000;
|
||||||
|
@ -25,15 +25,23 @@ var accX = 0.000;
|
||||||
var accY = 0.000;
|
var accY = 0.000;
|
||||||
var accZ = 0.000;
|
var accZ = 0.000;
|
||||||
|
|
||||||
|
var deformiraj = 0;
|
||||||
|
|
||||||
// Scena, kamera in render
|
// Scena, kamera in render
|
||||||
scene = new THREE.Scene;
|
var scene = new THREE.Scene;
|
||||||
|
window.scene = scene;
|
||||||
|
|
||||||
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
|
/*
|
||||||
camera.position.z = odmik_kamere;
|
const axesHelper = new THREE.AxesHelper( 5 );
|
||||||
|
scene.add( axesHelper );
|
||||||
|
*/
|
||||||
|
|
||||||
renderer = new THREE.WebGLRenderer({
|
var camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
|
||||||
alpha: true
|
window.camera = camera;
|
||||||
});
|
// Polozaj kamere
|
||||||
|
camera.position.z = 10;
|
||||||
|
|
||||||
|
var renderer = new THREE.WebGLRenderer({ alpha: true });
|
||||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
|
||||||
// Belo ozadje
|
// Belo ozadje
|
||||||
|
@ -41,71 +49,436 @@ renderer.setClearColor(0xFFFFFF, 1);
|
||||||
// Črno ozadje
|
// Črno ozadje
|
||||||
//renderer.setClearColor(0x000000, 1);
|
//renderer.setClearColor(0x000000, 1);
|
||||||
|
|
||||||
var skupina = new THREE.Group();
|
//var skupina = new THREE.Group();
|
||||||
|
|
||||||
// Dodaj test skatlo
|
/********
|
||||||
var geo = new THREE.BoxGeometry(width, height, depth);
|
* KEGEL *
|
||||||
|
*********/
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (i = 0; i < polozaji.length; i++) {
|
||||||
|
if (i % 3 == 2) {
|
||||||
|
polozaji[i] -= height / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Spremeni v vertexe
|
||||||
|
var vertices = new Float32Array(polozaji);
|
||||||
|
geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
|
||||||
|
|
||||||
|
window.geo = geo;
|
||||||
|
|
||||||
|
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,
|
||||||
wireframe: true
|
color: barva,
|
||||||
|
wireframe: true,
|
||||||
|
transparent: true
|
||||||
});
|
});
|
||||||
var cube = new THREE.Mesh(geo, mat);
|
window.mat = mat;
|
||||||
|
//var mat = new THREE.LineBasicMaterial({ color: 0xff00ff });
|
||||||
|
var kegel = new THREE.Mesh(geo.clone(), mat);
|
||||||
|
kegel.position.z = 20; // gor / dol
|
||||||
|
kegel.position.y = -30; // levo / desno
|
||||||
|
kegel.position.x = 12; // levo / desno drugic
|
||||||
|
|
||||||
skupina.add(cube);
|
if (izbranKegel == 1) {
|
||||||
|
kegel.position.x -= 10;
|
||||||
|
kegel.position.y += 8;
|
||||||
|
kegel.position.z += 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
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]
|
||||||
|
|
||||||
|
/*********
|
||||||
|
* ZOGICE *
|
||||||
|
*********/
|
||||||
|
var zogice = false
|
||||||
|
var kegli = 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 barvaKrogleO = new THREE.Color();
|
||||||
|
barvaKrogleO.setHSL(Math.random(), 0.8, 0.5);
|
||||||
|
function novaKrogla () {
|
||||||
|
//var barvaKrogle = barvaKrogleO.clone();
|
||||||
|
var bId = izbranKegel == 0 ? 2 : 3
|
||||||
|
console.log('id barve:', bId);
|
||||||
|
var barvaKrogle = new THREE.Color(barvnePalete[bId][barvnePaleteIdx[bId]]);
|
||||||
|
var mat = new THREE.MeshBasicMaterial({
|
||||||
|
color: barvaKrogle,
|
||||||
|
wireframe: true,
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
var velikost = 1 + Math.random() * 5;
|
||||||
|
var kroglaGeo = new THREE.SphereGeometry(velikost, 12, 12);
|
||||||
|
var krogla = new THREE.Mesh(kroglaGeo, mat);
|
||||||
|
|
||||||
|
krogla.position.x = (Math.random() - 1) * 200;
|
||||||
|
krogla.position.y = (Math.random() - 1) * 10;
|
||||||
|
krogla.position.z = (Math.random() - 1) * 300;
|
||||||
|
|
||||||
|
krogla.position.y -= 100;
|
||||||
|
krogla.position.x += 150;
|
||||||
|
krogla.position.z += 230; // gor/dol
|
||||||
|
|
||||||
|
|
||||||
|
//krogla.position.y += 200;
|
||||||
|
|
||||||
|
scene.add(krogla);
|
||||||
|
krogle.push(krogla);
|
||||||
|
}
|
||||||
|
|
||||||
|
function spremeniZoom (kolicina) {
|
||||||
|
const noviZum = camera.position.z * (1 + kolicina / 25)
|
||||||
|
console.log(noviZum)
|
||||||
|
if ((noviZum > 10) && (noviZum < 300)) {
|
||||||
|
camera.position.z = noviZum
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function spremeniDeformiraj (kolicina) {
|
||||||
|
const noviDeformiraj = deformiraj + (kolicina / 2)
|
||||||
|
//console.log('deform', noviDeformiraj)
|
||||||
|
if (noviDeformiraj > 0) {
|
||||||
|
deformiraj = noviDeformiraj
|
||||||
|
} else {
|
||||||
|
deformiraj = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//skupina.add(kegel);
|
||||||
|
|
||||||
// Za pospeskomer - os X
|
// Za pospeskomer - os X
|
||||||
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
|
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
|
||||||
var mAX = new THREE.MeshBasicMaterial({ color: 0xff000055 });
|
var mAX = new THREE.MeshBasicMaterial({ color: 0xff000055 });
|
||||||
var AX = new THREE.Mesh(gAX, mAX);
|
var AX = new THREE.Mesh(gAX, mAX);
|
||||||
|
|
||||||
skupina.add(AX);
|
//skupina.add(AX);
|
||||||
|
|
||||||
// Damo vse skupaj v kader
|
// Damo vse skupaj v kader
|
||||||
scene.add(skupina);
|
// scene.add(skupina);
|
||||||
|
scene.add(kegel);
|
||||||
|
|
||||||
// Quaternioni za rotacijo in kalibracijo
|
// Quaternioni za rotacijo in kalibracijo
|
||||||
var qWW = new THREE.Quaternion();
|
var qWW = new THREE.Quaternion();
|
||||||
|
var qPrej = new THREE.Quaternion();
|
||||||
var qObj = new THREE.Quaternion();
|
var qObj = new THREE.Quaternion();
|
||||||
var qStart = new THREE.Quaternion();
|
var qStart = new THREE.Quaternion();
|
||||||
var reset = false;
|
var reset = false;
|
||||||
|
var calibrate = true;
|
||||||
|
|
||||||
|
|
||||||
|
var objekti = [kegel];
|
||||||
|
var dodatniObjekti = [];
|
||||||
|
var krogle = [];
|
||||||
|
var stevec = 0;
|
||||||
|
|
||||||
|
// Zacetna orientacija kegla
|
||||||
|
scene.rotation.x = 90;
|
||||||
|
scene.rotation.z = 270;
|
||||||
|
|
||||||
|
//skupina.position.z = 32;
|
||||||
|
//skupina.position.y = -100;
|
||||||
|
|
||||||
|
var cakajDeformiraj = false
|
||||||
|
var cakajZogice = false
|
||||||
|
var cakajKegli = false
|
||||||
|
function inputHandle () {
|
||||||
|
if (kbdPressed.c) {
|
||||||
|
calibrate = true;
|
||||||
|
sendAll('/ww/calibrate');
|
||||||
|
}
|
||||||
|
if (kbdPressed['-']) {
|
||||||
|
sendAll('/ww/reload');
|
||||||
|
window.location.reload();
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
if (kbdPressed.d && !cakajDeformiraj) {
|
||||||
|
deformiraj = !deformiraj
|
||||||
|
cakajDeformiraj = true
|
||||||
|
const args = [{
|
||||||
|
type: "f",
|
||||||
|
value: deformiraj
|
||||||
|
}];
|
||||||
|
sendAll('/ww/zoom', args)
|
||||||
|
setTimeout(() => cakajDeformiraj = false, 200)
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
if (kbdPressed.g && !cakajZogice) {
|
||||||
|
zogice = !zogice
|
||||||
|
cakajZogice = true
|
||||||
|
const args = [{
|
||||||
|
type: "i",
|
||||||
|
value: zogice ? 1 : 0
|
||||||
|
}];
|
||||||
|
sendAll('/ww/zogice', args)
|
||||||
|
setTimeout(() => cakajZogice = false, 200)
|
||||||
|
}
|
||||||
|
if (kbdPressed['l'] && !cakajKegli) {
|
||||||
|
kegli = !kegli
|
||||||
|
console.log('sprememba kegli', kegli)
|
||||||
|
cakajKegli = true
|
||||||
|
const args = [{
|
||||||
|
type: "i",
|
||||||
|
value: kegli ? 1 : 0
|
||||||
|
}];
|
||||||
|
sendAll('/ww/kegli', args)
|
||||||
|
setTimeout(() => cakajKegli = false, 200)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var objekti = [cube];
|
|
||||||
|
|
||||||
function render () {
|
function render () {
|
||||||
requestAnimationFrame(render);
|
requestAnimationFrame(render);
|
||||||
renderer.render(scene, camera);
|
renderer.render(scene, camera);
|
||||||
|
stevec += 1;
|
||||||
|
|
||||||
objAnim();
|
objAnim();
|
||||||
|
inputHandle();
|
||||||
|
|
||||||
|
while (krogle.length > 50) {
|
||||||
|
scene.remove(krogle[0]);
|
||||||
|
krogle.shift();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var cakajDodatni = false
|
||||||
|
|
||||||
// Funkcija za animacijo objektov
|
// Funkcija za animacijo objektov
|
||||||
function objAnim() {
|
function objAnim() {
|
||||||
|
// Rotacija kegla
|
||||||
objekti.map(function (obj) {
|
objekti.map(function (obj) {
|
||||||
//obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
|
|
||||||
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||||
qObj = qWW.clone();
|
qObj = qWW.clone();
|
||||||
qObj.multiply(qStart);
|
qObj.multiply(qStart);
|
||||||
obj.setRotationFromQuaternion(qObj);
|
obj.setRotationFromQuaternion(qObj);
|
||||||
|
|
||||||
AX.scale.x = accX / 1000;
|
AX.scale.x = accX / 1000;
|
||||||
|
|
||||||
|
// Deformiranje kegla!
|
||||||
|
// Random 500 zamaknemo
|
||||||
|
var koti = obj.geometry.attributes.position.array;
|
||||||
|
var faktorD = 5;
|
||||||
|
for (var i = 0; i < 500; i++) {
|
||||||
|
koti[Math.floor(Math.random() * koti.length)] += (Math.random() - 1) * deformiraj;
|
||||||
|
}
|
||||||
|
|
||||||
|
// In priblizamo osnovni geometriji
|
||||||
|
for (var i = 0; i < koti.length; i++) {
|
||||||
|
koti[i] = (geo.attributes.position.array[i] - koti[i]) * 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
obj.geometry.attributes.position.needsUpdate = true;
|
||||||
|
});
|
||||||
|
// Ce jih je prevec, pucaj
|
||||||
|
while (dodatniObjekti.length > 100) {
|
||||||
|
scene.remove(dodatniObjekti[0]);
|
||||||
|
dodatniObjekti.shift();
|
||||||
|
}
|
||||||
|
|
||||||
|
dodatniObjekti.map(function (obj) {
|
||||||
|
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
|
||||||
|
qObj = 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;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Drzimo vse stiri gumbe (reset)? - kalibracija!
|
barvaKrogleO.offsetHSL(-(2/1000), 0, 0);
|
||||||
if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) {
|
krogle.map(function (obj) {
|
||||||
if (!reset) {
|
obj.material.opacity *= 0.98;
|
||||||
|
var scaleF = 0.05;
|
||||||
|
obj.scale.x += scaleF;
|
||||||
|
obj.scale.y += scaleF;
|
||||||
|
obj.scale.z += scaleF;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Kalibracija rotacije kegla
|
||||||
|
if (calibrate) {
|
||||||
qStart = qWW.clone();
|
qStart = qWW.clone();
|
||||||
qStart.conjugate();
|
qStart.conjugate();
|
||||||
reset = true;
|
calibrate = false;
|
||||||
console.log("RESET!");
|
console.log("RESET!");
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
if (reset) {
|
|
||||||
reset = false;
|
// rotiramo skupino da se vidi
|
||||||
console.log("reset off....");
|
//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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// kegel.material.color.offsetHSL(2 / 1000, 0, 0);
|
||||||
|
|
||||||
|
// Dupliranje keglov
|
||||||
|
if (kegli) {
|
||||||
|
var vsota = Math.abs(accX) + Math.abs(accZ)
|
||||||
|
if (vsota > 2 && !cakajDodatni) {
|
||||||
|
cakajDodatni = true
|
||||||
|
var dodatni = kegel.clone();
|
||||||
|
dodatni.renderOrder = stevec;
|
||||||
|
var dodatniMat = kegel.material.clone();
|
||||||
|
//var dodatniBarva = barvaDodatni.clone();
|
||||||
|
var bId = izbranKegel == 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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -113,7 +486,6 @@ function objAnim() {
|
||||||
document.onreadystatechange = function () {
|
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();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -128,32 +500,136 @@ window.addEventListener('resize', onWindowResize, false);
|
||||||
|
|
||||||
|
|
||||||
// Poslusaj OSC evente
|
// Poslusaj OSC evente
|
||||||
keysPressed = [0, 0, 0, 0];
|
var keysPressed = [0, 0, 0, 0];
|
||||||
|
|
||||||
const getVal = function (msg) {
|
const getVal = function (msg) {
|
||||||
return msg.value;
|
return msg.value;
|
||||||
}
|
}
|
||||||
|
var prepend = `/ww/0/ww/${izbranKegel}`;
|
||||||
|
console.log('prepend!', prepend);
|
||||||
|
|
||||||
oscCallbacks = {
|
var oscCallbacks = {};
|
||||||
'/keys': [
|
|
||||||
function(args) {
|
oscCallbacks[`${prepend}'/keys`] = function(args) {
|
||||||
keysPressed = args.map(getVal);
|
keysPressed = args.map(getVal);
|
||||||
}
|
};
|
||||||
],
|
oscCallbacks[`${prepend}/quaternion`] = function (args) {
|
||||||
'/quaternion': [
|
|
||||||
function (args) {
|
|
||||||
// Popravimo osi (w x y z po defaultu HMM)
|
// Popravimo osi (w x y z po defaultu HMM)
|
||||||
|
[qPrej.w, qPrej.x, qPrej.y, qPrej.z] = [qWW.w, qWW.x, qWW.y, qWW.z];
|
||||||
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
|
||||||
}
|
};
|
||||||
],
|
oscCallbacks[`${prepend}/accel`] = function (args) {
|
||||||
'/accel': [
|
|
||||||
function (args) {
|
|
||||||
[accX, accY, accZ] = args.map(getVal);
|
[accX, accY, accZ] = args.map(getVal);
|
||||||
}
|
};
|
||||||
],
|
oscCallbacks[`${prepend}/gyro`] = function (args) {
|
||||||
'/gyro': [
|
|
||||||
function (args) {
|
|
||||||
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
[rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
|
||||||
|
};
|
||||||
|
oscCallbacks['/ww/calibrate'] = function () {
|
||||||
|
calibrate = true;
|
||||||
|
};
|
||||||
|
oscCallbacks['/ww/reload'] = function () {
|
||||||
|
window.location.reload();
|
||||||
|
};
|
||||||
|
oscCallbacks['/ww/zoom'] = args => {
|
||||||
|
const [kolicina] = args.map(getVal)
|
||||||
|
spremeniZoom(kolicina)
|
||||||
}
|
}
|
||||||
]
|
oscCallbacks['/ww/deformiraj'] = args => {
|
||||||
|
const [kolicina] = args.map(getVal)
|
||||||
|
spremeniDeformiraj(kolicina)
|
||||||
}
|
}
|
||||||
|
oscCallbacks['/ww/kegli'] = args => {
|
||||||
|
const [ali] = args.map(getVal)
|
||||||
|
kegli = ali
|
||||||
|
}
|
||||||
|
oscCallbacks['/ww/zogice'] = args => {
|
||||||
|
const [ali] = args.map(getVal)
|
||||||
|
zogice = ali
|
||||||
|
}
|
||||||
|
oscCallbacks['/midi-in'] = function (args) {
|
||||||
|
//console.log("MAMOMO MIDI!", args);
|
||||||
|
var minus = (izbranKegel == 1) ? -1 : 1;
|
||||||
|
// kegel.material.color.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||||
|
barvaDodatni.offsetHSL(minus * args[2].value / 1000, 0, 0);
|
||||||
|
|
||||||
|
|
||||||
|
if (Math.random() < 0.5) {
|
||||||
|
kegel.scale.x *= 2;
|
||||||
|
} else {
|
||||||
|
kegel.scale.z *= 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
//kegel.scale.y *= 1 + (args[2] / 100000);
|
||||||
|
//kegel.scale.z *= 1 + (args[2] / 100000);
|
||||||
|
|
||||||
|
if (zogice) {
|
||||||
|
novaKrogla();
|
||||||
|
var bId = izbranKegel == 0 ? 2 : 3
|
||||||
|
console.log('id barve:', bId)
|
||||||
|
barvnePaleteIdx[bId] = (barvnePaleteIdx[bId] + 1) % barvnePalete[bId].length;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const kbdPressed = {
|
||||||
|
a: false,
|
||||||
|
s: false,
|
||||||
|
d: false,
|
||||||
|
f: false,
|
||||||
|
c: false
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('keydown', e => {
|
||||||
|
kbdPressed[e.key] = true
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('keyup', e => {
|
||||||
|
if (e.key in kbdPressed) {
|
||||||
|
kbdPressed[e.key] = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
window.addEventListener('mousedown', e => {
|
||||||
|
e.preventDefault()
|
||||||
|
switch (e.button) {
|
||||||
|
case 0:
|
||||||
|
kbdPressed['miska'] = true
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
kbdPressed['miskaD'] = true
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
window.addEventListener('mouseup', e => {
|
||||||
|
if ('miska' in kbdPressed) {
|
||||||
|
kbdPressed['miska'] = false
|
||||||
|
}
|
||||||
|
if ('miskaD' in kbdPressed) {
|
||||||
|
kbdPressed['miskaD'] = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
var skrolam = false;
|
||||||
|
var zadnjiSkrol = 0;
|
||||||
|
window.addEventListener('mousemove', e => {
|
||||||
|
if (kbdPressed['miska']) {
|
||||||
|
const sprememba = (e.movementX + e.movementY) / 10
|
||||||
|
|
||||||
|
spremeniZoom(sprememba)
|
||||||
|
const args = [{
|
||||||
|
type: "f",
|
||||||
|
value: sprememba
|
||||||
|
}];
|
||||||
|
sendAll('/ww/zoom', args)
|
||||||
|
}
|
||||||
|
if (kbdPressed['miskaD']) {
|
||||||
|
const sprememba = (e.movementX + e.movementY) / 10
|
||||||
|
|
||||||
|
spremeniDeformiraj(sprememba)
|
||||||
|
const args = [{
|
||||||
|
type: "f",
|
||||||
|
value: sprememba
|
||||||
|
}];
|
||||||
|
sendAll('/ww/deformiraj', args)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
Loading…
Reference in New Issue