-
Notifications
You must be signed in to change notification settings - Fork 3
/
slides-en.html
906 lines (677 loc) · 34.3 KB
/
slides-en.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Canada Learning Code</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/favicon.ico">
<!-- Takes care of CSS3 prefixes -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body class="en" data-duration="360">
<!--Slide 1-->
<main>
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/teenslc-logo-stacked-white.png" alt="Teens Learning Code logo">Welcome!</h1>
<div class="instructions">
<h2>Get <br>Connected</h2>
<p><strong>Wifi:</strong> wifi network</p>
<p><strong>Password:</strong> wifi password</p>
<hr>
<h2>Complete this survey before we begin</h2>
<p><a href="http://bit.ly/teensurveyclc">http://bit.ly/teensurveyclc</a></p>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content created by Kassandra Lenters for <a prefix="cc: http://creativecommons.org/ns#" href="http://canadalearningcode.ca" property="cc:attributionName" rel="cc:attributionURL">Canada Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/teenslc-logo-stacked-white.png" alt="Teens Learning Code logo">Getting Started</h1>
<!--Slide 2-->
<div class="instructions">
<h2>Download<br> & Install</h2>
<p>Learner files (zip file): <a href="https://github.com/ladieslearningcode/teenslc-vr-with-aframe/archive/master.zip">bit.ly/vr-with-aframe</a>
<ul>
<li>unzip the learner file (<em>extract all</em> if you’re on a PC)</li>
<li>open <em>slides-en.html</em> in the browser to view the slides</li>
</ul>
</p>
<hr>
<h2>Working <br>Offline? <br>(No Internet)</h2>
<p><strong>Only if the internet is not working:</strong></p>
<ul>
<li>Atom Editor: <a href="http://atom.io">http://atom.io</a></li>
<li>Chrome Browser: <a href="https://www.google.ca/chrome/browser/desktop/">https://www.google.ca/chrome</a></li>
</ul>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content created by Kassandra Lenters for <a prefix="cc: http://creativecommons.org/ns#" href="http://canadalearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Canada Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<!--Slide 3-->
<section class="slide intro">
<img class="logo" src="framework/img/teenslc-logo-white.png" alt="Canada Learning Code logo">
<h1 class="heading-bg">
<span>Virtual Reality<br>
with A-Frame</span>
</h1>
<ul>
<li><a href="http://twitter.com/learningcode">@learningcode</a></li>
<li><a href="https://twitter.com/search?q=%23teenslearningcode&src=typd">#teenslearningcode</a></li>
</ul>
<div class="sponsor">
<!--<p>In partnership with<br> <img src="framework/img/logo-white.svg" alt="name"></p>-->
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Slide presentation created by <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://canadalearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Canada Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<!--Slide 4-->
<section class="slide title" data-markdown>
<script type="text/template">
#Introductions
</script>
</section>
<!--Slide 5-->
<section class= "slide" data-markdown>
<script type="text/template">
#Agenda
Intro to VR
Code Along in A-Frame
Building your virtual world
Working with the Registry
</script>
</section>
<!--Slide 6-->
<section class="slide centered" data-markdown>
<script type="text/template">
## 1. Be friendly & welcoming
## 2. Be respectful of others
## 3. Ask questions
## 4. Be present
## 5. Try your best!
</script>
</section>
<!-- temp slide-->
<section class="slide" data-markdown>
<script type="text/template">
## October's Theme is...
# Education
We are exposed to educational experiences, the very moment we enter this world. They shape how we see the world, others and ourselves - and what we are capable of achieving. Institutionalized or not - education is powerful.
**Create a WebVR space that shows what a safe space for learning looks like to you.**
Share your project using #clcCode4Change. More info [here](https://www.canadalearningcode.ca/code-can-change-the-world/).
</script>
</section>
<!--Slide 7-->
<section class="slide title" data-markdown>
<script type="text/template">
# Today's Project
## We're learning how to build a <br>virtual world using A-Frame
</script>
</section>
<!--Slide 8-->
<section class="slide centered" data-markdown>
<script type="text/template">
#Today's Project
[https://ice-cream.glitch.me/](https://ice-cream.glitch.me/)
</script>
</section>
<!--Slide 9-->
<section class="slide title" data-toc data-markdown>
<script type="text/template">
# What is VR?
</script>
</section>
<!--Slide 10-->
<section class="slide" data-markdown>
<script type="text/template">
#VR
**Virtual Reality (VR)** is a computer-generated 3D environment that simulates a real experience. The level of interactivity can vary from passively observing to device-assisted interactions.
Examples:
* <a href="https://www.youtube.com/watch?v=hEK-J3ZgCZA">Tilt Brush</a>
* <a href="https://experiments.withgoogle.com/webvr/konterball">Konterball (ping pong in VR)</a>
* <a href="https://aframe.io/a-blast/">Mozilla AR A-Blast</a>
</script>
</section>
<!--Slide 11-->
<section class="slide" data-markdown>
<script type="text/template">
#AR
**Augmented Reality (AR)** is a computer-generated experience where a virtual world is superimposed on the user's view of the real world.
Examples:
* <a href="https://www.pokemongo.com/en-ca/">Pokémon Go</a>
* <a href="https://www.youtube.com/watch?v=QN95nNDtxjo">Super Mario Bros AR prototype</a>.
* <a href="https://experiments.withgoogle.com/ar/justaline">Just a Line (AR drawing app)</a>
</script>
</section>
<!--Slide 12-->
<section class="slide title" data-toc data-markdown>
<script type="text/template">
#Think, Pair, Share
## Why create virtual experiences?
</script>
</section>
<!--Slide 13-->
<section class="slide" data-markdown>
<script type="text/template">
# Why VR?
VR provides immersive storytelling and gaming opportunities, and is a new medium for creativity and self-expression. VR is also being used to positively impact society! Here are a few examples:
* **VR Therapy**: Using VR to face fears like <a href="https://newatlas.com/fearless-spider-fear-oculus-rift-vr/45146/">arachnophobia</a> or <a href="https://newatlas.com/public-speaking-simulation-gear-vr/44871/">public speaking</a>.
* **VR + Healthcare**: As a tool for surgical training, or to help patients <a href="https://med.stanford.edu/news/all-news/2017/09/virtual-reality-alleviates-pain-anxiety-for-pediatric-patients.html">manage pain</a>.
* **VR + Education**: Providing students access to new places and experiences via <a href="https://edu.google.com/expeditions/#about">Google Expeditions</a>
</script>
</section>
<!--Slide 14-->
<section class="slide" data-markdown>
<script type="text/template">
# Some Considerations
* Motion sickness
* Unstability or 'newness'
* Accessibility and cost
</script>
</section>
<!--Slide 15-->
<section class="slide" data-markdown>
<script type="text/template">
# VR versus WebVR
**WebVR** is a JavaScript API that makes it possible to experience VR in our browser. We can use WebVR to develop, experience, and share VR projects.
*Another example of an API (Application Programming Interface) is the <a href="https://developers.google.com/maps/">Google Maps API</a>, which allows developers to add customized maps to websites and apps.*
</script>
</section>
<!--Slide 16-->
<section class="slide" data-markdown>
<script type="text/template">
#Artist Profile
**Scott Benesiinaabandan** is an Anishinabe intermedia artist that works primarily in photography, video, audio and printmaking. He has completed international residencies at Parramatta Artist Studios in Australia, Context Gallery in Derry, North of Ireland, and University Lethbridge/Royal Institute of Technology iAIR residency, along with international collaborative projects in both the United Kingdom and Ireland. Scott is currently based in Montreal.
*Profile from ImagineNATIVE*
---
<div class="dropdown">
<button class="dropbtn">Attributions</button>
<div class="dropdown-content">
<a href="http://cfccreates.com/residents/339">Photo of Scott from the Canadian Film Centre website</a>
</div>
</script>
</section>
<!--Slide 17-->
<section class="slide centered" data-toc data-markdown>
<script type="text/template">
# Blueberry Pie under the Martian Sky
<video width="810" height="465" controls>
<source src="framework/video/blueberry-pie.mp4" type="video/mp4">
</video>
## By [Scott Benesiinaabandan](http://www.benesiinaabandan.com/)
</script>
</section>
<!--Slide 18-->
<section class="slide title" data-markdown>
<script type="text/template">
#A-Frame
</script>
</section>
<!--Slide 19-->
<section class="slide" data-markdown>
<script type="text/template">
# Intro to A-Frame
**A-Frame** is an open source framework for developing WebVR, based in HTML. Because it is cross-platform, we can experience A-Frame projects using anything from an Oculus Rift, to the browser on our desktop computer.
Just like other websites, A-Frame projects can be inspected using a built-in visual 3D inspector. We can access this by opening any A-Frame scene, then hitting `<ctrl> + <alt> + i`
## What Can We Create?
Go to [https://aframe.io/](https://aframe.io/) to explore example projects (left column).
*Navigate within a scene by using WASD or arrow keys. Click and drag to turn.*
</script>
</section>
<!--Slide 20-->
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Getting Started
We'll be using Glitch to edit and save our A-Frame projects.
Go to [https://glitch.com](https://glitch.com) and sign in with email. You will need to go to your inbox and click on the "sign in" button to begin.
</script>
</section>
<!--Slide 21-->
<section class="slide" data-markdown>
<script type="text/template">
#Code Along
## Open the Example Project:
1. Go to [https://glitch.com/~aframe](https://glitch.com/~aframe)
1. Select "View Source" <br> 
1. Click "Remix to edit" <br> 
</script>
</section>
<!--Slide 22-->
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Setting Up Glitch
In order to view changes as you go, select **Show Live** > **Next to the Code**.
</script>
</section>
<!--Slide 23-->
<section class="slide" data-markdown>
<script type="text/template">
# What do you see?
</script>
</section>
<!--Slide 24-->
<section class="slide" data-markdown>
<script type="text/template">
#CODE! (Specifically HTML)
* We use browsers to see websites
* Browsers don’t understand English - but they do understand HTML!
**HTML is written with tags.**
Tags usually come in pairs — an opening tag and a closing tag — to wrap the content. Note the closing tag has a forward slash (`/`).
```html
<tag> opening tag --- closing tag </tag>
```
HTML tags describe the content inside of them to the web browser.
```html
<h1>This tag describes a heading</h1>
<p>This tag is for paragraphs.</p>
```
</script>
</section>
<!--Slide 25-->
<section class="slide" data-markdown>
<script type="text/template">
# Primitives
A-Frame uses HTML elements called **primitives**. These can be customized using HTML attributes (e.g. `color="red"`).
* **Position** defines the position in 3D space (X,Y,Z) - measured in meters
* X = left-right
* Y = up-down
* Z = forward-back
* **Rotation** defines the orientation in 3D space (X,Y,Z) - measured in degrees
* X = pitch
* Y = yaw
* Z = roll
</script>
</section>
<!--Slide 26-->
<section class="slide" data-markdown>
<script type="text/template">
#Challenge
We can customize elements by adding or changing their attributes.
An attribute looks like: `color="blue"`
**Try out a few of the following:**
* Change the colour of the sphere
* Change the rotation of the box
* Change the position of the cylinder
* Increase the size of the plane (hint: which html attributes affect size?)
* Add a line of text in the center of your scene (see <a href="https://aframe.io/docs/0.9.0/primitives/a-text.html#sidebar"> A-Frame primitives</a>)
</script>
</section>
<!--Slide 27-->
<section class="slide title" data-markdown>
<script type="text/template">
##Share your solutions!
##Any Volunteers?
</script>
</section>
<!--Slide 28-->
<section class="slide title" data-markdown>
<script type="text/template">
#Building + Customizing our Virtual Spaces
</script>
</section>
<!--Slide 29-->
<section class="slide" data-markdown>
<script type="text/template">
#Assets
1. Upload images to the "assets" folder
<br>
**Finding Background Images**
When uploading background images, make sure that they have a 2:1 aspect ratio. Search for '360 images' or see this <a href="https://www.flickr.com/groups/equirectangular/">360° image library on Flickr</a>. Save an image by clicking on the image, then the Download icon (bottom, right).
*Note: We can also capture 360 images using apps like <a href="https://play.google.com/store/apps/details?id=com.google.vr.cyclops&hl=en">Cardboard Camera</a>*
**Finding Textures**
We can add textures to objects, too! Check out this <a href="https://www.flickr.com/groups/freetextures/">free texture library on Flickr</a> for more options. Save an image using the same steps as above.
</script>
</section>
<!--Slide 30-->
<section class="slide" data-markdown>
<script type="text/template">
# Asset Management System
This system helps your browser cache images, in order for the scene to load more quickly. We can use the asset management system by adding a new primitive called `<a-assets>`.
1. Add an `<a-assets>` opening and closing tag just inside of your `<a-scene>`
```html
<a-scene>
<a-assets>
</a-assets>
<!-- ... -->
</a-scene>
```
</script>
</section>
<!--Slide 31-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding a Background Image
1. Locate your image in the assets folder and copy the image URL <br> 
1. Create an `<img>` tag that links to this url
1. Name the image by adding an `id`
1. Reference the asset by adding a `src` attribute to the `<a-sky>` entity
```html
<a-scene>
<a-assets>
<img id="rocklands" src="https://cdn.glitch.com/linktoimage1">
</a-assets>
<a-sky src="#rocklands"></a-sky>
<!-- ... -->
</a-scene>
```
</script>
</section>
<!--Slide 32-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding Textures
1. Copy the image URL (same as before)
1. Create an `<img>` tag that links to this url
1. Name the image by adding an `id`
1. Reference the asset by adding a `src` attribute to the entity
```html
<a-scene>
<a-assets>
<img id="rocklands" src="https://cdn.glitch.com/linktoimage1">
<img id="ice" src="https://cdn.glitch.com/linktoimage2">
</a-assets>
<a-plane src="#ice" position="0 0 -4" rotation="-90 0 0" width="4" height="4" shadow></a-plane>
<!-- ... -->
</a-scene>
```
</script>
</section>
<!--Slide 33-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding More 3D Objects
1. Find more 3D shapes in the A-Frame reference: [aframe.io/docs](https://aframe.io/docs) → look under the “Primitives” section <br> 
1. Add new primitives in between the `<a-scene>` tags, underneath `</a-assets>`
```html
<a-scene>
<a-assets>
<!-- ... -->
</a-assets>
<!-- Put new primitives here! -->
</a-scene>
```
*Tip: Use existing primitives as a reference point. Try using the same position, Show Live to test, then change the position values as needed.*
</script>
</section>
<!--Slide 34-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding Animation
We can use the `animation` attribute to animate entities within our scene. Add it inside of the object you would like to animate.
```html
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow animation="property: position; to: -1 1.5 -3; dir: alternate; dur: 2000; easing: linear; loop: true;"></a-box>
```
* **Property** specifies which part we are animating (e.g. position, rotation, scale.. even material.color!)
* **To** is the value we are animating it to (e.g. 1 meter higher than the original position)
* **Dir** is the direction of the animation (between `from` and `to`)
* **Dur** is how long it takes (in milliseconds)
* **Easing** indicates whether or not it speeds up/down
* **Loop** is the amount of times this happens (put a number here, or `true` to loop forever)
See the <a href="https://aframe.io/docs/0.9.0/components/animation.html">Animations documentation</a> for more options!
</script>
</section>
<!--Slide 35-->
<section class="slide title" data-markdown>
<script type="text/template">
#Adding Interactivity + Special Effects
</script>
</section>
<!--Slide 36-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding Interactivity
Most users don't have access to VR equipment and will view our projects directly in their browser. We'll be experiencing our final projects using Google Cardboard. That being said, we'll want to consider this when programming interactions into our scenes. **Cursor components** are accessible for both of these viewing options, so any events involving gazing or clicking should work.
A-Frame automatically sets up a default camera in our scene. We can't currently see our mouse cursor, so we need to add an `<a-cursor>` primitive inside of `<a-camera>`.
```html
<a-scene>
<!-- ... -->
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
```
*Note: If your `<a-plane>` disappears, try giving it a position attribute.*
</script>
</section>
<!--Slide 37-->
<section class="slide" data-markdown>
<script type="text/template">
# Animating on Events
We can use events to trigger animations by using the <a href="https://aframe.io/docs/0.9.0/components/animation.html#events"> startEvents property</a>.
For example, we can use `startEvents: mouseenter;` to make the animation begin when the cursor enters the box:
```html
<a-scene>
<!-- ... -->
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow animation="property: position; to: -1 1.5 -3; dir: alternate; dur: 2000; easing: linear; loop: true; startEvents: mouseenter;"></a-box>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
```
</script>
</section>
<!--Slide 38-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding Audio (1)
Audio can enhance our scene by creating a more immersive experience for the user. To find audio that is safe for reuse, try [https://freesound.org/](https://freesound.org/) or [https://www.jamendo.com/start](https://www.jamendo.com/start). *Bonus! Upload your own audio created in <a href="https://www.soundtrap.com">Soundtrap</a>!*
1. Upload your chosen audio file into the assets folder
1. Copy the audio URL <br> 
1. Add an audio element inside of the `<a-assets>` primitive, linking to the audio URL
1. Add a `preload` attribute to your audio file
```html
<a-scene>
<a-assets>
<!-- ... -->
<audio src="https://cdn.glitch.com/linktoaudio1" preload="auto"></audio>
<audio src="https://cdn.glitch.com/linktoaudio2" preload="auto"></audio>
</a-assets>
<!-- ... -->
<a-scene>
```
</script>
</section>
<!--Slide 39-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding Audio (2)
1. Name the audio file using an `id`
1. Add a `sound` attribute to an entity that specifies which sound and when to play
```html
<a-scene>
<a-assets>
<!-- ... -->
<audio id="bgmusic" src="https://cdn.glitch.com/linktoaudio1" preload="auto"></audio>
<audio id="pop" src="https://cdn.glitch.com/linktoaudio2" preload="auto"></audio>
</a-assets>
<!-- ... -->
<a-sphere sound="src: #bgmusic; on: click;" position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow>
<a-cylinder sound="src: #pop; on: click;" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-scene>
```
*Does the format of the `sound` attribute look familiar? The properties (e.g. `on`) and values (e.g. `click`) are formatted like CSS!*
For more audio options, check out the <a href="https://aframe.io/docs/0.9.0/components/sound.html#sidebar">Sound documentation</a>.
</script>
</section>
<!--Slide 40-->
<section class="slide title" data-markdown>
<script type="text/template">
# Special Effects
## With the A-Frame Registry
</script>
</section>
<!--Slide 41-->
<section class="slide" data-markdown>
<script type="text/template">
# Meet the Registry
We can add additional animations and special effects via the <a href="https://aframe.io/aframe-registry/">A-Frame Registry</a>. This is a library of ready-to-use components created by other developers in the A-Frame community.
In this example, we will add a gravity effect using the Physics System.
</script>
</section>
<!--Slide 42-->
<section class="slide" data-markdown>
<script type="text/template">
# Adding Components
1. Go to the <a href="https://aframe.io/aframe-registry/">registry</a> and search for the **Physics System** component (click on the component name) <br> 
1. On the component page, scroll down to find the installation script - copy this <br> 
</script>
</section>
<!--Slide 43-->
<section class="slide" data-markdown>
<script type="text/template">
# Inspecting the Scene
1. Go back into your project, and paste the script in the `<head>`
1. 'Show Live' and inspect your scene (`<ctrl> + <alt> + i`) - zoom by scrolling with your mouse/trackpad
</script>
</section>
<!--Slide 44-->
<section class="slide" data-markdown>
<script type="text/template">
# Testing Changes
1. Let's apply a gravity effect. Click on an entity (e.g. sphere), then **add component: dynamic-body** <br> 
1. We also need to prevent this entity from falling out of our scene. Click on the plane, then **add component: static-body** <br> 
1. Preview changes by selecting **Back to Scene** <br> 
</script>
</section>
<!--Slide 45-->
<section class="slide" data-markdown>
<script type="text/template">
# Applying Changes
1. If you're happy with how it looks, copy the code that you added: find the new component then select **Copy Attributes** <br> 
1. Go back into your code, and paste this inside of the entity <br> (e.g. `<a-sphere dynamic-body="sphereRadius: NaN" ...>`)
</script>
</section>
<!--Slide 46-->
<section class="slide" data-markdown>
<script type="text/template">
# More Registry Options
When adding additional components, read the instructions to have a better understanding of how it works. Visit <a href="https://www.npmjs.com/package/aframe-physics-system">this page</a> for more info on the Physics System component.
## TIP:
When inspecting our scene, it can be difficult to tell similar entities apart. Name entities using `id` to keep your code organized. (e.g. `<a-sphere id="scoop1">`)
</script>
</section>
<!--Slide 47-->
<section class="slide" data-markdown>
<script type="text/template">
# Work Session
Continue experimenting with components + special effects. Here are some recommendations:
1. Make it rain! (or snow, or something else..) using the [Particle System component](https://www.npmjs.com/package/aframe-particle-system-component).
1. Teleport to another world using the [Environment component](https://www.npmjs.com/package/aframe-environment-component) (pyramids, anyone?).
1. Provide more cursor support, so users can see and select elements more easily using the [Crawling Cursor](https://npmjs.com/package/aframe-crawling-cursor) or instant interactivity using [Gaze Control](https://npmjs.com/package/aframe-gaze-control-component).
1. Interested in typography? Customize text using the [Text Geometry](https://www.npmjs.com/package/aframe-text-geometry-component) for some really cool effects.
*Want an extra challenge?* Familiar with JavaScript? You can grow your JS skills in A-Frame, as well! Check out the documentation [here](https://aframe.io/docs/0.9.0/introduction/javascript-events-dom-apis.html#sidebar).
</script>
</section>
<!--Slide 48-->
<section class="slide centered" data-markdown>
<script type="text/template">
# VR Viewers
---
<div class="dropdown">
<button class="dropbtn">Attributions</button>
<div class="dropdown-content">
<a href="https://dribbble.com/shots/4153349-Cardboard">VR Cardboard gif</a>
</div>
</script>
</section>
<!--Slide 49-->
<section class="slide" data-markdown>
<script type="text/template">
# Experience your Virtual World!
Follow these steps to view your A-Frame scene using <a href="https://vr.google.com/cardboard/">VR Viewer</a>:
1. Rename your project <br> 
1. Open up a browser and go to your project's URL (same as 'Show Live') <br> 
1. Click on the VR Cardboard icon <br> 
1. Place your mobile device in the viewer and enjoy!
*Audio will not play on mobile phones running iOS. Use Androids with VR Viewers if you'd like to experience sound.*
</script>
</section>
<!--Slide 50-->
<section class="slide title" data-markdown>
<script type="text/template">
#DEMOS
</script>
</section>
<!--Slide 51-->
<section class="slide" data-markdown>
<script type="text/template">
#Next Steps
**Get Inspired!** Check out <a href="https://twitter.com/aframevr">A-Frame's Twitter page</a> to see what other developers are building.
## Take-Home Exercise
* Any Minecraft fans? Check out: <a href="https://glitch.com/~aframe-aincraft">aframe-aincraft</a> <br>
* You can recreate this project by following <a href="https://aframe.io/docs/0.5.0/guides/building-a-minecraft-demo.html">this tutorial</a>.
</script>
</section>
<!--Slide 52-->
<main>
<section class="slide" data-toc data-markdown>
<script type="text/template">
# Today I Learned...
<p><strong>I can</strong> build and experience VR in my browser</p><!-- .element: class="delayed" -->
<p><strong>I can</strong> use HTML to create 3D objects like boxes and spheres</p><!-- .element: class="delayed" -->
<p><strong>I can</strong> add animation to my project</p><!-- .element: class="delayed" -->
<p><strong>I can</strong> make my project interactive by tracking the user's cursor</p><!-- .element: class="delayed" -->
<p><strong>I can</strong> add audio to my project</p><!-- .element: class="delayed" -->
<p><strong>I can</strong> use A-Frame to <strong>KEEP CODING!</p><!-- .element: class="delayed" -->
</script>
</section>
<!-- Last slide -->
<section class="slide last">
<h1>Thank you!</h1>
<h2 class="heading-bg">
<span>Virtual Reality<br> with A-Frame</span>
</h2>
<ul>
<li><a href="http://twitter.com/learningcode">@learningcode</a></li>
<li><a href="https://twitter.com/search?q=%23teenslearningcode&src=typd">#teenslearningcode</a></li>
</ul>
<p class="attribution">Slide presentation created by <a href="http://christinatruong.com">Christina Truong</a> based on <a href="https://github.com/LeaVerou/csss">Lea Verou's SlideShow</a> and <a href="http://lab.hakim.se/reveal-js/">reveal.js</a>.</p>
</section>
</main><!-- cls main section -->
<script src="framework/scripts/jquery-1.11.0.min.js"></script>
<script src="framework/scripts/slideshow.js"></script>
<!-- Uncomment the plugins you need -->
<script src="framework/scripts/plugins/css-edit.js"></script>
<script src="framework/scripts/plugins/css-snippets.js"></script>
<script src="framework/scripts/plugins/css-controls.js"></script>
<!-- <script src="plugins/code-highlight.js"></script>-->
<script src="framework/scripts/plugins/markdown/marked.js"></script>
<script src="framework/scripts/plugins/markdown/markdown.js"></script>
<script src="framework/scripts/plugins/highlight/highlight-8.4.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="framework/scripts/llc.js"></script>
<script>
var slideshow = new SlideShow();
// Grabs all the .snippet elements
var snippets = document.querySelectorAll('.snippet');
for(var i=0; i<snippets.length; i++) {
new CSSSnippet(snippets[i]);
}
</script>
</body>
</html>