Show HN: Names

[toppy]

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

[xcambar]

Best unexpected use of the tool. I'm less impressed by the achievement than by the time and energy you used towards it. Well done!

[lawrenceyan]

I pasted this into chatGPT and it seems like it was able to understand the sequence as representative of a Hilbert Curve.

Very cool!

[jstjnsn]

Amazing! Thank you for taking the time to make this :)

[chrisshroba]

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)

[w-m]

This is beautiful work!

[abhayhegde]

For someone on phone, could you show the PNG of what the output is?

[KyleBerezin]

Fantastic

[johnfn]

This is remarkable.

[probablypower]

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?

[jstjnsn]

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.

[jamesgreenleaf]

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.

[nonethewiser]

There is:

.

[elil17]

My attempts:

piet mondrian piet mondrian piet mondrian

pot

a. pan

[binarymax]

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

[jstjnsn]

Yeah, some people in the comments got really creative but it would definitely be nice if sharing it would be easier. I might also add a download as png button at the bottom of the canvas. (Can already be done by right clicking but thats not very user friendly)

[jstjnsn]

"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!

[azeemba]

So I just typed each letter to see what the pattern was. Is there a reason you had the pattern rotate the other way after `m`?

[aordano]

Love your name/logo :)

[ManDeJan]

This is so sad

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

[teddyh]

https://knowyourmeme.com/memes/loss

[shevis]

Incredible

[creepycrawler]

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

[warent]

aabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbn

[spdustin]

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!

[andrelaszlo]

Haha my first thought as well:

bbddffhhjjlln..n..p..p..r..r..t..t..v..v..x..x..z..z..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..a...z.a...z..a...z.a...z..b...z.b...z..b...z.b...z..c...z.c...z..c...z.c...z..d...z.d...z..d...z.d...z..e...z.e...z..e...z.e...z..f...z.f...z..f...z.f...z..g...z.g...z..g...z.g...z..h...z.h...z..h...z.h...z..i...z.i...z..i...z.i...z..j...z.j...z..j...z.j...z..k...z.k...z..k...z.k...z..l...z.l...z..l...z.l...z..m..z.m..z..m..z.m..z..n.z.n.z..n.z.n.z..o.z.o.x

[zulu-inuoe]

Of course somebody thought of this already

[pavon]

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

[cycomanic]

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).

[kris_wayton]

"noon" and "poop" make pretty good squares.

[grose]

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

[pavon]

Repeating a string 4 times creates fun patterns with 360, 180 or 90 degree rotational symmetry (modifiable by adding spaces) which make nice looking avatars:

"grosegrosegrosegrose" "grose grose grose grose"

[shevis]

iaefeaiaefeaideadagaaa

[thih9]

I was surprised by this one. I didn't expect something so short to produce a meaningful result.

[w-m]

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

[RheingoldRiver]

> 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?

a lot of these are very cool and artful and incredibly creative, and I mean, the QR code generator, what can I say, but I think this one is my favorite

[jstjnsn]

Love this haha

[Rexxar]

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

[ipince]

I'm guessing just to make it more interesting, and have name drawings turn left/right, instead of just turning left. Note that n is the halfway point.

[RheingoldRiver]

ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU

[rawgabbit]

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

Love

[jstjnsn]

Spread the love <3

[memorable]

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