Badass JavaScript

A JavaScript implementation of the Content Aware Image Resizing algorithm

Stéphane Roucheray has written an implementation of the content aware image resizing algorithm in JavaScript using the Canvas element.  This algorithm tries to find the subject of the picture and retain its proportions, while resizing the background elements of the picture only.  This reduces the squashed or stretched nature that you may find if you resize images disproportionately.  It is implemented in tools like Photoshop, but can now be used on the web.

This implementation works by following these steps:

1. Make the image grayscale using the canvas element
2. Run an edge detection algorithm (Sobel convolution) as well as generate an energy map
3. The seam of least energy (1 pixel vertical line from the bottom to the top of the energy matrix) is detected
4. It slices the image at the seam, and injects the resulting image back into step one for another iteration.  Reducing the width of the image by 50 pixels would require 50 iterations.

You can check out a demo of the algorithm in use over here, which shows how the image would be resized by CSS along side the results of the algorithm.  It is pretty cool that we can do this kind of image processing right in the browser now.  When will we have a complete canvas based Photoshop clone?  I think it will be sooner rather than later.

Brain.js: Neural Networks In JavaScript

A neural network is “a mathematical model or computational model that tries to simulate the structure and/or functional aspects of biological neural networks” according to Wikipedia.  Basically, a neural network carries out pattern recognition, very much like the human brain would.  The user of the network trains it, and then it can be used with varying levels of accuracy depending on the amount of training that it has received.  In this way, neural networks are learn patterns and can then recognize them on different input data. If you want to learn more about neural networks, here is a good introduction.

Heather Arthur has written an implementation of a neural network in JavaScript.  Below is an example of the library in use:

var net = new NeuralNetwork();

net.train([{input: {r:1, g:0.65, b:0},  output: {orange: 1}},
           {input: {r:0, g:0.54, b:0},  output: {green: 1}},
           {input: {r:0.6, g:1, b:0.5}, output: {green: 1}},
           {input: {r:0.67, g:0, b:1},  output: {purple: 1}}]);

var output = net.run({r:1, g:1, b:0});

This example trains the neural network with some simple patterns of input and output, then runs the neural network with an input.  The output would be something like:

{"orange":0.96,"green":0.18,"purple":0.00}

because yellow is most similar to orange.

Heather has also provided a working demo that you can try out.  First you train the network to recognize whether to use black or white text over a given background color.  Then, it compares the output of the neural network to a luminosity algorithm that calculates the same thing.  In many cases, the neural network produces results that are better than the luminosity algorithm.  Calculation all happens in a WebWorker, so you will need a modern web browser (no IE, sorry!).

You can check out the code on Github, the documentation here, and the color demo here.  Awesome work!

TypeSet: An implementation of the TEX Line Breaking Algorithm in JavaScript

Bram Stein has written an implementation of the Knuth and Plass line breaking algorithm using the HTML5 canvas element.  The algorithm takes care of all aspects of laying out text in an aesthetically pleasing way, including justified text, centered text, text wrapping around shapes such as images, and even creating non-rectangular shapes from the text itself.  Because it is written using the canvas element, complete control over the layout is possible, but the text is not yet selectable.

Very cool.  Sounds like it could be used to implement a decent word processor with actual text layout capabilities on the web!  You can check out the post and demo here, and see the source code at the bottom of that page.