Public Lab Research note

Infragrammar: compositing infrared images with simple mathematic expressions

by warren | August 17, 2013 16:17 17 Aug 16:17 | #9028 | #9028

Client-side JavaScript image compositing

Don Blair and I had been chatting about making an in-browser JavaScript-based Infragram system, which would help people experiment more with different composites, color balances, etc. Chris Fastie referred to this as a "sandbox" and we all agreed it'd be a great idea... in theory. But when were we going to have time to write it? Low priority.

Along came Ben Gamari who whipped up a demo and posted it to Github:

We quickly put up a temporary site and began refining it a bit, adding Infragram branding, improving the interface, chasing down bugs. It quickly evolved into a working system, able to generate monochromatic NDVI and NIR-channel images. But although it was an impressive technical feat on Ben's part, it didn't do that much more than the original site.

You can access it and try this out at this temporary address:

A simple language for compositing

The potential, however, was to make a completely open-ended environment for anyone to do image compositing in the browser. I was chatting with some friends about the idea, when we thought up the idea (maybe someone else had suggested this before, but I can't remember) of using a simple grammar to describe the operation to run on each pixel. Just like with the NDVI equation, people would be able to input a simple mathematical equation, and press "RUN", generating an image with that rule. A rule might be something like (R-B)/(R+B) - which would generate NDVI.


I realized (with the help of a white board) that this would be pretty easy to do in JavaScript with the eval() function, and this morning I coded up a version which not only allows for per-pixel equations for each color channel, but also allows for interactively changing those values with a slider. It's still a prototype, but you can already do NDVI as well as NBG "false color" images as Chris Fastie has written about (the lead image is an example of this).

Anyways, I prepared a quick video walking through some of these features; take a look and give it a spin yourself! And a big shout out to Ben Gamari and Don Blair for making this happen!



Reply to this comment...

I've got your code working locally, and it's gorgeous. Just to play around, I tried adding in some of your video instructions as explanation on the main page, and rearranged the controls a bit (less elegant than your version, just playing). The results are here: (the actual javascript doesn't work yet, I think I goofed on some of the URL refs ...)


Reply to this comment...

(... and in case the resultant HTML is at all useful, it's here: )

Reply to this comment...

Huge Breakthrough! We love sliders! Here is NBG of an astroturf putting green (R*S, B*1.3, G*0.1, WHEN S=100):


And here is ENDVI = ((R+G)-(2*B))/((R+G)+(2*B)) which MaxMax uses for its vegetation stress cameras:


Notes: Infragrammar is case sensitive (needs all caps for RGB), Download button crashes, Slider value (1 to 100) is not the value used in the calculations?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Haha, lots of fun stuff is possible. Try JavaScript math functions: R:Math.pow(R,2) G:Math.pow(G,2) B:Math.pow(B,2)

I'm making a docs page here:

Note: For now we are using the letter "S" to represent this value, but in the future, any string represented as {mystring} could generate a slider called "mystring". We could have other interfaces as well.

Reply to this comment...

A pair of doubts: In the equation in the image, it should say (IR-B)/(IR+B) (like in the video) instead of (IR-R)/(IR+R), Shouldn't it? Is the (IR-R)/(IR+R) equation the which one employed to get the NDVI with the RGB photos made by satellites? (the photos we get with Publiclab's Infrared filter are NBG). Thanks!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

kykytos, you are correct. The equation (NIR-R)/(NIR+R) is the standard one for NDVI. Substituting blue for red as in (NIR-B)/(NIR+B) also works well, because both blue and red are absorbed by plants for photosynthesis. The NGB (NIR, Green, Blue) photos from an infrablue camera do not have a visible red light channel because NIR is captured in the red channel, so blue is used instead to compute NDVI.

Reply to this comment...

Maybe we should call our version of NDVI "INDVI" for Infragram-NDVI or something? Or BNDVI for Blue-NDVI? I'm loathe to make an already obscure acronym worse, but it is important to distinguish our technique. Although I've heard of NDVI being calculated from a combined visible range monochrome band too, i think?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...

Login to comment.