# Infragrammar: compositing infrared images with simple mathematic expressions

by warren | 17 Aug 16:17

### 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: https://github.com/bgamari/infragram-js

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 Infragram.org site.

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

http://infragram.org/static/infragram-js/infragram.html

### 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!

HOLY COW.

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: http://pvos.org/infragram-js/infragram.html (the actual javascript doesn't work yet, I think I goofed on some of the URL refs ...)

Bravo!!

(... and in case the resultant HTML is at all useful, it's here: https://github.com/Pioneer-Valley-Open-Science/infragram-js )

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.

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: http://publiclab.org/wiki/infragram-sandbox

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.

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.

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.