Docs section "Initialization"

boytchev · Jul 24, 2024 · 0a25086 · 0a25086
1 parent e8c6307
commit 0a25086
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ The shape and the motion of the figures are done in JavaScript.
 [<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-scene.jpg" width="150">](https://boytchev.github.io/mannequin.js/docs/example-scene.html)
 
 * [Mannequin Home](https://boytchev.github.io/mannequin.js/index.html)
-* [API documentation](https://boytchev.github.io/mannequin.js/docs/api.html)
+* [User guide](https://boytchev.github.io/mannequin.js/docs/userguide.html)
 * [Posture editor](https://boytchev.github.io/mannequin.js/src/editor/posture-editor.html)
 
 Mannequin.js is licensed under **GPL-3.0**.
diff --git a/docs/api-bg.md → docs/userguide-bg.md b/docs/api-bg.md → docs/userguide-bg.md
@@ -1,50 +1,22 @@
-This document is also available in [English](mannequin.md).
+This document is also available in [English](userguide.md).
 
 
 # Съдържание
 
-- **[Обща информация](#обща-информация)**
 - **[Инициализация](#инициализация)** (<small>[Минимална програма](#минимална-програма) | [Видове фигури](#видове-фигури)</small>)
 - **[Части на тялото](#части-на-тялото)** (<small>[Централни части на тяло](#централни-части-на-тяло) | [Горни крайници](#горни-крайници) | [Долни крайници](#долни-крайници)</small>)
 - **[Поза на тялото](#поза-на-тялото)** (<small>[Статична поза](#статична-поза) | [Динамична поза](#динамична-поза) | [Работа с пози](#работа-с-пози) | [Редактор на поза](#редактор-на-поза)</small>)
 - **[Други функционалности](#други-функционалности)** (<small>[Собствени цветове](#собствени-цветове) | [Скриване на части от тялото](#скриване-на-части-от-тялото) | [Собствени части на тяло](#собствени-части-на-тяло) | [Глобална позиция](#глобална-позиция)</small>)
 - **[Общност](#общност)**
 
-# Обща информация
-[**Mannequin.js**](https://github.com/boytchev/mannequin.js)
-е малка библиотека за правене движеща се фигура на манекен.
-Формата на фигурата и движенията ѝ се извършват изцяло в JavaScript.
-Изображението се генерира чрез [Three.js](https://threejs.org). Кликнете
-върху картинката, за да пуснете демонстрация на живо. 
 
 
-[<img src="snapshots/example-posture.jpg" width="150">](example-posture.html)
-[<img src="snapshots/example-figure-types.jpg" width="150">](example-figure-types.html)
-[<img src="snapshots/example-custom-body-parts.jpg" width="150">](example-custom-body-parts.html)
-[<img src="snapshots/example-point.jpg" width="150">](example-point.html)
-[<img src="snapshots/example-scene.jpg" width="150">](example-scene.html)
-
-Може да се пробвате да създадете собствени пози с онлайн [Редактора на Пози](../src/editorposture-editor.html)
-[<img src="snapshots/example-posture-editor.jpg">](../src/editor/posture-editor.html)
-
-Това е петата версия на библиотеката. Първата беше
-реализирана със софтуера Elica. Втората бе написана на
-C/C++ и OpenGL. Третата и четвъртата версии бяха пренаписани
-на ES5 JavaScript и Three.js. Петата версия използва ES6 модули.
-Още от първата си версия mannequin.js се използва в курса
-*Основи на компютърната графика* за студенти от специалност
-Компютърни науки от
-[Факултет по Математика и Информатика](https://www.fmi.uni-sofia.bg/en)
-към [Софийски Университет](https://www.uni-sofia.bg/index.php/eng).
-
-
-Mannequin.js е с лиценз **GPL-3.0**. Последната версия е **5.0** от юли 2024.
+# Инициализация
 
+Библиотеката **mannequin.js** се предоставя като JavaScript модул, който използва
+библиотеката Three.js.
 
-# Инициализация
 
-Библиотеката **mannequin.js** се предоставя като самостоятелен JavaScript
-файл, който трябва да се използва съвместно с three.js или three.min.js. 
 
 ### Минимална програма
 
@@ -53,43 +25,43 @@ Mannequin.js е с лиценз **GPL-3.0**. Последната версия
 ``` xml
 <!DOCTYPE html>
 <html>
-   <body>
-      <script src="../three.min.js"></script>
-      <script src="../mannequin.js"></script>
-      <script>
-         createScene();
-         man = new Male();
-      </script>
-   </body>
+	<head>
+		<script src="../src/importmap.js"></script>
+	</head>
+	<body>
+		<script type="module">
+			import "mannequin";
+			createScene( );
+			new Male();
+		</script>
+	</body>
 </html>
 ```
 
 Помощната функция `createScene()` създава сцената, осветлението, камерата,
-земята и т.н. С друга помощна функция `animate(t)` (тя не е използвана в
-минималния пример) се дефинира позата на фигурата в момент *t*. Ако сцената
-е създадена със собствена функция, трябва да се добави и изрично управление
-на анимационния цикъл.
+земята и т.н. `Male` конструира мъжка фигура.
+
+
 
 ### Видове фигури
 
-Фигурите в библиотеката се създават като инстанции на класовете
-`Male(height)`, `Female(height)` или `Child(height)`, където
-незадължителният параметър *height* е относителният размер на
-фигурата. По подразбиране `Male` има височина 1.00, `Female` има
-височина 0.95 и `Child` има височина 0.65 ([пример на живо](https://boytchev.github.io/mannequin.js/examples/example-figure-types.html)):
+Фигурите в библиотеката се създават като инстанции на класовете `Male(height)`,
+`Female(height)` или `Child(height)`, където незадължителният параметър *height*
+е относителният размер на фигурата. По подразбиране `Male` има височина 1.00,
+`Female` има височина 0.95 и `Child` има височина 0.65 ([пример на живо](https://boytchev.github.io/mannequin.js/examples/example-figure-types.html)):
 
 [<img src="examples/snapshots/example-figure-types.jpg">](https://boytchev.github.io/mannequin.js/examples/example-figure-types.html)
 
 ``` javascript
-man = new Male();
+var man = new Male();
 man.position.x = 20;
 man.turn = -120;
 :
-woman = new Female();
+var woman = new Female();
 woman.position.x = -20;
 woman.turn = -60;
 :
-kid = new Child();
+var kid = new Child();
 kid.position.z = -7
 :
 ```
@@ -105,6 +77,7 @@ kid.position.z = -7
 `Male` и `Female` придават мъжествена и женствена поза.
 
 
+
 # Части на тялото
 
 Всички видове фигури имат една и съща структура. Например, дясната ръка

diff --git a/docs/api.md → docs/userguide.md b/docs/api.md → docs/userguide.md
@@ -1,47 +1,22 @@
-Този документ е наличен и на [български език](mannequin-bg.md).
+Този документ е наличен и на [български език](userguide-bg.md).
 
 
 # Table of contents
 
-- **[About](#about)**
 - **[Initialization](#initialization)** (<small>[Minimal program](#minimal-program) | [Figure types](#figure-types)</small>)
 - **[Body parts](#body-parts)** (<small>[Central body parts](#central-body-parts) | [Upper limbs](#upper-limbs) | [Lower limbs](#lower-limbs)</small>)
 - **[Body posture](#body-posture)** (<small>[Static posture](#static-posture) | [Dynamic posture](#dynamic-posture) | [Working with postures](#working-with-postures) | [Posture editor](#posture-editor)</small>)
 - **[Other functions](#other-functions)** (<small>[Custom colors](#custom-colors) | [Hiding body parts](#hiding-body-parts) | [Custom body parts](#custom-body-parts) | [Global position](#global-position)</small>)
 - **[Community](#community)**
 
-# About
-[**Mannequin.js**](https://github.com/boytchev/mannequin.js)
-is a simple library of an articulated mannequin figure. The shape
-of the figure and its movements are done purely in JavaScript.
-The graphics is implemented in
-[Three.js](https://threejs.org). Click on an image to open a live demo.
 
-[<img src="snapshots/example-posture.jpg" width="150">](example-posture.html)
-[<img src="snapshots/example-figure-types.jpg" width="150">](example-figure-types.html)
-[<img src="snapshots/example-custom-body-parts.jpg" width="150">](example-custom-body-parts.html)
-[<img src="snapshots/example-point.jpg" width="150">](example-point.html)
-[<img src="snapshots/example-scene.jpg" width="150">](example-scene.html)
 
-You can try and build your own posturs with the online [Posture Editor](../src/editor/posture-editor.html)
-[<img src="snapshots/example-posture-editor.jpg">](../src/editor/posture-editor.html)
-
-This is the fifth incarnation of the mannequin figure library. The first one was
-implemented in Elica. The second one was implemented in C/C++ and OpenGL. The
-third and fourth ones were implemented in ES5 JS/Three.js. The fifth version
-uses ES6 modules. Since its first incarnation, mannequin.js is used in the
-course *Fundamentals of Computer Graphics* for Computer Sciences undergraduate
-students from the [Faculty of Mathematics and Informatics](https://www.fmi.uni-sofia.bg/en) at [Sofia University](https://www.uni-sofia.bg/index.php/eng).
-
-
-Mannequin.js is licensed under **GPL-3.0**. Latest version is **5.0** from
-July 2024.
+# Initialization
 
+The **mannequin.js** library is provided as a JavaScript modulefile that uses
+Three.js. 
 
-# Initialization
 
-The **mannequin.js** library is provided as a single JavaScript file that has to
-be include along with three.js or three.min.js. 
 
 ### Minimal program
 
@@ -50,45 +25,57 @@ Here is a minimal program that creates a male figure in the browser ([live examp
 ``` xml
 <!DOCTYPE html>
 <html>
-   <body>
-      <script src="../three.min.js"></script>
-      <script src="../mannequin.js"></script>
-      <script>
-         createScene();
-         man = new Male();
-      </script>
-   </body>
+	<head>
+		<script src="../src/importmap.js"></script>
+	</head>
+	<body>
+		<script type="module">
+			import "mannequin";
+			createScene( );
+			new Male();
+		</script>
+	</body>
 </html>
 ```
 
-The helper function `createScene()` provides default scene, lighting, camera, ground, and so on. Another helper function, `animate(t)` is responsible for defining figures' postures at moment *t*. If the scene is created with a custom function, then it should also manage the animation loop by itself.
+The helper function `createScene()` provides default scene, lighting, camera,
+ground, and so on. `Male` constructs a male figure.
+
+
 
 ### Figure types
 
-Mannequin figures are created as instances of classes `Male(height)`, `Female(height)` or `Child(height)`, wherethe optional *height* is the relative size of the figure. By default `Male` has height 1.00, `Female` has height 0.95 and `Child` has height 0.65 ([live example](https://boytchev.github.io/mannequin.js/examples/example-figure-types.html)):
+Mannequin figures are created as instances of classes `Male(height)`, `Female(height)`
+or `Child(height)`, where the optional *height* is the relative size of the figure.
+By default `Male` has height 1.00, `Female` has height 0.95 and `Child` has height
+0.65 ([live example (https://boytchev.github.io/mannequin.js/examples/example-figure-types.html)):
 
 [<img src="examples/snapshots/example-figure-types.jpg">](https://boytchev.github.io/mannequin.js/examples/example-figure-types.html)
 
 ``` javascript
-man = new Male();
+var man = new Male();
 man.position.x = 20;
 man.turn = -120;
 :
-woman = new Female();
+var woman = new Female();
 woman.position.x = -20;
 woman.turn = -60;
 :
-kid = new Child();
+var kid = new Child();
 kid.position.z = -7
 :
 ```
 
-These three classes have a common predecessor &ndash; the class `Mannequin(feminine,height)`, where the boolean paremeter *feminine* defines whether the shape is feminine or masculine
+These three classes have a common predecessor &ndash; the class `Mannequin(feminine,height)`, where the boolean paremeter *feminine* defines
+whether the shape is feminine or masculine
  ([live example](https://boytchev.github.io/mannequin.js/examples/example-height.html)):
 
 [<img src="examples/snapshots/example-height.jpg">](https://boytchev.github.io/mannequin.js/examples/example-height.html)
 
-The difference between using different figure classes is that `Mannequin` sets a default neutral posture of the figure, while `Male` and `Female` set a default male and female posture.
+The difference between using different figure classes is that `Mannequin` sets
+a default neutral posture of the figure, while `Male` and `Female` set a default
+male and female posture.
+
 
 
 # Body parts

diff --git a/index.md b/index.md
@@ -2,13 +2,20 @@
 
 # Mannequin.js
 
-**Mannequin.js** is a simple library of an articulated mannequin figures.
+**Mannequin.js** is a library of an articulated mannequin figures.
 The shape and the movements of the figures are done purely in JavaScript.
 The library is used in the course *Fundamentals of Computer Graphics*
 for Computer Sciences undergraduate students from the
 [Faculty of Mathematics and Informatics](https://www.fmi.uni-sofia.bg/en)
 at [Sofia University](https://www.uni-sofia.bg/index.php/eng).
 
+
+### Documentation
+
+* [User guide and API](https://boytchev.github.io/mannequin.js/docs/userguide.html)
+* [Ръководство на потребителя](https://boytchev.github.io/mannequin.js/docs/userguide-bg.html)
+
+
 ### Demos
 
 <div class="gallery">
@@ -34,11 +41,7 @@ at [Sofia University](https://www.uni-sofia.bg/index.php/eng).
 	</a>
 </div>
 
-* [API documentation](https://boytchev.github.io/mannequin.js/docs/api.html) (in English)
-* [АПИ документация](https://boytchev.github.io/mannequin.js/docs/api-bg.html) (на български)
-
-
-You can try and build your own posturs with the online [Posture Editor](https://boytchev.github.io/mannequin.js/src/editor/posture-editor.html):
+### Posture editor
 
 [<img src="https://boytchev.github.io/mannequin.js/docs/snapshots/example-posture-editor.jpg">](https://boytchev.github.io/mannequin.js/src/editor/posture-editor.html)