JSXGraph
The following interactive activities were made using JSXGraph, a cross-browser JavaScript library for interactive geometry, function plotting, charting, and data visualization. These examples were made for the open educational resources website for the University of Alberta.
Using this interactive tool, you can observe the (vector) components and scalar components of a vector. Observe how the vector is represented in CVN. Change the direction of the vector by the angle slider and observe the values of the scalar components
The following interactive example demonstrates the center of gravity of a set of particles. The particles are all located in a plane, say z=0. Add particles (up to 10 particles) with different weights and arrange their locations by dragging them around to observe the variations in the location of the center of gravity.
The following interactive example demonstrates a beam cross section, its centroid and its moments of inertia about the axes (horizontal and vertical) crossing the centroid of the area. You can change the dimensions of each sub-area and also set the positions of the flanges (top parts) by horizontally dragging them. The purpose of this example is to let you observe the variations of the location of the centroid and the moments of inertia as you change the shape of the area.
vPython
The following interactive activities were made using vPython, a tool to create navigable 3D environments and animations using Python. These examples were also made for the open educational resources website for the University of Alberta. These examples are best viewed from a desktop web browser.
With this tool, similar to the 2D Vector tool, you can choose the direction angles for the vector and it’s magnitude. Observe the components as well as the Cartesian Vector Notation.
The following interactive tool illustrates 
. Use the sliders to change the angles of 
and 
with the Cartesian axes, and observe the resultant of their cross product.
The following interactive example demonstrates the vector formulation of the moment of a force about a point in three dimensions. Observe that any point along the line of action can be used for the calculation.
Augmented Reality Experiences
These AR Experiences were created using AR.js, which is built off of A-Frame, used to create cross-compatible browser based Augmented Reality experiences. These examples were made for the Department of Mechanical Engineering, to help gain more interest from the Faculty into using AR experiences as an educational resource. This section of this page will require you to have either use a desktop browser or print the marker pictures. To view these experiences you will need to use a QR scanner to navigate to the website on your mobile browser(you can also tap on the QR code here), once you have granted camera access to your device, use the AR marker to the right of the QR code to view the model. The experiences are also best viewed in “landscape” mode.
This experience illustrates the different configurations of a planetary gear. This lesson is typically difficult for students to conceptualize, by using augmented reality the lesson can be taught with greater clarity in much less time.
The purpose of this experience is to conceptualize the inner workings of a cordless drill. The specific components of interest are the compound planetary gear and clutch. Use the slider at the top right of the screen to adjust the opacity of the drill housing. The speed of the drill can be adjusted by using the slider below the opacity slider. To visualize what happens when the drill gets over torqued, press the clutch slipping button, notice how the ball bearings get pushed in and out of the detents on the ring gear while it rotates freely.
This experience was used during the pandemic to introduce a project to third year Civil Engineering students to help portray the expectations of their final submission.
