First of all, you need to download the JSFeat library and add it to your webpage. It is simple and it looks similar to this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>chapter1</title>
<script src="js/jsfeat.js"></script>
</head>
<body></body></html>As you can see, we just added a JavaScript library here without any additional actions. We do not need any particular software, since JavaScript is fast enough for many Computer Vision tasks.
The core data structure for the JSFeat library is a matrix. We will cover more topics about matrices in the next section, but to check whether everything works correctly, let's try to create an example.
Add the following code to a <script/> tag:
var matrix = new jsfeat.matrix_t(3, 3, jsfeat.U8_t | jsfeat.C1_t);
matrix.data[1] = 1;
matrix.data[5] = 2;
matrix.data[7] = 1;
for (var i = 0; i < matrix.rows; ++i) {
var start = i * matrix.cols;
console.log(matrix.data.subarray(start, start + matrix.cols));
}You will see the following in your console:
[0, 1, 0] [0, 0, 2] [0, 1, 0]
In the preceding code, we create a new matrix with the dimensions of 3 x 3 and an unsigned byte type with one channel. Next, we set a few elements into it and log the content of the matrix into the console row by row. The matrix data is presented as a one-dimensional array. Remember this, we will clarify it in the next section.
Finally, you did it! You have successfully added the JSFeat Computer Vision library to your first project. Now, we will discuss what a matrix actually is.