Skip to content

Commit c06f601

Browse files
PamavocPamavoc
committed
refacto theatre logic
2 parents 95611fd + 575540d commit c06f601

File tree

4 files changed

+124
-60
lines changed

4 files changed

+124
-60
lines changed

‎assets/states-animations/Micro-anim.theatre-project-state.json

+76-8
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,17 @@
77
"width": 100
88
},
99
"button p": {
10-
"X": -400
10+
"X": -400,
11+
"transforms": {
12+
"x": 52,
13+
"y": -2
14+
}
1115
}
1216
}
1317
},
1418
"sequence": {
1519
"subUnitsPerUnit": 30,
16-
"length": 2.56,
20+
"length": 2,
1721
"type": "PositionalSequence",
1822
"tracksByObject": {
1923
"start": {
@@ -51,7 +55,32 @@
5155
"534yqYhLqR": {
5256
"type": "BasicKeyframedTrack",
5357
"__debugName": "button p:[\"opacity\"]",
54-
"keyframes": []
58+
"keyframes": [
59+
{
60+
"id": "LeR6s_oW4c",
61+
"position": 1.2,
62+
"connectedRight": true,
63+
"handles": [
64+
0.5,
65+
1,
66+
0.5,
67+
0
68+
],
69+
"value": 1
70+
},
71+
{
72+
"id": "HpwvjfDjHp",
73+
"position": 1.7,
74+
"connectedRight": true,
75+
"handles": [
76+
0.5,
77+
1,
78+
0.5,
79+
0
80+
],
81+
"value": 0
82+
}
83+
]
5584
},
5685
"D_y4JzPeje": {
5786
"type": "BasicKeyframedTrack",
@@ -67,7 +96,7 @@
6796
0.5,
6897
0
6998
],
70-
"value": -59
99+
"value": -76
71100
},
72101
{
73102
"id": "EzcAd0auP8",
@@ -97,21 +126,58 @@
97126
0.5,
98127
0
99128
],
100-
"value": 19
129+
"value": 1
101130
}
102131
]
103132
},
104133
"sNpIrTL-6G": {
105134
"type": "BasicKeyframedTrack",
106135
"__debugName": "button p:[\"width\"]",
107136
"keyframes": []
137+
},
138+
"qB0Im2vS06": {
139+
"type": "BasicKeyframedTrack",
140+
"__debugName": "button p:[\"transform\",\"x\"]",
141+
"keyframes": []
142+
},
143+
"LX3PWrwlBy": {
144+
"type": "BasicKeyframedTrack",
145+
"__debugName": "button p:[\"transform\",\"y\"]",
146+
"keyframes": [
147+
{
148+
"id": "cTIUq6XPbf",
149+
"position": 1.2,
150+
"connectedRight": true,
151+
"handles": [
152+
0.5,
153+
1,
154+
0.55,
155+
0.085
156+
],
157+
"value": 0
158+
},
159+
{
160+
"id": "VAMxPRoGWf",
161+
"position": 1.7,
162+
"connectedRight": true,
163+
"handles": [
164+
0.68,
165+
0.53,
166+
0.5,
167+
0
168+
],
169+
"value": -20
170+
}
171+
]
108172
}
109173
},
110174
"trackIdByPropPath": {
111175
"[\"opacity\"]": "534yqYhLqR",
112176
"[\"y\"]": "D_y4JzPeje",
113177
"[\"x\"]": "P_D3bCt33o",
114-
"[\"width\"]": "sNpIrTL-6G"
178+
"[\"width\"]": "sNpIrTL-6G",
179+
"[\"transform\",\"x\"]": "qB0Im2vS06",
180+
"[\"transform\",\"y\"]": "LX3PWrwlBy"
115181
}
116182
},
117183
"border-bottom": {
@@ -149,7 +215,7 @@
149215
},
150216
{
151217
"id": "QsPDbhj60j",
152-
"position": 1.2,
218+
"position": 0.767,
153219
"connectedRight": true,
154220
"handles": [
155221
0.5,
@@ -204,7 +270,7 @@
204270
},
205271
{
206272
"id": "nPv-v-fS6j",
207-
"position": 2.4,
273+
"position": 1.367,
208274
"connectedRight": true,
209275
"handles": [
210276
0.5,
@@ -230,6 +296,8 @@
230296
},
231297
"definitionVersion": "0.4.0",
232298
"revisionHistory": [
299+
"BgfyjdFlCLTInP5l",
300+
"Xlscy6aMkb86m6hZ",
233301
"sTDvJIbJYbtnzNjB"
234302
]
235303
}

‎classes/Animations.ts

+2-8
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,6 @@ export default class Animations {
6060

6161

6262

63-
// gsap shit
64-
createTimeline() {
65-
//const tl = gsap.timeline({ onUpdate: this.onUpdate })
66-
//return tl;
67-
}
68-
69-
7063
createProject(project_name, project_state?: ObjectType) {
7164
// Create a project for the animation
7265
let project;
@@ -148,8 +141,9 @@ export default class Animations {
148141
real: this.ui.querySelector('.border-top'),
149142
},
150143
],
151-
})
144+
})
152145

146+
// this.playAnimations(project, sheet, 1)
153147
}
154148

155149
createIntroduction(camera) {

‎classes/WebGL.ts

+40-42
Original file line numberDiff line numberDiff line change
@@ -74,47 +74,6 @@ export default class WebGL {
7474
this.loadMap('trinity-2.glb')
7575

7676

77-
this.emitter.on('studio', () => {
78-
this.animations.studio.ui.restore()
79-
})
80-
81-
this.emitter.on('home', ()=> {
82-
this.animations.studio.ui.hide()
83-
})
84-
85-
// this.animations.createMicroInteraction()
86-
87-
88-
this.emitter.on('audio_started', () => {
89-
90-
// trigger anim webgl
91-
// const target = new THREE.Vector3(0, 1, 0)
92-
// const cube = this.scene.instance.getObjectByProperty('name', 'cube-base');
93-
// console.log(cube)
94-
95-
this.animations.createIntroduction(this.camera)
96-
this.materials.playVideos()
97-
98-
99-
this.audio_manager = useAudio(this.emitter)
100-
101-
this.audio_manager.start( {
102-
onBeat: ()=> {
103-
104-
const average = this.audio_manager.values.reduce((a, b) => a + b, 0) / this.audio_manager.values.length;
105-
this.emitter.emit('beat_sent', average)
106-
},
107-
live: false,
108-
playlist: ['/sounds/initialisation.mp3', '/sounds/megatron-ss.mp3', '/sounds/burningman-s.mp3']
109-
})
110-
111-
112-
this.audio_started = true
113-
// window.audio = this.audio_manager
114-
115-
})
116-
117-
11877
if (/debug/.test(window.location.href)) {
11978
this.debug = true
12079
this.camera.tweak()
@@ -128,7 +87,6 @@ export default class WebGL {
12887
}
12988

13089

131-
13290
switchMap = (map) => {
13391
this.removeOldMap().then(()=> this.loadMap(map))
13492
}
@@ -152,9 +110,49 @@ export default class WebGL {
152110

153111
}
154112

113+
experienceEvents = () => {
114+
this.emitter.on('studio', () => {
115+
this.animations.studio.ui.restore()
116+
})
117+
118+
this.emitter.on('home', ()=> {
119+
this.animations.studio.ui.hide()
120+
})
121+
122+
123+
this.emitter.on('audio_started', () => {
124+
125+
// trigger anim webgl
126+
// const target = new THREE.Vector3(0, 1, 0)
127+
// const cube = this.scene.instance.getObjectByProperty('name', 'cube-base');
128+
// console.log(cube)
129+
130+
this.animations.createMicroInteraction()
131+
this.animations.createIntroduction(this.camera)
132+
this.materials.playVideos()
133+
this.audio_manager = useAudio(this.emitter)
134+
135+
this.audio_manager.start( {
136+
onBeat: ()=> {
137+
138+
const average = this.audio_manager.values.reduce((a, b) => a + b, 0) / this.audio_manager.values.length;
139+
this.emitter.emit('beat_sent', average)
140+
},
141+
live: false,
142+
playlist: ['/sounds/initialisation.mp3', '/sounds/megatron-ss.mp3', '/sounds/burningman-s.mp3']
143+
})
144+
145+
146+
this.audio_started = true
147+
// window.audio = this.audio_manager
148+
149+
})
150+
}
151+
155152

156153
setEvents = () => {
157154
this.addEvents();
155+
this.experienceEvents();
158156
this.onResize();
159157
};
160158

‎components/UI.vue

+6-2
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const startAudio = () => {
125125
background: none;
126126
width: 200px;
127127
border:none;
128-
128+
// padding: 6px 22px 12px 22px;
129129
color: #1ECA9A;
130130
transition: all 0.35s ease-in-out;
131131
border-radius: 5.38462px;
@@ -137,8 +137,12 @@ const startAudio = () => {
137137
}
138138
139139
p {
140+
margin-block-end: 0;
141+
margin-block-start: 0;
140142
margin:0;
141-
padding: 6px 22px 12px 22px;
143+
padding-top: 8px;
144+
padding-bottom: 14px;
145+
//padding: 6px 22px 12px 22px;
142146
}
143147
144148
&:hover {

0 commit comments

Comments
 (0)