Tutorial Post 3: Data Organisation.

Tutorial Post 3: Data Organisation.

Data organisation determines what can be designed.
Consider the following simple example with a model consisting of a single line segment and a single triangle:

Mki3d is written in JavaScript, so its data are being saved in JSON format:

{ "model":{ "segments":[ [ {"position":[0,0,0],"color":[1,1,1],"set":0}, {"position":[0,3,0],"color":[1,1,1],"set":0} ] ], "triangles":[ [ {"position":[-3,0,0],"color":[1,1,1],"set":0}, {"position":[-3,3,0],"color":[1,1,1],"set":0}, {"position":[0,3,0],"color":[1,1,1],"set":0} ] ] }, "view":{ "focusPoint":[-3,0,0], "rotationMatrix":[[1,0,0],[0,1,0],[0,0,1]], "scale":1, "screenShift":[0,0,60] }, "projection":{ "zNear":0.25, "zFar":300, "zoomY":4 }, "backgroundColor":[0,0,0], "cursor":{ "position":[-3,0,0], "marker1":{"position":[-3,0,0], "color":[1,1,1],"set":0}, "marker2":null, "color":[1,1,1], "step":1 }, "clipMaxVector":[100000000000000000000,100000000000000000000,100000000000000000000], "clipMinVector":[-100000000000000000000,-100000000000000000000,-100000000000000000000], "light":{ "vector":[0,0,1], "ambientFraction":0.2 }, "set":{ "current":0 } }

The shape of the designed object is defined by "model". The model consists of "segments" and  "triangles":

• "segments" is an array of elements, where each element is an array of two endpoints. 
•  "triangles" is an array of elements, where each element is an array of three endpoints. 

Each endpoint has following attributes:

• "position" - array of X,Y,Z coordinates in the model space
• "color" - array of R,G,B color components of the endpoint
• "set" - integer index of the set (used for auxiliary classification of the endpoints)

Note that each endpoint has its own attributes and is independent on other endpoints. A segment or triangle can have different colors and different set indices at different endpoints. Also the endpoints having the same position are not considered to be the same 'vertex'.

Besides "model" there are some other data:

• "view" describes the observer's position and orientation relative to the model space. From the observer's point of view the "focusPoint" of the model is first moved to oberver, then the model is rotated by rotation matrix, and finally the model is shifted by  "screenShift" vector.
• "projection" defines the so called 'view frustum' - parameters of perspective projection. 
• "backgroundColor"  is RGB background color.
• "light" defines direction vector of diffuse lighting component and what is the fraction of ambient light component. (Light is white and-in the editor-the diffuse directional light is emited in both  directions: "vector" and  -"vector".)
• "cursor" describes the position and color of the cursor. Since markers are used for inserting segments and triangles together with the cursor, they are listed inside "cursor" object. 
• "clipMaxVector", "clipMinVector",  define the corners of clipping box.
• "set" stores the value of "current" set index.

Tutorial Post 2: Markers - Inserting Segments and Triangles.

Tutorial Post 2: Markers - Inserting Segments and Triangles.

Markers, together with cursor,  are used for manual insertion of line segments  and triangles. There are two markers: MARKER 1 and MARKER 2. To start inserting press ENTER key. This sets MARKER 1 to the current position of the cursor:

When you move the cursor you will see a line between the cursor and MARKER 1. When you press ENTER key again this line segment is added to your designed object:

Note that MARKER 1 is also set to the new position of the cursor, since, in many cases, the user wants to insert another line starting in this position. (Inserting can be canceled by ESCAPE or 'C' key.)

To insert a triangle set MARKER 1 in the first endpoint of the triangle, move the cursor to the second endpoint of the triangle and press 'T' to set MARKER 2:

Then move the cursor to the third endpoint of the triangle and press ENTER:

New triangle is inserted, MARKER 2 is canceled, and MARKER 1 is set to the current position of the cursor.

Markers can be canceled by pressing either ESCAPE or 'C' key:

Tutorial Post 1: Cursor.

Tutorial Post 1: Cursor.

Position and Movement.

To see current position of the cursor press SHIFT key. The position is displayed in the upper right corner of the screen:

You can move the cursor using ARROWS and 'F', 'B', 'V' keys while the SHIFT key is pressed down. (While you move the cursor its current position is displayed in the upper right corner.)

You can also set cursor position in the 'Inputs Page'. Press the sequence of keys 'Q' 'I' and then input the values in the fields  'CURSOR X', 'CURSOR Y', 'CURSOR Z'.

Shape and Orientation of the Cursor.

The orientation of the cursor within the model space is fixed. The markings in its shape let you use the cursor as a kind of compass indicating X, Y and Z direction as follows:

The skew segment incident to the more horizontal line and crossing the more vertical line indicates which plane is most parallel to the screen and in which directions the cursor will be moved by arrow keys.