Show HN: Names (opens in new tab)

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

Interesting. Only covers ASCII, umlauts etc get ignored.

It seems like a lost opportunity not to have diagonal lines.

Like a minified code whose functions only return void. A lot of potential of creating funny programs based on named functions encoded in alphanumeric characters + some special ones. Well..we were coming from tape automata anyway, snap semantics to it!

Why does it draw a different picture for a word written in reverse?

The name game in the name game often gives fun looping results:

Janson Janson bo-banson, bonana-fana fo-fanson, Fee fi mo-manson, Janson!

Add or remove commas to keep it from going out of bounds.

This is like an esolang version of Logo turtle graphics.

This is cool. Kind of like an abbreviated subset of the Logo programming language. Would be nice to be able to specify angles other than 90° though.

hhhaaaahaaaahaaaaaahaauaaaaaaauaahaaahaaaeoaaaoaahaa

aaaddddggggjjjjllllnnnnpppprrrrttttvvvvxxxxzzzzbbccccffffhhhhjjjjllllnnnnpppprrrrttttvvvvxxxxzzzz

Is there a way to do it in reverse?

Sorry, I don't under how the visulization designed. Any explanation please?

Pretty cool, do wish the input box was larger though

abcdefghijklmabcdefghijklm

nopqrstuvwxyznopqrstuvwxyznopqrstuvwxyznopqrstuvwxyz

tarquinfintimlinbinwhinbustopftangftangolebiscuitbarrel quickly runs off the edge of the world. Maybe connect opposite edges to form a toroidal geometry to avoid this?

Sorry, I do not understand, any explanation please?

aaaa.bbbb.ccccc.dddd.eeee.ffff.gggg.hhhh.iiii.jjjj.kkkk.llll.mmmm.nnnnn.oooo.pppp.qqqq.rrrr.ssss.tttt.uuuu.vvvv.wwww.xxxx.yyyy.zzzz

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

A lil spiral

Feature request: unicode pls!

araazaaazaataazhataaamazzazawzkaazzzaaazaazawaazgagkgagaaaaraagagaadlbbeaabeaabeaabeaabeaabeaabeadaabaadadaaadaacgaacgaacgaaadaacaaeaebecaaebaaeaaaeabaeabaeaaaabbbbbabacaaeac

bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0

AAAAQQQQSSSSUUUVVV

heheleeq