Subscribe Bookmark
JohnPonte

Staff

Joined:

Jun 17, 2013

Blending images in JMP

A few months ago, a JMP customer contacted JMP Technical Support inquiring about the image functionality in JMP 9. In particular, the customer asked if there was any function that would blend two images together. Tech support forwarded that question to me.

I had added some image functionality in JMP 9, including a number of functions that would manipulate a single image. But I had not added any functions that acted upon multiple images together. I thought about this request, and I realized that this would be fairly easy to do in JSL (JMP Scripting Language) using the existing functionality.

I quickly put together a simple JSL script to blend two images together. The GUI allows the user to specify two images and control the ratio of Image1 to Image2. It also displays the resultant blended image to the user.

The buttons, labeled Image1 and Image2, pop up a file selector and allow the user to navigate to the images to be blended. Once an image is selected, the user gets a small view of the image. The slider defines the proportion of Image1 to Image2. With the thumb at the left of the slider, the result is 100% Image1. A centered thumb on the slider will result in 50% Image1 and 50% Image2.

The large viewing area at the top is to display the results of the two blended images. The blended image will be the same size as the original images, and the viewing area will resize accordingly. Currently, I assume the two images to be blended are the same size. Eventually, maybe I'll add some logic to handle the case where they are different. Or maybe I'll just leave that as an exercise for you!

The motivation for wanting this functionality originally was to compare pictures taken before and after a tornado. A deadly EF5 tornado had struck Joplin, Missouri, and the JMP user wanted to compare these images in a blended fashion. I Googled the Internet and found some images taken around Joplin both before and after the tornado. The pictures were not exactly lined up, but they were close enough to work with. I did do some manipulating of the images outside of JMP to get them lined up better, and I cropped them to be the same size. Here is an example of one set of the before and after images with a 50% blend.

You can download the entire JSL script from the JMP File Exchange. The script is called ImageBlend.jsl. But the most interesting code in the script is the actual blending function:

doBlend=expr(

       { mat1R, mat1G, mat1B } = img1 << getPixels("rgb");

       { mat2R, mat2G, mat2B } = img2 << getPixels("rgb");

       mat3R = mat2R * per + mat1R * (1.0-per);

       mat3G = mat2G * per + mat1G * (1.0-per);

       mat3B = mat2B * per + mat1B * (1.0-per);

       img3 << setPixels("rgb", {mat3R, mat3G, mat3B});

       imgBlendBox << reshow;

);

The command, getPixels("rgb"), returns each image as a collection of three matrices -- one for each color component, red, green and blue. To blend the images, we multiply Image2 by the percent and then add that to Image1 multiplied by 1 minus the percent. We then set that as the resultant image, Image3. That's all there is to it. For a further explanation of getPixels(), as well as other image functionality, check out another blog post of mine, Improve your image with JMP 9.

If you attended the JMP Discovery Summit 2011, this may all look familiar to you. I demoed it as part of my presentation, Image Isn't Everything But It Sure Is Something in JMP 9, although you may recognize that I decided to change the interface slightly.

As always, let me know what you think.