Show HN: HN Avatars in 357 bytes
This was inspired by @frncsdrk&#x27;s submission from earlier today [0]. The generative concepts used were inspired by and derived from dweets from @KilledByAPixel and @FireFly [1] [2] [3]<p>The concept is to use HN usernames as the seed into a deterministic avatar generator. This generator is built from the famously simple xorshift32 PRNG, which both provides a random variable for the image generator steps, and &quot;pseudo-hashes&quot; the seed string to provide the initial PRNG state using a non-linear step (adding each codepoint - which is likely not very robust against collisions compared to proper hashing algorithms, but is simple and good enough).<p>The image generation part is a probability distribution with mirrored pixels... specifically: r&gt;&gt;&gt;29 &gt; X*X&#x2F;3+Y&#x2F;2 where the left side is 3 of the upper bits of the PRNG state (providing a random integer 0-7), and the right side is the squared distance from the centre for X + the linear distance from the top for Y. i.e the further from the top centre the pixel is, the less likely it will be filled, but linearly for Y and squared for X.<p>Un-golfed version:<p><pre><code>    for (const u of document.querySelectorAll(&#x27;.hnuser&#x27;)) {
        const p=2;
        const c=document.createElement(&#x27;canvas&#x27;);
        const x=c.getContext(&#x27;2d&#x27;);
            c.width=p*7, c.height=p*7;
            u.parentElement.prepend(c);
        for (let s=u.innerText, r=1, i=28+s.length; i--;) {
            &#x2F;&#x2F; xorshift32
            r^=r&lt;&lt;13, r^=r&gt;&gt;&gt;17, r^=r&lt;&lt;5;
            const X=i&amp;3, Y=i&gt;&gt;2;
            if (i &gt;= 28) {
                &#x2F;&#x2F; seed state
                r+=s.charCodeAt(i-28);
                x.fillStyle=&#x27;#&#x27;+(r&gt;&gt;8&amp;0xFFFFFF)
                .toString(16).padStart(0, 6);
            } else {
                &#x2F;&#x2F; draw pixel
                if (r&gt;&gt;&gt;29 &gt; X*X&#x2F;3+Y&#x2F;2)
                x.fillRect(p*3+p*X, p*Y, p, p),
                x.fillRect(p*3-p*X, p*Y, p, p);
            }
        }
    }
</code></pre>
Was fun to play with, but also surprisingly helpful in following discussions.<p>It&#x27;s worth mentioning these were heavily inspired by three particular dweets by @KilledByAPixel and @FireFly:<p>[1] <a href="https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;3078" rel="nofollow">https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;3078</a><p>[2] <a href="https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;19786" rel="nofollow">https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;19786</a><p>[3] <a href="https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;23326" rel="nofollow">https:&#x2F;&#x2F;www.dwitter.net&#x2F;d&#x2F;23326</a><p>[0] <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=30660316" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=30660316</a>