Basic Tutorials

Basic Tutorials

Back to Table of contents

---

Minimal tutorial

• Quick Start

  • 1. Load the Library

Include the necessary JavaScript files in your HTML. You'll typically need vector.js as core components.
Add other modules like matrix.js, quaternion.js, planet.js, etc., as needed for your specific use case.

HTML

  
<script src="https://nas6mixfoolv.github.io/NAS6LIB/javascripts/nas6lib/vector.js"></script>  
  
  

• 2. Minimum Sample (2D Vector Addition)
  Here's a simple JavaScript example to get started:

JavaScript

  
var v1 = new N6LVector([1, 2]);  
var v2 = new N6LVector([3, 4]);  
var v3 = v1.Add(v2);  
console.log(v3.x); // Result: [4, 6]  
  

---

* Matrices and Vectors (Fundamental Operations)  
  * N6LMatrix & N6LVector basics  
    * Creation, initialization  
    * Addition, subtraction, multiplication (vectors and matrices, matrices and matrices), Division (for convenience)  
    * Normalization, finding length  
    * Inner product, cross product (Vector)  
    * Transpose, inverse matrix (Matrix)  
    * Coordinate transformation basics  
      * Creating and applying rotation, translation, and scale matrices  
      * Conversion between local and world coordinates  
      * Homogeneous Coordinates & the bHomo Flag  
* Quaternions (N6LQuaternion)  
  * Quaternion basics  
    * Benefits of quaternions as rotation representation (avoiding gimbal lock, etc.)  
    * Creation, initialization  
    * Multiplication, normalization  
    * Mutual conversion with matrices (cooperation between N6LQuaternion, N6LVector and N6LMatrix)  
  * Application to animation Slerp (spherical linear interpolation), etc.  
* Camera and Projection  
  * View Matrix  
    * Constructing the LookAt matrix  
    * Camera movement and rotation  
  * Projection Matrix  
    * Setting Perspective Projection  
    * Setting Orthographic Projection  
* Time Management with N6LTimerMan  

---

Building the main thread

Back to Table of contents

HTML

  
<script src="https://nas6mixfoolv.github.io/NAS6LIB/javascripts/nas6lib/timer.js"></script>  
  
  

JavaScript

  
// You do not usually need to wait for DOMContentLoaded to instantiate N6LTimerMan, but  
// If there is processing that depends on other DOM elements, execute it in DOMContentLoaded.  
var TMan = new N6LTimerMan(); // Assumes it is defined in NAS6LIB/javascripts/nas6lib/timer.js  
var GLoopID = -1; //ID of Main Thread  
  
//N6L initialization processing  
function initializeN6L() {  
  // Write the main processing for N6L initialization here.  
  // For example, initializing calculations using N6LMatrix, obtaining Canvas and preparing drawing context.  
  console.log("DOM is fully loaded. Initializing N6L...");  
  
  GLoopID = TMan.add(); // Add a new timer to the timer manager  
  GLoop(GLoopID); // Start the main thread by running it for the first time  
}  
  
//Main thread  
function GLoop(id){  
  // Write the main thread processing here.  
  
  // Finally, reset the main thread to continue the thread, but if you do not reset it with an end condition, the thread will stop.  
  TMan.timer[id].setalerm(function() { GLoop(id); }, 50); // Reset the main thread after 50 milliseconds.  
}  
  
// Add a DOMContentLoaded event listener  
// It is standard to use window.document.addEventListener.  
document.addEventListener('DOMContentLoaded', initializeN6L);  
  
// Alternatively, you can use window.addEventListener('load', initializeN6L);  
// DOMContentLoaded is faster and more suitable for DOM manipulation.  
  

N6LTimerMan Multi-threaded construction　Demo & Explanation (External Link)

---