Tutorial Post 13: Cursor Jumping.

Tutorial Post 13: Cursor Jumping.

While you are moving the cursor with arrow keys and 'B','V','F' keys, the set of reachable positions is limited to the three-dimensional grid of points in the model space separated by cursor step distance in each dimension. You can change the cursor step on the Inputs Page ('QI...'): 

(Note that changing the cursor step also updates the view scale, so that the cursor's size and step remain the same to the observer's view.)
In some cases you may want to move a cursor to some hardly reachable position. For example, you have inserted   a regular polygon (as in Tutorial Post 12) and you want to move the cursor one of its vertices. You may move the the cursor close to the desired vertex (endpoint) and then use the option: 'JUMP TO THE NEAREST ENDPOINT' on the Cursor Menu ('QCJ').

Then the cursor should be moved to the nearest endpoint:

(Note that you have also the option: 'JUMP TO THE NEAREST SELECTED ENDPOINT', which could be useful if you can select between closely placed sets of endpoints.)

Other options for  'CURSOR JUMPING' are available as a sub-menu of  Constructive Methods ('QMJ...').

You can move the cursor to the center of visible constructive points. You can use this option together with the command that sets the constructive points 'U' and 'W' on the bounding box of the selected endpoints ('QMB') available on the Constructive Methods Menu:

 When 'U' and 'W' are the only visible constructive points, the key sequence 'QMJ0' moves the cursor to the center of the bounding box of the selected endpoints.

You may also move the cursor to the centroid (arithmetic mean) of the selected endpoints 'QMJC'. However, be aware that there could be many endpoints in some position, where you see only one selection mark.
There is also option to move the cursor to the intersection of the line 'AB' and the plane 'CDE', where 'ABCDE' are visible constructive endpoints (key sequence 'QMJ1'). See how the yellow cursor has been placed on the figure below:

Tutorial Post 12: Regular Polygons.

Tutorial Post 12: Regular Polygons.

You may create regular polygons. The option is available on the Constructive Inserting Menu ('QMI...').  Either press the key sequence 'QMI3'  to insert the outline of the polygon made of segments, or press 'QMI4'  to insert the triangles that are sectors of the polygon surface. 

The polygon is placed on one of the planes OXY, OXZ, OYZ, that is most parallel to the screen, and it is centered at the cursor. The endopoints of the polygons' elements are indexed with a new (unused set index). Thus you can select them wit 'QSS' for further manipulations.
The number of polygon's vertices is a parameter that can be set on the Inputs Page ('QI...'):

Tutorial Post 11: Three-point Transformation.

Tutorial Post 11: Three-point Transformation.

Three-point transformation 'ABC' -> 'DEF' transforms selected endpoints by isometric transformation that transforms the point 'A'  to the point 'D', the half-line 'AB' to the half-line 'DE' and the plane 'ABC' to the plane 'DEF'.  Three-point transformation is available on the constructive methods sub-menu ('QM...').

Before you can apply the transformation you need to set six constructive points ('QPS...' - see Tutorial Post 5) and select the endpoints to be transformed ('QS...' - see Tutorial Post 4):

Then you can execute the transformation (i.e. by the key sequence 'QMT'):

Note that the selected point from point 'A' has been transformed to the point 'D' and the selected segment from 'AB' has been transformed on the line 'DE'.

On the following view from another perspective you can see that the selected points from the plane 'ABC' are transformed on the plane 'DEF'. 

Display mode.

Display mode.

In the standard (editing) mode you are forced to see the cursor and the upper message on the displayed view:

  Now you can remove the cursor and the upper message from the canvas by pressing the 'D' key:

This is useful if you want to save the current view into image file. You can take a screen-shot or - if you run mki3d in the web-browser - you can save graphics on the right-mouse-button pop-up menu. 

(I have implemented this feature, because I wanted to make some stereoscopic views that don't look like the cursor's selfie ;-)

Pressing any key resumes standard display mode for further editing.

Red-blue stereoscopic mode.

Red-blue stereoscopic mode.

Stereoscopic mode visible with red-blue glasses has been added to mki3d. You can toggle stereo/mono mode by pressing the sequence of keys: 'QVS'  (i.e. the 'S' option on the 'View' submenu).
Parameters of the stereoscopic display, such as intensities of the red and blue components and "eye shift"  (half of the  distance between the eyes) can be fine-tuned on the Inputs Page ('QI').

Here you can find some stereo more screen-shots.

Tutorial Post 10: Inputs Page.

Tutorial Post 10: Inputs Page.

You can invoke Inputs Page by pressing the sequence of two keys: 'Q' 'I'

Inputs Page is used for typing in some parameters in text input fields.
Type in the values of the parameters in respective text fields and press ENTER. You may also press ESC or 'Q' to leave the Inputs Page without changing the parameters.

Tutorial Post 9: Action Modes.

Tutorial Post 9: Action Modes.

Action mode specifies the actions of  'B', 'V', 'F' and arrows  keys. The default action mode is rotation:

 In this mode, pressing one of 'B', 'V', 'F' and arrows  keys rotates  the model  in selected direction around its focus point, which is, usually, the current cursor position. 

To move the cursor you heave to select cursor mode:

This mode is selected when the Shift key is pressed down. When you release the Shift key, the rotation mode is restored. While you are cursor in the cursor mode, the current position of the cursor is being displayed:

 (The simplest way to see the current cursor position is to press the Shift key. Note that after releasing the Shift you will have rotation mode.)

There are also action modes for moving, 90-degrees rotations, and mirroring of the selected endpoints. You can set these modes on the action modes menu which is invoked by pressing the 'A' key:

If you accidentally enter such "selected endpoints mode" while there are no selected endpoints, you may have impression that the application is not responding: 

 Just press and release Shift key to escape back to rotation mode.

Tutorial Post 8: Light.

Tutorial Post 8: Light.

The final color of the pixel on the screen is its RGB color vector multiplied by its brightness which is a factor with a value between zero and one. Edges are displayed in their full brightness (i.e. brightness=1.0). The brightness of the triangle is a sum of two components: 

• a fixed ambient component (default initial value is 0.2)
• a directional component

The value of the directional component depends on the angle between the direction of the directional light and the plane of the triangle. The more perpendicular the triangle is to the direction of of the light, the greater is the value of directional component of its brightness. 

Initially the directional light is parallel to the Z axis af the model space:

When the model is rotated, you can see the sides that are parallel to the direction of the light (they have only ambient component of the brightness):

You can set the direction of the light to the direction you are looking at, by pressing the sequence of the keys 'QDL' (i.e. 'L' key on data sub-menu):

Tutorial Post 7: Colors.

Tutorial Post 7: Colors.

You can invoke color-chooser sub-menu to select the color of the cursor ('QCC') or of the background  ('QDB'):

You can choose one of the eight predefined colors by pressing one of the keys: '0', ... , '7'.

You can also 'fine tune' each component of the color  by pressing one of its two keys. For example, the red component is increased by pressing 'R' and it is decreased by pressing 'E' (next key left to 'R' on QWERTY keyboard).

If you want to reuse  some color that is already used in the model you can select some endpoint with this color and use the 'N' key. The 'N' key cyclically selects colors from the selected endpoints. (Sometimes it is hard to select a single endpoint if other endpoints are in the same place.)

Note that the color-chooser sub-menu is persistent. To leave it, you have to press one of the keys: 'Q', ESCAPE, ENTER.    

Tutorial Post 6: Clipping.

Tutorial Post 6: Clipping.

Sometimes the fragment you want to edit is obscured by some other objects. You may use use clipping to prevent drawing the fragments that are outside  specified clipping box. 

Go to the clipping sub-menu with the sequence of key presses 'QX':

In the following example you see blue cube without any clipping:

Note the position and orientation of the cursor. When you invoke clipping sub-menu ('QX') and press the left arrow on it, then you move the 'maximum'  X coordinate of the clipping box to the X coordinate of the cursor. Clipping box is aligned with the model space. The direction of clipping is determined the same way as the direction of moving the cursor. 

Now you can see the smaller red cube hidden inside the blue one as the fragment of the blue box outside of the clipping box is not drawn.  (If you clicked 'QX' left arrow again, then the  X coordinate of the clipping box would be reset to its initial, very large, value. Arrows and 'B', 'F' keys on clipping sub-menu act as toggle switches.)

Let us press 'QX' and down arrow:

The maximum Y coordinate of the clipping box has been set to the Y coordinate of the cursor.

To cancel  clipping press 'QX' and then 'R'. (Actually, it resets the clipping box to its initial, very large  volume.)

  

Tutorial Post 5: Constructive Points.

Tutorial Post 5: Constructive Points.

Constructive points are used to denote positions in the model space. They are used mainly as the parameters of constructive methods. Constructive points sub-menu is invoked by pressing sequence of keys 'QP'.

You have the options to:

• set a point in current cursor's position'
• find a constructive point with a cursor by its name and show its label
• hide all the labels of constructive points

Constructive points are named with single letters: 'A' ... 'Z'.

In this example we select some endpoints and set two constructive points 'A' and 'B':

Then we execute a constructive method that moves the selected endpoints by the vector 'AB':

Note that the labels of constructive points are displayed as black letters on white rectangles with the lower left corner of the rectangle in the position of the constructive point. The labels are always facing the observer:

Tutorial Post 4: Selected and Bookmarked Endpoints.

Tutorial Post 4: Selected and Bookmarked Endpoints.

Many actions (painting, deleting, some constructive methods) are performed on the sets of the endpoints. The selection sub-menu is invoked by sequence of key presses 'QS':

Here you can find options for selecting the endpoints. For example, initially the default (cancelled) clipping box is so large that you can select all the endpoints by pressing 'X'.

The selected endpoints are marked by little x-shaped crosses of the cursor's color:

(Note that the actual number of selected endpoints in the example is 12, since each segment has two endpoints. If many selections are drawn in the same place then we see only one selection mark.)

Some actions (e.g. folding or triangles-triangles intersection) operate on two sets of endpoints simultaneously. Therefore  you can specify a second set of endpoints: bookmarked endpoints. You can change the selected endpoints into bookmarked endpoints by pressing 'B' on the selection sub-menu. The bookmarked endpoints are marked by little squares of the cursor's color:

Each time you bookmark the selected endpoints, the previous bookmarks are cancelled. Note that you can cancel bookmarks by bookmarking the empty set of selected endpoints.

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: