Canvas #1 shows a set of points 8 points and line segments connecting them. You can check this file to see the WebGL code I use to draw a line-strip. The file also includes the fragment and vertex shader code.

Canvas #2 shows a curve C generated using "Chaikin Algorithm for B-Splines". You can find my implementation of the algorithm here. I based my code on the lecture notes of Prof. Zorin [link], and used as input the same 8 points used in canvas1. The figure shows the result after 3 iterations.

Canvas #3 shows 30 meridians of the curve C as is revolved around the y-axis. To do this we iterate from 0 to 2*PI and draw the same lines but with different rotation. You can see the code that generates the meridians here, and the matrix methods here.

Canvas #4 shows the meridians plus the parallels. To draw the parallels we generate a circle [code]. Then for each point p of the curve C we draw the same circle, but with a transformation matrix that scales it to have radius = distance to y-axis, and translates it have y-position = p.y [code]

Both canvas use the same vertex and fragment shader [code]. The fragment shader paints the front-lines in black, and the back-lines in gray.

Canvas #5 shows the surface generated by revolving C around the y-axis. To generate the surface I used the code provided by Prof. Perlin to generate a parametric surface [code]. I made some modifications to the code because our parametric function f is discrete in u. My parametric function is basically the same we used for the previous canvas. The parameter u moves along the points of C, and the parameter v gives the rotation angle around the y-axis [code].

The shader uses in canvas#5 is the one providing for this homeworks, and includes an implementation of phong shading. [code]

Canvas #6 shows only a modification in the shader. We added diffused noise based on the the original position of the vertex (vXYZ) [code]

Canvas #7 shows the same surface but we have added noise to the x,y,z coordinates. The only modification was done on our parametric function where, after calculating x,y,z revolving the curve, I added noise to the coordinates. For this I used a javascript implementation of noise provided by Prof. Perlin [code]. The cool thing of adding the noise at that point, instead on in the shader, is that the surface is generated with the correct normals :) and the shading works with no problems

In contrast, for canvas #8 we added noise in the vertex-shader [code]. Both shader only use the position of the points, so adding the noise there is the most simple option. Another option would be to draw the meridians and the parallels with the transformed points, but it would require us to iterate over the points of C for each meridian (resp. points of the parallels).