Skip to main content

Computer Graphics and Multimedia: Assignment 2

Computer Graphics and Multimedia
Assignment 2
    • Notifications
    • Privacy
  • Project HomeComputer Graphics and Multimedia
  • Projects
  • Learn more about Manifold

Notes

Show the following:

  • Annotations
  • Resources
Search within:

Adjust appearance:

  • font
    Font style
  • color scheme
  • Margins
table of contents
  1. Module 1
    1. Introduction to Computer Graphics with WebGL
    2. Assignment 1
    3. Assignment 2
  2. Module 2
    1. Working with WebGL and JavaScript
    2. Assignment 1
    3. Assignment 2
  3. Module 3
    1. Animation and Geometric Transformations
    2. Assignment 1
    3. Assignment 2
  4. Module 4
    1. Viewing and Projections
    2. Assignment 1
    3. Assignment 2
  5. Module 5
    1. Lighting and Shading
    2. Assignment 1
    3. Assignment 2
  6. Module 6
    1. Texture Mapping and Matrix Stacks
    2. Assignment 1
    3. Assignment 2
  7. Module 7
    1. Skyboxes and Shadow Maps
    2. Assignment 1
    3. Assignment 2
  8. Module 8
    1. Modeling and Hierarchy - Building Scenes
    2. Assignment 1
    3. Assignment 2

CS 4722 - Computer Graphics and Multimedia

Module #1, Assignment #2

Exercise #1

The following RotatingSquare.html rotates a square without using the GPU to calculate the vertices.

Modify the RotatingSquare.html program and the RotatingSquare.js code so that it uses the GPU to calculate the vertices during the rotation and it uses the controls shown above to change its speed and to change it's direction.

Exercise #2

The following 3DSierpinskiTriangle.html program uses a Red-Blue-Green color scheme with a black side that you cannot see on the back of each 3-dimensional triangle. Here is the Javascript file: 3DSierpinskiTriangle.js

Change the program in the following ways:

  1. Change the name of the program to 3DSierpinskiTriangleSpin

  2. Change the color scheme so that there is a yellow side on the back

  3. Rotate the 3D structure through the x-axis and z-axis, so that it reveals it's yellow side. The y-axis values should not change.

  4. The structure should continually rotate without stopping, and a full rotation should take about 3 to 4 seconds. In other words, you have some flexibility in how fast you make it go, but keep it in that range.

The Beginning of the Spin:

1/20th of the full rotation:

1/5th of the full rotation:

2/5th of the full rotation:

3/5th of the full rotation:

Add a Comment block section to the top of your Javascript program in this assignment with the following information filled in using the following format: 

/*
 * Course: CS 4722
 * Section: .....
 * Name: ......
 * Professor: ......
 * Assignment #: ......
 */

Be sure your program runs without error, and be sure to add your name to the Javascript file in this assignment.

Deliverables

Turn in the files:

  • RotatingSquare.zip (with your HTML and JS files)
  • 3DSierpinskiTriangleSpin.zip (with your HTML and JS files)

Do this by uploading the file as an attachment to this Module's assignment drop box in D2L Brightspace.

Save

Annotate

Next Chapter
Working with WebGL and JavaScript
PreviousNext
Powered by Manifold Scholarship. Learn more at
Opens in new tab or windowmanifoldapp.org