Skip to content

A collection of three JavaScript 2D computer graphics projects: a triggerable animation that lasts for a specific amount of time, an arc length parameterized animation, and a collision animation. All animations allow some form of user input.

Notifications You must be signed in to change notification settings

WolfCipher/2DComputerGraphicsPortfolio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Portfolio 1 for Honors CS559, Spring 2025

There are three main parts to this portfolio.

  1. Feed the Beagle page
  2. Train page
  3. Boids page

Feed the Beagle

  • Graphics that respond to click events: clicking the food bag starts an animation!
  • Actions that take time to unfold: the eating animation!
  • Many objects moving at once: the different body parts of the dog move
  • Sets of graphical objects that come and go: the food bag disappears and reappears
  • Non-trivial 2D Canvas animation: the eating animation!
  • Multiple animated hierarchical objects: the body parts of the dog
  • Use of basic transformations: translated and rotated the dog for the animation; scaled the bone design on the dog bowl

Train

  • Many objects moving at once: the different sections of the train move individually
  • Non-trivial 2D Canvas animation: the train's motion requires curves
  • Use of basic transformations: the train is translated and rotated
  • A complex curve through multiple points the train track
  • An object that moves along the complex curve and orients itself appropriately: the train itself
  • Arc length parameterization: constant train speed and rail ties

Boids

  • Many objects moving at once: the boids move individually
  • Non-trivial 2D Canvas animation: the boids bounce off the edges
  • Use of basic transformations: translated and rotated the boids
  • An SVG that uses instancing, arcs, and curves: there is an arc in the boids' tails, a curve in the boids' wings, and tags are used for the boids' wings.

Credit to CS559

This set of web pages forms a "workbook" assignment for CS559, Computer Graphics at the University of Wisconsin for Spring 2025.

Students should run a local web server and start with the index.html page. The html files may not work as "files" without a local server.

Information about the class is available on the course web: https://pages.graphics.cs.wisc.edu/559-sp25-regular/ https://pages.graphics.cs.wisc.edu/559-sp25-honors/

The for_students sub-directory contains files for the students to read and modify.

The libs sub-directory contains libraries used by the workbook. These have separate open source licenses provided in the directories.

The workbook content was primarily developed by Prof. Michael Gleicher with assistance from the course staff, including Young Wu, over the years.

Students are granted the right to use the workbook content for their work in class.

The workbook content is Copyright © 2025, Michael Gleicher.

This workbook is provided under a Creative Commons Attribution-NonCommercial 4.0 International license. See https://creativecommons.org/licenses/by-nc/4.0/ for the explanation and https://creativecommons.org/licenses/by-nc/4.0/legalcode for the license itself.

About

A collection of three JavaScript 2D computer graphics projects: a triggerable animation that lasts for a specific amount of time, an arc length parameterized animation, and a collision animation. All animations allow some form of user input.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published