Lengthy project in JavaScript M.js Framework and WebGL

1. You should set up a subdirectory of your web site. Name this subdirectory "graphics". It should have a main "index.html" file, and that file should link to the various homework assignments.

In order to make sure your files have the proper permissions (so that the graders can read them), follow these instructions.

2) Here is a zip file of the code we created in class.

Your assignment, is to create your own original fragment shaded example. Don't just copy what I did with minor variations. Be original. Create cool patterns, and things that animated over time. Use the sin () and cos() functions to make crazy stripes. Have fun with it.

3) To get started, download the zip file for the ray tracer breakdown, and start to familiarize yourself with the contents of index.html in that folder. For next assignment I'd like you to try adding to that simple ray tracer in several ways. The point here is for you to experiment, and learn your way around the code. Here are some things you can try -- feel free to add features that are not on this list. The more things you add the better:

• Add multiple light sources.

• See if you can figure out how to make different colored lights.

• Create a second sphere 
        Hint: The visible sphere is the one with the lowest positive value of.

• Animate the two spheres so that they intersect each other

• Add textures to your sphere(s) using functions such as sin ().

• Add a cool background gradient.

4) Here, in one place, are the notes for our various lectures to date.

We started to go over new material -- procedural noise-based textures. I went through the example that you can see on-line that implements a procedural bubble, and we began to discuss the implementation of the turbulence() function.

HOMEWORK: Implement Shadows. This should be very simple. You just need to modify the code within the part of the Phong algorithm that loops over light sources. for each light source shoot a ray from the surface in the direction of that light source. If the ray hits another sphere, then don't add in the diffuse and specular reflection from that light.

5) EXTRA CREDIT: Implement Refraction, and as you can see in the online notes. This simulates a glass sphere. You can assume an index of refraction of 1.5 if you'd like, but feel free to choose a different one. In addition to a reflection ray, also compute a refraction ray that goes into the sphere, bending according to Snell's law. When the ray hits the back of the sphere (the second quadratic root, rather than the first one), then apply Snell's law again -- this time going from a higher index of refraction to a lower one, to compute the direction into which the ray re-emerges from the sphere.

6) Your homework assignment is to creatively apply noise () and turbulence () based textures. Have fun with this. See whether you can create fun and aesthetic patterns. Use sin () and cos() functions together with the noise() and turbulence() functions to create interesting effects. Apply the textures to different parts of the rendering process to get striking or unusual effects. Use color.

7) EXTRA CREDIT: Create flying saucer shapes, by doing Boolean intersection of two spheres. Remember, the portion of the ray that is inside the flying saucer is the intersection of the two spherical volumes. Which means that the ray enters at the maximum of the first (entering) roots of the spheres, and exits at the minimum o the second (exiting) roots of the spheres. If that first value of t is greater than that second value of t, then the ray has missed the flying saucer.

8) We interactively wrote some code using HTML5 CanvasRenderingContext2D. A zip file of the code we wrote is here good reference for the Properties and Methods of a HTML5 CanvasRenderingContext2D is here. Your Homework assignment, is to create something cool and fun using the tools of the CanvasRenderingContext2D -- the same environment that we played already. There are very few rules about this assignment other than to have fun with it and do something really awesome and creative. Make something that inspires you, perhaps a mini-game, a work of art, a short animation, a cool character or creature, or an interactive toy. Pretty much anything. The important thing is that you learn the tools while also using your imagination.

9a) Your homework, is to complete the implementation of the matrix class M.js. Start with canvas_example1.zip, which contains the tumbling cube and the dancing human figure that we implemented.

In the version posted on-line, I have left some of the methods in M.js unimplemented. Your assignment is to implement all the methods in M.js. When you do this, the tumbling cube and the dancing figure will work the way they worked in class. Look in M.js to see more detailed instructions about what is needed. Note that in the function M.scale(m, v) in the homework, the second argument can either be a number or an [x,y,z] array. You should check to see which it is. One way to do that is:

var x,y,z;

if (v instanceof Array) {

x = v[0];

y = v[1];

z = v[2];

}

else

x = y = z = v;

9b) Then for extra credit try creating your own original animated scene in a canvas, animated by using M.js.

10) The code that we wrote in class is in canvas_example3.zip, minus the M.js source file. You need to provide the version of M.js that you wrote to make things work.

11) Your homework is rather simple. I want you to add sphere and torus functions to S.js, and incorporate them into a working example. The only thing I ask is that you be creative: Create a creature, an animated character, a snowman, or something else original.

12) For extra credit, there are several other things you can do:

• Implement a function that creates a cube mesh (hint: your function can create six square-shaped parametric meshes, one for each face of the cube).

• Add extra arguments to your sphere, torus or tube functions so that you can create partial shapes, for example, a hemisphere.

• Add end caps to your tube to create a function that makes a cylinder shape.

• Implement some other sort of shape as well. Note that if you are already adding end-caps to your tube to make a cylinder, then you've already done the work to create a regular polygon function.

• I've already implemented a regular octahedron in the example code. See if you can create the other four regular polyhedral: tetrahedron, cube, dodecahedron and icosahedron.

13) We introduced cubic splines, and talked about Her mite splines. Then on Thursday we introduced Bezier splines. Course notes describing that material can be found, as usual, at the end of allnotes.html. We also implemented a way of drawing a multi-spline curve, where each segment of the multi-spline curve is an Her mite spline. You can download that code as canvas_example4.zip. In that folder, note that in addition to the final result index.html I also saved two intermediate versions during class, as indexA.html andindexB.html. Your homework, is to extend what I implemented in class into a way of drawing multiple multi-spline curves (my example shows only a single multi-spline curve). You can use either the Her mite or the Bezier basis. You should create an original example, using your own judgement to make it visually distinct and unique. One example is to try to "write" your name using multiple multi-spline curves.

14) For extra credit, you can do something more ambitious. Here are some ideas:

• Show an example of both Her mite and Bezier multi-spline curves.

• Use the cursor data to create an interactive system that allows the user to create and modify spline curves.

• Create a cool animated figure. Here you have an opportunity to use splines in two different ways: Both to draw the animated figure that is displayed on the screen, and as a way to smoothly vary animation values over time. I will be very impressed if you do this. :-) Remember that you have a number of ways of animating things, including your matrix commands, modifying the input values for your splines, and using the user's mouse/cursor input. You can also make splines in 3D, using the z coordinate.

15) During class on Thursday we implemented an interactive B-spline editor. You can download that code as canvas_example5.zip.

Your Homework, is to extend this code in various interesting ways. If you open index.html in that downloaded directory, you will see a list of suggestions for how you might do this. You should implement at least one or two of the items on that list.

For extra credit tackle some of the more ambitious items on that list, or do something really spectacular that surprises and impresses.

16) Your assignment, is to download the code that is included in webgl_examples1.zip, and follow the instructions in the file README.txt that you will find in that folder.

17) You should now start working on a final project. Think of the amount of work you should do as roughly twice as much as you would do for one week's assignment. For your final project, you need to use the software base that we developed. In addition to that, feel free if you'd like, for extra credit, to do something else using a completely different external package (such as Unity or THREE.js).