Post
Ask Question

Voice of a Developer: JavaScript Vector Programming - Part 37

Introduction

 
Before moving further, let us look at the previous articles of the series,

JavaScript

 
Javascript is the language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with Javascript. What mistakes a developer generally makes and what differences they should be aware of.
 

Flashback

 
In computer programming, there are two prominent terms, scalar and vector. I am sure these terms must have brought back memories of our computer science/engineering memories.
 
Computer science is new in comparison to other science streams like Physics or Chemistry. Many computer science concepts are driven by other streams of science. I find the roots of Vectors in Physics. Physics describes how any quantity is either a vector or a scalar. Let’s look at the differences
 

Physics

 
Scalar Vector
Any quantity that can be defined by magnitude (or numerical value) is called a scalar. Any quantity that can be described by the magnitude and a direction is called vector.
Example: Speed is scalar Example: Velocity is a vector
 
Speed
 
Vector
 

Computer Science

 
Scalar Vector
The term comes from linear algebra, where we differentiate between a single number OR value with a matrix. A vector is a dynamic array, which can hold any object, and you can resize it. It has an index and can be accessed by the iterator
A single value A one-dimensional array
Update the value Add or remove elements
Ex- int a = 10; Ex- var vector = [];
 
Ex- var vector = [‘x’, ‘y’];
 

Vectors in HTML5

 
HTML5 implements SVG (Scalable Vector Graphics) via <svg> tag. It is an XML based vector image format for 2D graphics. For example- please refer to this Heart created in SVG,
 
Vectors
 
After you download SVG image then open in any editor and you can see the XML for the above image,
  1. <!--?xml version="1.0" standalone="no"?-->    
  2. <svg    
  3.     xmlns="http://www.w3.org/2000/svg" width="273.000000pt" height="300.000000pt" viewBox="0 0 273.000000 300.000000" preserveAspectRatio="xMidYMid meet">    
  4.     <g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#070707" stroke="none">    
  5.         <path style="position: relative;" d="M545 2873 c-167 -35 -350 -177 -419 -324 -37 -78 -66 -211 -66 -304    
  6. 0 -137 54 -321 132 -451 69 -116 238 -297 453 -484 145 -127 319 -301 398    
  7. -397 113 -138 144 -197 197 -363 62 -196 99 -339 107 -414 7 -70 15 -59 38 54    
  8. 37 189 103 405 161 525 34 71 65 115 149 210 144 162 385 406 465 470 83 66    
  9. 267 257 326 338 53 71 101 163 135 257 20 58 23 83 23 225 0 142 -2 167 -23    
  10. 225 -95 266 -234 392 -480 435 -149 26 -260 15 -414 -40 -140 -51 -224 -126    
  11. -295 -261 -71 -138 -79 -272 -22 -385 24 -46 106 -121 168 -151 56 -27 165    
  12. -30 223 -5 48 20 113 79 133 121 18 37 21 131 7 169 -21 55 -106 106 -176 107    
  13. l-40 0 53 -36 c109 -73 108 -163 -3 -238 -69 -47 -140 -32 -209 45 l-38 42 4    
  14. 76 c8 126 62 207 179 265 91 45 161 59 283 54 88 -3 110 -8 169 -35 113 -54    
  15. 209 -159 236 -261 39 -143 30 -280 -25 -400 -58 -125 -116 -194 -405 -482    
  16. -273 -272 -291 -292 -382 -430 -107 -163 -202 -342 -212 -401 -4 -21 -10 -39    
  17. -13 -39 -4 0 -17 32 -30 72 -62 198 -251 469 -478 688 -479 460 -548 561 -561    
  18. 813 -5 94 -3 116 17 175 43 129 118 215 236 269 49 22 76 27 164 31 164 6 280    
  19. -28 378 -113 125 -108 134 -252 22 -347 -58 -50 -107 -58 -168 -26 -121 62    
  20. -120 187 2 253 47 25 46 35 -4 35 -83 0 -157 -62 -181 -151 -11 -40 -10 -55 5    
  21. -101 31 -101 119 -159 252 -166 73 -4 88 -1 135 21 30 14 63 34 74 44 74 65    
  22. 117 180 117 308 0 73 -4 93 -30 147 -33 71 -120 171 -197 228 -140 104 -372    
  23. 146 -570 103z" id="node1" class="node"></path>    
  24.     </g>    
  25.     <g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#A2A2A2" stroke="none"></g>    
  26. </svg>   
Ok, the above is a complex code. At C-sharpcorner there is a very good series on SVG so you can read and learn SVG from that series:
 
Before reading further, read the following articles.

Create SVG graphics

 
You can learn SVG from the above articles and if you want to create SVG quickly then create it using,
There is a < 1-min interesting exercise to do.
 
I created an SVG file and you can copy and paste the below in notepad/editor and save as .svg file.
  1. <svg    
  2.     xmlns="http://www.w3.org/2000/svg"    
  3.     xmlns:xlink="http://www.w3.org/1999/xlink" width="1620px" height="850px" viewBox="0 0 1620 850" preserveAspectRatio="xMidYMid meet" >    
  4.     <defs id="svgEditorDefs">    
  5.         <polygon id="svgEditorShapeDefs" fill="khaki" stroke="black" style="vector-effect: non-scaling-stroke; stroke-width: 1px;"/>    
  6.     </defs>    
  7.     <rect id="svgEditorBackground" x="0" y="0" width="1620" height="850" style="fill: none; stroke: none;"/>    
  8.     <text fill="black" x="219" y="83" id="e1_texte" style="font-family: Arial; font-size: 20px;">hello    
  9.         <tspan x="219" dy="1.25em">world</tspan>    
  10.     </text>    
  11.     <path d="M0,-2v-2l-4,4l4,4v-2h4v-4Z" stroke="black" id="e2_shape" style="vector-effect: non-scaling-stroke; stroke-width: 1px;" fill="khaki" transform="matrix(4.25 0 0 4.25 317 88)"/>    
  12. </svg> 
Now, open in any browser and it shows,
 
browser
 

Vectors in JavaScript

 
In JavaScript, you can use Array to leverage vectors and can push or delete elements.
 
In Node, I am a fan of Victorjs which supports many vector-based operations. 
This is a JavaScript 2D vector maths library for Node.js and the browser.
 
This library can be used in both NodeJS and the browser. As we’re focusing on frontend I will show you Browser examples.
 

Prerequisite

 
Please set up a frontend web app using node/npm OR you can download the code shown above from my GitHub Repository. 
 
Add Angular Controller and view either manually OR my preferred way,
  • yo angular: controller victor
     
    command
     
  • yo angular: view victor
     
    command

Install VictorJS,

 
VictorJS
 

Install javascript libraries

 
bower install victor --save
 
Refer to library in Index.html file,
  1. <script src="./bower_components/victor/build/victor.js"></script>   
Add route “/victor” to reach a new view in “app.js”,
  1. 'use strict';    
  2.     
  3. angular.module('NewAppApp', ['winjs', 'ngRoute'])    
  4.     .config(function($routeProvider)    
  5.      {    
  6.         $routeProvider    
  7.             .when('/',     
  8.             {    
  9.                 templateUrl: 'views/main.html',    
  10.                 controller: 'MainCtrl'    
  11.             })    
  12.             .when('/victor',     
  13.             {    
  14.                 templateUrl: 'views/victor.html',    
  15.                 controller: 'VictorCtrl'    
  16.             })    
  17.             .otherwise    
  18.             ({    
  19.                 redirectTo: '/'    
  20.             });    
  21.     });   
Note
 
I wanted to showcase 3-steps explicitly, otherwise, a smart way to add the above three steps, Controller | View | Route, is by firing the below command,
 
Example
 
yo angular:route myRoute

VictorJS
 
Modify victor.js as,
  1. 'use strict';    
  2.     
  3. angular.module('NewAppApp')    
  4.     .controller('VictorCtrl', function($scope)    
  5.     {    
  6.         var vec = new Victor(10, 20);    
  7.         $scope.x = vec.x; // will fetch 10    
  8.         $scope.y = vec.y; // will fetch 20    
  9.     });   
Modify victor.html as,
  1. <p>This is the victor view.</p>    
  2. <div>Value of X-axis: {{x}}</div>    
  3. <div>Value of Y-axis: {{y}}</div> 
Run grunt server and route to “#/victor”,
 
Run
 
Similarly, there are many other common vector operations which you can perform using victorJS library like,
  • addX: to add values of X-axis in two vectors, 
     
    add
     
  • subtract: to subtract values from two vectors
  • toArray: converts a vector into a one-dimensional array,
     
    code
     

Summary

 
Please share your feedback/comments.


Similar Articles