Tag Archives: HTML5

Interactive Pixel Masking: NDVI

ndviI’ve been thinking a lot recently about how to visualize NIR (Near Infrared) photography, and here’s where I’m at.

In brief, NIR photos (combined with a regular visual light photo) allow us to calculate an index of plant health, or more technically, the ratio of absorbed photosynthetically available radiation. Healthy plants reflect almost all infrared radiation and absorb a high percentage of visually red radiation – this is why healthy plants appear green (they absorb red and blue and reflect green light).

The most often used formula for interpreting NIR photos is NDVI (Normalized Difference Vegetation Index). NDVI values range from -1 to +1. I calculated NDVI in ArcGIS, exporting to 8-bit unsigned PNG format (in retrospect, I should have exported to a higher bit value in order to retain the original NDVI values), which resulted in values ranging from 0 – 255.

The end objective was to calculate percent coverage of vegetation in photographs, whether healthy or not. My preliminary website seems to do an adequate job, although it surely needs refinement. The jQuery UI slider controls which pixels to mask as “vegetation.” The HTML5 Canvas elements take care of the rest, manipulating the NDVI image at the pixel level, coloring those above the threshold level (set in the slider) red.

Original NIR and RGB images found here: Image and Visual Representation Group




I don’t usually write about what goes on at our staff meetings (“what happens at the staff meeting, stays at the staff meeting”), but today the possibility of a staff lottery for the prime parking spot behind the office piqued my interest (and I don’t think this a trade secret). So, I spent a grand total of five minutes finding the original KineticJS code (sorry, HTML5 browsers only), modifying it with staff initials, and uploading for live use the “EDI Wheel of Parking”. Give it a spin here.

KineticJS Map


Here‘s the start of my vision for a web map of FRI‘s offices. Next steps include finding a current floor plan (the Foothills Model Forest became the Foothills Research institute in 2007), expanding contact information, and adding email links.

*note: the code for this map was almost entirely stolen from this KineticJS lab.

PaperJS Directions


I played around with PaperJS/Google Maps API again today – this time calculating directions between pairs of random points. The directions result from Google is displayed by a PaperJS path, which includes color animation. Try it out.

edit: check out this Stack Overflow question which redirects to this project and provides a douche-y indictment for something this map isn’t intended to do (namely, allow interaction between the user and map).

PaperJS on Google Map


I thought I had HTML5 (pixel coordinates) on top of Google Maps (lat/long coordinates) figured out. I hadn’t, but I think I’m getting closer with my newest experiment. Basically, it loads a Google Map, and places an HTML5 canvas over top (which is why you can’t do anything directly to the map). Then, my trusty PaperJS-powered random circle moves from place to place dropping HTML5 circles and path lines. Each time it drops a circle and draws a line, the circle’s pixel coordinates are converted to lat/long and sent through to the Google Maps reverse geocoder service.

edit: of course, now that I actually Googled this topic, I see it was answered on Stack Exchange over two years ago. But, it’s more fun if you do it yourself, right? Plus, the people on Stack Exchange are mean.

Here’s the relevant code:

//map projection
var proj = map.getProjection();

//map extent 
var bounds = map.getBounds();

//extent corner coords (lat,long) 
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();

//extent corner pixel coords (x,y)
var neWorldXY = proj.fromLatLngToPoint(ne); 
var swWorldXY = proj.fromLatLngToPoint(sw);

//location pixel coords, scaled by zoom level (x,y) 
var curPixelX = currentPoint.position.x / Math.pow(2,map.getZoom()); 
var curPixelY = currentPoint.position.y / Math.pow(2,map.getZoom());

//location world coords (x,y) 
var curWorldX = curPixelX + swWorldXY.x; 
var curWorldY = curPixelY + neWorldXY.y;
var curWorldPoint = new google.maps.Point(curWorldX,curWorldY);

//location coords (lat/long) 
var curLatLng = proj.fromPointToLatLng(curWorldPoint);

PaperJS Minimum Convex Polygon


I continued my obsession with PaperJS today. Ultimately, my goal is to produce sharp-looking, location-based visualization tools. So, how about a dynamic home-range (minimum convex polygon) visualization, derived from GPS locations, that can be overlaid on Google Maps? Sounds good, and here‘s what I came up with today. Next step is to get it talking in lat/long coords for Google Maps API.

HTML5 Robot


My big plan a while ago, before I realized WordPress themes are much nicer than anything I could ever come up with myself, was to design my own home page for my website (darrenwiens.net). It was going to include an HTML5 robot with moveable parts (powered by KineticJS) that would reveal navigational links on mouseovers. Here is as far as I got before abandoning the project. It’s kinda fun, though, so check it out.

*note: must use a modern browser (i.e. no IE).

edit: it appears changes to the KineticJS library have made this example unusable, although it’s probably something I’ve done…