6 ms·

Show HN: CFR[]: Very minimal drawing language with 5 commands: C, F, R, [, ]

176 points by susam 3y ago

oldbbsnickname 3y ago
This is so much simpler than APPLE //e LOGO. Or Etch A Sketch with color, undo, composition, and perfect alignment. Okay, who's going to write the first interpreter in bf that's also a quine? ;D
susam 3y ago
Demos: https://susam.net/cfr.html#0 https://susam.net/cfr.html#0 https://susam.net/cfr.html#3 https://susam.net/cfr.html#3 https://susam.net/cfr.html#5 https://susam.net/cfr.html#5
- zerojames 3y ago
  I added some letters to a demo and made https://susam.net/cfr.html#B15FRCFE7R2F4C11BR3E6C2E3 https://susam.net/cfr.html#B15FRCFE7R2F4C11BR3E6C2E3. Thank you for making this! I don't know how it works but it is fun!
rizky05 3y ago
[dead]
neontomo 3y ago
I played around with it but I don't have a clue what I'm doing. Managed to make this pretty geometric shape based on one of your examples though: https://susam.net/cfr.html#B15F15CRE6RF2BR2FE6CE3 https://susam.net/cfr.html#B15F15CRE6RF2BR2FE6CE3 I wonder what an AI could design with instructions for how to use this.
- sargstuff 3y ago
  Transform non-picturesque programming languages into editable piet[0] picassos in dna version of hamming codes. Poincarne / Hilbert ideas in reasonable/editable form, L-Systems[1][2][3] [0] : http://esolangs.org/wiki/Piet http://esolangs.org/wiki/Piet [1] : apl for postscript : http://en.wikipedia.org/wiki/L-system http://en.wikipedia.org/wiki/L-system [2] : https://fse.studenttheses.ub.rug.nl/14938/1/MSc_EducationMath_2017_Lok_K.pdf https://fse.studenttheses.ub.rug.nl/14938/1/MSc_EducationMat... [3] : https://www.sidefx.com/docs/houdini/nodes/sop/lsystem.html https://www.sidefx.com/docs/houdini/nodes/sop/lsystem.html [4] : https://mizzlrblog.wordpress.com/2016/06/17/l-system-compiler-and-renderer-in-python/ https://mizzlrblog.wordpress.com/2016/06/17/l-system-compile... [5] : nature of code : https://www.youtube.com/watch?v=f6ra024-ASY https://www.youtube.com/watch?v=f6ra024-ASY
  - neontomo 3y ago
    Thank you for some interesting reading!
- ryankrage77 3y ago
  > I wonder what an AI could design with instructions for how to use this. I tried asking chatGPT to use it, removing the colour instruction to reduce complexity. After clarifying what each instructions does and providing some documented examples, it could write syntactically valid programs, but they never drew the shape or pattern it explained they would. I think the language being repetitive strings of characters doesn't mesh well with predicting tokens.
  - simpaticoder 3y ago
    Maybe try adding spaces between the letters and then mechanically remove those spaces when rendering.
neontomo 3y ago
Some ideas I had after playing a bit more: - If you raised the bit limit and added a "skip" option (ability the move cursor forward without drawing) you could potentially render simple 3d objects and run Doom by converting objects to commands - You could implement a function that simplifies your existing inputs, so: FFFF becomes [[F]]
- jacquesm 3y ago
  How is [[F]] simpler than FFFF?
  - neontomo 3y ago
    It's not, it's just an example. As the string gets longer you can definitely shorten it.
secondcoming 3y ago
Some like to use the Back button to go to the previous page
- jandrese 3y ago
  It stores the program in the URL bar so you can send other people links to your drawing.
  - evrimoztamur 3y ago
    Sure, but it also added 50 entries to my browsing history. You can use the browser history API to only replace the state instead of pushing new states on.
- susam 3y ago
  Oops! I like to use the back button too. While implementing the distributable link feature, I overlooked that this is breaking the back button behaviour. Thanks for pointing this out! I have pushed a fix for it just now. Please hard-refresh the page (ctrl+F5, cmd+shift+r, etc.) and let me know if you still see issues.
  - perth 3y ago
    The GitHub link is helpful, it might be useful to include what each command does at the bottom of the page so users don’t have to go to the GitHub page to figure it out
sshb 3y ago
[[[FFR]]]FFRFFRFFCFFFFFFFFFFFFFFFCCCCCCC[[[FFR]]][[[FFR]]]FFCFFFFFFFFFFFFFFFFFFFFFFFFFFFCCCCCCCRR[[[[[FFFFFF]]R]]]FFFFFFFFFFFFFFFFFFFRRCCCCCCCCCFFFFFFFFFFFFFFFFFFFFFFFFFCCCCCCCRRRRRRFFRFFFRFFFFFFFFFFFFFFFFFRFFRFF
Hackbraten 3y ago
https://susam.net/cfr.html#CB4CFBRB3RB3F4E8C5EC2R2E2 https://susam.net/cfr.html#CB4CFBRB3RB3F4E8C5EC2R2E2
deleted 3y ago
[deleted]
yafbum 3y ago
[EDIT: Fixed] I know you didn't mean this but the browser history trapping on every keystroke felt kind of abusive on mobile. Thanks for the fix.
- susam 3y ago
  Yes, this was reported at https://news.ycombinator.com/item?id=37969444 https://news.ycombinator.com/item?id=37969444 and I got a fix out shortly afterward. Please hard-refresh the page (ctrl+F5, cmd+shift+r, etc.) and let me know if you still see this issue. Thank you for highlighting this problem!
  - yafbum 3y ago
    Works!
- IIAOPSW 3y ago
  Edit: Fixed Edit: Fixed
danielvaughn 3y ago
Love this. I'm in the process of creating a language myself, though mine is more for UI. Are you parsing it yourself or are you using something like ANTLR or tree-sitter?
- majewsky 3y ago
  Not OP, but I don't see why one would need to parse this at all. You can just step through the characters one byte at a time and execute them, using only a stack memory for return addresses to implement the [] behavior. No syntax tree needed.
- susam 3y ago
  Thanks! Glad you like it. The sibling comment by majewsky is spot on. There is not much parsing going on. Every character is read one at a time and the turtle's state is changed. Indeed the "[" and "]" commands are implemented with a stack. The entire implementation is a single HTML page written in plain HTML + JavaScript. The evaluation of the code happens here: <https://github.com/susam/cfr/blob/0.2.0/cfr.html#L204 https://github.com/susam/cfr/blob/0.2.0/cfr.html#L204>.
- zx90 3y ago
  A minimal language for UIs sounds interesting. Can you share any details?
  - danielvaughn 3y ago
    Sure thing! It’s still in early development and doesn’t have an engine yet, but the syntax is about 80% scoped out: https://matry.design https://matry.design
mdonahoe 3y ago
What’s the minimal program that actually draws something? I’m just getting black so far. Edit: ah, it’s F
- mdonahoe 3y ago
  Or ] if you want to make a red screen ;-)
omneity 3y ago
This is awesome. I got nerd-sniped trying to create Moroccan Zellige [0], a highly geometric tiling, which seems like a great match to CFR[]. My best rendition (would have been better if there was a counter clockwise rotation, improvements to my code are welcome!): [[FFFFFFR[[CFFFFF]]][[[[[[[FF]]]]RR[[F[CC[RC[FFFFFF]]RFFFFF[RFFFFF][R[CFFFFFF]]]]]R[[[[FFFFFFFFFFFFFFFFFFFFF]]]]][[FFFFFFFFF]]]] [0]: https://zellige.info/ https://zellige.info/
- amputect 3y ago
  Just wanted to say that I think your rendition of Zellige is really nice, thank you for sharing! This is a very cool drawing language, and I think your art here is a really solid example of how creative you can be even with very limited tools. I made a pinwheel, which is maybe not that exciting, but was a lot of fun for me. I like the bracket syntax a lot, and figuring out how to make this work actually recaptures some of the old sense of exploration and fun that I felt before programming was my day job.
  - omneity 3y ago
    Thanks, please consider sharing your pinwheel, I'm sure it was awesome to make too! You're touching on an important point. I tried to figure out CFR[] by trial and error and it was a lot of fun, the kind of which I didn't feel for a long time. I think this boils down to two things: - Bounded complexity, which encourages you to explore it to its fullest - Immediate feedback, the result is not disconnected from the act of editing the code, so your iteration cycle is super short. Congrats OP, amazing design work!
- cantcopy 3y ago
  Another zellige motif [[[FFFFRFFFRRRRRR]]]
  - omneity 3y ago
    Nice one! If only we could combine the two :)
sargstuff 3y ago
"Awk-Apl SOLIDs, a logistician's tty take on analytic geometry"(unpublished) resources that might be of interest: Techinques in the unpublished report make use of some solid applied analytic geometry regessions (byte sized pixels[2][3]) using sources of integer sequence[1] for a different mechanical engineering take on what CFR[] does. Although, the overall goal was to maximize font type useage[4][6] while minimizing IRQ/type ball interuptions[5]. aka mechanical/impressionist e-ink. Takes less effort to generate striking details with CFR[]. ** [1] : HN resource on integer number sequences : https://news.ycombinator.com/item?id=36038302 https://news.ycombinator.com/item?id=36038302 a few noteable websites : The Cinco Library Encyclopedia of Numbers : https://www.youtube.com/watch?v=rVtHrgdcvZA On-Line Encyclopedia of Inter Sequences : https://en.wikipedia.org/wiki/On-Line_Encyclopedia_of_Integer_Sequences offline/local dabase intdb : https://github.com/popey456963/intdb *** [2] 40 yr lang; https://www.fosslife.org/awk-power-and-promise-40-year-old-language https://www.fosslife.org/awk-power-and-promise-40-year-old-l... [3] gawk chapter "11.3.11 And Now for Something Completely Different" program : https://www.gnu.org/software/gawk/manual/gawk.pdf https://www.gnu.org/software/gawk/manual/gawk.pdf [4] DR thesis commentary : https://computerhistory.org/blog/discovering-dennis-ritchies-lost-dissertation/ https://computerhistory.org/blog/discovering-dennis-ritchies... [5] HN (char)0 = 0; (https://news.ycombinator.com/item?id=37910983 https://news.ycombinator.com/item?id=37910983 ) [5] "selectric typewriter goes from trash can to linux" : https://hackaday.com/2023/07/25/selectric-typewriter-goes-from-trash-can-to-linux-terminal/ https://hackaday.com/2023/07/25/selectric-typewriter-goes-fr... [6] diy typewriter : https://hackaday.com/2023/04/11/ibm-selectric-typewriters-finally-get-diy-typeballs/^ https://hackaday.com/2023/04/11/ibm-selectric-typewriters-fi... No comicon sans cast type example provided.
merelysounds 3y ago
Looks great, congrats! Feature request: dedicated command for “forward without color”. Perhaps “L”, as in “lifting the pen”? I know black on black is treated the same, but I would like the separation of concerns. I would even accept dropping “C” if this helped (effectively: reducing color palette to two, making “C” work like my proposed “L”). So perhaps this feature request is about defining custom color palettes. Edit - random doodling: https://susam.net/cfr.html#B12F2E3RB3CF2E3RE2RE3CB6F2E3R4ER2E2 https://susam.net/cfr.html#B12F2E3RB3CF2E3RE2RE3CB6F2E3R4ER2...
- merelysounds 3y ago
  More random doodling: - https://susam.net/cfr.html#B14F2C2F2E5RB5FEB4F2EFE3RE2RE3BCE3R4ER2E https://susam.net/cfr.html#B14F2C2F2E5RB5FEB4F2EFE3RE2RE3BCE... - https://susam.net/cfr.html#B3RB2CBRB2F17B3RB4FE5B4FE2FE4RE3RE5 https://susam.net/cfr.html#B3RB2CBRB2F17B3RB4FE5B4FE2FE4RE3R...
unflxw 3y ago
This is really neat! I made a space-filling curve: [[[[[[[[[[[[[[[[FR]]FRR]]RRRRRRF]]FFFFFFFRR]]RRRRRRFFFFFFFFF]]FFFFFFFFFFFFFFFFFFFFFFFRR]]RRRRRRFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF]]FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFRR]] It's not very interesting by itself (it just fills the whole screen with white) but you get cool-looking visualisations of its fractal-like structure by putting "C" at different points of the opening brackets.
- bioxept 3y ago
  That’s cool. Also adding “R”s at various positions leads to interesting effects. For example: C[[[RC[[[RC[[[CR[[[C[[C[C[FCR]]FRR]]RRRCRRRF]]FFFRFFFFRR]]RRRRCRRFFFFFFFFF]]FFFRFFFFFFFFFFFFFFFFFFFFRR]]RRRRRRFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF]]FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFCFFFFFFFFFFCFFFFFFFFFFFFFFFFRR]]CC
- furyofantares 3y ago
  Me too: ]
  - oldbbsnickname 3y ago
    New command: ;D
- acedio 3y ago
  Tried seeing how small of a program I could fill the screen with. Came up with this, but feels like there has to be a more elegant solution ^^; [[[[[[[[[[[[[[[[F]]]]]]]]RRF[[R]R]]]]]]]]]
  - vitus 3y ago
    Naive micro-optimization of your program (namely, things like FF is 1 char shorter than [F]) got that down to 40 chars: [[[[[[[[[[[[[[[FF]]]]]]]RRF[RRR]]]]]]]]] I then found a solution in 37 which uses a slightly different approach (namely, create a pattern that spans the full X and Y output space, then shift it by one step each iteration): [[[[[[[[[[[[[[[[FFF]]]]]R]]]F]]]]]]]]
b33j0r 3y ago
May I suggest the name `turtlefu*` or `turtle[fu]`? `CFR[]` is brilliant for being descriptive, and I think it’ll stick. But it read to me like a regulation or tax code. Perfect for misdirection. No one ever suspects the return of LOGO as “Brackish Bletchly!”
drewtato 3y ago
The syntax definitions on github are 1. not on the site, and 2. not very good, so here's some better ones: F (fill/forward): draw a pixel and move forward C (color): change the color R (rotate): rotate the direction of F by 45 degrees [ ... ] (loop): anything inside this is executed twice
- susam 3y ago
  > The syntax definitions on github are ... Are you referring to the short list at the top of the README on GitHub? That list does not provide "syntax definitions". That's just a quick introduction about what is about to come. The commands are explained in detail in the section "Commands" later here: https://github.com/susam/cfr#commands https://github.com/susam/cfr#commands > F (fill/forward): draw a pixel and move forward The command "F" does not draw a pixel and move forward. Instead "F" moves forward first and then draws a cell. > [ ... ] (loop): anything inside this is executed twice The control flow command "[" can be written without a corresponding "]". For example "[", "[F", "[[F", etc. are valid CFR[] inputs. Again, the section of the README I have linked to above defines what "[" and what "]" are.
  - hipadev23 3y ago
    [flagged]
    - susam 3y ago
      > You don't get to be angry I am not. > when the readme isn't directly linked on the website It is.
  - drewtato 3y ago
    Barely anyone is going to go to the github, especially outside of HN, and only some of those people are going to read past the first image, so it's important that you get the most important information out there immediately. I glanced at the extended explanation and decided it would be faster to figure it out by putting stuff in the website. The instant visual feedback means you don't need to tell users every nuance of every command, but you do need to pick the specific details that users can use to learn everything else.
oldbbsnickname 3y ago
CRRRRFFFFFFFFFFFFFFFFFFRRFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFRRCCCC[[[FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFR]]]
jacquesm 3y ago
This is very neat, the minimalist approach has a nice aesthetic and some of the examples here are way beyond what I thought you could do with it.
jgtrosh 3y ago
Origami scarab [[[[[[[[FFCFF]]RR]RR]R]RR]R]]
abutbul 3y ago
C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]
at_a_remove 3y ago
Used the five commands in the order presented, nothing happened. I guess this is a puzzle and not a demo. And on to the next thing I guess.
furyofantares 3y ago
To get to the bottom left: [RRR][[[[[[F]F]F]F]F]F]F[RRR][[[[[[F]F]F]F]F]F]FF https://susam.net/cfr.html#BR3EB6FEFEFEFEFEFEFBR3EB6FEFEFEFEFEFEF2 https://susam.net/cfr.html#BR3EB6FEFEFEFEFEFEFBR3EB6FEFEFEFE... Prepend a C to get there without drawing lines on the way. Suffix with [RRRRRR]C to rotate upwards and get a visible color again. Whenever I'm lost I paste [[[[CFCF]]]] at the end to find my cursor.
tda 3y ago
So it should be possible to combine this with piet and write a quine... Just putting this out there hoping I can need snipe anyone
carlsverre 3y ago
This is super fun to play with. Adding instructions at different points in this pattern generates some very cool overlay effects. [[[[[[FFCFFFFFFFFFCCCCCCC[[[FFR]]FFR]]]RRRRRCFFFFFFFFFFFFFFFFFFC[[[FFCFFFFFFFFFCCCCCCC[[[FFR]]FFR]]]CCCCCCRRRRRRCCCCCCCCCFFFFFFFFFFFFFFFFFFFFFCCCC[[[FFCFFFFFFFFFFFFFCCCCCCC[[[FFR]]FFR]]]CCFF]]
raverbashing 3y ago
Very cool idea I'd suggest a little hint box below explaining what do the commands do, I had to check github for those
- ris58h 3y ago
  The buttons have a tooltip with a short explanation.
  - uKVZe85V 3y ago
    Which are not visible on a smartphone, and IMHO should appear right away without having to hover anyway.
    - susam 3y ago
      Thank you for sharing this feedback. I have updated the implementation and added a '?' button now that can be pressed on a smartphone to bring up a help screen. The help screen has brief descriptions about each command.
movpasd 3y ago
Cool! I love the absolute minimalism, it forces some creativity. I don't know if it would violate the spirit of the language to add some kind of state or conditional to make it Turing-complete. I made a grid: [[[[[[[[[[FFFF]RR[FFFF]RR[FFFF]RR[FFFF]C[RRR][FFFF][RRR][FFFF][RRR][FFFF]]]]][FFFF]C]]]]]
IIAOPSW 3y ago
Its the simple things sometimes [[[[[[[CC[[FF]]]]R]R]R]]]
etelnet 3y ago
https://susam.net/cfr.html#B4RB6F3R3FRFRFRF2RFRFE3RE3C4E4 https://susam.net/cfr.html#B4RB6F3R3FRFRFRF2RFRFE3RE3C4E4
keepamovin 3y ago
Is there a measure of something being "canvas complete" where you can construct "any bitmap" given it? Analogous to Turing complete but limited to drawing on a bitmap canvas. This is so cool by the way! I love this! Thank you for making this!! :)
- SCLeo 3y ago
  “lossless image format" maybe?
  - keepamovin 3y ago
    Ha! I was thinking more "a drawing language" like the one in the Show HN post. So cool! I was wondering if there are other languages like these, and a measure analogous to Turing completeness, but for "canvas completeness" for drawing any bitmap on a canvas! :)
chy76 3y ago
[[[[[[[[[[[[FCRFRFRFRFRFRFRFRF]]]R[[[[F]]]]]]]R]R]R]R]R]

176 points by susam 3y ago

This is so much simpler than APPLE //e LOGO. Or Etch A Sketch with color, undo, composition, and perfect alignment. Okay, who's going to write the first interpreter in bf that's also a quine? ;D

susam 3y ago

Demos: https://susam.net/cfr.html#0 https://susam.net/cfr.html#0 https://susam.net/cfr.html#3 https://susam.net/cfr.html#3 https://susam.net/cfr.html#5 https://susam.net/cfr.html#5

zerojames 3y ago
I added some letters to a demo and made https://susam.net/cfr.html#B15FRCFE7R2F4C11BR3E6C2E3 https://susam.net/cfr.html#B15FRCFE7R2F4C11BR3E6C2E3. Thank you for making this! I don't know how it works but it is fun!

rizky05 3y ago

[dead]

neontomo 3y ago

I played around with it but I don't have a clue what I'm doing. Managed to make this pretty geometric shape based on one of your examples though: https://susam.net/cfr.html#B15F15CRE6RF2BR2FE6CE3 https://susam.net/cfr.html#B15F15CRE6RF2BR2FE6CE3 I wonder what an AI could design with instructions for how to use this.

sargstuff 3y ago
Transform non-picturesque programming languages into editable piet[0] picassos in dna version of hamming codes. Poincarne / Hilbert ideas in reasonable/editable form, L-Systems[1][2][3] [0] : http://esolangs.org/wiki/Piet http://esolangs.org/wiki/Piet [1] : apl for postscript : http://en.wikipedia.org/wiki/L-system http://en.wikipedia.org/wiki/L-system [2] : https://fse.studenttheses.ub.rug.nl/14938/1/MSc_EducationMath_2017_Lok_K.pdf https://fse.studenttheses.ub.rug.nl/14938/1/MSc_EducationMat... [3] : https://www.sidefx.com/docs/houdini/nodes/sop/lsystem.html https://www.sidefx.com/docs/houdini/nodes/sop/lsystem.html [4] : https://mizzlrblog.wordpress.com/2016/06/17/l-system-compiler-and-renderer-in-python/ https://mizzlrblog.wordpress.com/2016/06/17/l-system-compile... [5] : nature of code : https://www.youtube.com/watch?v=f6ra024-ASY https://www.youtube.com/watch?v=f6ra024-ASY
- neontomo 3y ago
  Thank you for some interesting reading!
ryankrage77 3y ago
> I wonder what an AI could design with instructions for how to use this. I tried asking chatGPT to use it, removing the colour instruction to reduce complexity. After clarifying what each instructions does and providing some documented examples, it could write syntactically valid programs, but they never drew the shape or pattern it explained they would. I think the language being repetitive strings of characters doesn't mesh well with predicting tokens.
- simpaticoder 3y ago
  Maybe try adding spaces between the letters and then mechanically remove those spaces when rendering.

neontomo 3y ago

Some ideas I had after playing a bit more: - If you raised the bit limit and added a "skip" option (ability the move cursor forward without drawing) you could potentially render simple 3d objects and run Doom by converting objects to commands - You could implement a function that simplifies your existing inputs, so: FFFF becomes [[F]]

jacquesm 3y ago
How is [[F]] simpler than FFFF?
- neontomo 3y ago
  It's not, it's just an example. As the string gets longer you can definitely shorten it.

secondcoming 3y ago

Some like to use the Back button to go to the previous page

jandrese 3y ago
It stores the program in the URL bar so you can send other people links to your drawing.
- evrimoztamur 3y ago
  Sure, but it also added 50 entries to my browsing history. You can use the browser history API to only replace the state instead of pushing new states on.
susam 3y ago
Oops! I like to use the back button too. While implementing the distributable link feature, I overlooked that this is breaking the back button behaviour. Thanks for pointing this out! I have pushed a fix for it just now. Please hard-refresh the page (ctrl+F5, cmd+shift+r, etc.) and let me know if you still see issues.
- perth 3y ago
  The GitHub link is helpful, it might be useful to include what each command does at the bottom of the page so users don’t have to go to the GitHub page to figure it out

sshb 3y ago

[[[FFR]]]FFRFFRFFCFFFFFFFFFFFFFFFCCCCCCC[[[FFR]]][[[FFR]]]FFCFFFFFFFFFFFFFFFFFFFFFFFFFFFCCCCCCCRR[[[[[FFFFFF]]R]]]FFFFFFFFFFFFFFFFFFFRRCCCCCCCCCFFFFFFFFFFFFFFFFFFFFFFFFFCCCCCCCRRRRRRFFRFFFRFFFFFFFFFFFFFFFFFRFFRFF

Hackbraten 3y ago

https://susam.net/cfr.html#CB4CFBRB3RB3F4E8C5EC2R2E2 https://susam.net/cfr.html#CB4CFBRB3RB3F4E8C5EC2R2E2

deleted 3y ago

[deleted]

yafbum 3y ago

[EDIT: Fixed] I know you didn't mean this but the browser history trapping on every keystroke felt kind of abusive on mobile. Thanks for the fix.

susam 3y ago
Yes, this was reported at https://news.ycombinator.com/item?id=37969444 https://news.ycombinator.com/item?id=37969444 and I got a fix out shortly afterward. Please hard-refresh the page (ctrl+F5, cmd+shift+r, etc.) and let me know if you still see this issue. Thank you for highlighting this problem!
- yafbum 3y ago
  Works!
IIAOPSW 3y ago
Edit: Fixed Edit: Fixed

danielvaughn 3y ago

Love this. I'm in the process of creating a language myself, though mine is more for UI. Are you parsing it yourself or are you using something like ANTLR or tree-sitter?

majewsky 3y ago
Not OP, but I don't see why one would need to parse this at all. You can just step through the characters one byte at a time and execute them, using only a stack memory for return addresses to implement the [] behavior. No syntax tree needed.
susam 3y ago
Thanks! Glad you like it. The sibling comment by majewsky is spot on. There is not much parsing going on. Every character is read one at a time and the turtle's state is changed. Indeed the "[" and "]" commands are implemented with a stack. The entire implementation is a single HTML page written in plain HTML + JavaScript. The evaluation of the code happens here: <https://github.com/susam/cfr/blob/0.2.0/cfr.html#L204 https://github.com/susam/cfr/blob/0.2.0/cfr.html#L204>.
zx90 3y ago
A minimal language for UIs sounds interesting. Can you share any details?
- danielvaughn 3y ago
  Sure thing! It’s still in early development and doesn’t have an engine yet, but the syntax is about 80% scoped out: https://matry.design https://matry.design

mdonahoe 3y ago

What’s the minimal program that actually draws something? I’m just getting black so far. Edit: ah, it’s F

mdonahoe 3y ago
Or ] if you want to make a red screen ;-)

omneity 3y ago

This is awesome. I got nerd-sniped trying to create Moroccan Zellige [0], a highly geometric tiling, which seems like a great match to CFR[]. My best rendition (would have been better if there was a counter clockwise rotation, improvements to my code are welcome!): [[FFFFFFR[[CFFFFF]]][[[[[[[FF]]]]RR[[F[CC[RC[FFFFFF]]RFFFFF[RFFFFF][R[CFFFFFF]]]]]R[[[[FFFFFFFFFFFFFFFFFFFFF]]]]][[FFFFFFFFF]]]] [0]: https://zellige.info/ https://zellige.info/

amputect 3y ago
Just wanted to say that I think your rendition of Zellige is really nice, thank you for sharing! This is a very cool drawing language, and I think your art here is a really solid example of how creative you can be even with very limited tools. I made a pinwheel, which is maybe not that exciting, but was a lot of fun for me. I like the bracket syntax a lot, and figuring out how to make this work actually recaptures some of the old sense of exploration and fun that I felt before programming was my day job.
- omneity 3y ago
  Thanks, please consider sharing your pinwheel, I'm sure it was awesome to make too! You're touching on an important point. I tried to figure out CFR[] by trial and error and it was a lot of fun, the kind of which I didn't feel for a long time. I think this boils down to two things: - Bounded complexity, which encourages you to explore it to its fullest - Immediate feedback, the result is not disconnected from the act of editing the code, so your iteration cycle is super short. Congrats OP, amazing design work!
cantcopy 3y ago
Another zellige motif [[[FFFFRFFFRRRRRR]]]
- omneity 3y ago
  Nice one! If only we could combine the two :)

sargstuff 3y ago

"Awk-Apl SOLIDs, a logistician's tty take on analytic geometry"(unpublished) resources that might be of interest: Techinques in the unpublished report make use of some solid applied analytic geometry regessions (byte sized pixels[2][3]) using sources of integer sequence[1] for a different mechanical engineering take on what CFR[] does. Although, the overall goal was to maximize font type useage[4][6] while minimizing IRQ/type ball interuptions[5]. aka mechanical/impressionist e-ink. Takes less effort to generate striking details with CFR[]. ** [1] : HN resource on integer number sequences : https://news.ycombinator.com/item?id=36038302 https://news.ycombinator.com/item?id=36038302 a few noteable websites : The Cinco Library Encyclopedia of Numbers : https://www.youtube.com/watch?v=rVtHrgdcvZA On-Line Encyclopedia of Inter Sequences : https://en.wikipedia.org/wiki/On-Line_Encyclopedia_of_Integer_Sequences offline/local dabase intdb : https://github.com/popey456963/intdb *** [2] 40 yr lang; https://www.fosslife.org/awk-power-and-promise-40-year-old-language https://www.fosslife.org/awk-power-and-promise-40-year-old-l... [3] gawk chapter "11.3.11 And Now for Something Completely Different" program : https://www.gnu.org/software/gawk/manual/gawk.pdf https://www.gnu.org/software/gawk/manual/gawk.pdf [4] DR thesis commentary : https://computerhistory.org/blog/discovering-dennis-ritchies-lost-dissertation/ https://computerhistory.org/blog/discovering-dennis-ritchies... [5] HN (char)0 = 0; (https://news.ycombinator.com/item?id=37910983 https://news.ycombinator.com/item?id=37910983 ) [5] "selectric typewriter goes from trash can to linux" : https://hackaday.com/2023/07/25/selectric-typewriter-goes-from-trash-can-to-linux-terminal/ https://hackaday.com/2023/07/25/selectric-typewriter-goes-fr... [6] diy typewriter : https://hackaday.com/2023/04/11/ibm-selectric-typewriters-finally-get-diy-typeballs/^ https://hackaday.com/2023/04/11/ibm-selectric-typewriters-fi... No comicon sans cast type example provided.

merelysounds 3y ago

Looks great, congrats! Feature request: dedicated command for “forward without color”. Perhaps “L”, as in “lifting the pen”? I know black on black is treated the same, but I would like the separation of concerns. I would even accept dropping “C” if this helped (effectively: reducing color palette to two, making “C” work like my proposed “L”). So perhaps this feature request is about defining custom color palettes. Edit - random doodling: https://susam.net/cfr.html#B12F2E3RB3CF2E3RE2RE3CB6F2E3R4ER2E2 https://susam.net/cfr.html#B12F2E3RB3CF2E3RE2RE3CB6F2E3R4ER2...

merelysounds 3y ago
More random doodling: - https://susam.net/cfr.html#B14F2C2F2E5RB5FEB4F2EFE3RE2RE3BCE3R4ER2E https://susam.net/cfr.html#B14F2C2F2E5RB5FEB4F2EFE3RE2RE3BCE... - https://susam.net/cfr.html#B3RB2CBRB2F17B3RB4FE5B4FE2FE4RE3RE5 https://susam.net/cfr.html#B3RB2CBRB2F17B3RB4FE5B4FE2FE4RE3R...

unflxw 3y ago

This is really neat! I made a space-filling curve: [[[[[[[[[[[[[[[[FR]]FRR]]RRRRRRF]]FFFFFFFRR]]RRRRRRFFFFFFFFF]]FFFFFFFFFFFFFFFFFFFFFFFRR]]RRRRRRFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF]]FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFRR]] It's not very interesting by itself (it just fills the whole screen with white) but you get cool-looking visualisations of its fractal-like structure by putting "C" at different points of the opening brackets.

bioxept 3y ago
That’s cool. Also adding “R”s at various positions leads to interesting effects. For example: C[[[RC[[[RC[[[CR[[[C[[C[C[FCR]]FRR]]RRRCRRRF]]FFFRFFFFRR]]RRRRCRRFFFFFFFFF]]FFFRFFFFFFFFFFFFFFFFFFFFRR]]RRRRRRFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF]]FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFCFFFFFFFFFFCFFFFFFFFFFFFFFFFRR]]CC
furyofantares 3y ago
Me too: ]
- oldbbsnickname 3y ago
  New command: ;D
acedio 3y ago
Tried seeing how small of a program I could fill the screen with. Came up with this, but feels like there has to be a more elegant solution ^^; [[[[[[[[[[[[[[[[F]]]]]]]]RRF[[R]R]]]]]]]]]
- vitus 3y ago
  Naive micro-optimization of your program (namely, things like FF is 1 char shorter than [F]) got that down to 40 chars: [[[[[[[[[[[[[[[FF]]]]]]]RRF[RRR]]]]]]]]] I then found a solution in 37 which uses a slightly different approach (namely, create a pattern that spans the full X and Y output space, then shift it by one step each iteration): [[[[[[[[[[[[[[[[FFF]]]]]R]]]F]]]]]]]]

b33j0r 3y ago

May I suggest the name `turtlefu*` or `turtle[fu]`? `CFR[]` is brilliant for being descriptive, and I think it’ll stick. But it read to me like a regulation or tax code. Perfect for misdirection. No one ever suspects the return of LOGO as “Brackish Bletchly!”

drewtato 3y ago

The syntax definitions on github are 1. not on the site, and 2. not very good, so here's some better ones: F (fill/forward): draw a pixel and move forward C (color): change the color R (rotate): rotate the direction of F by 45 degrees [ ... ] (loop): anything inside this is executed twice

susam 3y ago
> The syntax definitions on github are ... Are you referring to the short list at the top of the README on GitHub? That list does not provide "syntax definitions". That's just a quick introduction about what is about to come. The commands are explained in detail in the section "Commands" later here: https://github.com/susam/cfr#commands https://github.com/susam/cfr#commands > F (fill/forward): draw a pixel and move forward The command "F" does not draw a pixel and move forward. Instead "F" moves forward first and then draws a cell. > [ ... ] (loop): anything inside this is executed twice The control flow command "[" can be written without a corresponding "]". For example "[", "[F", "[[F", etc. are valid CFR[] inputs. Again, the section of the README I have linked to above defines what "[" and what "]" are.
- hipadev23 3y ago
  [flagged]
  - susam 3y ago
    > You don't get to be angry I am not. > when the readme isn't directly linked on the website It is.
- drewtato 3y ago
  Barely anyone is going to go to the github, especially outside of HN, and only some of those people are going to read past the first image, so it's important that you get the most important information out there immediately. I glanced at the extended explanation and decided it would be faster to figure it out by putting stuff in the website. The instant visual feedback means you don't need to tell users every nuance of every command, but you do need to pick the specific details that users can use to learn everything else.

oldbbsnickname 3y ago

CRRRRFFFFFFFFFFFFFFFFFFRRFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFRRCCCC[[[FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFR]]]

jacquesm 3y ago

This is very neat, the minimalist approach has a nice aesthetic and some of the examples here are way beyond what I thought you could do with it.

jgtrosh 3y ago

Origami scarab [[[[[[[[FFCFF]]RR]RR]R]RR]R]]

abutbul 3y ago

C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]C[FRC[F[F]]FF]RC[FCC[FFC[]FR]]

at_a_remove 3y ago

Used the five commands in the order presented, nothing happened. I guess this is a puzzle and not a demo. And on to the next thing I guess.

furyofantares 3y ago

To get to the bottom left: [RRR][[[[[[F]F]F]F]F]F]F[RRR][[[[[[F]F]F]F]F]F]FF https://susam.net/cfr.html#BR3EB6FEFEFEFEFEFEFBR3EB6FEFEFEFEFEFEF2 https://susam.net/cfr.html#BR3EB6FEFEFEFEFEFEFBR3EB6FEFEFEFE... Prepend a C to get there without drawing lines on the way. Suffix with [RRRRRR]C to rotate upwards and get a visible color again. Whenever I'm lost I paste [[[[CFCF]]]] at the end to find my cursor.

tda 3y ago

So it should be possible to combine this with piet and write a quine... Just putting this out there hoping I can need snipe anyone

carlsverre 3y ago

This is super fun to play with. Adding instructions at different points in this pattern generates some very cool overlay effects. [[[[[[FFCFFFFFFFFFCCCCCCC[[[FFR]]FFR]]]RRRRRCFFFFFFFFFFFFFFFFFFC[[[FFCFFFFFFFFFCCCCCCC[[[FFR]]FFR]]]CCCCCCRRRRRRCCCCCCCCCFFFFFFFFFFFFFFFFFFFFFCCCC[[[FFCFFFFFFFFFFFFFCCCCCCC[[[FFR]]FFR]]]CCFF]]

raverbashing 3y ago

Very cool idea I'd suggest a little hint box below explaining what do the commands do, I had to check github for those

ris58h 3y ago
The buttons have a tooltip with a short explanation.
- uKVZe85V 3y ago
  Which are not visible on a smartphone, and IMHO should appear right away without having to hover anyway.
  - susam 3y ago
    Thank you for sharing this feedback. I have updated the implementation and added a '?' button now that can be pressed on a smartphone to bring up a help screen. The help screen has brief descriptions about each command.

movpasd 3y ago

Cool! I love the absolute minimalism, it forces some creativity. I don't know if it would violate the spirit of the language to add some kind of state or conditional to make it Turing-complete. I made a grid: [[[[[[[[[[FFFF]RR[FFFF]RR[FFFF]RR[FFFF]C[RRR][FFFF][RRR][FFFF][RRR][FFFF]]]]][FFFF]C]]]]]

IIAOPSW 3y ago

Its the simple things sometimes [[[[[[[CC[[FF]]]]R]R]R]]]

etelnet 3y ago

https://susam.net/cfr.html#B4RB6F3R3FRFRFRF2RFRFE3RE3C4E4 https://susam.net/cfr.html#B4RB6F3R3FRFRFRF2RFRFE3RE3C4E4

keepamovin 3y ago

Is there a measure of something being "canvas complete" where you can construct "any bitmap" given it? Analogous to Turing complete but limited to drawing on a bitmap canvas. This is so cool by the way! I love this! Thank you for making this!! :)

SCLeo 3y ago
“lossless image format" maybe?
- keepamovin 3y ago
  Ha! I was thinking more "a drawing language" like the one in the Show HN post. So cool! I was wondering if there are other languages like these, and a measure analogous to Turing completeness, but for "canvas completeness" for drawing any bitmap on a canvas! :)

chy76 3y ago

[[[[[[[[[[[[FCRFRFRFRFRFRFRFRF]]]R[[[[F]]]]]]]R]R]R]R]R]