Hierarchal Modeling with Canvas 2D

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

Project Description:

For this assignment, I decided to create a scene that mimicked a boss-fight from Sonic the Hedgehog games.

I figured the nature of this object's motion lended itself well to hierarchal modeling.

Hierarchal Modeling (notes from lecture)

Very often we model scenes that include repeated instances of very similar shapes, but:

  • The different instances can include displaced, rotated, or stretched versions of a “master copy”
  • The placement of some instances could be subordinate to the placement of others
  • In many cases, different instances do not rely on each other in just a linear/sequential fashion, but there is a “tree” of dependencies of their respective transforms

Hierarchically dependent transforms are facilitated in Canvas by the save()/restore() functionality

  • Instead of a single chain of transforms (actually single combined transform representing a chain), Canvas maintains a stack of composite transforms.
  • Issuing transforms, via Canvas commands, appends to the transform chain at the top of the stack
  • The save() command duplicates the top of the stack, and pushes the duplicate copy down the stack.
  • The restore() command pops the transform (transform chain, or combined transform, in fact) from the stack top.

Outline of app.js:

  • drawBackground()

    • Draws the sky, ground, and trees.

  • drawEggman()

    • Draws a ball with a robot face.

  • drawChainLink()

    • Draws a single chain link.

  • drawEggChain

    • Increments/decrements a global x,y value which is used each frame as the starting translation for the root of the parent object. This is what makes the object bounce around the screen.
    • We save our context with (x,y) as our new origin.
    • Our root object is going to be an Eggman(ball) in the center.
    • Our two children will then be two chain links, one on top, one on bottom.
    • Each chain link will have several subsequent chain link children, some of which will rotate themselves and their children each frame.
    • At the end of each chain sequence will be an Eggman(ball).

  • drawCircle()

    • Used in proof of concept only.

  • drawLine()

    • Used in proof of concept only.

Section Navigation