Nibcode Solutions Blog

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.

In the previous part of this article we formulated the Einstein's riddle in terms of matrices, and presented three matrix operations that will be the base for an algorithm to solve the riddle. In this part we'll be talking about this algorithm, and a JavaScript implementation which will allow solving this riddle and any other grid riddle similar to this one.

There are some programming languages as Prolog, designed to work with logic facts, where you can deal with logical problems in a natural way. By using the matrix formulation we can use any programming language to deal with this kind of riddles. Here we provide the implementation, in JavaScript, of the matrix object with the three basic operators used to solve the riddles. The selection of JavaScript is not arbitrary, it allows to show the effectiveness of the algorithm in this same post.