juni/junisaber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stage event synchronization (wip)

Browse Source
This commit is contained in:
Diego F. Goberna
2018-10-12 23:04:58 +02:00
parent 927d0706a5
commit 62aa0e58b8
8 changed files with 534 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
assets/models/neons.obj Normal file
View File

@@ -0,0 +1,68 @@
# Blender v2.79 (sub 0) OBJ File: 'neons.blend'
# www.blender.org
o neon_Cube.002
v 4.475000 0.625000 18.000004
v 4.475000 0.675000 18.000004
v 4.475000 0.625000 -81.999992
v 4.475000 0.675000 -81.999992
v 4.525000 0.625000 18.000004
v 4.525000 0.675000 18.000004
v 4.525000 0.625000 -81.999992
v 4.525000 0.675000 -81.999992
v 3.475000 0.625000 -6.999996
v 3.475000 0.675000 -6.999996
v 3.475000 0.625000 -56.999996
v 3.475000 0.675000 -56.999996
v 3.525000 0.625000 -6.999996
v 3.525000 0.675000 -6.999996
v 3.525000 0.625000 -56.999996
v 3.525000 0.675000 -56.999996
v -4.475000 0.625000 18.000004
v -4.475000 0.675000 18.000004
v -4.475000 0.625000 -81.999992
v -4.475000 0.675000 -81.999992
v -4.525000 0.625000 18.000004
v -4.525000 0.675000 18.000004
v -4.525000 0.625000 -81.999992
v -4.525000 0.675000 -81.999992
v -3.475000 0.625000 -6.999996
v -3.475000 0.675000 -6.999996
v -3.475000 0.625000 -56.999996
v -3.475000 0.675000 -56.999996
v -3.525000 0.625000 -6.999996
v -3.525000 0.675000 -6.999996
v -3.525000 0.625000 -56.999996
v -3.525000 0.675000 -56.999996
s off
f 2 3 1
f 8 5 7
f 7 1 3
f 4 6 8
f 10 11 9
f 16 13 15
f 15 9 11
f 12 14 16
f 19 18 17
f 21 24 23
f 17 23 19
f 22 20 24
f 27 26 25
f 29 32 31
f 25 31 27
f 30 28 32
f 2 4 3
f 8 6 5
f 7 5 1
f 4 2 6
f 10 12 11
f 16 14 13
f 15 13 9
f 12 10 14
f 19 20 18
f 21 22 24
f 17 21 23
f 22 18 20
f 27 28 26
f 29 30 32
f 25 29 31
f 30 26 28

228
assets/models/tunnel.obj Normal file
View File

@@ -0,0 +1,228 @@
# Blender v2.79 (sub 0) OBJ File: 'neons.blend'
# www.blender.org
o tunnel_tunnel.001
v -19.994535 0.145583 -13.462321
v -20.733458 0.242623 -13.182165
v -19.994535 0.145583 -13.828139
v -20.733458 0.242623 -14.108295
v 19.994537 -0.145587 -13.462318
v 20.733459 -0.242600 -13.182168
v 19.994537 -0.145587 -13.828142
v 20.733459 -0.242600 -14.108293
v 0.145584 19.994537 -13.462320
v 0.242609 20.733471 -13.182167
v 0.145584 19.994537 -13.828140
v 0.242609 20.733471 -14.108294
v -0.145584 -19.994539 -13.462319
v -0.242609 -20.733444 -13.182167
v -0.145584 -19.994539 -13.828141
v -0.242609 -20.733444 -14.108294
v -19.994535 0.145583 -22.723623
v -20.733458 0.242623 -22.443466
v -19.994535 0.145583 -23.089441
v -20.733458 0.242623 -23.369598
v 19.994537 -0.145587 -22.723621
v 20.733459 -0.242600 -22.443470
v 19.994537 -0.145587 -23.089443
v 20.733459 -0.242600 -23.369595
v 0.145584 19.994537 -22.723621
v 0.242609 20.733471 -22.443470
v 0.145584 19.994537 -23.089443
v 0.242609 20.733471 -23.369595
v -0.145584 -19.994539 -22.723621
v -0.242609 -20.733444 -22.443470
v -0.145584 -19.994539 -23.089443
v -0.242609 -20.733444 -23.369595
v -19.994535 0.145583 -31.984924
v -20.733458 0.242623 -31.704769
v -19.994535 0.145583 -32.350742
v -20.733458 0.242623 -32.630898
v 19.994537 -0.145587 -31.984924
v 20.733459 -0.242600 -31.704773
v 19.994537 -0.145587 -32.350746
v 20.733459 -0.242600 -32.630898
v 0.145584 19.994537 -31.984924
v 0.242609 20.733471 -31.704769
v 0.145584 19.994537 -32.350742
v 0.242609 20.733471 -32.630898
v -0.145584 -19.994539 -31.984924
v -0.242609 -20.733444 -31.704769
v -0.145584 -19.994539 -32.350746
v -0.242609 -20.733444 -32.630898
v -19.994535 0.145583 -41.246227
v -20.733458 0.242623 -40.966072
v -19.994535 0.145583 -41.612045
v -20.733458 0.242623 -41.892200
v 19.994537 -0.145587 -41.246223
v 20.733459 -0.242600 -40.966072
v 19.994537 -0.145587 -41.612045
v 20.733459 -0.242600 -41.892197
v 0.145584 19.994537 -41.246223
v 0.242609 20.733471 -40.966072
v 0.145584 19.994537 -41.612045
v 0.242609 20.733471 -41.892200
v -0.145584 -19.994539 -41.246223
v -0.242609 -20.733444 -40.966072
v -0.145584 -19.994539 -41.612045
v -0.242609 -20.733444 -41.892200
s off
f 1 4 3
f 4 11 3
f 9 2 1
f 11 1 3
f 4 10 12
f 15 8 16
f 5 8 7
f 13 6 5
f 13 7 15
f 6 16 8
f 7 12 8
f 11 10 12
f 5 10 9
f 5 11 7
f 10 8 12
f 14 15 13
f 16 3 15
f 1 14 13
f 3 13 15
f 16 2 4
f 18 19 17
f 20 27 19
f 25 18 17
f 27 17 19
f 20 26 28
f 31 24 32
f 21 24 23
f 29 22 21
f 29 23 31
f 24 30 32
f 23 28 24
f 25 28 27
f 21 26 25
f 21 27 23
f 26 24 28
f 30 31 29
f 32 19 31
f 17 30 29
f 19 29 31
f 32 18 20
f 34 35 33
f 36 43 35
f 41 34 33
f 43 33 35
f 36 42 44
f 47 40 48
f 37 40 39
f 45 38 37
f 45 39 47
f 38 48 40
f 39 44 40
f 41 44 43
f 37 42 41
f 37 43 39
f 42 40 44
f 46 47 45
f 48 35 47
f 33 46 45
f 35 45 47
f 48 34 36
f 50 51 49
f 52 59 51
f 57 50 49
f 59 49 51
f 52 58 60
f 63 56 64
f 53 56 55
f 61 54 53
f 61 55 63
f 54 64 56
f 55 60 56
f 57 60 59
f 53 58 57
f 53 59 55
f 58 56 60
f 62 63 61
f 64 51 63
f 49 62 61
f 51 61 63
f 64 50 52
f 1 2 4
f 4 12 11
f 9 10 2
f 11 9 1
f 4 2 10
f 15 7 8
f 5 6 8
f 13 14 6
f 13 5 7
f 6 14 16
f 7 11 12
f 11 9 10
f 5 6 10
f 5 9 11
f 10 6 8
f 14 16 15
f 16 4 3
f 1 2 14
f 3 1 13
f 16 14 2
f 18 20 19
f 20 28 27
f 25 26 18
f 27 25 17
f 20 18 26
f 31 23 24
f 21 22 24
f 29 30 22
f 29 21 23
f 24 22 30
f 23 27 28
f 25 26 28
f 21 22 26
f 21 25 27
f 26 22 24
f 30 32 31
f 32 20 19
f 17 18 30
f 19 17 29
f 32 30 18
f 34 36 35
f 36 44 43
f 41 42 34
f 43 41 33
f 36 34 42
f 47 39 40
f 37 38 40
f 45 46 38
f 45 37 39
f 38 46 48
f 39 43 44
f 41 42 44
f 37 38 42
f 37 41 43
f 42 38 40
f 46 48 47
f 48 36 35
f 33 34 46
f 35 33 45
f 48 46 34
f 50 52 51
f 52 60 59
f 57 58 50
f 59 57 49
f 52 50 58
f 63 55 56
f 53 54 56
f 61 62 54
f 61 53 55
f 54 62 64
f 55 59 60
f 57 58 60
f 53 54 58
f 53 57 59
f 58 54 56
f 62 64 63
f 64 52 51
f 49 50 62
f 51 49 61
f 64 62 50

132
assets/models/tunnelneon.obj Normal file
View File

@@ -0,0 +1,132 @@
# Blender v2.79 (sub 0) OBJ File: 'neons.blend'
# www.blender.org
o tunnelneon
v 11.925084 7.848577 -13.610518
v 7.848576 11.925085 -13.610518
v 11.925084 7.848577 -13.710936
v 7.848576 11.925085 -13.710936
v 11.972422 7.895914 -13.610518
v 7.895913 11.972423 -13.610518
v 11.972422 7.895914 -13.710936
v 7.895913 11.972423 -13.710936
v -11.925084 7.848576 -13.610518
v -7.848577 11.925083 -13.610518
v -11.925084 7.848576 -13.710936
v -7.848577 11.925083 -13.710936
v -11.972423 7.895913 -13.610518
v -7.895913 11.972422 -13.610518
v -11.972423 7.895913 -13.710936
v -7.895913 11.972422 -13.710936
v 11.925084 7.848577 -22.869068
v 7.848576 11.925085 -22.869068
v 11.925084 7.848577 -22.969488
v 7.848576 11.925085 -22.969488
v 11.972422 7.895914 -22.869068
v 7.895913 11.972423 -22.869068
v 11.972422 7.895914 -22.969488
v 7.895913 11.972423 -22.969488
v -11.925084 7.848576 -22.869068
v -7.848577 11.925083 -22.869068
v -11.925084 7.848576 -22.969488
v -7.848577 11.925083 -22.969488
v -11.972423 7.895913 -22.869068
v -7.895913 11.972422 -22.869068
v -11.972423 7.895913 -22.969488
v -7.895913 11.972422 -22.969488
v 11.925084 7.848577 -32.127625
v 7.848576 11.925085 -32.127625
v 11.925084 7.848577 -32.228039
v 7.848576 11.925085 -32.228039
v 11.972422 7.895914 -32.127625
v 7.895913 11.972423 -32.127625
v 11.972422 7.895914 -32.228039
v 7.895913 11.972423 -32.228039
v -11.925084 7.848576 -32.127625
v -7.848577 11.925083 -32.127625
v -11.925084 7.848576 -32.228039
v -7.848577 11.925083 -32.228039
v -11.972423 7.895913 -32.127625
v -7.895913 11.972422 -32.127625
v -11.972423 7.895913 -32.228039
v -7.895913 11.972422 -32.228039
v 11.925084 7.848577 -41.386173
v 7.848576 11.925085 -41.386173
v 11.925084 7.848577 -41.486595
v 7.848576 11.925085 -41.486595
v 11.972422 7.895914 -41.386173
v 7.895913 11.972423 -41.386173
v 11.972422 7.895914 -41.486595
v 7.895913 11.972423 -41.486595
v -11.925084 7.848576 -41.386173
v -7.848577 11.925083 -41.386173
v -11.925084 7.848576 -41.486595
v -7.848577 11.925083 -41.486595
v -11.972423 7.895913 -41.386173
v -7.895913 11.972422 -41.386173
v -11.972423 7.895913 -41.486595
v -7.895913 11.972422 -41.486595
s off
f 2 3 1
f 4 7 3
f 8 5 7
f 6 1 5
f 11 10 9
f 15 12 11
f 13 16 15
f 9 14 13
f 18 19 17
f 20 23 19
f 24 21 23
f 22 17 21
f 27 26 25
f 31 28 27
f 29 32 31
f 25 30 29
f 34 35 33
f 36 39 35
f 40 37 39
f 38 33 37
f 43 42 41
f 47 44 43
f 45 48 47
f 41 46 45
f 50 51 49
f 52 55 51
f 56 53 55
f 54 49 53
f 59 58 57
f 63 60 59
f 61 64 63
f 57 62 61
f 2 4 3
f 4 8 7
f 8 6 5
f 6 2 1
f 11 12 10
f 15 16 12
f 13 14 16
f 9 10 14
f 18 20 19
f 20 24 23
f 24 22 21
f 22 18 17
f 27 28 26
f 31 32 28
f 29 30 32
f 25 26 30
f 34 36 35
f 36 40 39
f 40 38 37
f 38 34 33
f 43 44 42
f 47 48 44
f 45 46 48
f 41 42 46
f 50 52 51
f 52 56 55
f 56 54 53
f 54 50 49
f 59 60 58
f 63 64 60
f 61 62 64
f 57 58 62

48
src/components/beat-loader.js
View File

@@ -93,11 +93,19 @@ AFRAME.registerComponent('beat-loader', {
// Beats spawn ahead of the song and get to the user in sync with the music.
this.beatsTimeOffset = this.data.beatAnticipationTime * 1000;
this.beatsTime = 0;
this.beatData = beatData;
this.beatData._events.sort(lessThan);
this.beatData._obstacles.sort(lessThan);
this.beatData._notes.sort(lessThan);
this.bpm = this.beatData._beatsPerMinute;
// some events have negative time stamp to inicialize the stage
var events = this.beatData._events;
if (events.length && events[0]._time < 0) {
for (let i = 0; events[i]._time < 0; i++) {
this.generateEvent(events[i]);
}
}
console.log('Finished loading challenge data.');
},
@@ -109,6 +117,7 @@ AFRAME.registerComponent('beat-loader', {
var i;
var notes;
var obstacles;
var events;
var beatsTime = this.beatsTime;
var msPerBeat;
var noteTime;
@@ -123,6 +132,7 @@ AFRAME.registerComponent('beat-loader', {
notes = this.beatData._notes;
obstacles = this.beatData._obstacles;
events = this.beatData._events;
bpm = this.beatData._beatsPerMinute;
msPerBeat = 1000 * 60 / this.beatData._beatsPerMinute;
for (i = 0; i < notes.length; ++i) {
@@ -140,6 +150,14 @@ AFRAME.registerComponent('beat-loader', {
}
}
for (i=0; i < events.length; ++i) {
noteTime = events[i]._time * msPerBeat;
if (noteTime > beatsTime && noteTime <= beatsTime + delta) {
this.generateEvent(events[i]);
}
}
if (this.beatsTimeOffset !== undefined) {
if (this.beatsTimeOffset <= 0) {
this.el.sceneEl.emit('beatloaderpreloadfinish', null, false);
@@ -204,6 +222,34 @@ AFRAME.registerComponent('beat-loader', {
el.play();
},
generateEvent: function (event) {
console.log(event);
switch(event._type) {
case 0: // lasers color
case 1: // tunnel neon color
document.getElementById('tunnelNeon').setAttribute('colorPreset', event._value);
document.getElementById('tunnelNeon').emit('pulse');
break;
case 2: document.getElementById('leftStageLasers').setAttribute('colorPreset', event._value);
break;
case 3: document.getElementById('rightStageLasers').setAttribute('colorPreset', event._value);
break;
case 4:
document.getElementById('floor').emit('pulse');
document.getElementById('stageNeon').emit('pulse');
break;
case 8:
case 9: document.getElementById('twister').components.twister.pulse(event._value);
break;
case 12: document.getElementById('leftStageLasers').components['stage-lasers'].pulse(event._value);
console.log('left laser', event._value);
break;
case 13: document.getElementById('rightStageLasers').components['stage-lasers'].pulse(event._value);
console.log('right laser', event._value);
break;
}
},
requestBeat: function (type, color) {
var beatPoolName = 'pool__beat-' + type;
var pool;

33
src/components/stage-lasers.js Normal file
View File

@@ -0,0 +1,33 @@
AFRAME.registerComponent('stage-lasers', {
schema: {
enabled: {default: true}
},
init: function () {
this.speed = 0;
this.lasers = [
this.el.children[0].object3D,
this.el.children[1].object3D,
this.el.children[2].object3D
];
},
pulse: function (speed) {
this.speed = speed / 3;
},
tick: function (time, delta) {
if (this.speed === 0) { return; }
delta /= 1000;
if (!this.data.enabled) {
this.speed *= 0.96;
if (Math.abs(this.speed) < 0.01) {
this.speed = 0;
return;
}
}
this.lasers[0].rotation.z += this.speed * delta;
this.lasers[1].rotation.z -= this.speed * delta * 1.04;
this.lasers[2].rotation.z += this.speed * delta * 1.1;
}
})

8
src/components/twister.js
View File

@@ -12,12 +12,14 @@ AFRAME.registerComponent('twister', {
init: function () {
this.currentTwist = 0;
this.animate = false;
this.el.addEventListener('audioanalyserbeat', this.pulse.bind(this));
},
pulse: function () {
pulse: function (twist) {
if (!this.data.enabled) { return; }
this.el.setAttribute('twister', {twist: Math.random() * 0.5 - 0.25});
if (twist == 0) { twist = 0.1 + Math.random() * 0.25; }
else twist = Math.min(twist, 0.5);
twist *= Math.random() < 0.5 ? -1 : 1; // random direction
this.el.setAttribute('twister', {twist: twist});
},
update: function (oldData) {

3
src/index.html
View File

@@ -55,6 +55,9 @@
<a-asset-item id="logoSparks" src="assets/models/logosparks.json"></a-asset-item>
<a-asset-item id="mineObj" src="assets/models/mine.obj"></a-asset-item>
<a-asset-item id="sabercutParticles" src="assets/models/sabercut.json"></a-asset-item>
<a-asset-item id="stageNeonObj" src="assets/models/neons.obj"></a-asset-item>
<a-asset-item id="tunnelObj" src="assets/models/tunnel.obj"></a-asset-item>
<a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>
<audio id="hoverSound" src="assets/sounds/hover.ogg"></audio>

37
src/templates/stage.html
View File

@@ -11,7 +11,7 @@
id="audioAnalyser"
bind__audioanalyser="beatDetectionThrottle: menu.active && 5000 || 1000"
audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: true; enableLevels: false; enableWaveform: false; beatDetectionThrottle: 5000; unique: true"
proxy-event="event: audioanalyserbeat; to: #logolight, #floor, #twister"></a-entity>
proxy-event="event: audioanalyserbeat; to: #logolight"></a-entity>
<a-entity id="stage">
<a-entity id="backglow"
@@ -22,7 +22,7 @@
position="0 0 -50"
scale="20 20 20"></a-entity>
<a-entity id="twister" twister position="0 0 -60" rotation="90 0 0" bind__twister="enabled: !menu.active"></a-entity>
<a-entity id="twister" position="0 0 -60" rotation="90 0 0" bind__twister="enabled: !menu.active"></a-entity>
<a-entity
id="audioColumns"
@@ -42,24 +42,24 @@
<a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="-3.5 -10 -7"></a-entity>
</a-entity>
<a-mixin id="neon" geometry="skipCache: true" vertex-colors-buffer="baseColor: #9999ff" visible="false"></a-mixin>
<a-entity id="stageNeon" buffer-geometry-merger material="shader: flat; fog: false; vertexColors: vertex">
<a-entity mixin="neon" geometry="height: 0.05; depth: 50; width: 0.05" position="3.5 0.65 -32"></a-entity>
<a-entity mixin="neon" geometry="height: 0.05; depth: 50; width: 0.05" position="-3.5 0.65 -32"></a-entity>
<!-- Neons on sides. -->
<a-entity mixin="neon" geometry="height: 0.05; depth: 100; width: 0.05" position="4.5 0.65 -32"></a-entity>
<a-entity mixin="neon" geometry="height: 0.05; depth: 100; width: 0.05" position="-4.5 0.65 -32"></a-entity>
</a-entity>
<a-entity id="tunnel" obj-model="obj:#tunnelObj" material="shader: flat; flatShading: true; color: #010101"></a-entity>
<a-entity id="tunnelNeon" obj-model="obj:#tunnelNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>
<a-entity id="stageNeon" obj-model="obj:#stageNeonObj" material="shader: flat; fog: false; color: #9999ff" animation="property: components.material.material.color; type: color; from: #FFF to: #6666ff; dur: 200; easing: linear; startEvents: pulse"></a-entity>
<!-- Lasers left. -->
<a-entity class="stageLaser" mixin="stageLaser" position=" -6 2.3 -40"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="-10 0 -38"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="-14 -3 -36"></a-entity>
<a-entity bind__stage-lasers="enabled: !menu.active" id="leftStageLasers">
<a-entity class="stageLaser" mixin="stageLaser" position=" -6 2.3 -40"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="-10 0 -38"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="-14 -3 -36"></a-entity>
</a-entity>
<!-- Lasers right. -->
<a-entity class="stageLaser" mixin="stageLaser" position=" 6 4 -40"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>
<a-entity bind__stage-lasers="enabled: !menu.active" id="rightStageLasers">
<a-entity class="stageLaser" mixin="stageLaser" position=" 6 4 -40"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="10 2 -38"></a-entity>
<a-entity class="stageLaser" mixin="stageLaser" position="14 -1.5 -36"></a-entity>
</a-entity>
<a-mixin
id="smoke"
@@ -110,9 +110,8 @@
<a-entity
id="floor"
animation__beat="property: components.material.material.color; type: color; to: #FFF; dur: 250; easing: linear; startEvents: audioanalyserbeat"
animation="property: components.material.material.color; type: color; to: #BBB; dur: 250; easing: linear; startEvents: animationcomplete__beat"
animation="property: components.material.material.color; type: color; from: #FFF to: #888; dur: 200; easing: linear; startEvents: pulse"
geometry="primitive: plane; width: 3; height: 3"
material="color: #BBB; shader: flat; src: #floorImg"
material="color: #888; shader: flat; src: #floorImg"
rotation="-90 0 0"></a-entity>
</a-entity>