dot-density calculations and visualizations


It's like englewood but in JavaScript with Canvas.

var data = englewood.getData(canvas);
    // from canvas (or data) 
    // to canvas 
    // number of dots 
    20000, {
    // which color to look for 
    onto: [255, 255, 255 - (+p.State)],
    // which color to fill 
    fillStyle: '#fff'

Getting It

Quick & Dirty:

wget https://raw.github.com/tmcw/englewood.js/gh-pages/index.js -O englewood.js

Node or Browserify:

npm install --save englewood


Right now the approach does a few tricks.

The first is creating a queue of spots we can color. This means that when you start making lots of dots, instead of searches becoming way longer when it keeps guessing wrong, or having overlapping dots, it knows which spots are left.

The second is that the from and to canvases can be different. So from could be hidden and to visible, or vice-versa.

onto means that you can color a polygon and look for it. Here you'd want to use the two-canvas trick.

getImageData is an expensive call, so you can also supply an ImageData instance as the first argument to fill instead of Context and it will skip re-requesting image data.