Skip Navigation

Envisioning Canada in VR

By Kassandra Lenters 2 hours
Level
Grades 9-12
Subjects
Art,
Mathematics,
Other
components
  • Programming
  • Technology and Society
  • Design
Tools & Languages
A-Frame,
Glitch

Key Coding Concepts

  • Debugging
  • Parallel Execution
  • Sequences

Terminology

Augmented Reality (AR)

A computer-generated experience where a virtual world is superimposed on the user’s view of the real world. 

 

Virtual Reality (VR)

A computer-generated 3D environment that simulates a real experience. 

 

WebVR

A JavaScript API that makes it possible to experience VR in our browser. We can use WebVR to develop, experience, and share VR projects.

 

A-Frame

An open source framework for developing WebVR, based in HTML. We can experience A-Frame projects using anything from an Oculus Rift, to the browser on our desktop computer.

Learners will discover Anishinabe intermedia artist Scott Benesiinaabandan and his 2167 VR experience, then build their own WebVR project using A-Frame.

Prerequisites

Recommended: Introduce HTML & CSS before running this lesson. Try the “Innovation Website,” “Tourism Website,” or “Superhero Profiles” lessons.

Technology

  • You will need computers and access to the internet for this lesson

Before the lesson…

Created in partnership with ImagineNATIVE.

Introduction

Artist profile from ImagineNATIVE:

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.

About 2167: What does the future of Canada look like? For the 2167 project, five indigenous artists were asked to share their vision of Canada 150 years into the future using immersive media. Scott Benesiinaabandan responded with “Blueberry Pie under the Martian Sky” - a virtual reality experience.

Description from ImagineNATIVE website: “Bringing to life a prophetic Anishinabe legend about a young boy who travels through a wormhole back to his people’s place of origin, Blueberry Pie Under the Martian Sky also addresses concerns about the revitalization, growth and evolution of the Anishinabe language.”

Watch video recording of Scott’s VR experience.

Note: this is a video capture of the project, not the actual VR experience

Reflection

Write common symbols, themes, and descriptive words on a whiteboard.

Possible questions:

  • What is your initial reaction to this virtual artwork?
  • If you could describe the experience in one word, what would it be?
  • Which symbols or themes were apparent in this work?
  • What connections can you make between the artist’s choice of media and the theme of the work?

If you did not need to introduce HTML and CSS before the lesson, you can extend the discussion to touch on storytelling and empathy. Of particular interest may be the controversy around Mark Zuckerberg’s VR tour of Puerto Rico, which sparked conversation around what stories VR is and isn’t appropriate for.

  • Why were some people unhappy with the Facebook Spaces VR demo?
  • What are some of the differences between the Facebook Demo and Scott Benesiinaabandan’s VR experience?

We’re going to create our own virtual artwork in A-Frame based off of one of the themes or symbols discussed.

*Decide as a class on one theme, or have each learner choose their own theme, as inspired by the example VR project.

Code-Along

  1. Go to https://glitch.com/~aframe
  2. Select "View Source” to open the project
  3. Click "Show Live" to preview the project
  4. Navigate within the scene by using WASD or arrow keys. Click + drag to turn.
  5. Go back to the project tab and open “index.html”
  6. Try out a few of the following challenges:
    1. Change the colour of the sphere
    2. Change the position of the cylinder
    3. Change the rotation of the box
  7. Remind learners to continue to test by previewing the project each time they change the code
  8. Have volunteers share their solutions with the class
  9. Q: What did we learn about the position attribute?
    1. Measured in meters
    2. X = left-right
    3. Y = up-down
    4. Z = forward-back

Activity

Have learners open up the starter project

Use the solution Sheet to guide learners through the following steps:

  • Changing the background image
  • Adding more 3D shapes
  • Adding textures
  • If time: Adding animation
  • Saving and sharing projects

*For any A-Frame related questions check out this documentation.

*Contingency (offline option): Install a text editor (like https://atom.io) and download project files.

  • Have learners write an Artist’s Statement on paper or as a in their code. For example: “This artwork is titled [Title]. It is a WebVR experience built in A-Frame using HTML. I chose [design decision] because [reasoning behind design decision].”
  • Co-create success criteria after looking at the tool and walking through the Code Along. Have learners conduct peer-evaluations and provide constructive feedback for revision before submitting their final artwork.

  • If you have access to Google Cardboard, have learners experience each other’s final projects in VR for the full, immersive experience.
  • Explore Scott’s portfolio website and have a mini ‘scavenger hunt’ for common themes, symbols, etc. between his various artworks
  • Hear more from the artist himself! Watch this video of Scott sharing his VR project after learners have a chance to try to interpret the artwork on their own
  • Math connection: Using the learners’ projects or the code-along A-Frame project, calculate the surface area and volume of the 3D entities, using pixels as a unit of measurement. Compare the surface area and volume of existing prisms, cylinders, cones, and/or spheres.

ImagineNATIVE:
http://www.imaginenative.org/

Scott Benesiinaabandan
http://www.benesiinaabandan.com/

Scott’s VR experience
https://fabricofdigitallife.com/index.php/Detail/objects/3604

Scott Benesiinaabandan: Artist Talk + Discussion with Danielle Printup
https://vimeo.com/247365954

TIFF
https://www.tiff.net/

Pinnguaq
https://pinnguaq.com/

Initiative For Indigenous Futures
http://indigenousfutures.net/

AbTec
http://abtec.org

Mark Zuckerberg 'tours' flooded Puerto Rico in bizarre virtual reality promo
https://www.theguardian.com/technology/2017/oct/09/mark-zuckerberg-facebook-puerto-rico-virtual-reality

Teach lessons that are tied to your existing curriculum! https://bit.ly/CLClessons

r

More Lesson Plans For Grades 9-12

    View All Lesson Plans

    Explore lessons based on components

    The K-12 Computer Science Framework

    Although learning how to build digital projects is a key part of Computer Science education, students should also learn a wider set of skills and competencies that will help them to harness the power of digital technologies as both creators and consumers. A comprehensive approach to K-12 Computer Science education includes learning about the following five focus areas:

    View Framework ➝

    Programming

    By the end of high school, students should be able to create a simple computer program.

    Computing and Networks

    By the end of high school, students should understand and be able to use the tools and devices commonly used to build digital projects.

    Data

    By the end of high school, students should be able to explain how we use computers to create, store, organize, and analyze data.

    Technology and Society

    By the end of high school, students should be able to explore the ways in which technology and society have mutually shaped each other.

    Design

    By the end of high school, students should be able to apply design principles to the digital projects they create.