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!
8 Comments
HOLY COW.
Reply to this comment...
Log in to 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: 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!!
Reply to this comment...
Log in to comment
(... and in case the resultant HTML is at all useful, it's here: https://github.com/Pioneer-Valley-Open-Science/infragram-js )
Reply to this comment...
Log in to 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...
Log in to 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: 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.
Reply to this comment...
Log in to 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...
Log in to 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...
Log in to 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...
Log in to comment
Login to comment.