From 2a68cfbf633c0df4aeae7d7abec0a1433c22d898 Mon Sep 17 00:00:00 2001 From: liquidev Date: Mon, 22 Jul 2024 20:34:42 +0200 Subject: [PATCH] update issues --- Cargo.lock | 7 + content/README.md | 20 + content/about-treehouse.tree | 24 +- content/about-treehouse/emoji.tree | 8 +- content/about.tree | 36 +- content/design/digital-textures.tree | 29 +- content/design/sidebars.tree | 12 +- content/index.tree | 22 +- content/kuroneko.tree | 4 +- content/music/fuck-drm.tree | 7 +- content/music/reviews/aphex-twin/syro.tree | 10 +- .../reviews/radiohead/a-moon-shaped-pool.tree | 12 +- .../music/reviews/radiohead/ok-computer.tree | 4 +- .../map-of-what-is-effortless.tree | 2 +- content/music/spotify.tree | 6 +- content/philosophy.tree | 12 +- content/programming.tree | 2 +- content/programming/blog/lvalues.tree | 22 +- content/programming/blog/or-types.tree | 15 +- content/programming/blog/systems.tree | 14 +- content/programming/blog/tairu.tree | 328 +++++---- .../cxx/access-modifiers-as-labels.tree | 7 +- .../cxx/shared-unique-ptr-deleter.tree | 10 +- content/programming/languages/javascript.tree | 14 +- content/programming/languages/lua.tree | 20 +- content/programming/opinions.tree | 25 +- content/programming/projects.tree | 4 + content/programming/projects/muscript.tree | 4 +- content/programming/projects/shelter.tree | 4 +- content/programming/projects/stitchkit.tree | 4 +- .../technologies/unreal-engine/blueprint.tree | 6 +- .../technologies/unreal-engine/fixes.tree | 2 + .../unreal-engine/generated-body.tree | 6 + content/treehouse.tree | 8 +- content/treehouse/changelog.tree | 17 +- content/treehouse/new.tree | 10 +- crates/treehouse/Cargo.toml | 11 +- crates/treehouse/src/config.rs | 10 + crates/treehouse/src/html.rs | 1 + crates/treehouse/src/html/djot.rs | 681 ++++++++++++++++++ crates/treehouse/src/html/tree.rs | 68 +- static/css/main.css | 5 + static/css/page/tairu.css | 3 +- treehouse.toml | 3 + 44 files changed, 1201 insertions(+), 318 deletions(-) create mode 100644 content/README.md create mode 100644 crates/treehouse/src/html/djot.rs diff --git a/Cargo.lock b/Cargo.lock index bce8d45..6da91ed 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -813,6 +813,12 @@ version = "1.0.11" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "49f1f14873335454500d59611f1cf4a4b0f786f9ac11f4312a78e4cf2566695b" +[[package]] +name = "jotdown" +version = "0.4.1" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "b87ebc8a1c0fdfdedb65abbffb023e45ebbbfe089625f93f6f5acc56685c0abf" + [[package]] name = "jpeg-decoder" version = "0.3.1" @@ -1544,6 +1550,7 @@ dependencies = [ "http-body", "image", "indexmap", + "jotdown", "log", "pulldown-cmark", "rand", diff --git a/content/README.md b/content/README.md new file mode 100644 index 0000000..57d6a2b --- /dev/null +++ b/content/README.md @@ -0,0 +1,20 @@ +# treehouse content + +The treehouse is built on its own custom data format called `.tree`. + +I'll spare the explanation, because it's an _extremely_ simplistic format, but know that it nests: + +- TOML metadata +- Djot markup + +inside of itself. + +TOML metadata is defined by `Attributes` from the `treehouse` crate. + +Djot on the other hand has support for generic attributes. +Keys are not documented (read the generator if you want to know about them,) but generally `:`-prefixed keys are +reserved for the treehouse's own purposes. + +You probably don't want to read the content if you're not me. +Browse the treehouse yourself, experience it fully, and then when you're _sure_ you don't want to get spoiled, come back +here and look for weird stuff. diff --git a/content/about-treehouse.tree b/content/about-treehouse.tree index 2f807a3..51118af 100644 --- a/content/about-treehouse.tree +++ b/content/about-treehouse.tree @@ -48,17 +48,17 @@ + like really, where does it end? % id = "01H89RFHCQCCWWMZCXEXF704Q3" - + *where?* + + _where?_ % id = "01H89RFHCQW4NN6PW6V6RFCVH3" content.link = "about-treehouse/the-end-is-never" - + ***WHERE???*** + + _*WHERE???*_ % id = "01H89RFHCQPAMNSN81SRVH2TZ5" - always evolving and shaping and shifting % id = "01H89RFHCQEJZQFXKVVQ92816R" - - so that I never need to *finish* anything + - so that I never need to _finish_ anything % id = "01H89RFHCQ3Q6W2Q0QKRHRVFVW" - I can just sit down, type something out @@ -85,7 +85,7 @@ + it is designed to be elegant and clutter-free % id = "01H89RFHCQ4N6GMFF0Q2N4PCM6" - - the treehouse contains no ads to annoy you, no sidebars to interrupt + - the treehouse contains no ads to annoy you, no [sidebars][page:design/sidebars] to interrupt % id = "01H89RFHCQDMWX7WNSMBDWJC9G" - it doesn't even have a navigation bar, because it doesn't need one @@ -121,7 +121,7 @@ - but you may not find the experience favorable % id = "01H89RFHCQ7HTZSP6P2RZR8JHE" - + but most important of all, it is *weird*. + + but most important of all, it is _weird_. % id = "01H89RFHCQTRVPZ0AJ0DGJHXKX" - weird as me @@ -207,7 +207,7 @@ - it also saves your progress as you read. if you refresh the page, you'll notice you end up exactly where you left off! % id = "01H8V55APDNSXZMZJ2K1KW11KN" - - but, there is one very crucial piece of JavaScript that makes this website tick, and your experience **will be degraded** if you disable it. that feature is linking to branches. + - but, there is one very crucial piece of JavaScript that makes this website tick, and your experience *will be degraded* if you disable it. that feature is linking to branches. % id = "01H8V55APDBG6AH2W3RNMX724X" - by default, if you link to an element by its id and it's contained within a `
`, the `
` will not expand. :ralsei_dead: @@ -270,11 +270,14 @@ - other than that, `.tree` assumes nothing about what format the branch attributes or content are encoded in. % id = "01H8V55APDCXPW8JPRYZHY9NXV" - - I chose TOML and Markdown for their ease of use and flexibility, but the parser couldn't care less. + - I chose TOML and [Djot](https://djot.net) for their ease of use and flexibility, but the parser couldn't care less. % id = "01H8V55APDWDPSHNZX6QJFM8ZA" - …actually, that's a lie. see that code example above? Markdown code fences \`\`\` are handled specially to let embed `.tree` source code blocks within `.tree` files. that's all. + % id = "01J3GNWRFBPK8VSRV1J61Q2V8F" + - I actually used to use Markdown, but then I saw Djot and progressively warmed up to it until I convinced myself fully that "yes, this is a better markup format." + % id = "01H8V55APDVQB6AD23Y6PZPPB8" - every branch in the treehouse has a globally unique ID. @@ -306,7 +309,10 @@ - as well as highlight branches which were added since your last visit % id = "01H8V55APDPZK4C8H5TTHTHH7J" - - not that either of these features are implemented as of writing this (2023-08-20) + - not that either of these features are implemented as of writing this + + % id = "01J3GNWRFBK2W3X8BZHD2AXQXZ" + - actually they're implemented now so yeah % id = "01H8V55APDXB9AXTAGAE9TNQRB" - they're much more compact than [uuids](https://en.wikipedia.org/wiki/Uuid) @@ -370,7 +376,7 @@ - not everyone runs Windows or macOS, so just assuming the reader has Comic Sans installed isn't ideal. % id = "01H8V55APD2BPGQXEK7JARYJ9H" - + ~~in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).~~ + + {-in particular the variant on my website is 100% casual (`CASL`), and -2.0 slanted (`slnt`).-} % id = "01H8V55APDXZJE3HHH5AQ8ZQHF" + that little bit of slant makes it look just a little more like handwriting. diff --git a/content/about-treehouse/emoji.tree b/content/about-treehouse/emoji.tree index 48286cd..f246868 100644 --- a/content/about-treehouse/emoji.tree +++ b/content/about-treehouse/emoji.tree @@ -76,7 +76,7 @@ - but I don't wanna replace it because it's just too good % id = "emoji/nap" - - :nap: - zzZ + - :nap: - ~z~zZ % id = "01HQ3YQCYQ995V33NY6QFW6TVJ" - my little guy is asleep. please do not wake (he is actually kind of sleep deprived and needs the rest) @@ -121,7 +121,7 @@ - ### [Noto Color Emoji](https://github.com/googlefonts/noto-emoji/) % id = "01HA4HJKQ77H0X87VZ4AYWTSFG" - - ~~most~~ some Unicode emojis on this website use an old version of Noto Color Emoji, aka [blob emoji](https://en.wikipedia.org/wiki/Blob_emoji). + - {-most-} some Unicode emojis on this website use an old version of Noto Color Emoji, aka [blob emoji](https://en.wikipedia.org/wiki/Blob_emoji). % id = "01HA4HJKQ7A9F5P200PDDVNBQD" - commit `914c9ecb` @@ -142,10 +142,10 @@ - so I imported a couple (20) of them into the treehouse % id = "01H8W7VEVP9FHW7QKZFXDRPRGD" -+ ### ~~[Twemoji](https://github.com/twitter/twemoji)~~ ++ ### {-[Twemoji](https://github.com/twitter/twemoji)-} % id = "01HA4HJKQ7JFAQBMFMD55EESFD" - - ~~sometimes used as placeholders for blobs I couldn't find in the original Noto emojis. someday I might design my own placeholders.~~ + - {-sometimes used as placeholders for blobs I couldn't find in the original Noto emojis. someday I might design my own placeholders.-} % id = "01HQ99RTH2YB5BZV7WDMQC4BT3" - update: no longer the case because I now use [blobmoji][branch:01HQ99RTH2FQ92SB7T2EKDEFHJ] diff --git a/content/about.tree b/content/about.tree index d4ba7c1..7d7f614 100644 --- a/content/about.tree +++ b/content/about.tree @@ -1,33 +1,33 @@ %% title = "who that! (about me)" % id = "01J09B2BZXJ989S2SGWBNZ397C" -+ hello! I am **liquidex**. ++ hello! I am *liquidex*. % id = "01J09B2BZX54T2GSP8H3D62S6J" - + also known as **liquidex** + + also known as *liquidex* % id = "01J09B2BZXQ31FV1M3PMM6Q0GX" - this is [the identity function](https://en.wikipedia.org/wiki/Identity_function) applied to my nickname % id = "01J09B2BZX0R0AX5QHND6EBRFE" - - also known as **liquidev** on [various programming platforms][def:social/github] + - also known as *liquidev* on [various programming platforms][def:social/github] % id = "01J09B2BZXT6AAJNPEQ044KCDR" - - also known as **lqdev**, before I realized that name was taken. + - also known as *lqdev*, before I realized that name was taken. you may notice this older name in some places. % id = "01J09B2BZXBS2K6MRQYXFH43PW" - - also known as **daknus** [on SoundCloud][def:social/soundcloud]. + - also known as *daknus* [on SoundCloud][def:social/soundcloud]. I use this as my music making alias. % id = "01J09B2BZXAD196RA16JTY3K3T" - + also known as **limiter**? + + also known as *limiter*? % id = "01J09B2BZXNRYX758J5S00EZRG" - - or **limitre**, which is British for limiter. + - or *limitre*, which is British for limiter. % id = "01J09B2BZX25TN31D0F18YQPB2" -+ I'm a *he/him*-type cat person doing various stuff with computers ++ I'm a _he/him_-type cat person doing various stuff with computers % id = "01J09B2BZXWB695M9XYF7CZ2ZF" - > you said cat person, does that mean you don't like dogs? @@ -36,13 +36,13 @@ - I prefer cats myself. though foxes are canids and I consider them pretty cute :smile: % id = "01J09E55G0MZ0WFQ3WC98YDDGT" - - > unless by *cat person* you mean… + - > unless by _cat person_ you mean… % id = "01J09E55G0YWYMAP62Q7AM18BE" + what? :clueless: % id = "01J09E55G09K80E6YE1T4E3KJJ" - - > y'know… like a *furry*? + - > y'know… like a _furry_? % id = "01J09E55G0F5TVAK2MT80H598M" + :clueless: @@ -64,7 +64,7 @@ + I do various developer productivity-related stuff at CD PROJEKT RED, mostly focusing on the DX of delivering breathtaking games using the Unreal Engine. % id = "01J09B2BZX00X6A8Z6H4R16BDS" - - technically I don't really love *playing* big and serious games, but making one is a whole other challenge - a challenge of *scale*. + - technically I don't really love _playing_ big and serious games, but making one is a whole other challenge - a challenge of _scale_. which is what really gets me going! % id = "01J09B2BZXQKWYHC51D7QCJ6PF" @@ -77,13 +77,13 @@ + [audio][def:dawd3/repo], % id = "01J09B2BZXY51P9D4BM8AADGYW" - - my favorite part of that is blowing out my own eardrums with my math skill, which is rather *underdeveloped* so to speak, + - my favorite part of that is blowing out my own eardrums with my math skill, which is rather _underdeveloped_ so to speak, % id = "01J09B2BZX2P7XDH81BJ079PCP" + [websites](/), % id = "01J09B2BZXN6GWK2JPC7YGT0E1" - + after all the treehouse is *my* website, with *my* own backend, static generator, *my* own design, [an only partially stolen color scheme](https://github.com/ayu-theme/ayu-colors), and most important, lots of fun stuff hidden underneath the surface. + + after all the treehouse is _my_ website, with _my_ own backend, static generator, _my_ own design, [an only partially stolen color scheme](https://github.com/ayu-theme/ayu-colors), and most important, lots of fun stuff hidden underneath the surface. % id = "01J09B2BZXZAEPD36XG495WYFH" + like have you wondered just how deep the rabbit hole goes? @@ -91,13 +91,13 @@ who knows what you may find? % id = "01J09B2BZX0M925RBXR023XM6X" - - + - ``{=html} % id = "01J09B2BZXX2R1TH10GGZC25KG" + you name it. as long as it poses a cool and fun challenge, I'll be on it :verified: % id = "01J09B2BZX5WED9XE2RAADFW8M" - - there's probably only one thing I *don't* like and it's backend web development. where did all the simplicity go? + - there's probably only one thing I _don't_ like and it's backend web development. where did all the simplicity go? % id = "01J09B2BZXQQMPDYQJ052131GT" - obviously treehouse is a very simple website with a very simple backend, but. seriously. @@ -123,13 +123,13 @@ % id = "01J09B2BZX39FGP634BM5HJ0FD" + did I mention [music][page:music]? - I also ~~aspire to~~ [make ][def:social/soundcloud][music][page:music][ sometimes][def:social/soundcloud]. + I also {-aspire to-} [make ][def:social/soundcloud][music][page:music][ sometimes][def:social/soundcloud]. % id = "01J09B2BZXGG5HYVYDNPVFRKY1" - - I say aspire because I'd really like to be better at it, but *time*, man… + - I say aspire because I'd really like to be better at it, but _time_, man… % id = "01J09B2BZXY6AN3242DYECK74Z" - + from time to time I also try to draw things, but *time*, it's killing me, man… + + from time to time I also try to draw things, but _time_, it's killing me, man… % id = "01J09B2BZXN3263NEHCKQ931TS" - I'm sure one day you'll see the results of my practice, (unless you've already seen them :ralsei_wave:,) but for now I keep them largely to myself. diff --git a/content/design/digital-textures.tree b/content/design/digital-textures.tree index bc63639..28704b9 100644 --- a/content/design/digital-textures.tree +++ b/content/design/digital-textures.tree @@ -1,48 +1,51 @@ %% title = "on digital textures" % id = "01HQ8JHZ5NP1K7PHW4MJQS65ND" -- this is not about textures in the graphics programming sort of way. this is about textures in the *you can feel it under your fingers* way +- this is not about textures in the graphics programming sort of way. this is about textures in the _you can feel it under your fingers_ way % id = "01HQ8JHZ5NM6CNJ1PCGCWC6DQV" -- I don't know if it's just some weird synaesthesia thing or not, but one interesting observation I've noticed is that various cursors seem to give off different *textures*. +- I don't know if it's just some weird synaesthesia thing or not, but one interesting observation I've noticed is that various cursors seem to give off different _textures_. like you hover over something and you can digitally feel it under your fingers % id = "01HQ8JHZ5NEHACKDTHJSJNB3QD" -- these textures just generally cause different pieces of software to give off different *vibes*; +- these textures just generally cause different pieces of software to give off different _vibes_; for example, based on texture alone it is possible to determine whether something runs on web technologies. % id = "01HQ8JHZ5N68ZG29CSAKYW3CYE" - - you can probably tell this blog is a website just by *feeling* how it behaves. + - you can probably tell this blog is a website just by _feeling_ how it behaves. % id = "01HQ8JHZ5NZAVMCYFGS94W6Z8N" - - the cursors, where pointer is used for elements that are clickable, + - the cursors, where [pointer]{style="cursor: pointer; text-decoration: dotted underline;"} is used for elements that are clickable, and a text cursor is used for text. + ``` =html + ``` % classes.branch = "digital-textures-pointer-cursor" id = "01HQ8JHZ5NYDJD0YKVX55AR3ZQ" - - - when you have an interactive element and it doesn't have a pointer cursor on it, it feels almost wrong. - eerie in a way. out of place.
+ - {style="cursor: default;"} + ::: + when you have an interactive element and it _doesn't_ have a [pointer]{style="cursor: pointer; text-decoration: dotted underline;"} cursor on it, it feels almost _wrong._ + eerie in a way. out of place.\ like have you noticed this branch is kind of really fucking weird with the default cursor? - + ::: % id = "01HQ8JHZ5NT1P5R3EM9GEKZ3DK" - - and this one is *even* weirder, with unselectable text! (sorry for this. I'm trying to make a point.) + - [and this one is _even_ weirder, with unselectable text! (sorry for this. I'm trying to make a point.)]{style="cursor: default; user-select: none;"} % id = "01HQ8JHZ5N21GM1FWEXAKPWDPA" - - the fact you can press Ctrl + A and it selects all text also gives off a texture typical of websites. + - the fact you can press `Ctrl`{=html} + `A`{=html} and it selects all text also gives off a texture typical of websites. % id = "01HQ8JHZ5NMA2HT3M075G9AV1A" - the common usage of [hyperlinks][def:word/hyperlink] over buttons is also typical of websites. % id = "01HQ8JHZ5N2WA7G6QN7YCE8PN0" - Git for Windows asks whether you want to use stock Windows `cmd.exe` or mintty. -for as long as I can remember, mintty always felt *wrong* to me. like the experience was not *Windowsy.* -simply because the terminal window is so tiny, the cursor is an I-beam, and the default font used is Lucida Console rather than Consolas. +for as long as I can remember, mintty always felt _wrong_ to me. like the experience was not _Windowsy._ +simply because the terminal window is so tiny, the cursor is an I-beam, and the default font used is [Lucida Console]{style="font-family: 'Lucida Console', RecVar;"} rather than [Consolas]{style="font-family: 'Consolas', RecVar;"}. % id = "01HQ8JHZ5NHEW18R8JQWQCAB6Y" - synaesthetically, it feels to me as if `cmd.exe` is smooth, and mintty is rough. like with `cmd.exe` you're touching matte plastic, an LCD display, and with mintty you're touching a piece of paper or tree bark. diff --git a/content/design/sidebars.tree b/content/design/sidebars.tree index 54ef44e..9d5511c 100644 --- a/content/design/sidebars.tree +++ b/content/design/sidebars.tree @@ -4,7 +4,7 @@ - imagine if this page had a distracting bunch of text to the right of regular content. or even worse, advertisements. % id = "01HR9ZTS6P67VGVY6S460Q49HV" - - fortunately I'm not cruel enough to do that (*and* also I'm lazy *and* also I'm at work at the moment so I haven't got time to do something wicked like that.) + - fortunately I'm not cruel enough to do that (_and_ also I'm lazy _and_ also I'm at work at the moment so I haven't got time to do something wicked like that.) % id = "01HR9ZTS6P7AB97D6T177XMNKW" - these are sidebars in a nutshell. distracting, annoying, detracting from what you actually have to say. @@ -26,10 +26,10 @@ - If my blog piqued your interest, feel free to also check out these articles: % id = "01HR9ZTS6P1JJ2103E4QHATH3G" - - [*on digital textures*][page:design/digital-textures], where I explore synaesthetic feelings in user interfaces + - [_on digital textures_][page:design/digital-textures], where I explore synaesthetic feelings in user interfaces % id = "01HR9ZTS6P73HSTZK6CP1RWQWG" - - *[...so on and so forth.]* + - _[...so on and so forth.]_ % id = "01HR9ZTS6PBFR78Y54HGGKXMF6" - note how I haven't even used pictures! I care about what you have to say, not what pretty pictures you managed to snap on your last field trip. @@ -40,16 +40,16 @@ % id = "01HR9ZTS6PKYGVTFF0F78XVXH2" - (I'm not saying this structure is any better than a conventional blog though. - it has its own set of challenges you need to take into account while writing, like *when to split*, and *when to nest*. + it has its own set of challenges you need to take into account while writing, like _when to split_, and _when to nest_. arguably, I still haven't learned how to write the treehouse well, but I think I'm getting better at it; compare [about (version 1)][page:about/v1] to this page and you'll see what I mean.) % id = "01HR9ZTS6P484GD6Y9QR4TEGWD" - I'm glad most individuals' blogs are foregoing sidebars, but unfortunately I still regularly see them on various news sites and older blogs % id = "01HR9ZTS6PCAWGEJNYXETFVDFT" - - if you're designing a modern blog, consider structuring your page *vertically* rather than *horizontally*. + - if you're designing a modern blog, consider structuring your page _vertically_ rather than _horizontally_. limit distractions you show on the sides of the screen. - they *really* are quite annoying when you're just trying to focus on the body. + they _really_ are quite annoying when you're just trying to focus on the body. % id = "01HR9ZTS6PKZVXQE0VFVTNNQ6F" - not to mention mobile devices, which do not have the horizontal real estate to fit your sidebars! diff --git a/content/index.tree b/content/index.tree index 4b6850c..de356fa 100644 --- a/content/index.tree +++ b/content/index.tree @@ -3,17 +3,18 @@ % id = "treehouse" - # liquidex's treehouse - - achievement unlocked: I don't want anything to do with this bullshit
 - …either that, or you folded the entire tree by accident.
- feel free to go back any time by clicking here. - + +::: oops-you-seem-to-have-gotten-stuck +*achievement unlocked:* _I don't want anything to do with this bullshit_\ +...either that, or you folded the entire tree by accident.\ +feel free to go back at any time by clicking here. +::: % id = "01H8V556P1PND8DQ73XBTZZJH7" - welcome! make yourself at home :ralsei_wave: % id = "01H8VWEHX501SNYQTE61WX7YJC" - - _"owo, what's this?"_ + - [_"owo, what's this?"_][page:kuroneko]{.secret} % id = "about" content.link = "about" @@ -30,16 +31,19 @@ % id = "programming" content.link = "programming" + ## programming + ``` =html + ``` % id = "design" content.link = "design" + ## design + ``` =html @@ -50,20 +54,23 @@ - + ``` % id = "music" content.link = "music" + ## music + ``` =html + ``` % id = "games" content.link = "games" + ## games + ``` =html + ``` % id = "01HFYZKREWE2AM61ZRW3R501H6" - various thoughts diff --git a/content/kuroneko.tree b/content/kuroneko.tree index 8c11a89..b9d4d31 100644 --- a/content/kuroneko.tree +++ b/content/kuroneko.tree @@ -5,4 +5,6 @@ % template = true cast = "chat js" id = "01HSS5TMDD4WSZSXW17ANQN7VK" -- {% include_static chat/kuroneko.json %} +- ``` =html +{% include_static chat/kuroneko.json %} +``` diff --git a/content/music/fuck-drm.tree b/content/music/fuck-drm.tree index 20fda54..9141794 100644 --- a/content/music/fuck-drm.tree +++ b/content/music/fuck-drm.tree @@ -4,19 +4,19 @@ - this section is dedicated to all those business pinheads working at music distribution companies who think DRM is good in any way shape or form. % id = "01HPECQ3Z1EZEQS2J0CY4A0CMA" - - I'm aware they know *very well* what they're doing. just, y'know, *fuck them.* + - I'm aware they know _very well_ what they're doing. just, y'know, _fuck them._ % id = "01HPWEESFV7TPXA6H5BCZVZKD6" + :page: exhibit 2: ODDTAXI soundtrack % id = "01HPWEESFVY5WGP5NY94QXFQ2A" - - I watched this anime recently and I really liked the soundtrack, so I thought to myself "cool, gotta buy it and enjoy it in glorious FLAC while I'm driving my ~~taxi~~ car" + - I watched this anime recently and I really liked the soundtrack, so I thought to myself "cool, gotta buy it and enjoy it in glorious FLAC while I'm driving my {-taxi-} car" % id = "01HPWEESFV1W7Y0713F5P74EPQ" - naturally I was absolutely unprepared for the shitshow that is purchasing music from Japan % id = "01HPWEESFVC3ZX091BN3ZFT4YB" - - for some reason some business pinheads thought it would be an *incredible and wise idea* to introduce *region locks* to music! + - for some reason some business pinheads thought it would be an _incredible and wise idea_ to introduce _region locks_ to music! % id = "01HPWEESFV2AF3V1GMFZYKECHF" - fuck the fact that you can legitimately buy this album as a pack of FLAC files in Japan, if you're anywhere else - eat shit! @@ -50,6 +50,7 @@ + so I look up his Twitter profile and + > An "internal investigation" has confirmed "evidence" of streaming fraud on Spotify. > > Therefore, The Flashbulb and my other music has been permanently removed from all platforms. diff --git a/content/music/reviews/aphex-twin/syro.tree b/content/music/reviews/aphex-twin/syro.tree index a8e638c..76b1a81 100644 --- a/content/music/reviews/aphex-twin/syro.tree +++ b/content/music/reviews/aphex-twin/syro.tree @@ -14,7 +14,7 @@ - Aphex Twin is known for track names that are complete gibberish (hello drukQs, except drukQs names are appearently Cornish) but Syro takes it to the next level % id = "01H9DQNG9A2TB82KF5H5MM0N25" - + even *I* with my insanely good memory for weird ass names do not remember the full name of my favorite track + + even _I_ with my insanely good memory for weird ass names do not remember the full name of my favorite track % id = "01H9DQNG9A6HTJD0ZWMJV5V8VW" - that track being _something something_ [141.98] [piezoluminescence mix] @@ -80,7 +80,7 @@ + 141.98 BPM % id = "01H9DQNG9A0DPETJ7653SGN85A" - - there are two tracks on Syro whose tempo is 141.98 BPM: *CIRCLONT6A [141.98][syrobonkus mix]*, and *syro u473t8+e [141.98][piezoluminescence mix]* + - there are two tracks on Syro whose tempo is 141.98 BPM: _CIRCLONT6A [141.98][syrobonkus mix]_, and _syro u473t8+e [141.98][piezoluminescence mix]_ % id = "01H9DQNG9AD28Z2ZX556E45RYS" - if you listen closely, there is a common leitmotif across these tracks: @@ -101,16 +101,16 @@ + I think I managed to nail down how Syro track names came to be. % id = "01H9DQNG9AB0Y7GYT6F0HB41CM" - - I can't find the exact video that made me realize this, but in *some* video on YouTube *someone* was using a step sequencer, and it prompted them to enter a track name. + - I can't find the exact video that made me realize this, but in _some_ video on YouTube _someone_ was using a step sequencer, and it prompted them to enter a track name. % id = "01H9DQNG9AB5XPEHP39CJB8256" - - given how these sequencer interfaces are pretty cumbersome to type on (given they're mostly controlled with knobs and buttons whose layout *distinctly* does not resemble a computer keyboard), they just decided to just change out a number at the end + - given how these sequencer interfaces are pretty cumbersome to type on (given they're mostly controlled with knobs and buttons whose layout _distinctly_ does not resemble a computer keyboard), they just decided to just change out a number at the end % id = "01H9DQNG9AGWYR75TV9NYFP5PB" - and that's my theory: that's what happened with Syro % id = "01H9DQNG9ANF71V4DMQ30ZA1G2" - - you can kind of confirm this by looking at `CIRCLONT6A` and `CIRCLONT14`, as well as Aphex Twin's Cheetah EP which features `CHEETAHT2`, `CHEETAHT7b`, `CHEETA1b`, `CHEETA2`, `CIRKLON3`, and `CIRKLON 1`. following this *exact* this naming scheme. + - you can kind of confirm this by looking at `CIRCLONT6A` and `CIRCLONT14`, as well as Aphex Twin's Cheetah EP which features `CHEETAHT2`, `CHEETAHT7b`, `CHEETA1b`, `CHEETA2`, `CIRKLON3`, and `CIRKLON 1`. following this _exact_ this naming scheme. % id = "01H9DQNG9AKXC5Q5Z76YPWDAY7" - but that's just a theory. A MUSIC THEORY diff --git a/content/music/reviews/radiohead/a-moon-shaped-pool.tree b/content/music/reviews/radiohead/a-moon-shaped-pool.tree index 3f975fc..5c68ff7 100644 --- a/content/music/reviews/radiohead/a-moon-shaped-pool.tree +++ b/content/music/reviews/radiohead/a-moon-shaped-pool.tree @@ -17,11 +17,11 @@ + #### Present Tense % id = "01H9JB094CYBC0QRFV8D0H8CGB" - - *this dance, this dance*\ - *is like a weapon, is like a weapon*\ - *of self-defense, of self-defense*\ - *against the present*\ - *the present tense* + - _this dance, this dance_\ + _is like a weapon, is like a weapon_\ + _of self-defense, of self-defense_\ + _against the present_\ + _the present tense_ % id = "01H9JB094CPV3N30272TKSMQNC" - going crazy, going nuts. a dance of self-defense. against the present... the present tense. @@ -46,7 +46,7 @@ + why not just stop giving a shit about what other people think for a moment. they probably don't give a shit either. % id = "01H9JB094CH7JFBKQF6QZ6KPEB" - - or if they do, tell them what *you* think. tell them why you're freaking out like that. and be honest :) + - or if they do, tell them what _you_ think. tell them why you're freaking out like that. and be honest :) % id = "music/track/radiohead/daydreaming" + #### Daydreaming diff --git a/content/music/reviews/radiohead/ok-computer.tree b/content/music/reviews/radiohead/ok-computer.tree index aab38ab..f0e203f 100644 --- a/content/music/reviews/radiohead/ok-computer.tree +++ b/content/music/reviews/radiohead/ok-computer.tree @@ -5,7 +5,7 @@ - this is an album I didn't really enjoy until very recently % id = "01H969NN1A5B2QEKWY6B9KQFVP" - - what I came for in Radiohead was the more tender bits where they mix rock with electronica, and this album is *very* coarse and rough compared to some of the later ones + - what I came for in Radiohead was the more tender bits where they mix rock with electronica, and this album is _very_ coarse and rough compared to some of the later ones % id = "01H969NN1A24V0J35FP07Z8Q6A" - but this album has some pearls behind the generally rocky facade @@ -20,7 +20,7 @@ - yeah, man. slow down. % id = "01H969NN1AGVKM992WV7B01P95" - - an ode to not appreciating the little details in life. an ode to going forward and never pausing to think. *have I been doing this all wrong?* + - an ode to not appreciating the little details in life. an ode to going forward and never pausing to think. _have I been doing this all wrong?_ % id = "01H969NN1AB8A3KMHPQ7017MS2" - I really like the slow tempo and Pink Floyd-esque style. it really sticks in my head. diff --git a/content/music/reviews/telefon-tel-aviv/map-of-what-is-effortless.tree b/content/music/reviews/telefon-tel-aviv/map-of-what-is-effortless.tree index 9f293ff..d644320 100644 --- a/content/music/reviews/telefon-tel-aviv/map-of-what-is-effortless.tree +++ b/content/music/reviews/telefon-tel-aviv/map-of-what-is-effortless.tree @@ -29,7 +29,7 @@ - as you approach it, you decide to flick the switch on the front, and it begins humming. % id = "01HA4HJKRJEBARWW0E6BR1M86M" - + the humming intensifies, you see various blinkenlights shining on its faceplate, and soon you become surrounded by yyyYyyYYYy`y`Y`Y`Y + + the humming intensifies, you see various blinkenlights shining on its faceplate, and soon you become surrounded by yyyYyyYYY`y`{=html}`y`Y`Y``Y`{=html} % id = "01HA4HJKRJZTC9V7BZVCFFBAXR" - ...you passed out. diff --git a/content/music/spotify.tree b/content/music/spotify.tree index c72cb0e..8569abf 100644 --- a/content/music/spotify.tree +++ b/content/music/spotify.tree @@ -8,7 +8,7 @@ what a poor, small company they are to be having these problems :( % id = "01HVNX7FMSV3DT95W29TDXG8R2" - - "well then why are you paying them, liquidex?" unfortunately lots of music is only available (*and* UNAVAILABLE!) on Spotify, as seen on [_fuck DRM_][page:music/fuck-drm]. + - "well then why are you paying them, liquidex?" unfortunately lots of music is only available (_and_ UNAVAILABLE!) on Spotify, as seen on [_fuck DRM_][page:music/fuck-drm]. from a consumer standpoint it's also really nice for discovering new music, because you don't have to pay a large amount just to give a listen to an album you may not end up liking. % id = "01HVNX7FMSR6TFJK3A9VVQ667K" @@ -28,7 +28,7 @@ ![screenshot of a fragment of the queue panel, with a track I hovered over displaying a play button][pic:01HVNW6AQQN9345X3HXY9NN5RR] % id = "01HVNX7FMS8JN72XSMN7EV2K0C" - - if you hover over _any_ part of the row, you get the pointer rather than default cursor, which suggests that clicking is gonna result in an action being taken immediately - except that's not what happens. + - if you hover over _any_ part of the row, you get the pointer rather than default cursor, which suggests that clicking is gonna result in an action being taken immediately - except that's not what happens. instead, if you click on the blank part, the element is only gonna get selected - as it used to in the old queue, which is _good_. but if that's what happens, that's definitely not the cursor to use. @@ -36,7 +36,7 @@ - in addition to this, the play button that appears on the album art (pictured on the screenshot) further suggests that clicking anywhere on the row will result in playback skipping to the track you click. % id = "01HVNX7FMS4J4JXYQQ8D0RNQJT" - + this threw me off the first time I saw the new panel, because I thought it was a *downgrade* in terms of functionality. + + this threw me off the first time I saw the new panel, because I thought it was a _downgrade_ in terms of functionality. "what, I can't select many items in the queue now to delete them?", I thought, but no. that is still possible; the mouse cursor is just confusing. diff --git a/content/philosophy.tree b/content/philosophy.tree index c1c1fda..2933619 100644 --- a/content/philosophy.tree +++ b/content/philosophy.tree @@ -5,11 +5,11 @@ + but if you've been wondering what makes my brain tick, you've come to the right place % id = "01HFYZKREVXY44MS45P5J0BRBE" - - perhaps my thoughts here will be more than *just* pure philosophy and worldview, who knows! + - perhaps my thoughts here will be more than _just_ pure philosophy and worldview, who knows! % id = "01HFYZKREVSW8KTGVKN4R8GPKK" - - **perhaps this will be the most controversial branch of this tree, so maybe if you don't like to - get all fired up... stop reading here.** + - *perhaps this will be the most controversial branch of this tree, so maybe if you don't like to + get all fired up... stop reading here.* % id = "01HFYZKREV1CYFWBF4ZM4R3Y15" - but if you decide to stay please approach these thoughtfully and respectfully, with more @@ -46,14 +46,14 @@ % id = "01HREVZNAHRC9BJZJPH9RE21PE" - this is an unfortunate side effect of the tree-based structure of Lobsters. as much as I like tree-based forums, as they let you focus on many different (off-)topics without cluttering the main thread, - it's damn near impossible to keep the broader context of *what the discussion is about* when the thread nests more than 3 levels deep. + it's damn near impossible to keep the broader context of _what the discussion is about_ when the thread nests more than 3 levels deep. % id = "01HREVZNAH96KPDQAW1YW1FGC5" - - therefore, if you ever find yourself writing an essay about just how wrong someone is, think to yourself: am I *really* understanding what's going on in this discussion? + - therefore, if you ever find yourself writing an essay about just how wrong someone is, think to yourself: am I _really_ understanding what's going on in this discussion? and if not - maybe just shut up and let the rest of the idiots fan the flames instead. % id = "01J1Q8SBGFVPDBKKZPWDSV1D5G" -- :page: in wisdom you become old ++ :page: in wisdom you become old % id = "01J1Q8SBGFNS3ZSSA1QXN83SMH" + this is kind of weird, but recently I have noticed I no longer keep up with slang diff --git a/content/programming.tree b/content/programming.tree index 33c855d..dabe3ae 100644 --- a/content/programming.tree +++ b/content/programming.tree @@ -9,7 +9,7 @@ % content.link = "programming/blog/tairu" id = "01HPD4XQQ5WM0APCAX014HM43V" - + :page: featured tairu - an interactive exploration of 2D autotiling techniques + + :page: [featured]{.badge .blue} tairu - an interactive exploration of 2D autotiling techniques % content.link = "programming/blog/lvalues" id = "01HY5R1ZW0M0Y5KQ1E8F0Q73ZT" diff --git a/content/programming/blog/lvalues.tree b/content/programming/blog/lvalues.tree index fdd50f5..d41926d 100644 --- a/content/programming/blog/lvalues.tree +++ b/content/programming/blog/lvalues.tree @@ -5,6 +5,7 @@ % id = "01HY5R1ZV9G92SVA0XP7CG1X6K" - as in this case: + ```c void example(int *x) { int y = *x; // (1) @@ -19,10 +20,10 @@ - doesn't `*x` mean "read the value pointed to by `x`?" % id = "01HY5R1ZV9WJM9DMW5QGK04DCR" -- TL;DR: the deal with this example is that `*x` *does not mean* "read from the location pointed to by `x`", but _just_ "the location pointed to by `x`". +- TL;DR: the deal with this example is that `*x` _does not mean_ "read from the location pointed to by `x`", but _just_ "the location pointed to by `x`". % id = "01HY5R1ZV9JN9GZ8BECJ0KV1FC" - - **`*x` is not a _value_, it's a _memory location_, or _place_ in Rust parlance** + - *`*x` is not a _value_, it's a _memory location_, or _place_ in Rust parlance* % id = "01HY5R1ZV9QVH3W5BRS16V6EPG" - same thing with `x` @@ -154,6 +155,7 @@ for starters, it is impossible to write the type down in C code, so we're always % id = "01HY5R1ZV9VZFHRKY4QWBDTFJ7" - example: + ```c.types void example(void) { struct S { int x; } s; @@ -168,6 +170,7 @@ for starters, it is impossible to write the type down in C code, so we're always the function signature is therefore `T* -> ptrdiff_t -> place(T)`. example: + ```c.types void example(int* array) { int* p = &((array /*: int* */)[123] /*: place(int) */); @@ -184,7 +187,7 @@ for starters, it is impossible to write the type down in C code, so we're always % id = "01HY5R1ZV9MQWK5VQZQG8JJ03J" - I do wonder though why it doesn't produce a warning. - I'm no standards lawyer, but I *believe* this may have something to do with implicit type conversions - the `0` gets promoted to a + I'm no standards lawyer, but I _believe_ this may have something to do with implicit type conversions - the `0` gets promoted to a pointer as part of the desugared addition. I really need to read up about C's type promotion rules. @@ -193,8 +196,8 @@ for starters, it is impossible to write the type down in C code, so we're always there are no places in C. % id = "01HY5R1ZV9PAD1XRS29YV64GV2" - - the C standard actually calls this concept "lvalues", which comes from the fact that they are **values** which are valid - **l**eft-hand sides of assignment. + - the C standard actually calls this concept "lvalues", which comes from the fact that they are *values* which are valid + *l*eft-hand sides of assignment. % id = "01HY5R1ZV9BNZM45RK2AW8BF5N" + however, I don't like that name since it's quite esoteric - if you tell a beginner "`x` is not an lvalue," they will look at you confused. @@ -223,7 +226,8 @@ there are no places in C. in layman's terms, C++ makes it impossible to rebind references to something else. you can't make this variable point to `y`: - + {% NOTE: using `c` syntax here instead of `cpp` because I don't have a working C++ syntax at the moment! %} + ```c int x = 0; int y = 1; @@ -253,10 +257,11 @@ there are no places in C. - I actually kind of wish references were more like they are in Rust - basically just pointers but non-null and guaranteed to be aligne % id = "01HY5R1ZV9QWHZRJ5V53CVYG5V" -- anyways, as a final ~~boss~~ bonus of this blog post, I'd like to introduce you to the `x->y` operator (the C one) +- anyways, as a final {-boss-} bonus of this blog post, I'd like to introduce you to the `x->y` operator (the C one) % id = "01HY5R1ZV9AYFWV96FC07WX68G" - if you've been programmming C or C++ for a while, you'll know that it's pretty dangerous to just go pointer-[walkin'](https://www.youtube.com/watch?v=d_dLIy2gQGU) with the `->` operator + ```c int* third(struct list* first) { return &list->next->next->value; @@ -278,6 +283,7 @@ there are no places in C. % id = "01HY5R1ZV9X8M5T64BD0MZ2WN2" - let's start by dismantling the entire pointer access chain into separate expressions: + ```c int* third(struct list* first) { struct list* second = first->next; @@ -288,6 +294,7 @@ there are no places in C. % id = "01HY5R1ZV9PGQMS2A6H5XTWYZX" - now let's desugar the `->` operator: + ```c int* third(struct list* first) { struct list* second = (*first).next; @@ -298,6 +305,7 @@ there are no places in C. % id = "01HY5R1ZV92CZAV13P4KFABTR1" - and add some type annotations: + ```c.types int* third(struct list* first) { struct list* second = (*first).next /*: place(struct list*) */; diff --git a/content/programming/blog/or-types.tree b/content/programming/blog/or-types.tree index 690bd79..a2b5f1a 100644 --- a/content/programming/blog/or-types.tree +++ b/content/programming/blog/or-types.tree @@ -1,21 +1,20 @@ %% title = "OR-types" - scripts = ["components/literate-programming.js"] % id = "01HTWN4XAD7C41X8XKRBFZMHJ8" - last night I couldn't fall asleep because I was thinking how sites like [Anilist](https://anilist.co) implement their tag-based search systems. % id = "01HTWN4XAD4CPDR36P4XNYZAE3" - - my mind was racing, and with enough thinking about scores and weights and sums and products… I arrived at the topic of *sum types* and *product types.* + - my mind was racing, and with enough thinking about scores and weights and sums and products… I arrived at the topic of _sum types_ and _product types._ % id = "01HTWN4XAD4NK5TRFVPCC4EHJ2" - - I was thinking, "*this is actually really interesting - why do we call them sum types and product types?*" - + - I was thinking, "_this is actually really interesting - why do we call them sum types and product types?_" - I had some intuitive understanding as to where these names come from, but I wanted to write down my thoughts for future me, and future generations. % id = "01HTWN4XADR3SARMFCF6PB8T7D" - so I set down an alarm for today, and went to sleep. % id = "01HTWN4XADJ9NAWKY8G4BDS9E0" -- recall that I was faced with the question of "why do we call product types *product types*, and why do we call sum types *sum types*?" +- recall that I was faced with the question of "why do we call product types _product types_, and why do we call sum types _sum types_?" my intuitive understanding was this: % id = "01HTWN4XADVCMHQCGDM4RM6YBN" @@ -168,7 +167,7 @@ my intuitive understanding was this: - `U` is a subtype of `T | U`, because `T` is not present (`0`) and `U` is (`1`), therefore `has(T) XOR has(U)` is true. % id = "01HTWN4XAD15CWASNFEQRTP0H7" - - *but* unlike our previous hypothetical `T + U`, `T * U` is not a subtype of `T | U`, because if `T` is present (`1`) and `U` is also present (`1`), `has(T) XOR has(U)` will be false - + - _but_ unlike our previous hypothetical `T + U`, `T * U` is not a subtype of `T | U`, because if `T` is present (`1`) and `U` is also present (`1`), `has(T) XOR has(U)` will be false - which matches more typical sum types. % id = "01HTWN4XADJC8ZHBHNTSDW8EQP" @@ -181,7 +180,7 @@ my intuitive understanding was this: - this confused me a lot because, from my limited understanding of them, set-theoretic types represents types as sets of possible values - and mathematically any set `S` can be represented by a function `S(x)`, which is `true` if `x` is present in the set % id = "01HTWN4XADSSASE388BBS79X7J" - - but again, it is *not* the same, because the type system I described here is defined based on subtype relations rather than sets of values. + - but again, it is _not_ the same, because the type system I described here is defined based on subtype relations rather than sets of values. % id = "01HTWN4XADQ3F5CYBEN44J10D5" - in the world of set-theoretic types, we get sum types for free, because the type `T | U` represents the union of the set of all possible `T` values, and the set of all possible `U` values. @@ -229,10 +228,10 @@ I'll add a note to this post summarizing what's wrong with my reasoning. - seem familiar? it's exactly the same as the truth table for `AND`ing two numbers! % id = "01HTWN4XADB7K02JDWMJ5T3KN9" - - except because we're working with _numbers_ here, we can take it a step further and multiply *any* two numbers, not just zero and one. + - except because we're working with _numbers_ here, we can take it a step further and multiply _any_ two numbers, not just zero and one. % id = "01HTWN4XAD9ESATEWPNC6Y72S3" - - therefore we can search and rank our anime about crimes in space based on a *score* produced by multiplying the tag values. + - therefore we can search and rank our anime about crimes in space based on a _score_ produced by multiplying the tag values. let's see [what Anilist tells us about crimes in space](https://anilist.co/search/anime?genres=Space&genres=Crime). I wrote down the data of the first 10 anime it displayed to me on the day I'm writing this, so this data may become out of date with time. ignoring spoiler tags because noone likes those. diff --git a/content/programming/blog/systems.tree b/content/programming/blog/systems.tree index eb816cb..0d6a3fd 100644 --- a/content/programming/blog/systems.tree +++ b/content/programming/blog/systems.tree @@ -35,9 +35,9 @@ or even where to go to customize it to my liking? code to see what happened. % id = "01HV1DGFGNY3FGEKY70D6RMV22" - - and then I could edit the source code and submit the patch *right where I'm standing* rather than having to go through complicated and lengthy processes of cloning repositories, + - and then I could edit the source code and submit the patch _right where I'm standing_ rather than having to go through complicated and lengthy processes of cloning repositories, bootstrapping, reproducing, and such. - *imagine fixing compiler bugs on real codebases rather than having to come up with isolated, reproducible examples first.* + _imagine fixing compiler bugs on real codebases rather than having to come up with isolated, reproducible examples first._ % id = "01HV1DGFGNXJJX0BMMM3KQ42M0" - I know how hard this is to achieve in practice, which is precisely why I don't use Gentoo. @@ -87,13 +87,13 @@ or even where to go to customize it to my liking? - have fun typing in that full path `/home/daknus/Repositories/cool-library` % id = "01HV1DGFGN5X57Z807GMS3F07Q" - + *and* don't forget to revert the changes to `Cargo.toml` once you're done. + + _and_ don't forget to revert the changes to `Cargo.toml` once you're done. unlike editing a vendored dependency, which will appear under a very visible path in Git, it's pretty easy to forget to check your `Cargo.toml` diff before staging/committing changes. I mean, I edit my `Cargo.toml` all the time, adding in libaries and stuff. so why would I look at every single change? % id = "01HV1DGFGN0DAMASGQD64XXTRK" - - *and* before you go at me and say "bah you should be reviewing all changes that end up in your codebase" + - _and_ before you go at me and say "bah you should be reviewing all changes that end up in your codebase" sigh. @@ -123,17 +123,17 @@ or even where to go to customize it to my liking? it's all just code-generating syntax sugar! % id = "01HV1DGFGNVRX5C3TST00V58DK" - - **everything is code! *there is no magic*!** + - *everything is code! _there is no magic_!* % id = "01HV1DGFGN569R7MEE9FBXRF7H" - there are no walls blocking you from looking at the code. the grandiose noun phrases are misleading! % id = "01HV1DGFGNE1CTAX01DE61GWC5" - - UnrealBuildTool is just a bunch of C# files. and the *Gameplay Ability System™* is likewise just a bunch of C++ sources. + - UnrealBuildTool is just a bunch of C# files. and the _Gameplay Ability System™_ is likewise just a bunch of C++ sources. why can't we come up with more inviting names? % id = "01HV1DGFGN129VY5FHHF4GC4Z5" - - grandiose noun phrases sound so hostile. *but it's all just code.* + - grandiose noun phrases sound so hostile. _but it's all just code._ % id = "01HV1DGFGN96CPWYMJ14EWJJR2" - most of the time not knowing your software is largely fine - not everyone has the time to deeply inspect a piece of software, deciphering functions, consulting manuals, asking the authors (when possible.) diff --git a/content/programming/blog/tairu.tree b/content/programming/blog/tairu.tree index 4f18eca..9828aec 100644 --- a/content/programming/blog/tairu.tree +++ b/content/programming/blog/tairu.tree @@ -29,14 +29,18 @@ styles = ["page/tairu.css"] % id = "01HQ162WWAMCPC5M88QAXHX4BT" - so to help us learn, I made a little tile editor so that we can experiment with rendering tiles! have a look: - `{=html} - ```javascript tairu + {:program=tairu} + ```javascript import { Tilemap } from "tairu/tilemap.js"; import { TileEditor } from "tairu/editor.js"; @@ -54,22 +58,26 @@ styles = ["page/tairu.css"] }); ``` - ```output tairu 01HQ47ZX7520PJNPJ75M793R5G + {:program=tairu :placeholder=01HQ47ZX7520PJNPJ75M793R5G} + ```output ``` % id = "01HQ162WWAC3FN565QE3JAB87D" - - `Tilemap` is a class wrapping a flat [`Uint8Array`] with a `width` and a `height`, so that we can index it using (x, y) coordinates. + - `Tilemap` is a class wrapping a flat [`Uint8Array`][Uint8Array] with a `width` and a `height`, so that we can index it using (x, y) coordinates. - ```javascript tairu + {:program=tairu} + ```javascript console.log(tilemapSquare.at(0, 0)); console.log(tilemapSquare.at(3, 1)); ``` - ```output tairu + + {:program=tairu} + ```output 0 1 ``` - [`Uint8Array`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array + [Uint8Array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array % id = "01HQ162WWA090YW5BR1XW68XJN" - `at` has a `setAt` counterpart which sets tiles instead of getting them. @@ -90,34 +98,35 @@ styles = ["page/tairu.css"] - let's break this down into smaller steps. drawing a border around the rectangle will involve: % id = "01HQ162WWATV30HXGBQVWERP2M" - - determining *on which tiles* to draw it, + - determining _on which tiles_ to draw it, % id = "01HQ162WWAA0V0SS0D1Y38BDS1" - - determining *where in these tiles* to draw it, + - determining _where in these tiles_ to draw it, % id = "01HQ162WWAGBCBDYF4VH26MX1B" - and actually drawing it! % id = "01HQ162WWA2PNGVV075HR3WMER" - - so let's zoom in a bit and look at the tiles one by one. in particular, let's focus on *these* two tiles: + - so let's zoom in a bit and look at the tiles one by one. in particular, let's focus on _these_ two tiles: ![the same red rectangle, now with a focus on the northern tile at its center][pic:01HPYWPJB1P0GK53BSJFJFRAGR] % id = "01HQ162WWAYDS6CSD3T102NA9X" - - notice how the two highlighted tiles are *different.* therefore, we can infer we should probably connect together any tiles that are *the same*. + - notice how the two highlighted tiles are _different._ therefore, we can infer we should probably connect together any tiles that are _the same_. % id = "01HQ162WWATDD86D4GY7RMT0BZ" - knowing that, we can extract the logic to a function: - ```javascript tairu + {:program=tairu} + ```javascript export function shouldConnect(a, b) { return a == b; } ``` % id = "01HQ162WWA9M6801Q0RNRSF09H" - + now, also note that the border around this particular tile is only drawn on its *northern* edge - - therefore we can infer that borders should only be drawn on edges for whom `shouldConnect(thisTile, adjacentTile)` is **`false`** (not `true`!). + + now, also note that the border around this particular tile is only drawn on its _northern_ edge - + therefore we can infer that borders should only be drawn on edges for whom `shouldConnect(thisTile, adjacentTile)` is *`false`* (not `true`!). a tile generally has four edges - east, south, west, north - so we need to perform this check for all of them, and draw our border accordingly. % id = "01HQ162WWAM5YYQCEXH791T0E9" @@ -135,7 +144,8 @@ styles = ["page/tairu.css"] % id = "01HQ162WWA5W8NXSXVZY3BBQ0H" - to do that, I'm gonna override the tile editor's `drawTilemap` function - as this is where the actual tilemap rendering happens! - ```javascript tairu + {:program=tairu} + ```javascript import { TileEditor } from "tairu/editor.js"; export class TileEditorWithBorders extends TileEditor { @@ -160,7 +170,7 @@ styles = ["page/tairu.css"] continue; } - // Check which of this tile's neighbors should *not* connect to it. + // Check which of this tile's neighbors should _not_ connect to it. let disjointWithEast = !shouldConnect(tile, this.tilemap.at(x + 1, y)); let disjointWithSouth = !shouldConnect(tile, this.tilemap.at(x, y + 1)); let disjointWithWest = !shouldConnect(tile, this.tilemap.at(x - 1, y)); @@ -191,14 +201,17 @@ styles = ["page/tairu.css"] and here's the result: - ```javascript tairu + {:program=tairu} + ```javascript new TileEditorWithBorders({ tilemap: tilemapSquare, tileSize: 40, borderWidth: 4, }); ``` - ```output tairu 01HQ49TJZFMK719KSE16SG3F7B + + {:program=tairu :placeholder=01HQ49TJZFMK719KSE16SG3F7B} + ```output ``` % id = "01HQ162WWAAEKW1ECV5G3ZEY47" @@ -221,58 +234,58 @@ styles = ["page/tairu.css"] id = "01HQ162WWAS502000K8QZWVBDW" - we can split this tileset up into 16 individual tiles, each one 8 × 8 pixels; people choose various resolutions, I chose a fairly low one to hide my lack of artistic skill. -
- - - - - - - - - - - - - - - - -
+ ::: horizontal-tile-strip + []{.metal .x-0 .y-0} + []{.metal .x-1 .y-0} + []{.metal .x-2 .y-0} + []{.metal .x-3 .y-0} + []{.metal .x-0 .y-1} + []{.metal .x-1 .y-1} + []{.metal .x-2 .y-1} + []{.metal .x-3 .y-1} + []{.metal .x-0 .y-2} + []{.metal .x-1 .y-2} + []{.metal .x-2 .y-2} + []{.metal .x-3 .y-2} + []{.metal .x-0 .y-3} + []{.metal .x-1 .y-3} + []{.metal .x-2 .y-3} + []{.metal .x-3 .y-3} + ::: % classes.branch = "tileset-cardinal-directions-demo" id = "01HQ162WWANBTYH1JJWCTZYYVN" - the keen eyed among you have probably noticed that this is very similar to the case we had before with drawing procedural borders - - except that instead of determining which borders to draw based on a tile's neighbors, this time we'll determine which *whole tile* to draw based on its neighbors! + except that instead of determining which borders to draw based on a tile's neighbors, this time we'll determine which _whole tile_ to draw based on its neighbors! -
- ES - ESW - SW - S - ESN - ESWN - SWN - SN - EN - EWN - WN - N - E - EW - W - -
+ ::: horizontal-tile-strip + [[E]{.east} [S]{.south}]{.metal .x-0 .y-0} + [[E]{.east} [S]{.south} [W]{.west}]{.metal .x-1 .y-0} + [[S]{.south} [W]{.west}]{.metal .x-2 .y-0} + [[S]{.south}]{.metal .x-3 .y-0} + [[E]{.east} [S]{.south} [N]{.north}]{.metal .x-0 .y-1} + [[E]{.east} [S]{.south} [W]{.west} [N]{.north}]{.metal .x-1 .y-1} + [[S]{.south} [W]{.west} [N]{.north}]{.metal .x-2 .y-1} + [[S]{.south} [N]{.north}]{.metal .x-3 .y-1} + [[E]{.east} [N]{.north}]{.metal .x-0 .y-2} + [[E]{.east} [W]{.west} [N]{.north}]{.metal .x-1 .y-2} + [[W]{.west} [N]{.north}]{.metal .x-2 .y-2} + [[N]{.north}]{.metal .x-3 .y-2} + [[E]{.east}]{.metal .x-0 .y-3} + [[E]{.east} [W]{.west}]{.metal .x-1 .y-3} + [[W]{.west}]{.metal .x-2 .y-3} + []{.metal .x-3 .y-3} + ::: % id = "01HQ162WWA4Z6KKWFV59BR4WD3" - previously we represented which single border to draw with a single boolean. - now we will represent which single tile to draw with *four* booleans, because each tile can connect to four different directions. + now we will represent which single tile to draw with _four_ booleans, because each tile can connect to four different directions. % id = "01HQ162WWAQ9GZ6JD8KESW4N53" - - four booleans like this can easily be packed into a single integer using some bitwise operations, hence we get ***bitwise autotiling*** - autotiling using bitwise operations! + - four booleans like this can easily be packed into a single integer using some bitwise operations, hence we get _*bitwise autotiling*_ - autotiling using bitwise operations! % id = "01HQ162WWAMBM8RXKQTN3D0XR2" - - now the clever part of bitwise autotiling is that we can use this packed integer *as an array index* - therefore selecting which tile to draw can be determined using just a single lookup table! neat, huh? + - now the clever part of bitwise autotiling is that we can use this packed integer _as an array index_ - therefore selecting which tile to draw can be determined using just a single lookup table! neat, huh? % id = "01HQ162WWA0ZGZ97JZZBFS41TF" - but because I'm lazy, and CPU time is valuable, instead of using an array I'll just rearrange the tileset texture a bit to be able to slice it in place using this index. @@ -280,7 +293,8 @@ styles = ["page/tairu.css"] % id = "01HQ162WWAQQ99TRBDY5DCSW3Z" - say we arrange our bits like this: - ```javascript tairu + {:program=tairu} + ```javascript export const E = 0b0001; export const S = 0b0010; export const W = 0b0100; @@ -291,32 +305,32 @@ styles = ["page/tairu.css"] id = "01HQ162WWABANND0WGT933TBMV" - that means we'll need to arrange our tiles like so, where the leftmost tile is at index 0 (`0b0000`) and the rightmost tile is at index 15 (`0b1111`): -
- - E - S - ES - W - EW - SW - ESW - N - EN - SN - ESN - WN - EWN - SWN - ESWN -
+ ::: horizontal-tile-strip + []{.metal .x-3 .y-3} + [[E]{.east}]{.metal .x-0 .y-3} + [[S]{.south}]{.metal .x-3 .y-0} + [[E]{.east} [S]{.south}]{.metal .x-0 .y-0} + [[W]{.west}]{.metal .x-2 .y-3} + [[W]{.west} [E]{.east}]{.metal .x-1 .y-3} + [[W]{.west} [S]{.south}]{.metal .x-2 .y-0} + [[W]{.west} [E]{.east} [S]{.south}]{.metal .x-1 .y-0} + [[N]{.north}]{.metal .x-3 .y-2} + [[E]{.east} [N]{.north}]{.metal .x-0 .y-2} + [[S]{.south} [N]{.north}]{.metal .x-3 .y-1} + [[E]{.east} [S]{.south} [N]{.north}]{.metal .x-0 .y-1} + [[W]{.west} [N]{.north}]{.metal .x-2 .y-2} + [[E]{.east} [W]{.west} [N]{.north}]{.metal .x-1 .y-2} + [[S]{.south} [W]{.west} [N]{.north}]{.metal .x-2 .y-1} + [[E]{.east} [S]{.south} [W]{.west} [N]{.north}]{.metal .x-1 .y-1} + ::: % id = "01HQ162WWAJPW00XA25N0K6KS7" - - packing that into a single tileset, or rather this time, a *tile strip*, we get this image: + - packing that into a single tileset, or rather this time, a _tile strip_, we get this image: ![horizontal tile strip of 16 8x8 pixel metal tiles][pic:01HPMMR6DGKYTPZ9CK0WQWKNX5] % id = "01HQ162WWAT2ZC7T2P9ATD6WG2" - - now it's time to actually implement it as code! I'll start by defining a *tile index* function as a general way of looking up tiles in a tileset. + - now it's time to actually implement it as code! I'll start by defining a _tile index_ function as a general way of looking up tiles in a tileset. % id = "01HQ162WWA0NRHBB6HP2RERNBK" - I want to make the tile renderer a bit more general, so being able to attach a different tile lookup function to each tileset sounds like a great feature. @@ -327,7 +341,8 @@ styles = ["page/tairu.css"] % id = "01HQ162WWAYJ4JCG3Z24SJR8S9" - …but anyways, here's the basic bitwise magic function: - ```javascript tairu + {:program=tairu} + ```javascript export function tileIndexInBitwiseTileset(tilemap, x, y) { let tile = tilemap.at(x, y); @@ -345,7 +360,8 @@ styles = ["page/tairu.css"] id = "01HQ162WWAS813ANMBG1PWDZHC" - we'll define our tilesets by their texture, tile size, and a tile indexing function. so let's create an object that will hold our tileset data: - ```javascript tairu + {:program=tairu} + ```javascript // You'll probably want to host the assets on your own website rather than // hotlinking to others. It helps longevity! let tilesetImage = new Image(); @@ -361,7 +377,8 @@ styles = ["page/tairu.css"] % id = "01HQ162WWA0SC2GA7Y3KJE0W5F" - with all that, we should now be able to write a tile renderer which can handle textures! so let's try it: - ```javascript tairu + {:program=tairu} + ```javascript import { TileEditor } from "tairu/editor.js"; export class TilesetTileEditor extends TileEditor { @@ -409,20 +426,24 @@ styles = ["page/tairu.css"] % id = "01HQ162WWAS2HYF41MZNJ18BXC" - drum roll please… - ```javascript tairu + {:program=tairu} + ```javascript new TilesetTileEditor({ tilemap: tilemapSquare, tileSize: 40, tilesets: [heavyMetalTileset], }); ``` - ```output tairu 01HQ49X8Z57FNMN3E79FYF8CMG + + {:program=tairu :placeholder=01HQ49X8Z57FNMN3E79FYF8CMG} + ```output ``` % id = "01HQ162WWA03JAGJYCT0DRZP24" - it works! buuuut if you play around with it you'll quickly start noticing some problems: - ```javascript tairu + {:program=tairu} + ```javascript import { Tilemap } from "tairu/tilemap.js"; export const tilemapEdgeCase = Tilemap.parse(" x", [ @@ -438,7 +459,9 @@ styles = ["page/tairu.css"] tilesets: [heavyMetalTileset], }); ``` - ```output tairu 01HQ49YDPQXYSAT5N6P241DG3C + + {:program=tairu :placeholder=01HQ49YDPQXYSAT5N6P241DG3C} + ```output ``` % id = "01HQ162WWAB0AYSPGB4AEVT03Z" @@ -448,9 +471,10 @@ styles = ["page/tairu.css"] - ### thing is, it was never good in the first place % id = "01HQ162WWARSVDRNHZE13ZF6W6" - - I'll be blunt: we don't have enough tiles to represent *corners*! like in this case: + - I'll be blunt: we don't have enough tiles to represent _corners_! like in this case: - ```javacript tairu + {:program=tairu} + ```javascript import { Tilemap } from "tairu/tilemap.js"; new TilesetTileEditor({ @@ -464,7 +488,9 @@ styles = ["page/tairu.css"] tilesets: [heavyMetalTileset], }); ``` - ```output tairu 01HQ49Z8JWR75D85DGHCB34K8E + + {:program=tairu :placeholder=01HQ49Z8JWR75D85DGHCB34K8E} + ```output ``` % id = "01HQ1K39AS4VDW7DVTAGQ03WFM" @@ -476,50 +502,60 @@ styles = ["page/tairu.css"] - it should kind of _"bend"_ to fit in with the tiles to the north and the south, but it doesn't :kamien: % id = "01HQ1K39ASQQNF7B881SYJWRC7" - - so what if we made the tile look like *this* instead: + - so what if we made the tile look like _this_ instead: ![mockup showing that previous L-shape but with a real corner][pic:01HQ17GYEZSZCVRBFHP4HXAJV8] % id = "01HQ1K39ASMKRMTXFV93FRHZTG" - that sure as heck looks a lot nicer! but there's a problem: that tile, let's zoom in on it… - ![that bent tile, and just *it* alone][pic:01HQ183RANGH4S7VZSG1ZGH0S5] + ![that bent tile, and just _it_ alone][pic:01HQ183RANGH4S7VZSG1ZGH0S5] % classes.branch = "tileset-four-to-eight-demo" id = "01HQ1K39ASR81NWMW8Q0MF8QMP" - enhance! - + + {% NOTE djot: I don't there's a way to achieve this in Djot alone %} + ``` =html
  • E
  • S
+ ``` % classes.branch = "tileset-four-to-eight-demo" id = "01HQ1K39ASC5WTR2A2AJN85JK2" - huh. interesting. it connects to the east and the south. so what about this tile - + + ``` =html
  • E
  • S
+ ``` + % id = "01HQ1K39ASXYBH9QJH5Q0C45JZ" - - because it *also* connects to the east and the south :thinking: + - because it _also_ connects to the east and the south :thinking: % id = "01HQ1K39ASW5PWS52NGA2X3M0P" - - seems like we'll need something to disambiguate the two cases - and what better thing to disambiguate with than *more bits*! + - seems like we'll need something to disambiguate the two cases - and what better thing to disambiguate with than _more bits_! % classes.branch = "tileset-four-to-eight-demo" id = "01HPQCCV4R5N97FJ1GS36HZJZ7" - to represent the corners, we'll turn our four cardinal directions… + ``` =html
  • E
  • S
  • W
  • N
+ ``` - into eight *ordinal* directions: + into eight _ordinal_ directions: + ``` =html
  • E
  • SE
    • @@ -530,13 +566,14 @@ styles = ["page/tairu.css"]
  • N
  • NE
+ ``` % id = "01HQ1K39ASFN94YDY1RWQYS12K" - at this point with the four extra corners we'll need 8 bits to represent our tiles, and that would make… - ***256 tiles!?*** + _*256 tiles!?*_ - nobody in their right mind would actually draw 256 separate tiles, right? ***RIGHT???*** + nobody in their right mind would actually draw 256 separate tiles, right? _*RIGHT???*_ % template = true id = "01HQ1K39AS11M1M4GQQ60NXTY6" @@ -544,7 +581,8 @@ styles = ["page/tairu.css"] if we arrange the tiles in a diagnonal cross like this, notice how the tile in the center would have the bits `SE | SW | NW | NE` set, which upon first glance would suggest us needing a different tile - but it looks correct! - ```javascript tairu + {:program=tairu} + ```javascript import { Tilemap } from "tairu/tilemap.js"; new TilesetTileEditor({ @@ -559,29 +597,35 @@ styles = ["page/tairu.css"] tilesets: [heavyMetalTileset], }); ``` - ```output tairu 01HQ4A01MPE6JT5ZZFEN9S635W + + {:program=tairu :placeholder=01HQ4A01MPE6JT5ZZFEN9S635W} + ```output ``` % id = "01HQ1K39AS7CRBZ67N1VVHCVME" - - therefore there must be *some* bit combinations that are redundant to others. let's find them! + - therefore there must be _some_ bit combinations that are redundant to others. let's find them! % classes.branch = "tileset-four-to-eight-demo" id = "01HQ1K39ASZPJ4E23EZ1XJ5J7K" - let's pick one corner first, then generalize to all the other ones. I pick southeast! + ``` =html
  • E
  • SE
  • S
+ ``` % id = "01HQ1K39ASQTR054W0VWEAV2FS" - in this case, if we remove the tile to the southeast, we get that bent tile from before: + ``` =html
  • E
  • S
+ ``` % id = "01HQ1K39AS6RGE6Z83T8MH1R0M" - what we can learn from this is that for `E | S`, `ES` affects the result! @@ -589,6 +633,7 @@ styles = ["page/tairu.css"] % id = "01HQ1K39ASVSAQ6F8ANEZE1WQ4" - but if we add any other corner, nothing changes. heck, let's add all of them: + ``` =html
  • E
  • SE
    • @@ -597,6 +642,7 @@ styles = ["page/tairu.css"]
  • NW
  • NE
+ ``` % id = "01HQ1K39AST8RQTVSCDV7FSH62" - this combination is definitely redundant! @@ -612,7 +658,8 @@ styles = ["page/tairu.css"] + we'll start off by redefining our bits to be ordinal directions instead. I still want to keep the [nice orderliness][branch:01HQ162WWAM5YYQCEXH791T0E9] that comes with arranging the bits clockwise starting from east, so if we want that we can't just extend the indices with an extra four bits at the top. - ```javascript tairu + {:program=tairu} + ```javascript export const E = 0b0000_0001; export const SE = 0b0000_0010; export const S = 0b0000_0100; @@ -626,7 +673,8 @@ styles = ["page/tairu.css"] % id = "01HPSY4Y19HPNXC54VP6TFFHXN" - I don't know about you, but I find the usual C-style way of checking whether a bit is set extremely hard to read, so let's take care of that: - ```javascript tairu + {:program=tairu} + ```javascript export function isSet(integer, bit) { return (integer & bit) == bit; } @@ -636,7 +684,8 @@ styles = ["page/tairu.css"] - now we can write a function that will remove the aforementioned redundancies. the logic is quite simple - for southeast, we only allow it to be set if both south and east are also set, and so on and so forth. - ```javascript tairu + {:program=tairu} + ```javascript // t is an existing tile index; variable name is short for brevity export function removeRedundancies(t) { if (isSet(t, SE) && (!isSet(t, S) || !isSet(t, E))) { @@ -658,7 +707,8 @@ styles = ["page/tairu.css"] % id = "01HPSY4Y19HWQQ9XBW1DDGW68T" - with that, we can find a set of all unique non-redundant combinations: - ```javascript tairu + {:program=tairu} + ```javascript export function ordinalDirections() { let unique = new Set(); for (let i = 0; i <= 0b1111_1111; ++i) { @@ -669,20 +719,22 @@ styles = ["page/tairu.css"] ``` % id = "01HPSY4Y19KG8DC4SYXR1DJJ5F" - - by the way, I find it quite funny how JavaScript's [`Array.prototype.sort`] defaults to ASCII ordering *for all types.* + - by the way, I find it quite funny how JavaScript's [`Array.prototype.sort`][sort] defaults to ASCII ordering _for all types._ even numbers! ain't that silly? - [`Array.prototype.sort`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort + [sort]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort % id = "01HPSY4Y19V62YKTGK3TTKEB38" - and with all the ingredients in the pot, we now _Let It Cook™_: - ```javascript tairu + {:program=tairu} + ```javascript let dirs = ordinalDirections(); console.log(dirs.length); ``` - ```output tairu + {:program=tairu} + ```output 47 ``` @@ -690,7 +742,7 @@ styles = ["page/tairu.css"] - forty seven! that's how many unique tiles we actually need. % id = "01HPSY4Y19C303Z595KNVXYYVS" - - you may find pixel art tutorials saying you need forty *eight* and not forty *seven*, but that is not quite correct - + - you may find pixel art tutorials saying you need forty _eight_ and not forty _seven_, but that is not quite correct - the forty eighth tile is actually just the empty tile! saying it's part of the tileset is quite misleading IMO. % id = "01HPSY4Y19TM2K2WN06HHEM3D0" @@ -707,13 +759,13 @@ styles = ["page/tairu.css"] - so we only need to draw 47 tiles, but to actually display them in a game we still need to pack them into an image. % id = "01HPWJB4Y0QX6YR6TQKZ7T1C2E" - - we *could* use a similar approach to the 16 tile version, but that would leave us with lots of wasted space! + - we _could_ use a similar approach to the 16 tile version, but that would leave us with lots of wasted space! % id = "01HPWJB4Y0HKGSDABB56CNFP9H" - think that with this redundancy elimination approach most of the tiles will never even be looked up by the renderer, because the bit combinations will be collapsed into a more canonical form before the lookup. % id = "01HQ1K39ASM53P1E74HKRZ1T24" - - so instead of wasting space, we can compress the tiles into a compact strip, and use a lookup table from sparse tile indices to dense tile *positions* within the strip. + - so instead of wasting space, we can compress the tiles into a compact strip, and use a lookup table from sparse tile indices to dense tile _positions_ within the strip. % id = "01HPWJB4Y0F9JGXQDAAVC3ERG1" - I don't want to write the lookup table by hand, so let's generate it! @@ -721,7 +773,8 @@ styles = ["page/tairu.css"] % id = "01HPWJB4Y0HTV32T4WMKCKWTVA" - we'll start by obtaining our ordinal directions array again: - ```javascript tairu + {:program=tairu} + ```javascript export let xToConnectionBitSet = ordinalDirections(); ``` @@ -730,7 +783,8 @@ styles = ["page/tairu.css"] remember that our array has only 256 values, so it should be pretty cheap to represent using a [`Uint8Array`]: - ```javascript tairu + {:program=tairu} + ```javascript export let connectionBitSetToX = new Uint8Array(256); for (let i = 0; i < xToConnectionBitSet.length; ++i) { connectionBitSetToX[xToConnectionBitSet[i]] = i; @@ -742,18 +796,22 @@ styles = ["page/tairu.css"] % id = "01HPWJB4Y0CWQB9EZG6C91A0H0" - and there we go! we now have a mapping from our bitset to positions within the tile strip. try to play around with the code example to see which bitsets correspond to which position! - ```javascript tairu + {:program=tairu} + ```javascript console.log(connectionBitSetToX[E | SE | S]); ``` - ```output tairu + + {:program=tairu} + ```output 4 ``` % id = "01HPWJB4Y09P9Q3NGN59XWX2X9" - + for my own (and your) convenience, here's a complete list of *all* the possible combinations in order. + + for my own (and your) convenience, here's a complete list of _all_ the possible combinations in order. % id = "01HPWJB4Y01VJFMHYEC1WZ353W" - - ```javascript tairu + - {:program=tairu} + ```javascript function toString(bitset) { if (bitset == 0) return "0"; @@ -773,7 +831,9 @@ styles = ["page/tairu.css"] console.log(`${x} => ${toString(xToConnectionBitSet[x])}`); } ``` - ```output tairu + + {:program=tairu} + ```output 0 => 0 1 => E 2 => S @@ -836,7 +896,8 @@ styles = ["page/tairu.css"] % id = "01HQ1M84GS09M7PMXFYHDPRTMT" - since we already prepared the bulk of the framework before, it should be as simple as writing a new `tileIndex` function: - ```javascript tairu + {:program=tairu} + ```javascript export function tileIndexInBitwiseTileset47(tilemap, x, y) { let tile = tilemap.at(x, y); @@ -858,7 +919,8 @@ styles = ["page/tairu.css"] id = "01HQ1M84GS4C99VQZC4150CMDS" - now we can write a new tileset descriptor that uses this indexing function and the larger tile strip: - ```javascript tairu + {:program=tairu} + ```javascript // Once again, use your own link here! let tilesetImage = new Image(); tilesetImage.src = "{% pic 01HPW47SHMSVAH7C0JR9HWXWCM %}"; @@ -873,7 +935,8 @@ styles = ["page/tairu.css"] % id = "01HQ1M84GS9CC8VR1BVDC15W50" - and Drum Roll 2: Return of the Snare please… - ```javascript tairu + {:program=tairu} + ```javascript import { Tilemap } from "tairu/tilemap.js"; new TilesetTileEditor({ @@ -888,14 +951,16 @@ styles = ["page/tairu.css"] tilesets: [heavyMetalTileset47], }); ``` - ```output tairu 01HQ4A11RRXEQ850598GFBJN0B + + {:program=tairu :placeholder=01HQ4A11RRXEQ850598GFBJN0B} + ```output ``` % id = "01HQ1M84GSCXTPGVPXY840WCQ6" - it works perfectly! % id = "01HQ1M84GSVBG9T94ZN9XTXX58" - - but honestly, this is a bit *boring* if we're gonna build a game with procedural worlds. + - but honestly, this is a bit _boring_ if we're gonna build a game with procedural worlds. % id = "01HQ1M84GSH0KTFFZET6GZZ4V2" - heck, it's even boring for a level designer to have to lay out all the tiles manually - @@ -907,7 +972,8 @@ styles = ["page/tairu.css"] % id = "01HQ1M84GS0KJ9NA6GPS62RC95" - for now, have a big editor to play around with. it's a lot of fun arranging the tiles in various shapes! -```javascript tairu +{:program=tairu} +```javascript import { Tilemap } from "tairu/tilemap.js"; new TilesetTileEditor({ @@ -916,7 +982,9 @@ new TilesetTileEditor({ tilesets: [heavyMetalTileset47], }); ``` -```output tairu 01HQ4A45WNAEJGCT2WDMQJHK14 + +{:program=tairu :placeholder=01HQ4A45WNAEJGCT2WDMQJHK14} +```output ``` :nap: