Nibcode Solutions Blog

There is no better activity for children than play, and it is because games are not only a fun way to entertain, but a part of their development as well, physically and mentally. Through games, children learn to know life, enrich their imagination, increase and promote their creativity, develop observation, exercise attention, learn to think and respond to each situation that comes up, among many other benefits.

Nibcode Solutions in its educational software for children Basic Math Decoded, includes three original games, to complement the learning and practice of basic math operations.

In this post, the last one of the series, we'll show an implementation in JavaScript of all the theory we have seen in the previous three posts. We also explain how you can use the HMTL5 canvas object to make your own implementation of the concepts of image processing.

The JavaScript image editor presented in the post, allows you to apply filters and make transformations to any image you choose. Besides, when moving the mouse cursor over the image, you can see, under the image, the 5x5 matrix of pixels surrounding the pixel at the cursor position.

In digital image processing, there is a group of transformations which receive the coordinates of a pixel as input, and return the new coordinates where the pixel should be placed; so that, when computing these transformations for all the pixels of an image, a new image is obtained.

Here, we are going to focus on one kind of these transformations, the affine transformations, which preserve collinearity (points and straight lines, planes, etc.). Affine transformations map points into new points by applying a linear combination of translation, rotation, scaling and skewing operations.

In the previous post we explained how an image can be represented as a matrix of pixels, where each pixel is expressed as a three-dimensional vector, composed by the amount of red, green and blue of the color. In this post, we are going to give some examples about the use of linear algebra in the digital image processing.

One kind of image processing are the filters. Among the most used there are: adjustment of brightness, contrast and colors, grayscale conversion, color inversion (negative), gamma correction, blur and noise reduction.

When most of us think about Linear Algebra, the first idea that comes out from our mind is a system of linear equations that needs to be solved, or its graphical variant, a Cartesian plane with two lines, in order to solve the problem of finding the intersection point; but what probably most of people don't know is that tools like Photoshop or libraries like OpenGL or DirectX make an extensive use of linear algebra for most of their functionalities.

It this series of posts we will discuss some basic concepts of the application of Linear Algebra in Image Processing. In the first post we will focus on its applications and how an image can be represented as a matrix, in the second and third one we will explore matrix operations on an image, and in the last one we will show some practical examples in JavaScript.