CSE470Homework#1: EXPLODE!
Big Picture:
Create an exploding object that fades to the background color as it reaches the boundary of the window. See example.gif for a very simple example. (Note: The example does not meet the requirements outlined here.)
Learning Objectives:
1. Understand and modify an existing webGL program.
2. Understand the structure and interactions between HTML, JS, webGL, GLSL.
3. Create a geometric object defined by triangles.
4. Learn how to create an animated graphics program.
5. Set color based on the dynamics of the program.
6. Learn to send data and other variables to the vertex shader.
7. Experiment with transformations in the vertex shader.
8. Create effective debugging code and comments.
Specifications:
1. Start with explode.html and explode.js files. You are required to add both code and code comments in the locations marked with ¡°HW470¡± in the HTML, GLSL, and JS codes.
2. Create an interesting object. Points will be rewarded for creativity.
a. The object must have one ¡°core¡± part and at least 4 outer parts.
b. The outer parts will animate with an outward explosion and the core will remain
stationary.
c. The object must have at least 30 vertices. (Note: 2d coordinate locations may appear
more than once in the vertex list.)
d. The object must be defined by solid colored triangles. (This means that each vertex of a
triangle is assigned the same color.)
e. In total, at least 5 colors should be used and at least 4 colors in the outward explosion.
3. Create an animation that makes the outer parts of the object explode radially outwards.
a. The initial geometry and the entirety of the ¡°explosion¡± must be contained inside the
window.
b. The core part of the object must remain stationary.
c. The modification of the vertices for the explosion must take place in the vertex shader.
4. Make the color of the outer parts fade to the background color (white) as they explode outward. a. The core part¡¯s color must remain constant.
Tips:
1. Get started early.
2. Get help early if you get stuck at any stage. (Come to class for more tips!)
3. Make sure you understand simpleSquare, rotatingSquare, and review the class notes.
4. See the Programming Tips list.
5. Make a plan of action before writing any code.
a. Recommended order: geometry, explode, color change
6. Work on one task at a time and thoroughly test before moving to next task.
7. PRINT debugging code! Avoid the silent program. (Unfortunately printing to the ¡°console¡± in
the shaders is not possible.)
8. Make a paper sketch of your object and label the vertices before coding them.
a. Note: You can build the object with parametric equations (e.g., a circle).
Submission Instructions:
1. Turn in your assignment on Canvas.
2. All assets you created must be in one zipped file. Do not include the Common folder.
The references to the files in the Common folder must be as done in the class examples.
3. Name your zip file: LastnameFirstInitial_HW1.zip.
4. We will grade the last submission only.
5. Review the late submission policy in the Syllabus.