Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: Names (joostjansen.me)
202 points by jstjnsn on Jan 21, 2023 | hide | past | favorite | 112 comments



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


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!


Recursion helped a lot ;) It took me like 15 minutes to make it. Reminds me of L-systems: https://en.wikipedia.org/wiki/L-system.


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

Very cool!


Did not work for me


What response did you get?


I'm sorry, but this seems to be a string of letters and symbols without a clear meaning or context. Can you provide more information or clarify what you're looking for assistance with?


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


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!


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



I'm not disappointed, just reminded that internet is amazing.


Fantastic


This is remarkable.


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.


There is:

.


Hehe


My attempts:

piet mondrian piet mondrian piet mondrian

pot

a. pan


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)


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


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.


tried zzzyyyxxx... so infuriating


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);
    }
  }


Halfabet is a fun variable name.


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.


This is so sad

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



Incredible


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!


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


Of course somebody thought of this already


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


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


"popo" (German word for butt) makes a closed rectangle that's _almost_ a square


Not a word, but "zzzz", or any four character repetition makes a perfect square. So now the previous comments that generate almost-squares make sense to me. It all clicked a little late for me :)


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


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"


Scratch that idea - people will not be pleased with the avatar for trebancas.


iaefeaiaefeaideadagaaa


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


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


Love this haha


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


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.


ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU.ZZZZYYYYXXXXWWWWVVVVUUUU


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

Love


Spread the love <3


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



Here is something I never would have thought to be done with my funky lines generator :’)


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.


Good point, I’ll think of adding that, thanks for the idea!


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?


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


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


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?


Basically it's a drawing program that takes as input letters and then moves a cursor different distances and rotations based on which letter is next.

So people are having fun coming up with letter permutations that draw something insteresting.


Thank you. I got it.


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


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

A lil spiral


Feature request: unicode pls!


araazaaazaataazhataaamazzazawzkaazzzaaazaazawaazgagkgagaaaaraagagaadlbbeaabeaabeaabeaabeaabeaabeadaabaadadaaadaacgaacgaacgaaadaacaaeaebecaaebaaeaaaeabaeabaeaaaabbbbbabacaaeac


Your username tells your skills in the game.


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


You blew my mind.


bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0 bbbbddddffffhhhhjjjjllll0nnnnpppprrrrttttvvvvxxxxzzzz0


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


I really like this one, thank you!


AAAAQQQQSSSSUUUVVV


heheleeq


I didn't have the courage to do it. Bonus points that it starts with "hehe" LOL


heheleet also works


.heh...dicc.ccc


[flagged]



The power of the internet


Sending this cryptic message to my wife's boyfriend


I tried using spaces but HN replaces multiple spaces with one.


https://news.ycombinator.com/formatdoc

  these words  are    very     distant
go nuts! (wink wink)


Beautiful


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: