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)

Back to Table of contents

* N6LMatrix & N6LVector basics

Loading the Library

HTML

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

---

* Creation, initialization

Back to Table of contents

elements order is w-x-y-z-...

JavaScript

//Fourth-order vector
var veca = new N6LVector(4);
//Homo fourth-order vector
var vecb = new N6LVector(4, true);
//Third-order vector
var vecc = new N6LVector(new Array(1, 2, 3));
//x-axis unit homo fourth-order vector
var vecd = new N6LVector(new Array(1, 1, 0, 0), true);
var vece = new N6LVector([1, 1, 0, 0], true);
var vecf = new N6LVector(4, true).UnitVec(1);
//zero homo fourth-order vector
var vecg = new N6LVector(new Array(1, 0, 0, 0), true);
var vech = new N6LVector([1, 0, 0, 0], true);
var veci = new N6LVector(4, true).ZeroVec();
//deep copy
var vecf = new N6LVector(veci);

//4 rows and 4 columns
var mata = new N6LMatrix(4);
//4 rows and 8 columns
var matb = new N6LMatrix(4, 8);
//4 rows and 4 columns unit matrix
var matc = new N6LMatrix(new Array(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1), 4, 4);
var matd = new N6LMatrix(new Array(
      new N6LVector(new Array(1, 0, 0, 0)),
      new N6LVector(new Array(0, 1, 0, 0)), 
      new N6LVector(new Array(0, 0, 1, 0)),
　    new N6LVector(new Array(0, 0, 0, 1)) ));
var mate = new N6LMatrix([[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]] );
//deep copy
var matf = new N6LMatrix(mate); 
/*
note:Fourth-order or more is considered to be a homogeneous coordinates
If you want to make a fourth-order or more conventional coordinate N6LMatrix.SetHomo(false)**
Please continue to build declaration
*/

---

* Addition, subtraction, multiplication (vectors and matrices, matrices and matrices), Division (for convenience)

Back to Table of contents

JavaScript

//Vector
/*
When bHomo=true, the w element is skipped.
*/

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

//[3, 4] - [1, 2] = [2, 2]
var v5 = v2.Sub(v1);
console.log(v5.x); // Result: [2, 2]  
//[3, 4] - 2 = [1, 2]
var v6 = v2.Sub(2);
console.log(v6.x); // Result: [1, 2]  

//[1, 2] * [3, 4] = 11
var n1 = v1.Mul(v2);
console.log(n1); // Result: 11  
//[1, 2] * [[1, 2], [3, 4]] = [7, 10]
var m1 = new N6LMatrix([[1, 2], [3, 4]]);
var v7 = v1.Mul(m1);
console.log(v7.x); // Result: [7, 10]  
//[1, 2] * 2 = [2, 4]
var v8 = v1.Mul(2);
console.log(v8.x); // Result: [2, 4]  

//[3, 4] / [1, 2] = 5
var n2 = v2.Div(v1);
console.log(n2); // Result: 5  
//[3, 4] / [[1, 2], [3, 4]] = [4.333..., 2.5]
var v9 = v2.Div(m1);
console.log(v9.x); // Result: [4.333..., 2.5]  
//[3, 4] / 2 = [1.5, 2]
var v10 = v2.Div(2);
console.log(v10.x); // Result: [1.5, 2]  

//Matrix

//[[1, 2], [3, 4]] + [[2, 4], [6, 8]] = [[3, 6], [9, 12]]
var m2 = new N6LMatrix([[2, 4], [6, 8]]);
var m3 = m1.Add(m2);
console.log(m3.x); // Result: [[3, 6], [9, 12]]  
//[[1, 2], [3, 4]] + 2 = [[3, 4], [5, 6]]
var m4 = m1.Add(2);
console.log(m4.x); // Result: [[3, 4], [5, 6]]  

//[[2, 4], [6, 8]] - [[1, 2], [3, 4]] = [[1, 2], [3, 4]]
var m5 = m2.Sub(m1);
console.log(m5.x); // Result: [[1, 2], [3, 4]]  
//[[2, 4], [6, 8]] - 1 = [[1, 3], [5, 7]]
var m6 = m2.Sub(1);
console.log(m6.x); // Result: [[1, 3], [5, 7]]  

//[[1, 2], [3, 4]] * [[2, 4], [6, 8]] = [[14, 20], [30, 44]]
var m7 = m1.Mul(m2);
console.log(m7.x); // Result: [[14, 20], [30, 44]]  
//[[1, 2], [3, 4]] * [1, 2] = [5, 11]
var v11 = m1.Mul(v1);
console.log(v11.x); // Result: [5, 11]  
//[[1, 2], [3, 4]] * 2 = [[2, 4], [6, 8]]
var m8 = m1.Mul(2);
console.log(m8.x); // Result: [[2, 4], [6, 8]]

//[[2, 4], [6, 8]] / [[1, 2], [3, 4]] = [[3.333..., 2], [8.666..., 5]]
var m9 = m2.Div(m1);
console.log(m9.x); // Result: [[3.333..., 2], [8.666..., 5]]  
//[[2, 4], [6, 8]] / [1, 2] = [4, 10]
var v12 = m2.Div(v1);
console.log(v12.x); // Result: [4, 10]  
//[[2, 4], [6, 8]] / 2 = [[1, 2], [3, 4]]
var m10 = m2.Div(2);
console.log(m10.x); // Result: [[1, 2], [3, 4]]  

---

* Normalization, Absolute Value

Back to Table of contents

JavaScript

//Vector

//[3, 4].Abs() = 5
var v1 = new N6LVector([3, 4]);
var n1 = v1.Abs();  
console.log(n1); // Result: 5  
//[3, 4].Normal() = [3/5=0.6, 4/5=0.8]
var v2 = v1.NormalVec();
console.log(v2.x); // Result: [3/5=0.6, 4/5=0.8]
//[3, 4].Normal([6, 8]) = [3/5=0.6, 4/5=0.8]
var v3 = new N6LVector([6, 8]);
var v4 = v1.NormalVec(v3);
console.log(v4.x); // Result: [3/5=0.6, 4/5=0.8]

//Matrix

//[[2, 0], [0, 2]].Normal() = [[1, 0], [0, 1]]
var m1 = new N6LMatrix([[2, 0], [0, 2]]);
var m2 = m1.NormalMat();
console.log(m2.x); // Result: [[1, 0], [0, 1]]

---

* Inner product, cross product (Vector)

Back to Table of contents

JavaScript

  
//Vector

//[3, 4].Dot([5, 6]) = 3*5+4*6=39
var v1 = new N6LVector([3, 4]);
var v2 = new N6LVector([5, 6]);
var n1 = v1.Dot(v2);  
console.log(n1); // Result: 3*5+4*6=39  
//[3, 4].Cross([5, 6]) = 3*6-4*5=-2
var n2 = v1.Cross(v2);
console.log(n2); // Result: 3*6-4*5=-2

---

* Transpose, inverse matrix (Matrix)

Back to Table of contents

JavaScript

//Matrix

//[[1, 0, 0, 0], [2, 0, 0, 1], [3, 0, 1, 0], [4, -1, 0, 0]].Transpose() = [[1, 2, 3, 4], [0, 0, 0, -1], [0, 0, 1, 0], [0, 1, 0, 0]]
//[[1, 0, 0, 0], [2, 0, 0, 1], [3, 0, 1, 0], [4, -1, 0, 0]].Inverse() = [[1, 0, 0, 0], [2, 0, 0, -1], [3, 0, 1, 0], [4, 1, 0, 0]]
var m1 = new N6LMatrix([[1, 0, 0, 0], [2, 0, 0, 1], [3, 0, 1, 0], [4, -1, 0, 0]]);
var m2 = m1.TransposedMat();
console.log(m2.x); // Result: [[1, 0, 0, 0], [2, 0, 0, -1], [3, 0, 1, 0], [4, 1, 0, 0]]
var m3 = m1.InverseMat();
console.log(m3.x); // Result: [[1, 0, 0, 0], [0, 0, 0, -1], [0, 0, 1, 0], [0, 1, 0, 0]]


//[[0, 0, 1], [0, 1, 0], [-1, 0, 0]].Transpose() = [[0, 0, -1], [0, 1, 0], [1, 0, 0]]
//[[0, 0, 1], [0, 1, 0], [-1, 0, 0]].Inverse() = [[0, 0, -1], [0, 1, 0], [1, 0, 0]]
var m4 = new N6LMatrix([[0, 0, 1], [0, 1, 0], [-1, 0, 0]]);
var m5 = m4.TransposedMat();
console.log(m5.x); // Result: [[0, 0, -1], [0, 1, 0], [1, 0, 0]]
var m6 = m4.InverseMat();
console.log(m6.x); // Result: [[0, 0, -1], [0, 1, 0], [1, 0, 0]]

---

* Coordinate transformation basics

Back to Table of contents

JavaScript

---

* Creating and applying rotation, translation, and scale matrices

Back to Table of contents

JavaScript

---

* Conversion between local and world coordinates

Back to Table of contents

JavaScript

---

* Homogeneous Coordinates & the bHomo Flag

Back to Table of contents

JavaScript

---

* Quaternions (N6LQuaternion)  

Back to Table of contents
* 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)

---

Back to Table of contents