Transform Toys
This is a demo that Mike Gleicher made originally to show in class. Haochen Shi and Jerry Kou helped add features and make the program more usable.
While you can look at the program source code (for example using "view source"), we don't recommend that you try to read the code. Use the program to understand the little "mini programs" - the actual program itself is an interpreter for these mini programs.
You can put things into "reverse" mode and watch the program run "backwards" (to help see how things work when you think about it as local to global). Note that programs with save/restore do not run backward.
Also, note that
fillRectreally draws a rectangle (using a path) that has all of its vertices transformed. In actual Canvas, a
fillRectdraws an axis-aligned rectangle.
Transform Toy is the demo program with a few examples.
The simple translation demos are used in Lecture 4 (2022) when we first introduce the concept of transformation.
Note: The last example of either page is an example that allows customized commands! Have fun with it!
There is also a simple mouseover demo from lecture 4.