Identicon

Based on work from https://github.com/hgwr/identicon/blob/master/identicon.js

by Carl Angelo Nievarez

HTML

<!-- Size must be multiple of 3 code cannot exceed 19 digits -->
<input id="code" placeholder="Username"></input>
<br>
<br>
<canvas id="identicon" data-code="jclarkin" width="180" height="180"></canvas>
<div id="hint"></div>

CSS

body {
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

JavaScript

var Identicon = (function (module) {
    module._private = module._private || {};

    /***********************/
    /** Private Variables **/
    /***********************/

    var patch0 = [0, 4, 24, 20];
    var patch1 = [0, 4, 20];
    var patch2 = [2, 24, 20];
    var patch3 = [0, 2, 20, 22];
    var patch4 = [2, 14, 22, 10];
    var patch5 = [0, 14, 24, 22];
    var patch6 = [2, 24, 22, 13, 11, 22, 20];
    var patch7 = [0, 14, 22];
    var patch8 = [6, 8, 18, 16];
    var patch9 = [4, 20, 10, 12, 2];
    var patch10 = [0, 2, 12, 10];
    var patch11 = [10, 14, 22];
    var patch12 = [20, 12, 24];
    var patch13 = [10, 2, 12];
    var patch14 = [0, 2, 10];
    var patchTypes = [patch0, patch1, patch2, patch3,
    patch4, patch5, patch6, patch7,
    patch8, patch9, patch10, patch11,
    patch12, patch13, patch14, patch0];
    var centerPatchTypes = [0, 4, 8, 15];

    /*** Expose private for testing ***/
    module._private.patchTypes = patchTypes;

    /***********************/
    /** Private Functions **/
    /***********************/

    /**
     * Hashing algorithm for any string. Uses the SDBM hash algorithm
     * 
     * @param string  The input to be hashed
     *
     * @return The deterministic hash value for the provided string
     */
    function hash(string) {
        var key = 0;
        var tempChar;
        for (var i = 0; i < string.length; i++) {
            tempChar = string.charCodeAt(i);
            key = tempChar + (key << 6) + (key << 16) - key;
        }
        return key;
    }

    function renderPatch(ctx, x, y, size, patch, turn, invert, foreColor, backColor) {
        patch %= patchTypes.length;
        turn %= 4;
        if (patch == 15) invert = !invert;

        var vertices = patchTypes[patch];
        var offset = size / 2;
        var scale = size / 4;

        ctx.save();

        // paint background
        ctx.fillStyle = invert ? foreColor : backColor;
        ctx.fillRect(x, y, size, size);

        // build patch...