Hierarchal Modeling Project but with Matrix Transforms

Author: Tyler Johnston
Script: hw3.js
Tools: JavaScript HTML Canvas 2D GL Matrix
Date Posted: 01/06/2022

Project Description

Utilizing GL-Matrix libraries, I created a soft-copy of my hierarchal modeling project.

The intent here was to replace canvas context changes with matrix transforms.

Outline of app.js

  • drawCircle():

    • Original code from HW2. Draws a circle of a specific color.

  • drawChainLink():

    • Original code from HW2. Draws what appears to be a metal ring.

  • moveToTransform():

    • Used only in testing out the matrix transforms.

  • lineToTransform():

    • Used only in testing out the matrix transforms.

  • arcTransform():

    • Utilized matrix transforms to perform context.arc

  • drawCircleTx():

    • Utilized arcTransform to accomplish same functionality as drawCircle

  • drawChainLinkTx():

    • Utilized arcTransform to accomplish same functionality as drawChainLink

  • handleDirectionAndSpeed():

    • This is the code that increments/decrements our global position each frame.