├── .gitignore
├── LICENSE
├── README.md
├── Social.webp
├── assets
├── BoinkTheatreState.json
├── TheatreTutorial_1.theatre-project-state.json
├── fonts
│ ├── Sassy_Frass.zip
│ └── Sassy_Frass
│ │ ├── OFL.txt
│ │ └── SassyFrass-Regular.ttf
├── images
│ └── swoosh.png
└── sounds
│ ├── boing-2-44164.mp3
│ ├── boing-6222.mp3
│ ├── boink.mp3
│ ├── jews_harp_boing-7111.mp3
│ ├── little-whoosh-2-6301.mp3
│ ├── loud-thud-45719.mp3
│ └── whoosh.mp3
├── favicon.ico
├── favicon.png
├── index.html
├── package.json
├── src
├── main.ts
├── style.css
└── vite-env.d.ts
├── thebenezerHex.ico
├── tsconfig.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dev
3 | build
4 | /package-lock.json
5 | .vscode
6 | .DS_Store
7 | src/.DS_Store
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Ebenezer
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Theatre.js Beginner Tutorial
2 |
3 | In this tutorial we will learn how to animate a bouncy cube using theatre.js and three.js
4 |
5 |
6 |
7 | [Live Demo](https://bouncy.vercel.app/)
8 |
9 | [Article on Codrops](https://tympanus.net/codrops/2023/03/30/mastering-theatre-js-animations-learn-to-create-dynamic-visuals/)
10 |
11 | [Youtube Video](https://youtu.be/wT7P6qjAg30)
12 |
13 | ## Setup
14 | Download [Node.js](https://nodejs.org/en/download/).
15 | Run this followed commands:
16 |
17 | ## Scripts
18 | - Install dependencies (only the first time)
19 | ``` bash
20 | yarn install
21 | ```
22 |
23 | - Start the dev server:
24 |
25 | ``` bash
26 | yarn run dev
27 | ```
28 |
29 | - Build for production:
30 |
31 | ``` bash
32 | yarn run build
33 | ```
34 |
35 | ## Misc
36 |
37 | Follow Me: [Twitter](https://twitter.com/th_ebenezer), [Youtube](https://www.youtube.com/@thebenezer), [GitHub](https://github.com/thebenezer)
38 |
39 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
40 |
41 | ## License
42 | [MIT](LICENSE)
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/Social.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/Social.webp
--------------------------------------------------------------------------------
/assets/BoinkTheatreState.json:
--------------------------------------------------------------------------------
1 | {
2 | "sheetsById": {
3 | "AnimationScene": {
4 | "staticOverrides": {
5 | "byObject": {
6 | "Box": {
7 | "rotation": {
8 | "x": 0.30381249072837857,
9 | "y": 0.15190624536418929,
10 | "z": -0.45571873609256786,
11 | "xR": 0,
12 | "yR": 0,
13 | "zR": 0
14 | },
15 | "position": {
16 | "y": 5,
17 | "x": 0
18 | }
19 | },
20 | "Scene": {
21 | "back": {
22 | "r": 0.2901960784313726,
23 | "g": 0.6705882352941176,
24 | "b": 0.6705882352941176,
25 | "a": 1
26 | },
27 | "backgroundColor": {
28 | "r": 0.4627450980392157,
29 | "g": 0.8666666666666667,
30 | "b": 0.8666666666666667,
31 | "a": 1
32 | },
33 | "autoRotate": false
34 | },
35 | "Colors": {
36 | "backgroundColor": {
37 | "r": 0.5803921568627451,
38 | "g": 0.6745098039215687,
39 | "b": 0.6901960784313725,
40 | "a": 1
41 | },
42 | "floorColor": {
43 | "r": 0.7176470588235294,
44 | "g": 0.8156862745098039,
45 | "b": 0.7058823529411765,
46 | "a": 1
47 | },
48 | "boxColor": {
49 | "r": 0.5058823529411764,
50 | "g": 0.8980392156862745,
51 | "b": 0.8862745098039215,
52 | "a": 1
53 | }
54 | },
55 | "Effects": {
56 | "boxGlow": {
57 | "r": 0,
58 | "g": 0.1450980392156863,
59 | "b": 0.20784313725490197,
60 | "a": 1
61 | },
62 | "swooshScale": 1
63 | },
64 | "text": {
65 | "scale": 35,
66 | "opacity": 1
67 | }
68 | }
69 | },
70 | "sequence": {
71 | "subUnitsPerUnit": 30,
72 | "length": 2.03,
73 | "type": "PositionalSequence",
74 | "tracksByObject": {
75 | "Box": {
76 | "trackData": {
77 | "c7JZ_4VDOd": {
78 | "type": "BasicKeyframedTrack",
79 | "__debugName": "Box:[\"position\",\"y\"]",
80 | "keyframes": [
81 | {
82 | "id": "AG4KVSKLwq",
83 | "position": 0,
84 | "connectedRight": true,
85 | "handles": [
86 | 0.5,
87 | 1,
88 | 0.5,
89 | 0
90 | ],
91 | "type": "bezier",
92 | "value": 40
93 | },
94 | {
95 | "id": "eZORIMKoq7",
96 | "position": 0.8,
97 | "connectedRight": true,
98 | "handles": [
99 | 0.9250359712230216,
100 | 0.5472972972972974,
101 | 0.04460431654676264,
102 | 0.4729729729729729
103 | ],
104 | "type": "bezier",
105 | "value": 5
106 | },
107 | {
108 | "id": "pLSeAFshKX",
109 | "position": 1,
110 | "connectedRight": true,
111 | "handles": [
112 | 0.5,
113 | 1,
114 | 0.5,
115 | 0
116 | ],
117 | "type": "bezier",
118 | "value": 0.7
119 | },
120 | {
121 | "id": "D1riNX5Q-i",
122 | "position": 1.2,
123 | "connectedRight": true,
124 | "handles": [
125 | 0.9250359712230216,
126 | 0.5472972972972974,
127 | 0.04460431654676264,
128 | 0.4729729729729729
129 | ],
130 | "type": "bezier",
131 | "value": 9.362374254053337
132 | },
133 | {
134 | "id": "CBbjcndi9X",
135 | "position": 2,
136 | "connectedRight": true,
137 | "handles": [
138 | 0.5,
139 | 1,
140 | 0.5,
141 | 0
142 | ],
143 | "type": "bezier",
144 | "value": 40
145 | }
146 | ]
147 | },
148 | "NnzZqnI-eW": {
149 | "type": "BasicKeyframedTrack",
150 | "__debugName": "Box:[\"scale\",\"xS\"]",
151 | "keyframes": [
152 | {
153 | "id": "zymIAEgZV6",
154 | "position": 0.8,
155 | "connectedRight": true,
156 | "handles": [
157 | 0.5,
158 | 1,
159 | 0.5,
160 | 0
161 | ],
162 | "type": "bezier",
163 | "value": 1
164 | },
165 | {
166 | "id": "go4FxwmVaI",
167 | "position": 1,
168 | "connectedRight": true,
169 | "handles": [
170 | 0.5,
171 | 1,
172 | 0.5,
173 | 0
174 | ],
175 | "type": "bezier",
176 | "value": 2
177 | },
178 | {
179 | "id": "QzCfUrDjvP",
180 | "position": 1.2,
181 | "connectedRight": true,
182 | "handles": [
183 | 0.5,
184 | 1,
185 | 0.5,
186 | 0
187 | ],
188 | "type": "bezier",
189 | "value": 0.8
190 | },
191 | {
192 | "id": "suBpdPWLoZ",
193 | "position": 2,
194 | "connectedRight": true,
195 | "handles": [
196 | 0.5,
197 | 1,
198 | 0.5,
199 | 0
200 | ],
201 | "type": "bezier",
202 | "value": 1
203 | }
204 | ]
205 | },
206 | "SXB6XGM_yr": {
207 | "type": "BasicKeyframedTrack",
208 | "__debugName": "Box:[\"scale\",\"yS\"]",
209 | "keyframes": [
210 | {
211 | "id": "nzwqDqv_Aa",
212 | "position": 0,
213 | "connectedRight": true,
214 | "handles": [
215 | 0.5,
216 | 1,
217 | 0.5,
218 | 0
219 | ],
220 | "type": "bezier",
221 | "value": 1
222 | },
223 | {
224 | "id": "9y2DeHePdj",
225 | "position": 0.8,
226 | "connectedRight": true,
227 | "handles": [
228 | 0.5,
229 | 1,
230 | 0.5,
231 | 0
232 | ],
233 | "type": "bezier",
234 | "value": 1
235 | },
236 | {
237 | "id": "d8A3hwfF9p",
238 | "position": 1,
239 | "connectedRight": true,
240 | "handles": [
241 | 0.5,
242 | 1,
243 | 0.03223954476234216,
244 | 0.6026170798898073
245 | ],
246 | "type": "bezier",
247 | "value": 0.20000000000000004
248 | },
249 | {
250 | "id": "KTwr_8t_iC",
251 | "position": 1.2,
252 | "connectedRight": true,
253 | "handles": [
254 | 0.5,
255 | 1,
256 | 1,
257 | 2.353394007695285
258 | ],
259 | "type": "bezier",
260 | "value": 2
261 | },
262 | {
263 | "id": "uCcW8UtXvP",
264 | "position": 2,
265 | "connectedRight": true,
266 | "handles": [
267 | 0.40268648676022895,
268 | 1.2039158015162899,
269 | 0.5,
270 | 0
271 | ],
272 | "type": "bezier",
273 | "value": 1
274 | }
275 | ]
276 | },
277 | "0HOOcDqBBs": {
278 | "type": "BasicKeyframedTrack",
279 | "__debugName": "Box:[\"scale\",\"zS\"]",
280 | "keyframes": [
281 | {
282 | "id": "LQpJP3ghTL",
283 | "position": 0.8,
284 | "connectedRight": true,
285 | "handles": [
286 | 0.5,
287 | 1,
288 | 0.5,
289 | 0
290 | ],
291 | "type": "bezier",
292 | "value": 1
293 | },
294 | {
295 | "id": "z43Q1sQ3Ty",
296 | "position": 1,
297 | "connectedRight": true,
298 | "handles": [
299 | 0.5,
300 | 1,
301 | 0.5,
302 | 0
303 | ],
304 | "type": "bezier",
305 | "value": 2
306 | },
307 | {
308 | "id": "mojrmmU4o5",
309 | "position": 1.2,
310 | "connectedRight": true,
311 | "handles": [
312 | 0.5,
313 | 1,
314 | 0.5,
315 | 0
316 | ],
317 | "type": "bezier",
318 | "value": 0.8
319 | },
320 | {
321 | "id": "YEhB9DnVtY",
322 | "position": 2,
323 | "connectedRight": true,
324 | "handles": [
325 | 0.5,
326 | 1,
327 | 0.5,
328 | 0
329 | ],
330 | "type": "bezier",
331 | "value": 1
332 | }
333 | ]
334 | }
335 | },
336 | "trackIdByPropPath": {
337 | "[\"position\",\"y\"]": "c7JZ_4VDOd",
338 | "[\"scale\",\"xS\"]": "NnzZqnI-eW",
339 | "[\"scale\",\"yS\"]": "SXB6XGM_yr",
340 | "[\"scale\",\"zS\"]": "0HOOcDqBBs"
341 | }
342 | },
343 | "Effects": {
344 | "trackData": {
345 | "2FqY-lHqYf": {
346 | "type": "BasicKeyframedTrack",
347 | "__debugName": "Effects:[\"boxGlow\"]",
348 | "keyframes": [
349 | {
350 | "id": "GXenBOMZPL",
351 | "position": 0,
352 | "connectedRight": true,
353 | "handles": [
354 | 0.5,
355 | 1,
356 | 0.5,
357 | 0
358 | ],
359 | "type": "bezier",
360 | "value": {
361 | "r": 0,
362 | "g": 0,
363 | "b": 0,
364 | "a": 1
365 | }
366 | },
367 | {
368 | "id": "G0mlhvwzDs",
369 | "position": 0.8,
370 | "connectedRight": true,
371 | "handles": [
372 | 0.5,
373 | 1,
374 | 0.5,
375 | 0
376 | ],
377 | "type": "bezier",
378 | "value": {
379 | "r": 0,
380 | "g": 0,
381 | "b": 0,
382 | "a": 1
383 | }
384 | },
385 | {
386 | "id": "xK4e_Lb6lv",
387 | "position": 1,
388 | "connectedRight": true,
389 | "handles": [
390 | 0.5,
391 | 1,
392 | 0.5,
393 | 0
394 | ],
395 | "type": "bezier",
396 | "value": {
397 | "r": 0.4392156862745098,
398 | "g": 0,
399 | "b": 0,
400 | "a": 1
401 | }
402 | },
403 | {
404 | "id": "JPBL-iRRLA",
405 | "position": 2,
406 | "connectedRight": true,
407 | "handles": [
408 | 0.5,
409 | 1,
410 | 0.5,
411 | 0
412 | ],
413 | "type": "bezier",
414 | "value": {
415 | "r": 0,
416 | "g": 0,
417 | "b": 0,
418 | "a": 1
419 | }
420 | }
421 | ]
422 | },
423 | "WAOgL5dRuk": {
424 | "type": "BasicKeyframedTrack",
425 | "__debugName": "Effects:[\"swooshPosition\"]",
426 | "keyframes": [
427 | {
428 | "id": "PypdIR5nZn",
429 | "position": 0,
430 | "connectedRight": true,
431 | "handles": [
432 | 0.5,
433 | 1,
434 | 0.5,
435 | 0
436 | ],
437 | "type": "bezier",
438 | "value": 49
439 | },
440 | {
441 | "id": "LSAxxmbnUw",
442 | "position": 0.5,
443 | "connectedRight": true,
444 | "handles": [
445 | 0.5,
446 | 1,
447 | 0.5,
448 | 0
449 | ],
450 | "type": "bezier",
451 | "value": 43.07000000000009
452 | },
453 | {
454 | "id": "HppHANEHt1",
455 | "position": 0.8,
456 | "connectedRight": true,
457 | "handles": [
458 | 0.5,
459 | 1,
460 | 0.5,
461 | 0
462 | ],
463 | "type": "bezier",
464 | "value": 23.450000000000152
465 | },
466 | {
467 | "id": "DZu_3Y-kGQ",
468 | "position": 1,
469 | "connectedRight": true,
470 | "handles": [
471 | 0.5,
472 | 1,
473 | 0.5,
474 | 0
475 | ],
476 | "type": "bezier",
477 | "value": 13.570000000000157
478 | }
479 | ]
480 | },
481 | "VVMsoSNJvL": {
482 | "type": "BasicKeyframedTrack",
483 | "__debugName": "Effects:[\"swooshScale\"]",
484 | "keyframes": [
485 | {
486 | "id": "Yg1-0OfYc5",
487 | "position": 0,
488 | "connectedRight": true,
489 | "handles": [
490 | 0.5,
491 | 1,
492 | 0.5,
493 | 0
494 | ],
495 | "type": "bezier",
496 | "value": 0
497 | },
498 | {
499 | "id": "Cv8FVI8QWa",
500 | "position": 0.5,
501 | "connectedRight": true,
502 | "handles": [
503 | 0.5,
504 | 1,
505 | 0.5,
506 | 0
507 | ],
508 | "type": "bezier",
509 | "value": 1
510 | },
511 | {
512 | "id": "hQnSUxBihu",
513 | "position": 1,
514 | "connectedRight": true,
515 | "handles": [
516 | 0.5,
517 | 1,
518 | 0.5,
519 | 0
520 | ],
521 | "type": "bezier",
522 | "value": 0
523 | }
524 | ]
525 | }
526 | },
527 | "trackIdByPropPath": {
528 | "[\"boxGlow\"]": "2FqY-lHqYf",
529 | "[\"swooshPosition\"]": "WAOgL5dRuk",
530 | "[\"swooshScale\"]": "VVMsoSNJvL"
531 | }
532 | },
533 | "text": {
534 | "trackData": {
535 | "1VvziKw59T": {
536 | "type": "BasicKeyframedTrack",
537 | "__debugName": "text:[\"opacity\"]",
538 | "keyframes": [
539 | {
540 | "id": "DmVMwhyJZc",
541 | "position": 0,
542 | "connectedRight": true,
543 | "handles": [
544 | 0.5,
545 | 1,
546 | 0.5,
547 | 0
548 | ],
549 | "type": "bezier",
550 | "value": 0
551 | },
552 | {
553 | "id": "47oQfGJfpJ",
554 | "position": 1.2,
555 | "connectedRight": true,
556 | "handles": [
557 | 0.5,
558 | 1,
559 | 0.5,
560 | 0
561 | ],
562 | "type": "bezier",
563 | "value": 0
564 | },
565 | {
566 | "id": "u8XjDpNOlC",
567 | "position": 1.267,
568 | "connectedRight": true,
569 | "handles": [
570 | 0.5,
571 | 1,
572 | 0.5,
573 | 0
574 | ],
575 | "type": "bezier",
576 | "value": 1
577 | },
578 | {
579 | "id": "ZrTvA4e56L",
580 | "position": 1.9,
581 | "connectedRight": true,
582 | "handles": [
583 | 0.5,
584 | 1,
585 | 0.5,
586 | 0
587 | ],
588 | "type": "bezier",
589 | "value": 1
590 | },
591 | {
592 | "id": "Fo5xAFF8Lf",
593 | "position": 2,
594 | "connectedRight": true,
595 | "handles": [
596 | 0.5,
597 | 1,
598 | 0.5,
599 | 0
600 | ],
601 | "type": "bezier",
602 | "value": 0
603 | }
604 | ]
605 | },
606 | "DuLRwtAaTk": {
607 | "type": "BasicKeyframedTrack",
608 | "__debugName": "text:[\"text\"]",
609 | "keyframes": [
610 | {
611 | "id": "1YV7xwkGfL",
612 | "position": 1.4,
613 | "connectedRight": true,
614 | "handles": [
615 | 0.5,
616 | 1,
617 | 0.5,
618 | 0
619 | ],
620 | "type": "bezier",
621 | "value": "Boink!!"
622 | }
623 | ]
624 | },
625 | "nserN3nLJW": {
626 | "type": "BasicKeyframedTrack",
627 | "__debugName": "text:[\"scale\"]",
628 | "keyframes": [
629 | {
630 | "id": "eE0RDDIc2_",
631 | "position": 1.267,
632 | "connectedRight": true,
633 | "handles": [
634 | 0.5,
635 | 1,
636 | 0,
637 | 0.7155963302752294
638 | ],
639 | "type": "bezier",
640 | "value": 0
641 | },
642 | {
643 | "id": "41m6ckT5SU",
644 | "position": 1.9,
645 | "connectedRight": true,
646 | "handles": [
647 | 0.5,
648 | 1,
649 | 0.5,
650 | 0
651 | ],
652 | "type": "bezier",
653 | "value": 50
654 | }
655 | ]
656 | }
657 | },
658 | "trackIdByPropPath": {
659 | "[\"opacity\"]": "1VvziKw59T",
660 | "[\"text\"]": "DuLRwtAaTk",
661 | "[\"scale\"]": "nserN3nLJW"
662 | }
663 | }
664 | }
665 | }
666 | }
667 | },
668 | "definitionVersion": "0.4.0",
669 | "revisionHistory": [
670 | "foEdTV0khAYeKGcp"
671 | ]
672 | }
--------------------------------------------------------------------------------
/assets/TheatreTutorial_1.theatre-project-state.json:
--------------------------------------------------------------------------------
1 | {
2 | "sheetsById": {
3 | "AnimationScene": {
4 | "staticOverrides": {
5 | "byObject": {
6 | "Box": {
7 | "rotation": {
8 | "x": 0.30381249072837857,
9 | "y": 0.15190624536418929,
10 | "z": -0.45571873609256786,
11 | "xR": 0,
12 | "yR": 0,
13 | "zR": 0
14 | },
15 | "position": {
16 | "y": 5,
17 | "x": 0
18 | }
19 | },
20 | "Scene": {
21 | "back": {
22 | "r": 0.2901960784313726,
23 | "g": 0.6705882352941176,
24 | "b": 0.6705882352941176,
25 | "a": 1
26 | },
27 | "backgroundColor": {
28 | "r": 0.1411764705882353,
29 | "g": 0.1607843137254902,
30 | "b": 0.1607843137254902,
31 | "a": 1
32 | },
33 | "autoRotate": false
34 | }
35 | }
36 | },
37 | "sequence": {
38 | "subUnitsPerUnit": 30,
39 | "length": 2.03,
40 | "type": "PositionalSequence",
41 | "tracksByObject": {
42 | "Box": {
43 | "trackData": {
44 | "c7JZ_4VDOd": {
45 | "type": "BasicKeyframedTrack",
46 | "__debugName": "Box:[\"position\",\"y\"]",
47 | "keyframes": [
48 | {
49 | "id": "AG4KVSKLwq",
50 | "position": 0,
51 | "connectedRight": true,
52 | "handles": [
53 | 0.5,
54 | 1,
55 | 0.5,
56 | 0
57 | ],
58 | "type": "bezier",
59 | "value": 40
60 | },
61 | {
62 | "id": "eZORIMKoq7",
63 | "position": 0.8,
64 | "connectedRight": true,
65 | "handles": [
66 | 0.9250359712230216,
67 | 0.5472972972972974,
68 | 0.04460431654676264,
69 | 0.4729729729729729
70 | ],
71 | "type": "bezier",
72 | "value": 5
73 | },
74 | {
75 | "id": "pLSeAFshKX",
76 | "position": 1,
77 | "connectedRight": true,
78 | "handles": [
79 | 0.5,
80 | 1,
81 | 0.5,
82 | 0
83 | ],
84 | "type": "bezier",
85 | "value": 0.7
86 | },
87 | {
88 | "id": "D1riNX5Q-i",
89 | "position": 1.2,
90 | "connectedRight": true,
91 | "handles": [
92 | 0.9250359712230216,
93 | 0.5472972972972974,
94 | 0.04460431654676264,
95 | 0.4729729729729729
96 | ],
97 | "type": "bezier",
98 | "value": 9.362374254053337
99 | },
100 | {
101 | "id": "CBbjcndi9X",
102 | "position": 2,
103 | "connectedRight": true,
104 | "handles": [
105 | 0.5,
106 | 1,
107 | 0.5,
108 | 0
109 | ],
110 | "type": "bezier",
111 | "value": 40
112 | }
113 | ]
114 | },
115 | "NnzZqnI-eW": {
116 | "type": "BasicKeyframedTrack",
117 | "__debugName": "Box:[\"scale\",\"xS\"]",
118 | "keyframes": [
119 | {
120 | "id": "zymIAEgZV6",
121 | "position": 0.8,
122 | "connectedRight": true,
123 | "handles": [
124 | 0.5,
125 | 1,
126 | 0.5,
127 | 0
128 | ],
129 | "type": "bezier",
130 | "value": 1
131 | },
132 | {
133 | "id": "go4FxwmVaI",
134 | "position": 1,
135 | "connectedRight": true,
136 | "handles": [
137 | 0.5,
138 | 1,
139 | 0.5,
140 | 0
141 | ],
142 | "type": "bezier",
143 | "value": 2
144 | },
145 | {
146 | "id": "QzCfUrDjvP",
147 | "position": 1.2,
148 | "connectedRight": true,
149 | "handles": [
150 | 0.5,
151 | 1,
152 | 0.5,
153 | 0
154 | ],
155 | "type": "bezier",
156 | "value": 0.8
157 | },
158 | {
159 | "id": "suBpdPWLoZ",
160 | "position": 2,
161 | "connectedRight": true,
162 | "handles": [
163 | 0.5,
164 | 1,
165 | 0.5,
166 | 0
167 | ],
168 | "type": "bezier",
169 | "value": 1
170 | }
171 | ]
172 | },
173 | "SXB6XGM_yr": {
174 | "type": "BasicKeyframedTrack",
175 | "__debugName": "Box:[\"scale\",\"yS\"]",
176 | "keyframes": [
177 | {
178 | "id": "nzwqDqv_Aa",
179 | "position": 0,
180 | "connectedRight": true,
181 | "handles": [
182 | 0.5,
183 | 1,
184 | 0.5,
185 | 0
186 | ],
187 | "type": "bezier",
188 | "value": 1
189 | },
190 | {
191 | "id": "9y2DeHePdj",
192 | "position": 0.8,
193 | "connectedRight": true,
194 | "handles": [
195 | 0.5,
196 | 1,
197 | 0.5,
198 | 0
199 | ],
200 | "type": "bezier",
201 | "value": 1
202 | },
203 | {
204 | "id": "d8A3hwfF9p",
205 | "position": 1,
206 | "connectedRight": true,
207 | "handles": [
208 | 0.5,
209 | 1,
210 | 0.03223954476234216,
211 | 0.6026170798898073
212 | ],
213 | "type": "bezier",
214 | "value": 0.20000000000000004
215 | },
216 | {
217 | "id": "KTwr_8t_iC",
218 | "position": 1.2,
219 | "connectedRight": true,
220 | "handles": [
221 | 0.5,
222 | 1,
223 | 1,
224 | 2.353394007695285
225 | ],
226 | "type": "bezier",
227 | "value": 2
228 | },
229 | {
230 | "id": "uCcW8UtXvP",
231 | "position": 2,
232 | "connectedRight": true,
233 | "handles": [
234 | 0.40268648676022895,
235 | 1.2039158015162899,
236 | 0.5,
237 | 0
238 | ],
239 | "type": "bezier",
240 | "value": 1
241 | }
242 | ]
243 | },
244 | "0HOOcDqBBs": {
245 | "type": "BasicKeyframedTrack",
246 | "__debugName": "Box:[\"scale\",\"zS\"]",
247 | "keyframes": [
248 | {
249 | "id": "LQpJP3ghTL",
250 | "position": 0.8,
251 | "connectedRight": true,
252 | "handles": [
253 | 0.5,
254 | 1,
255 | 0.5,
256 | 0
257 | ],
258 | "type": "bezier",
259 | "value": 1
260 | },
261 | {
262 | "id": "z43Q1sQ3Ty",
263 | "position": 1,
264 | "connectedRight": true,
265 | "handles": [
266 | 0.5,
267 | 1,
268 | 0.5,
269 | 0
270 | ],
271 | "type": "bezier",
272 | "value": 2
273 | },
274 | {
275 | "id": "mojrmmU4o5",
276 | "position": 1.2,
277 | "connectedRight": true,
278 | "handles": [
279 | 0.5,
280 | 1,
281 | 0.5,
282 | 0
283 | ],
284 | "type": "bezier",
285 | "value": 0.8
286 | },
287 | {
288 | "id": "YEhB9DnVtY",
289 | "position": 2,
290 | "connectedRight": true,
291 | "handles": [
292 | 0.5,
293 | 1,
294 | 0.5,
295 | 0
296 | ],
297 | "type": "bezier",
298 | "value": 1
299 | }
300 | ]
301 | }
302 | },
303 | "trackIdByPropPath": {
304 | "[\"position\",\"y\"]": "c7JZ_4VDOd",
305 | "[\"scale\",\"xS\"]": "NnzZqnI-eW",
306 | "[\"scale\",\"yS\"]": "SXB6XGM_yr",
307 | "[\"scale\",\"zS\"]": "0HOOcDqBBs"
308 | }
309 | }
310 | }
311 | }
312 | }
313 | },
314 | "definitionVersion": "0.4.0",
315 | "revisionHistory": [
316 | "kp8TgVzHvT-seqkV"
317 | ]
318 | }
--------------------------------------------------------------------------------
/assets/fonts/Sassy_Frass.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/fonts/Sassy_Frass.zip
--------------------------------------------------------------------------------
/assets/fonts/Sassy_Frass/OFL.txt:
--------------------------------------------------------------------------------
1 | Copyright 2008 The Sassy Frass Project Authors (https://github.com/googlefonts/sassy-frass)
2 |
3 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
4 | This license is copied below, and is also available with a FAQ at:
5 | http://scripts.sil.org/OFL
6 |
7 |
8 | -----------------------------------------------------------
9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
10 | -----------------------------------------------------------
11 |
12 | PREAMBLE
13 | The goals of the Open Font License (OFL) are to stimulate worldwide
14 | development of collaborative font projects, to support the font creation
15 | efforts of academic and linguistic communities, and to provide a free and
16 | open framework in which fonts may be shared and improved in partnership
17 | with others.
18 |
19 | The OFL allows the licensed fonts to be used, studied, modified and
20 | redistributed freely as long as they are not sold by themselves. The
21 | fonts, including any derivative works, can be bundled, embedded,
22 | redistributed and/or sold with any software provided that any reserved
23 | names are not used by derivative works. The fonts and derivatives,
24 | however, cannot be released under any other type of license. The
25 | requirement for fonts to remain under this license does not apply
26 | to any document created using the fonts or their derivatives.
27 |
28 | DEFINITIONS
29 | "Font Software" refers to the set of files released by the Copyright
30 | Holder(s) under this license and clearly marked as such. This may
31 | include source files, build scripts and documentation.
32 |
33 | "Reserved Font Name" refers to any names specified as such after the
34 | copyright statement(s).
35 |
36 | "Original Version" refers to the collection of Font Software components as
37 | distributed by the Copyright Holder(s).
38 |
39 | "Modified Version" refers to any derivative made by adding to, deleting,
40 | or substituting -- in part or in whole -- any of the components of the
41 | Original Version, by changing formats or by porting the Font Software to a
42 | new environment.
43 |
44 | "Author" refers to any designer, engineer, programmer, technical
45 | writer or other person who contributed to the Font Software.
46 |
47 | PERMISSION & CONDITIONS
48 | Permission is hereby granted, free of charge, to any person obtaining
49 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
50 | redistribute, and sell modified and unmodified copies of the Font
51 | Software, subject to the following conditions:
52 |
53 | 1) Neither the Font Software nor any of its individual components,
54 | in Original or Modified Versions, may be sold by itself.
55 |
56 | 2) Original or Modified Versions of the Font Software may be bundled,
57 | redistributed and/or sold with any software, provided that each copy
58 | contains the above copyright notice and this license. These can be
59 | included either as stand-alone text files, human-readable headers or
60 | in the appropriate machine-readable metadata fields within text or
61 | binary files as long as those fields can be easily viewed by the user.
62 |
63 | 3) No Modified Version of the Font Software may use the Reserved Font
64 | Name(s) unless explicit written permission is granted by the corresponding
65 | Copyright Holder. This restriction only applies to the primary font name as
66 | presented to the users.
67 |
68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
69 | Software shall not be used to promote, endorse or advertise any
70 | Modified Version, except to acknowledge the contribution(s) of the
71 | Copyright Holder(s) and the Author(s) or with their explicit written
72 | permission.
73 |
74 | 5) The Font Software, modified or unmodified, in part or in whole,
75 | must be distributed entirely under this license, and must not be
76 | distributed under any other license. The requirement for fonts to
77 | remain under this license does not apply to any document created
78 | using the Font Software.
79 |
80 | TERMINATION
81 | This license becomes null and void if any of the above conditions are
82 | not met.
83 |
84 | DISCLAIMER
85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
93 | OTHER DEALINGS IN THE FONT SOFTWARE.
94 |
--------------------------------------------------------------------------------
/assets/fonts/Sassy_Frass/SassyFrass-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/fonts/Sassy_Frass/SassyFrass-Regular.ttf
--------------------------------------------------------------------------------
/assets/images/swoosh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/images/swoosh.png
--------------------------------------------------------------------------------
/assets/sounds/boing-2-44164.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/sounds/boing-2-44164.mp3
--------------------------------------------------------------------------------
/assets/sounds/boing-6222.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/sounds/boing-6222.mp3
--------------------------------------------------------------------------------
/assets/sounds/boink.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/sounds/boink.mp3
--------------------------------------------------------------------------------
/assets/sounds/jews_harp_boing-7111.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/sounds/jews_harp_boing-7111.mp3
--------------------------------------------------------------------------------
/assets/sounds/little-whoosh-2-6301.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/sounds/little-whoosh-2-6301.mp3
--------------------------------------------------------------------------------
/assets/sounds/loud-thud-45719.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/sounds/loud-thud-45719.mp3
--------------------------------------------------------------------------------
/assets/sounds/whoosh.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/assets/sounds/whoosh.mp3
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/favicon.ico
--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thebenezer/TheatreTutorial_Part1/d56333e7adcecfa386a23511484e8512247c61fc/favicon.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Tap to start
50 |