4 ms·
No offence but this seems overcomplicated to me. I know docker and nodejs etc are all the trend, or maybe I'm missing something that makes this necessary? If i
by tomxor 5y ago
No offence but this seems overcomplicated to me. I know docker and nodejs etc are all the trend, or maybe I'm missing something that makes this necessary?
If it'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 "service" 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'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.
[edit]
Sorry I feel bad now, but I genuinely think there is a better approach. I'm hoping you might be open to it. Here's a proof of concept that add avatars to HN based on the username:
(Just paste it in the console on this page and scroll to the top.)
const avatar = (r=1, p=16) => {
const c = document.createElement('canvas');
const x = c.getContext('2d');
c.width = 8*p;
c.height = 8*p;
for (let i=28; i--;) {
// xorshift
r ^= r << 13;
r ^= r >>> 17;
r ^= r << 5;
// pixels
const X=i&3, Y=i>>2;
if (r>>>28 > 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;
};
// Your HN avatar ! :)
const seed = [...me.innerText]
.map(c => c.charCodeAt(0))
.reduce((a, b) => a + b);
const sprite = avatar(seed);
document.body.prepend(sprite);
- frncsdrk 5y agoNone taken. Thank you for your feedback and the time you put in to show a different approach to the problem!
- tomxor 5y agoI'm glad :) and you're welcome.
- tomxor 5y agoI'm glad. Also, thank you, I actually had some fun hacking on this problem a bit more. Following is a script to annotate HN comments with deterministic avatars :) feel free to do with it as you please. 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); } } If you paste above in the console of any HN page you will get annotated usernames.
- vohu43 5y agoNice job!
- remram 5y agoI take your point about complexity, however generating avatars client-side does not degrade gracefully.
- tomxor 5y agoAs I said, it can be done front or back end, you can use the same script I wrote if you want to stick to javascript, or can implement the same in any other language, and then just return the generated image. In fact the algorithm is so simple you can write the raw bytes out as a bitmap without depending on any image libraries if you wanted. The difference is that it's stateless because it's deterministic. and therefore requires no more than a single small script.