https://anamariadimand.github.io/assets/js/bubble_visual_hash.js

1//  Formatted version of a popular md5 implementation
2//  Original copyright (c) Paul Johnston & Greg Holt.
3function md5(inputString) {
4    var hc = "0123456789abcdef";
5    function rh(n) { var j, s = ""; for (j = 0; j <= 3; j++) s += hc.charAt((n >> (j * 8 + 4)) & 0x0F) + hc.charAt((n >> (j * 8)) & 0x0F); return s; }
6    function ad(x, y) { var l = (x & 0xFFFF) + (y & 0xFFFF); var m = (x >> 16) + (y >> 16) + (l >> 16); return (m << 16) | (l & 0xFFFF); }
7    function rl(n, c) { return (n << c) | (n >>> (32 - c)); }
8    function cm(q, a, b, x, s, t) { return ad(rl(ad(ad(a, q), ad(x, t)), s), b); }
9    function ff(a, b, c, d, x, s, t) { return cm((b & c) | ((~b) & d), a, b, x, s, t); }
10    function gg(a, b, c, d, x, s, t) { return cm((b & d) | (c & (~d)), a, b, x, s, t); }
11    function hh(a, b, c, d, x, s, t) { return cm(b ^ c ^ d, a, b, x, s, t); }
12    function ii(a, b, c, d, x, s, t) { return cm(c ^ (b | (~d)), a, b, x, s, t); }
13    function sb(x) {
14        var i; var nblk = ((x.length + 8) >> 6) + 1; var blks = new Array(nblk * 16); for (i = 0; i < nblk * 16; i++) blks[i] = 0;
15        for (i = 0; i < x.length; i++) blks[i >> 2] |= x.charCodeAt(i) << ((i % 4) * 8);
16        blks[i >> 2] |= 0x80 << ((i % 4) * 8); blks[nblk * 16 - 2] = x.length * 8; return blks;
17    }
18    var i, x = sb("" + inputString), a = 1732584193, b = -271733879, c = -1732584194, d = 271733878, olda, oldb, oldc, oldd;
19    for (i = 0; i < x.length; i += 16) {
20        olda = a; oldb = b; oldc = c; oldd = d;
21        a = ff(a, b, c, d, x[i + 0], 7, -680876936); d = ff(d, a, b, c, x[i + 1], 12, -389564586); c = ff(c, d, a, b, x[i + 2], 17, 606105819);
22        b = ff(b, c, d, a, x[i + 3], 22, -1044525330); a = ff(a, b, c, d, x[i + 4], 7, -176418897); d = ff(d, a, b, c, x[i + 5], 12, 1200080426);
23        c = ff(c, d, a, b, x[i + 6], 17, -1473231341); b = ff(b, c, d, a, x[i + 7], 22, -45705983); a = ff(a, b, c, d, x[i + 8], 7, 1770035416);
24        d = ff(d, a, b, c, x[i + 9], 12, -1958414417); c = ff(c, d, a, b, x[i + 10], 17, -42063); b = ff(b, c, d, a, x[i + 11], 22, -1990404162);
25        a = ff(a, b, c, d, x[i + 12], 7, 1804603682); d = ff(d, a, b, c, x[i + 13], 12, -40341101); c = ff(c, d, a, b, x[i + 14], 17, -1502002290);
26        b = ff(b, c, d, a, x[i + 15], 22, 1236535329); a = gg(a, b, c, d, x[i + 1], 5, -165796510); d = gg(d, a, b, c, x[i + 6], 9, -1069501632);
27        c = gg(c, d, a, b, x[i + 11], 14, 643717713); b = gg(b, c, d, a, x[i + 0], 20, -373897302); a = gg(a, b, c, d, x[i + 5], 5, -701558691);
28        d = gg(d, a, b, c, x[i + 10], 9, 38016083); c = gg(c, d, a, b, x[i + 15], 14, -660478335); b = gg(b, c, d, a, x[i + 4], 20, -405537848);
29        a = gg(a, b, c, d, x[i + 9], 5, 568446438); d = gg(d, a, b, c, x[i + 14], 9, -1019803690); c = gg(c, d, a, b, x[i + 3], 14, -187363961);
30        b = gg(b, c, d, a, x[i + 8], 20, 1163531501); a = gg(a, b, c, d, x[i + 13], 5, -1444681467); d = gg(d, a, b, c, x[i + 2], 9, -51403784);
31        c = gg(c, d, a, b, x[i + 7], 14, 1735328473); b = gg(b, c, d, a, x[i + 12], 20, -1926607734); a = hh(a, b, c, d, x[i + 5], 4, -378558);
32        d = hh(d, a, b, c, x[i + 8], 11, -2022574463); c = hh(c, d, a, b, x[i + 11], 16, 1839030562); b = hh(b, c, d, a, x[i + 14], 23, -35309556);
33        a = hh(a, b, c, d, x[i + 1], 4, -1530992060); d = hh(d, a, b, c, x[i + 4], 11, 1272893353); c = hh(c, d, a, b, x[i + 7], 16, -155497632);
34        b = hh(b, c, d, a, x[i + 10], 23, -1094730640); a = hh(a, b, c, d, x[i + 13], 4, 681279174); d = hh(d, a, b, c, x[i + 0], 11, -358537222);
35        c = hh(c, d, a, b, x[i + 3], 16, -722521979); b = hh(b, c, d, a, x[i + 6], 23, 76029189); a = hh(a, b, c, d, x[i + 9], 4, -640364487);
36        d = hh(d, a, b, c, x[i + 12], 11, -421815835); c = hh(c, d, a, b, x[i + 15], 16, 530742520); b = hh(b, c, d, a, x[i + 2], 23, -995338651);
37        a = ii(a, b, c, d, x[i + 0], 6, -198630844); d = ii(d, a, b, c, x[i + 7], 10, 1126891415); c = ii(c, d, a, b, x[i + 14], 15, -1416354905);
38        b = ii(b, c, d, a, x[i + 5], 21, -57434055); a = ii(a, b, c, d, x[i + 12], 6, 1700485571); d = ii(d, a, b, c, x[i + 3], 10, -1894986606);
39        c = ii(c, d, a, b, x[i + 10], 15, -1051523); b = ii(b, c, d, a, x[i + 1], 21, -2054922799); a = ii(a, b, c, d, x[i + 8], 6, 1873313359);
40        d = ii(d, a, b, c, x[i + 15], 10, -30611744); c = ii(c, d, a, b, x[i + 6], 15, -1560198380); b = ii(b, c, d, a, x[i + 13], 21, 1309151649);
41        a = ii(a, b, c, d, x[i + 4], 6, -145523070); d = ii(d, a, b, c, x[i + 11], 10, -1120210379); c = ii(c, d, a, b, x[i + 2], 15, 718787259);
42        b = ii(b, c, d, a, x[i + 9], 21, -343485551); a = ad(a, olda); b = ad(b, oldb); c = ad(c, oldc); d = ad(d, oldd);
43    }
44    return rh(a) + rh(b) + rh(c) + rh(d);
45}
46
47
48// This script is inspired by https://github.com/dakridge/identicon
49
50createHashGroupForString = function (str) {
51    var hashGroup = [];
52    var hash = md5(str);
53    for (var i = 0; i < hash.length; i += 1) {
54        var byte = parseInt(hash[i], 16);
55        hashGroup.push(byte);
56    }
57    return hashGroup;
58}
59
60createBubbleInfo = function (hashGroup, n, w, h) {
61    var maxN = hashGroup.length / 2;
62    n = n < maxN ? n : maxN;
63    var wh = w < h ? w : h;
64    var scaleX = function (v) { return (w / 16) * v; };
65    var scaleY = function (v) { return (h / 16) * v; };
66    var radius = function (v) { var min = 10; var max = wh / 2; return min + ((v / 16) * (max - min)); };
67    var color = function (i) {
68        var c = [
69            "#1f77b4", "#aec7e8",  // blue
70            "#ff7f0e", "#ffbb78",  // orange
71            "#2ca02c", "#98df8a",  // green

72            "#d62728", "#ff9896",  // red
73            "#9467bd", "#c5b0d5",  // purple
74            "#8c564b", "#c49c94",  // brown
75            // "#e377c2", "#f7b6d2",  // pink
76            // "#7f7f7f", "#c7c7c7",  // gray
77            "#bcbd22", "#dbdb8d",  // yellow
78            "#17becf", "#9edae5",  // cyan
79        ];
80        return c[i % c.length];
81    };
82
83    var bubbleInfo = [];
84    for (var i = 0; i < n; i++) {
85        var xRel = hashGroup[2 * i];
86        var yRel = hashGroup[2 * i + 1];
87        bubbleInfo.push({
88            x: scaleX(xRel),
89            y: scaleY(yRel),
90            radius: radius(hashGroup[(xRel * yRel) % hashGroup.length]),
91            color: color(xRel + yRel)
92        });
93    }
94    return bubbleInfo;
95}
96
97
98drawBubble = function (svg, bubbleInfo) {
99    //  Sort bubbles by radius in descending order
100    bubbleInfo.sort(function (a, b) {
101        return b.radius - a.radius;
102    });
103    for (var i = 0; i < bubbleInfo.length; i++) {
104        var bubble = bubbleInfo[i];
105        var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
106        circle.setAttribute("cx", bubble.x);
107        circle.setAttribute("cy", bubble.y);
108        circle.setAttribute("r", bubble.radius);
109        circle.setAttribute("fill", bubble.color);
110        circle.setAttribute("fill-opacity", 0.75);
111        svg.appendChild(circle);
112    }
113}
114
115var canvases = document.querySelectorAll(".bubble-visual-hash");
116canvases.forEach(function (canvas) {
117    var hash = canvas.getAttribute("data-bubble-visual-hash");
118    var width = canvas.viewBox.baseVal.width;
119    var height = canvas.viewBox.baseVal.height;
120    var bubbleInfo = createBubbleInfo(createHashGroupForString(hash), 8, width, height);
121    drawBubble(canvas, bubbleInfo);
122});