Blog Post for Week 6 (5/4-5/10)

Posted by VR Capstone Team 1 on 5/10/19

Update on code, links to relevant code added this week

There are three key components of our project.

  1. Server
  2. Webpage on the computer
  3. Magic Leap page

Server (app.js)

On the server we completed the following components:

  • Added the feature to plot the cylinder from the web and to appear on the magic leap. There were a lot of cases to cover. The cylinder can have three different orientations. The cylinder can go in the X, Y, and Z directions. X direction, the center of the cylinder’s base will be on the Y, Z plane. Y direction, the center of the cylinder’s base will be on the X, Z plane. Z direction, the center of the cylinder’s base will be on the X, Y plane. The complexity explodes when we have to plot it on the magic leap with respect to our coordinate system, which took more than 8 hours to figure out. This was because unlike the sphere, where we have the same width and height at all times, the cylinder can stretch in radius or height. This was a huge problem because the cylinder itself has an aspect ratio. For example, if we had width=100 and height=200, and when we make the width 200, the height would be forced to be 400. So, we had to play around with model-scale from the prismatic library. Above this, we had to make sure that the cylinder sizing scale was the same as the sphere sizing scale, that is, a radius 5 sphere is the same size as a radius 5 cylinder. Altogether, there was a lot of math and geometry in this section, and it was extremely confusing, because there was not a lot of documentation, and we are completely new to positioning fbx properties.
  • Receive the updates from magic leap whenever the users interacts with the page and forward that information to the webpage so that the updated values of the shape can be shown to the user on the webpage.
  • We can send the magic leap a command to delete all the shapes while switching between playground and lesson plan

Webpage on the computer (index.html and index.js)

We made the following changes to the web interface:

  • One of the biggest addition we made this week was the sphere plan. We added five steps to the sphere plan. User can navigate between these steps.
  • We also added exercises to the study plan so students can measure how much they learned and we notify the students when they complete the exercise successfully.
  • We update the equation values on the webpage in real time when ever it receives an update from the server for a specific shape.

Magic Leap page (magicleap.html)

We made the following changes to the magic leap page:

  • Added the feature to move the sphere and the cylinder on the magic leap in the X, Y, and Z directions and have the updated equation appear on the web. This was a lot more complicated for the cylinder because the cylinder can be in different orientations. For example, if the cylinder was in the Y direction, that meant changing X, Z would change the center of the cylinder’s base and changing Y would shift the entire cylinder in the Y direction. Now, if the cylinder was in the X direction, that meant changing Y, Z would change the center of the cylinder’s base and changing X would shift the entire cylinder in the X direction.
  • We improved our interface (sliders and buttons) which allows the user to interact with the shape.
  • Displaying which step the user is on for the sphere study plan.

Demo

Below is the video of our current progress.

Plan for next week

Our plan for next week is to finish:

  1. Ability to create and delete cones and elipsoids.
  2. Allow the users to enter the cone equation and display the update value it receives from the server.
  3. We need to add lighting to the shapes so we can tell it is 3D.
  4. Add to existing lesson plan with a cylinder. Add lesson plan for ellipsoid and cone.
  5. Make both the webpages on the Magic leap and the computer better looking.

What every member did this week and will do next week

Our team believes we work more efficiently in pairs. Therefore, we paired into the following pairs:

  1. Matthew and Simon
  2. Esteban and Tanuj

Since we are in pairs each person completed the work together. Simon and Tanuj wrote the blog. Matthew and Esteban worked on the Progress report slides and recorded the demo video which surpirsingly took multiple tries.

The first team (Matthew and Simon) worked on the changes to the Magic leap page as described in the previous sections. The first team also made all the changes to indicated in the app.js section above. This next week, team 1 will implement the first two next week's tasks.

The second team (Esteban and Tanuj) worked on the changes to the index.html and index.js as described above and the server. The second team will complete the last three tasks from the next week section above.

Both teams worked together to film the progress report demo video and create the progress report slide deck this week as well.

Blocking Issues

We have no immediate blocking issues.