121 comments

[ 3.4 ms ] story [ 174 ms ] thread
"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!
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`?
I tried aabbccdd... to make a spiral and it broke at m.
tried zzzyyyxxx... so infuriating
You can do it:

abcdefghijklm...n..o..p..q..r..s..t..u..v..w..x..y..z..z.ab...z..c...z..d...z..e

etc.

i.e., `.` changes direction. Once you get to `z` you can continue appending additional `z`s to keep it going. I quit making the spiral here cos I realized the top comment is also a spiral, although theirs is in the other direction.

Looks like a bug to me.
Definitely not a bug. There is a piece of code in source that looks like this:

  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);
    }
  }
Love your name/logo :)
Thank you! It was made with the generator :)
I know that was why i said name/logo :P

I saw the similarity, wrote "joost" and saw it was the same.

araazaaazaataazhataaamazzazawzkaazzzaaazaazawaazgagkgagaaaaraagagaadlbbeaabeaabeaabeaabeaabeaabeadaabaadadaaadaacgaacgaacgaaadaacaaeaebecaaebaaeaaaeabaeabaeaaaabbbbbabacaaeac
(comment deleted)
A bit cleaner, since `.` is a direction change in place (although the input string doesn't look as nice):

.r..z...z..t..zh.t...m.zz.z.wzk..zzz...z..z.w..zg.gkg.g....r..g.g..dlbbe..be..be..be..be..be..be.d..b..d.d...d..cg..cg..cg...d..c..e.ebec..eb..e...e.b.e.b.e....bbbbb.b.c..e.c

tarquinfintimlinbinwhinbustopftangftangolebiscuitbarrel quickly runs off the edge of the world. Maybe connect opposite edges to form a toroidal geometry to avoid this?
heheleeq
(comment deleted)
I didn't have the courage to do it. Bonus points that it starts with "hehe" LOL
bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0
(comment deleted)
I really like this one, thank you!
Now I with there was support for functions. In the meantime:

bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 zbbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 zzbbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 zzbbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 zzbbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 zz.bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 ...z.z.bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 zz. bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 ...z.z.bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 z.bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 z.z.bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 z.z.bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 z.z.bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0

AAAAQQQQSSSSUUUVVV
(comment deleted)
iaefeaiaefeaideadagaaa
I was surprised by this one. I didn't expect something so short to produce a meaningful result.
aabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbnaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbaabbn
[flagged]
edit: nah you changed your post without saying so. cringe
I mentioned that the space formatting on HN caught me off guard. Editing something to provide a better quality result is the opposite of cringe imo.
Is there a way to do it in reverse?
If you mean from a drawing of lines in the exact same style to the original text prompt, i dont think so. Unless you make some program that can be given the start and endpoint of the drawing, then it could decode the length and angle of all lines from end to start. This would not allow for overlapping lines though, since multiple lines could be overlapping, but maybe that actually doesnt matter. Could be a fun experiment :)
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!

(comment deleted)
Of course somebody thought of this already
(comment deleted)
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

abcdefghijkloabcdefghijklopabcdefghijkloabcdefghijklopabcdefghijkloabcdefghijklopabcdefghijkloabcdefghijkloa
ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU
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

> 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

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
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
Cool! Feature request: put the word in the url querystring so they are easy to share.
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)
aaaz.zv.vbaav.vaabv.v.bav.vaavaabvaaawbezcabyaaoaazcaoaaboaaabyaagzbaazaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaaccaahaazaapbaaozobaanaamaaaiahl

Love

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)
This is beautiful work!
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
oh, I expected that to be this:

aaaa.b.bbbb.c.cccc.d.dddd.e.eeee.f.ffff.g.gggg.h.hhhh.i.iiii.j.jjjj.k.kkkkk.l.llll.m.mmmmm....n...nnnn...o...oooo...p...pppp...q...qqqq...r...rrrr...s...ssss...t...tttt...u...uuuu...v...vvvv...w...wwww...x...xxxx...y...yyyy...z...zzzz

Sorry, I don't under how the visulization designed. Any explanation please?
For every letter typed a line is drawn. The length of the letter is determined by its position in the alphabet. The next line will be drawn with a rotation depending if its in the first or the second half of the alphabet. So it goes to the left is its between a and m and to the right if its between n and z. Hope that clears it up for you!
Thanks. got it. It would be great if you add an example in the site :)