COMPUTER GRAPHICS ASSIGNMENT
1.Create your own original fragment shader (Create similar Shader Example)
2. Add multiple light sources. (To: Raytrace Breakdown)
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 t.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.
3. Raytrace 2 Breakdown
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.
4. Implement Refraction as you can see in the 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.
5. How the intersection of half-spaces along a ray can be used as a way to ray trace to a cube. Creatively apply noise() and turbulence() based textures. 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.
6. 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.
7. 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. (CanvasRenderingContext2D)
8. Complete the implementation of the matrix class M.js. Start with Canvas example 1 which contains the tumbling cube and the dancing human figure. Implement all the methods in M.js. When you do this, the tumbling cube and the dancing figure will work
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;
9. Try creating your own original animated scene in a canvas, animated by using M.js.
10. The code that we wrote Is in Canvas Example 3 minus the M.js source file. You need to provide the version of M.js that you wrote to make things work.
11. Add sphere and torus functions to S.js, and incorporate them into a working example. Be creative: Create a creature, an animated character, a snowman, or something else original.
12. 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.
There is already a regular octahedron in the example code. See if you can create the other four regular polyhedra: tetrahedron, cube, dodecahedron and icosahedron.
13. Extend what has been implemented so far into a way of drawing multiple multi-spline curves (the example shows only a single multi-spline curve). You can use either the Hermite or the Bezier basis. (Canvas Example 4)
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. Show an example of both Hermite 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. 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. Extend this code in various interesting ways. If you open index.html in that downloaded directory Canvas Example 5, 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. Do something really spectacular.
16. Open Webgl Example folder and do as the readme file says.
17. For final project, use the software base that has been developed so far. In addition to that, do something else using a completely different external package (such as Unity or THREE.js).
