In this part of the tutorial, we built upon the techniques developed in previous examples and draw a parametric surface, a sphere. More precisely, we show a portion of a sphere. The only difference between the previous examples and this one is in how faces are defined. Before, we had a set of vertices and each face was defined as a sequence of vertices. Here, we define a mesh of vertices; that is, a two-dimensional array of vertices, called tilesArray. Each element of this 30 by 30 array represents a vertex. Each vertex together with the three adjacent vertices in the array defines a face.
Download
- Flash CS3 file simple3d_sphere.fla
The fla file linked below contains complete, exhaustively commented source code for the Flash movie above. Below we discuss briefly the differences between the previous examples and this one.
The Code
/*
The main difference is that instead
of separate collections of vertices and faces we use a two-dimensional array of
vertices, tilesArray. Each element, tilesArray[i][j], represents a vertex. (Each vertex
is a point on the sphere.)
To each vertex (except when i or j are at their maximum) there corresponds a face
whose vertices are: tilesArray[i][j], tilesArray[i+1][j], tilesArray[i+1][j+1],
tilesArray[i][j+1]. This way, it is sufficient to remember the array of vertices
and the faces are already defined. Each face corresponds to an i,j vertex, as simple as that.
The values for i and j range from 0 to a fixed integer stored
in the variable nMesh. (nMesh is set in the script to 30.)
For parametric surfaces, x=x(t,s), y=y(t,s), z=z(t,s),
i and j correspond to consecutive values of the parameters t and s.
*/
/*
The somewhat different definition of faces, causes some minor differences
in renderView function. Namely, most of the loops are double loops with
respect to i and j. Also the coloring for each face has to be determined based
on the initial position of each face. The colors are determined
when renderView runs for the first time and stored in an array
called tilesColors.
*/
/*
Everything else in the code is exactly the same as before.
*/
............................
