None taken. Thank you for your feedback and the time you put in to show a different approach to the problem!
Fixed one silly oversight: the original example just summed the unicode points of the username, but this has trivial collisions with other names (even on this thread), ideally the string should be hashed, so i've done a very simple made up hash by adding a nonlinear operation to xorshift to combine each code point (if you really care about collisions, use a proper hash like SHA256). Also added some colour and tweaked the sprite probability distribution.
If you want a more sophisticated pattern, the part to play with is `if (r>>>29 > X**X/3+Y/2)`, the left hand side is the high 3 bits of the PRNG state (i.e random integer between 0 and 8), the right hand side is an arbitrary probability distribution, the current one just biases it towards the top center (squared on the horizontal). If you want a unit interval (a float between 0 and 1) rather than a 31bit uint for the random variable, you can get one with `(r>>>0)*2**-32`, but with a bit more computational cost.
for (const u of document.querySelectorAll('.hnuser')) {
const p=2;
// seed state
let s=u.innerText, r=1;
for (let i=s.length; i--;) {
// xorshift32
r^=r<<13, r^=r>>>17, r^=r<<5;
// seed
r+=s.charCodeAt(i);
}
// init canvas
const c=document.createElement('canvas');
c.width=p*8, c.height=p*8;
u.parentElement.prepend(c);
const x=c.getContext('2d');
x.fillStyle='#'+(r>>8&0xFFFFFF)
.toString(16).padStart(0, 6)
// draw pixels
for (let i=28; i--;) {
// xorshift32
r^=r<<13, r^=r>>>17, r^=r<<5;
// pixels
const X=i&3, Y=i>>2;
if (r>>>29 > X*X/3+Y/2)
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);
}
}