Hilbert's curve: bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..bbb..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbb..b..bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..bbb..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbd...bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..bbb..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbb..b..bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..bbb..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbfbb..d..b..bbb..b..d..bbb..d..b..bdbb..b..bbdb..b..d..bbb..d..b..bbb..b..d..bbdb..b..bdbb..b..bbdb..b..f..b..bdbb..b..bbdb..b..bdbb..d..b..bbb..b..d..bbb

Here's a fun one that's too long to print in this comment: https://gist.githubusercontent.com/chrisshroba/6c37c650668f4...

And the code used to generate it:

First some python to create a qr code from the link and output it as a json list of booleans:

    import qrcode, json
    code = qrcode.QRCode()
    code.add_data('https://youtu.be/dQw4w9WgXcQ')
    code.make()
    json.dumps(code.modules)

Copy and paste the out into the browser console and assign it to a variable called `qr`. Then run the following code to generate and display the string in the viewer:

    (function(qr) {
        let start = '  L   L   L   L   K    L   L   L   L   K'
        let draw = val => {$('.names').value = val; main() };
        let decode = val => val.replaceAll('d','a   ').replaceAll('r',' a  ').replaceAll('u','  a ').replaceAll('l','   a');
        let size = 4
        let on = (s) => {
            let ret = ''
            let line = 'r'.repeat(s-1)+'l'.repeat(s-1)
            for (let i=0; i<s-1; i++) ret += line + 'd';
            ret += line
            ret += 'u'.repeat(s-1)
            return ret
        }
        let right_cell = (s) => 'r'.repeat(s)
        let left_cell = (s) => 'l'.repeat(s)
        let down_cell = (s) => 'd'.repeat(s)

        // draw(decode(on(3)+next_cell(3)+on(3)+next_cell(3)+next_cell(3)+on(3)+next_cell(3)))
        let str = start
        for (line of qr) {
            for (val of line) {
                str += val ? (on(size) + right_cell(size)) : right_cell(size)
            }
            console.debug(`A ${left_cell(size).repeat(line.length)}, ${size}, ${line.length} line ${line}`)
            str += left_cell(size).repeat(line.length)
            str += down_cell(size)
        }
        console.log(str);
        draw(decode(str))
    })(qr)

What was your motivation for the following function?

  function rotateLine(position) {
    if (position < halfabet) {
      context.rotate((-90 \* Math.PI) / 180);
    } else if (position > halfabet) {
      context.rotate((90 \* Math.PI) / 180);
    } else if (position === halfabet) {
      context.rotate((180 \* Math.PI) / 180);
    }
  }

I'm sure you have your reasons, but when I was writing the alphabet to make a spiral I found the rotation reverse on me at 'n' which is where the other cases of rotateline() kick in. Why isn't this function just:

  function rotateLine(position) {
    context.rotate((-90 \* Math.PI) / 180);
  }

Is it because it creates uninteresting results for actual names? Everyone just becomes spiral variations?

Update: wow I did not expect this response, I am so happy that people are enjoying Names! I have gathered some ideas for new features and improvements from the comments, I will see if I can implement them.

I'm impressed by the responses here. I wonder if it's possible to write something in plain language that can be read, which is also represented by the image it generates.

An attempt:

pick a card, any card. pick a card, any card. pick a card, any card. pick a card, any card.

Cool! Feature request: put the word in the url querystring so they are easy to share.

"Names" is a programmatic visualisation of letters in a word, based on their position in the alphabet. Try typing a word yourself in the box below!

This is so sad

z...z.z...zz...lk.w...l..g..l.l..g...z...f..f.f..f..k.wg.r.a

a..ac..ab..ac..ac..ac..ac..ab..ac..ac..ac..ab..ac..ac..ac..ac..ab..ac..ab..l..a..ab..ac..ac..ab..ac..ac..ab..ac..ac..ab..ac..ab..ac..ac..ab..ac..ac..ab..ac..ac..ab..ac..ac..ab..aca..ba..ca..ca..ba..ca..ba..ca..ca..ba..b..l..aa..ca..ba..ca..ca..ba..ca..ca..ba..ca..ca..ca..ba..ca..ca..ba..ca..ca..ca..ba..ca..ca..ba..ca..ca..ba..ca..ca..ca..ba..ca..ca..ba..ca..b..l..aa..ba..ca..ca..ba..ca..ca..ba..ca..ba..ca..ca..ba..ca..ca..ba..ca..ca..ba..b

aabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbn

a..b..c..d..e..f..g..h..i..j..k..l..m.nopqrstuvwxyzz.a..z.b..z.c..z.d..z.e..z.f..z.g..z.h..z.i..z.j..z.k..z.l..z.m.z.nz.oz.pz.qz.rz.sz.tz.uz.vz.wz.xz.yz.zz.z.a..z.z.b..z.z.c..z.z.d..z.z.e..z.z.f..z.z.g..z.z.h..z.z.i..z.z.j..z.z.k..z.z.l..z.z.m.z.z.nz.z.oz.z.pz.z.qz.z.rz.z.sz.z.tz.z.uz.z.vz.z.wz.z.xz.z.yz.z.zz.z.z.a..z.z.z.b..z.z.z.c..z.z.z.d..z.z.z.e..z.z.z.f..z.z.z.g..z.z.z.h..z.z.z.i..z.z.z.j..z.z.z.k..z.z.z.l..z.z.z.m.z.z.z.nz.z.z.oz.z.z.pz.z.z.qz.z.z.rz.z.z.sz.z.z.tz.z.z.uz.z.z.vz.z.z.wz.z.z.xz.z.z.yz.z.z.zz.z.z.z.a..z.z.z.z.b..z.z.z.z.c..z.z.z.z.d..z.z.z.z.e..z.z.z.z.f..z.z.z.z.g..z.z.z.z.h..z.z.z.z.i..z.z.z.z.j..z.z.z.z.k..z.z.z.z.l..z.z.z.z.m.z.z.z.z.nz.z.z.z.z

That was unexpectedly fun!

Does what it says:

tile tile tile, tile tile tile tile, tile tile tile, tile tile tile tile, tile tile tile, tile tile tile tile, tile tile tile, tile tile tile tile

Another fun tiling:

ugoldfish, goldfish swim goldfish, goldfish swim goldfish, goldfish swim goldfish, goldfish swim

I wondered what word would represent a square and did a quick guess with otto (a German name), which was actually very close (after investigating a bit more I'm even more surprised).

This would be great for generating avatars from usernames, very cool.

iaefeaiaefeaideadagaaa

ssqu...are

one-two-one-two

hello i need help i'm trapped in a giant painting by wassily kandinsky and i can't find my way out of here what should i do?

no no no no

Shouldn't "abcdefghijklmnopqrstuvwxyz" be a spiral ? Why the direction change at n ?

ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU

aaaz.zv.vbaav.vaabv.v.bav.vaavaabvaaawbezcabyaaoaazcaoaaboaaabyaagzbaazaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaahaazaapbaaozobaanaamaaaiahl

Love

aaaabbbccccddddeeeeffffgggghhhhiiiijjjjkkkkllllm...m...m...m...n......n......n......n..o..o..o..o..p..p..p..p..q..q..q..q..r..r..r..r..s..s..s..s..t..t..t..t..u..u..u..u..v..v..v..v..w..w..w..w..x..x..x..x..y..y..y..y..z..z..z..z

Some kind of square thingy

Someone please make a rickroll QR code

z...z.z...zz..z...z.z...z..z.fz...z.z...z.z....a..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..ba..baz.z

abcdefghijklm...n..o..p..q..r..s..t..u..v..w..x..y..z..z.az.bz.cz.dz.ez.fz.gz.hz.iz.jz.kz.lz.m...z.n..z.o..z.p..z.q..z.r..z.s..z.t..z.u..z.v..z.w..z.x..z.y..z.z..z.z.az.z.bz.z.cz.z.dz.z.ez.z.fz.z.gz.z.hz.z.iz.z.jz.z.kz.z.lz.z.m...z.z.n..z.z.o..z.z.p..z.z.q..z.z.r..z.z.s..z.z.t..z.z.u..z.z.v..z.z.w..z.z.x..z.z.y..z.z.z..z.z.z.az.z.z.bz.z.z.cz.z.z.dz.z.z.ez.z.z.fz.z.z.gz.z.z.hz.z.z.iz.z.z.jz.z.z.kz.z.z.lz.z.z.m...z.z.z.n..z.z.z.o..z.z.z.p..z.z.z.q..z.z.z.r..z.z.z.s..z.z.z.t..z.z.z.u..z.z.z.v..z.z.z.w..z.z.z.x..z.z.z.y..z.z.z.z..z.z.z.z.az.z.z.z.bz.z.z.z.cz.z.z.z.dz.z.z.z.ez.z.z.z.fz.z.z.z.gz.z.z.z.hz.z.z.z.iz.z.z.z.jz.z.z.z.kz.z.z.z.lz.z.z.z.m...z.z.z.z.n..z.z.z.z.o..z.z.z.z.p..z.z.z.z.q

Pasting all plain text on the discussion page here at https://news.ycombinator.com/item?id=34470287 as of 22-01-2022 16:00Z renders Hilbert curve prominently while the rest is a Hodge podge of blocks and lines.

abcdefghijkloabcdefghijklopabcdefghijkloabcdefghijklopabcdefghijkloabcdefghijklopabcdefghijkloabcdefghijkloa