Show HN: Self-hosted service for creating random avatars
No offence but this seems overcomplicated to me. I know docker and nodejs etc are all the trend, or maybe I&#x27;m missing something that makes this necessary?<p>If it&#x27;s just a matter of generating a random sprite, this could be a simple front-end script that given a random seed outputs a deterministic avatar. That seed could be based on a user-email etc and now you have a &quot;service&quot; without a back-end. The images are simple enough that it should be very efficient to generate and faster than a http request (provided it&#x27;s written considerately)... or if it _must_ be done in the backend, you could generate a http image response on the fly based on a seed passed in the request header, again in one simple script.<p>[edit]<p>Sorry I feel bad now, but I genuinely think there is a better approach. I&#x27;m hoping you might be open to it. Here&#x27;s a proof of concept that add avatars to HN based on the username:<p>(Just paste it in the console on this page and scroll to the top.)<p><pre><code>  const avatar = (r=1, p=16) =&gt; {
   const c = document.createElement(&#x27;canvas&#x27;);
   const x = c.getContext(&#x27;2d&#x27;);
   c.width = 8*p;
   c.height = 8*p;
   for (let i=28; i--;) {
    &#x2F;&#x2F; xorshift
    r ^= r &lt;&lt;  13;
    r ^= r &gt;&gt;&gt; 17;
    r ^= r &lt;&lt;  5;
    &#x2F;&#x2F; pixels
    const X=i&amp;3, Y=i&gt;&gt;2;
    if (r&gt;&gt;&gt;28 &gt; X*X+Y) {
     x.fillRect(
      p*3.5 + p*X,
      p*0.5 + p*Y,
     p, p);
     x.fillRect(
      p*3.5 - p*X,
      p*0.5 + p*Y,
     p, p);
    }
   }
   return c;
  };
  &#x2F;&#x2F; Your HN avatar ! :)
  const seed = [...me.innerText]
   .map(c =&gt; c.charCodeAt(0))
   .reduce((a, b) =&gt; a + b);
  const sprite = avatar(seed);
  document.body.prepend(sprite);</code></pre>