VR Lesson 2

UT PREP CS Lesson Plan 2

Introduction to HTML, AFrame, and Thimble

Sponsored by Mozilla Gigabit

 

Standards Addressed: 

 

Time: 75 minutes

CS Objective(s):

1)     Students will be able to identify different properties of the HTML language such as tags and attributes

2)     Students will be able to apply different HTML tags from AFrame on Thimble to create simple shapes in a VR space

3)     Students will be able to utilize a test and debug process to create a simple VR space

4)     Students will learn the basics of navigation in a 3-D coordinate plane

5)     Students will develop and demonstrate the ability to work effectively in a group on a common problem.

 

Guiding Question:  How can we create a VR space? How can we utilize AFrame and HTML to create a VR space?

 

Resources:

https://aframe.io/docs/0.5.0/introduction/

https://thimbleprojects.org/omnignorant/240540/ (or http://bit.ly/2o5hxdh)

https://thimble.mozilla.org/en-US/

Materials:

●      VR Headset (cardboard or other)

●      Student Devices

●      Laptops/Desktop Computers

●      Folders with graph paper and axis labeled

●      Skewers with a base

Background Information:

HTML (Code Academy)  https://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1?curriculum_id=5035038ff76159000200b73c

Code Academy has lessons over html basics that will help you with the syntax of the language. If you have trouble understanding why we write the way we do or you want to be able to help kids faster this is recommended.

-Aframe guide

https://aframe.io/docs/0.1.0/guide/

https://aframe.io/docs/0.1.0/guide/positioning.html

https://aframe.io/docs/0.1.0/guide/entering-vr.html

https://aframe.io/docs/0.1.0/core/animation.html

A frame has its own tutorial that will teach you the basics of syntax and the concepts of inserting and manipulating entities. This is required as you will need to learn these tools to teach these lessons and be helpful in the classroom. Use thimble throughout this tutorial to do the actual coding.

-Aframe primitives

https://aframe.io/docs/0.1.0/primitives/

These will be used extensively in the lessons so you need to be familiar with them. Please read through each. Some we will be unable to achieve in this set of lessons like the video sphere and textures but read through them to understand what they are and what they do.

-Thimble

https://thimble.mozilla.org/en-US/

You will need to make an example project in Thimble to show off to the class later. Once you have reached a point of proficiency make a thimble account and give yourself an hour to make a scene using the tools we will teach the kids. Try to make it original and stick to the guidelines set in the project rubric as a minimum of what you should accomplish. Once you’re done save your work so you can later show it off in class.

-Sample Projects (No Code Included)

https://thimbleprojects.org/bandreasv/227691/

https://thimbleprojects.org/bandreasv/227682/

This are sample projects created in 45 min. – 1 hour. Please create your own projects however as it will help you anticipate any issues your students might run into as well as aide you familiarize yourself with the process.

Links:

AFrame

https://aframe.io/docs/0.4.0/introduction/

Thimble

https://thimble.mozilla.org/en-US/

Colors
http://htmlcolorcodes.com/

Example Project

https://thimbleprojects.org/omnignorant/240540/ (or http://bit.ly/2o5hxdh)

Example Final Projects (No code included):

https://thimbleprojects.org/bandreasv/227691/

https://thimbleprojects.org/bandreasv/227682/

To do before lesson:

  • Explore the Aframe website and Thimble
  • Create your own example utilizing the Aframe library and Thimble
  • Create student logins
Prepare 3-D coordinate system supplement

 

Engage (5 min):

Hello class today we're going to be starting off learning how to code our VR environment. First let’s start off by seeing a scene I made myself to give you an idea of what you can accomplish during our lessons.

Open this own project or this one (https://thimbleprojects.org/bandreasv/227682/)

Teacher will show students a final product of a VR space created by using HTML, Aframe, and Thimble. Students will discuss this example in terms of the previously filled out KWL chart and add more if necessary. If students are having difficulties coming up with things prompt them with the following questions.

  • How do we make different shapes?
  • How do we represent things as basic shapes?
  • How do we have different colors?
  • How do we place the shapes on the screen?
  • What program/tool is used?
  • How do we used that tool?

Notice how my basketball is going up and down? What would it for my basketball to actually be launched into the hoop? For this we first need to learn about coordinates.

 

Explore 1 (10 min.)

First who knows what a 2-D coordinate system is, also refereed to as Cartesian coordinates?

 “A graph thing?”

 “Lines”

 “A way to plot a point on a graph!”

Right, a 2-d coordinate system is what allows us to plot data and draw graphs. They normally look something like this right <show folder front> So here what is the horizontal axis called?

  “X-axis”

And the vertical axis?

  “Y-axis”

I’m going to draw a circle on this graph. What dimension is this?

“2D”

Right. What if we wanted to place things in a 3-dimensional world? What would that look like? What would a circle look like in 3D?

“A sphere! A ball!”

Exactly, like my basketball! But here’s the problem: How do I put a the in a 3D area?

“You could shade it. Maybe you could stack a lot of circles on itself to make it come out of the board.”

Shading it would still be 2D. If I were to run my fingers across the shades sphere, it would still be flat but appear 3D. In 2D we have height, the y-axis, and width, the x-axis. If you wanted to make it 3D, you need DEPTH. So adding multiple sheets of paper is on the right track!  This is called the Z-axis.

Open up folder, demonstrate which axis are which. If you have a doc cam position the folder so the class can only see one dimension at a time.

Great! So now we can start plotting data in 3D. Let’s go back to 2D. What do you need to plot a point in 2D?

“You need a x-coordinate and a y-coordinate.”

Cool. Someone give me the coordinates for a point in the XY plane.

“(2,3)”

Ok. (2,3). How do we graph this?

“Move 2 to the right since x is positive, and then move 3 up since y is positive.”

ALRIGHT NOW EVERYONE LOOK AT THE WALL.

Teacher points to a wall, and walks over to it.

Imagine my head is a point, floating in space. What is the x-axis? What is the y-axis? How do you account for me not touching the wall? We’ll need to add in another axis…the z-axis. Now, what variables do we have?”

“Height, depth, and width!”

So how many coordinates do we need?
“3!”

Right! So before, when we had 2 coordinates, we had (x,y) to describe a point. Now, we have (x,y,z)! So looking back at our folder, what would it take to bring a point out here?

Motion to a place in between the two pages of the folder.

“We’d need some coordinate for Z”

X tells us how far we move to the right, Y tells us how far up we move, and Z tells us how far out we move! So now if we wanted to plot some data we could use the X,Y and Z coordinates?

 

Bring out the skewer with a base contraption and place it at the location given by the kids

 

The tip of our skewer is a point or our basketball that our data point represents. Underneath your folder there is a set of coordinates. With your partner place the tip of the skewer at that location.

 

Give them about a minute to do that.

 

Now switch places with another group. Check that they placed the skewer in the correct place. If they did not, correct it and explain to them why you changed the position of the skewer.

 

Explore 2 (15 min.)

Keep 3D Coordinates in mind as we will use this information in a couple of minutes. Now, another thing we needed to learn in order to make our VR spaces, is how to code it and how to use the tools to create it. In a minute, I will pass out the equipment that you need but you will go to the following websites and open them in 3 separate tabs.

Open the websites to show them how you want them to open them.

Then you will login to thimble with information that I will give you in a second.

(Pass out student devices, VR headsets, and sheets with instructions, URLs and log in information.)

So, while I pass out the username and passwords, phones, and headsets for your group, go to the following websites. Have each website on a different tab. And do not touch the phone or the headset until given further instructions.

http://codepen.io/mozvr/pen/BjygdO

            https://thimbleprojects.org/omnignorant/240540/ (or http://bit.ly/2o5hxdh)

https://thimble.mozilla.org/en-US/

Have the links up on the projector in big letters so that they can easily see it or handout a sheet with all the links.

Read script as you pass out supplies (phone, headset, username and password for thimble)

You will be working in partners. So, one person will be the driver and the other the navigator. The oldest person in the group will start as the driver. The driver is in charge of typing the code onto the computer and the navigator is in charge of the phone/vr headset and to check that your partner is typing the correct code. We will switch roles often.

Have a projector up and have them follow along with you.

1. Go to the Thimble website. It is the Green one.

2. Go to the top right corner and click on Sign In

3. Enter the username and password that I provided for your team. It is easier if one person reads the username and password while the other person types it in.

4. Now go to the other thimble link with shapes on it and click on Remix.

What do you see on the screen?

 “VR button!”

 "Code"

 "Shapes"

Right this program is called thimble. This is where we will be typing all of our code. Someone mentioned that they saw code. We will be using HTML to code. HTML stands for Hyper Text Markup Language and it is widely used to create websites. Finally, we will be using a library called A-Frame: it is a bank of tools that we can use in HTML in order to create all the shapes you see on the screen and turn it into VR!

Let’s look at line #1 of this code. This is how we get all of our A-Frame tools into thimble. So, when you start your own project, it is very important that you do not forget this line. We are importing all of our tools that we will need.

So what does the first line do?

“It allows us to get the tools from A-Frame!”

Notice line #3 and the last line of our code. They look very similar. What is the only difference between this two?

“The last one has a / in it”

These are called our opening and closing tags. In HTML tags are keywords that tell our computer what to place on our screen. Tags are surrounding by angle brackets which look like the less than and greater than symbols. In between our angle brackets we have the name of our tag. Finally, our closing tag, always has a slash after our first angle bracket. What other tags do you see?

<a-sphere>, <a-box>, <a-cylinder>, <a-plane>, <a-sky>, <script>

Notice how many of our tags start with an A. These tags all come from A-Frame. The <a-scene> tag creates a VR scene, and every shape we place must be in between the opening tag and the closing tags. Let’s look at the tag that says a-sphere on line #4. What do y’all think this tag does?

“It draws a sphere!”

Now, in the same line that says sphere, notice how it also says position, followed by 3 numbers in quotation marks. One of you change the first number to 1. Don’t delete any of the quotation marks and make sure to have a space in between your numbers. What happened?

“It moved to the right!”

Now change the second number to 1.5 What happens?
“It moved up”

Finally change the last number to -7. What happens?

“It moved away from the screen!”

How is this related to 3D coordinates?

“The 3 numbers are the x, y, an z coordinates”

That’s right! This is how we place things on our scene. We have an ATTRIBUTE called position that takes 3 numbers in between quotation marks to place our sphere. Notice that our x-axis is left and right. y-axis is up and down, and our z-axis is into the screen, and towards us. The center of the screen 0, 0, 0.

Now let’s talk about the keyword position. This is called an attribute which is a property of your tag that you can change. What other attributes do you see for the sphere?

“Radius, Color”

That’s right! This are all properties of the sphere that you can change. Attributes are placed inside our opening tag followed by an = sign. The value you want to give it is in between quotation marks. Now lets go to the color attribute on our sphere, and let’s change it to the word blue. Write it in all lowercase and remember to keep the quotation marks. What happened?

“It changed to blue!”

What was different about the value that was there before?

“It was weird. A bunch of random letters and numbers”

In HTML, the most common colors can be just typed as their name in all lowercase, like yellow, red, black, etc. However, on computers, colors are also saved in hexadecimal codes. So, if you want a special shade of blue you must give it the hexadecimal code. You can get those codes online. You can google hexadecimal color codes and get them that way.

Have them switch rolls.

With your partner, I want you to change the width, height, and depth on the a-box tag and see what happens. Then change the rotation and see what happens. Make sure to change just one value at time so that it is easier to see what has changed.

Give them about 3 min.

Ok. Can someone tell me what the width, height, and depth attribute does? How about rotate? What does each number change?

Width, height and depth change the measurements of the box. First number on rotate rotates the box about the x-axis, 2nd about the y-axis, and the 3rd about the z-axis.

Great! Now how do we see this in our headset?! Click the ‘Publish’ button on the top right corner. Give it a quick description like ‘my first project’ and click on publish. Notice how it gives you a link. On your phone go to an internet browser and type the link that you see on your thimble. Now click on the icon at the bottom right that looks like a VR headset. Place the phone inside your VR headset and look around!

Exploration Part 3 (20 min):

Now that were familiar with some HTML basics lets learn how to place some new objects.

Go to https://aframe.io/docs/0.4.0/primitives/

Look at the list to the left starting with primitives.

Here you should see a list of some shapes and other geometrical figures. These are the objects that we are going to be able to place in our scene.

Let’s start by learning how to place a circle. Everyone click on circle. Here A-frame gives us a description of our shape some example code and a list of attributes we can apply to our circle. What we’re most interested in is the example code, specifically the one that says basic circle. Since we cannot upload our own images we are always going to want the basic shapes.

[presentation breakdown]

First, we see our tags, then a list of attributes After our attributes we see our closing tag. The color is given in Hex code, which is a system of letters and numbers that we use to pick out a color. But what if we want to move the circle after we place it or rotate it in the x y or z planes? We don’t have a position or rotation variable in there. That’s okay, position and rotation are attributes we can use on all shapes. Remember position is position= “x y z” and rotation is rotation= “x y z”

 So, let’s go ahead and copy the code for a basic circle and paste it into our example pen below the scene setup. Take a minute to add position and rotation and place and change the circle how you would like it.

 Now switch rolls with your partner and let’s add another shape from the list. Everybody click on torus knot from the list and look at the example code. It already has a lot of attributes. Color, arc, p, q, radius and radius tubular. Let’s try pasting this into our code to see what it looks like. If you can’t see it right away make sure to add a position attribute to move it to a place you can see it. You and your partner take a minute to change the attributes to see how crazy you can get it to look. After your done show it to your neighbors.

Give them about 2 minutes to play with this.

Awesome shapes class, now I want everyone to add 2 new shapes to your scene and arrange them how you would like. You have to change at least 1 attribute for every shape you have and it cannot be located at space “0 0 0”

Start of Project (25 min.)

So now that you know how to create your own shapes and the basics of changing attributes you can start working on your project.

* To start on your project on a new tab go to https://thimble.mozilla.org/en-US/

* Click on start a project from scratch

* Copy the first line from our example into your code. Remember, this is how we can use all the tags from A-frame.

* And start coding! Don’t forget to put your a-scene tags and to put all your shapes in between you’re a-scene tags

On the projector, you will see a timer for 10 minutes. Every time 10 minutes are up. Your partner and you will switch rolls.