Show HN: HN Avatars in 357 bytes

Post by bradrn » Mon, Mar 14, 2022, 12:40 PM UTC

alainchabat wrote: post #91

Reply here if you just want to see how your username looks like, so we avoid noise and keep that Show HN on the top. comments are really interesting

Post by CapsAdmin » Mon, Mar 14, 2022, 12:44 PM UTC

tomxor wrote: post #2

This was inspired by @frncsdrk's submission from earlier today [0]. The generative concepts used were inspired by and derived from dweets from @KilledByAPixel and @FireFly [1] [2] [3] 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 "pseudo-has…

  for (const huser of document.querySelectorAll(".hnuser")) {
    const s = huser.innerText;
    const p = 2;
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");

    canvas.width = p * 7;
    canvas.height = p * 7;

    huser.parentElement.prepend(canvas);

    {
      const xorshift32 = (n) => {
        n ^= n >> 17;
        n ^= n = seedSteps; i--) {
        seed = xorshift32(seed);
        seed += s.charCodeAt(i - seedSteps);
      }

      context.fillStyle =
        "#" + ((seed >> 8) & 0xffffff).toString(16).padStart(0, 6);

      for (let i = seedSteps - 1; i > 0; i--) {
        // continue the seed
        seed = xorshift32(seed);

        const X = i & 3;
        const Y = i >> 2;

        if (seed >>> (seedSteps + 1) > (X * X) / 3 + Y / 2) {
          context.fillRect(p * 3 + p * X, p * Y, p, p);
          context.fillRect(p * 3 - p * X, p * Y, p, p);
        }
      }
    }
  }

Post by csunbird » Mon, Mar 14, 2022, 12:45 PM UTC

alainchabat wrote: post #91

Reply here if you just want to see how your username looks like, so we avoid noise and keep that Show HN on the top. comments are really interesting

Post by jragoon » Mon, Mar 14, 2022, 12:47 PM UTC

jrwr wrote: post #129

alainchabat wrote: post #91

Reply here if you just want to see how your username looks like, so we avoid noise and keep that Show HN on the top. comments are really interesting

I wonder what mine will end up being

Post by dividuum » Mon, Mar 14, 2022, 12:48 PM UTC

CapsAdmin wrote: post #41

supermatt wrote: post #31

Ive been a dev for over 2 decades but I still cant grok bitwise operators - anyone have a reference that may help with that?

I struggled with this as well. Now I'm a bit rusty as I haven't used it for a while, but what really helped me was to start thinking about binary numbers more as strings. It also really helps me to visualize binary operations in binary space, not hex or decimal. That's still very confusing to me. For example left shift by 1 on this 8 bit number (decimal is 32) 00100000 you just shift all the numbers to the left 01000…