Source: height.js

const _canvas_height = 1024;
const _canvas_width = 1024;
var myStippling;

/**
 * Initialize the height map image which will later be stippled and perform the stippling iterations until there is no
 * more splitting or deleting
 */
function initHeight() {

    createCanvas();
    var img = document.querySelector('img');
    img.src = "data/iceland_height.png";
    var canvas = document.querySelector('canvas');

    img.onload = function () {
        canvas.getContext('2d').drawImage(img, 0, 0, _canvas_width, _canvas_height);

        var d3canvas = d3.select("canvas");
        var context = d3canvas.node().getContext('2d');

        var imageData = context.getImageData(0, 0, _canvas_width, _canvas_height);
        myStippling = new Stippling(_canvas_height, _canvas_width, 5000, 100, true, imageData.data);

        var state = [1, 1];

        while (state[0] !== 0 && state[1] !== 0){
            state = myStippling.iterate();
        }
        myStippling.drawStipples();

    };
}

/**
 * Create a canvas on which the image to be stippled is added
 */
function createCanvas() {
    var canvas = d3.select('#container')
        .append('canvas')
        .attr('width', _canvas_width)
        .attr('height', _canvas_height);
}

function nextStep() {
    myStippling.iterate();
    myStippling.drawStipples();
}