update issues
This commit is contained in:
parent
04a346d851
commit
2a68cfbf63
44 changed files with 1201 additions and 318 deletions
7
Cargo.lock
generated
7
Cargo.lock
generated
|
|
@ -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",
|
||||
|
|
|
|||
20
content/README.md
Normal file
20
content/README.md
Normal file
|
|
@ -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.
|
||||
|
|
@ -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 `<details>`, the `<details>` 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.
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@
|
|||
- but I don't wanna replace it because it's just too good
|
||||
|
||||
% id = "emoji/nap"
|
||||
- :nap: - <sub>z</sub>zZ
|
||||
- :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]
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
- <!-- what I mean is if you haven't seen anyone else here, you haven't looked hard enough. -->
|
||||
- `<!-- what I mean is if you haven't seen anyone else here, you haven't looked hard enough. -->`{=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.
|
||||
|
|
|
|||
|
|
@ -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 <span style="cursor: pointer; text-decoration: dotted underline;">pointer</span> 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
|
||||
<style>
|
||||
.digital-textures-pointer-cursor * { cursor: default }
|
||||
</style>
|
||||
```
|
||||
|
||||
% classes.branch = "digital-textures-pointer-cursor"
|
||||
id = "01HQ8JHZ5NYDJD0YKVX55AR3ZQ"
|
||||
- <span style="cursor: default;">
|
||||
when you have an interactive element and it <em>doesn't</em> have a <span style="cursor: pointer; text-decoration: dotted underline;">pointer</span> cursor on it, it feels almost <em>wrong.</em>
|
||||
eerie in a way. out of place.<br>
|
||||
- {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?
|
||||
</span>
|
||||
:::
|
||||
|
||||
% id = "01HQ8JHZ5NT1P5R3EM9GEKZ3DK"
|
||||
- <span style="cursor: default; user-select: none;">and this one is *even* weirder, with unselectable text! (sorry for this. I'm trying to make a point.)</span>
|
||||
- [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 <kbd>Ctrl</kbd> + <kbd>A</kbd> and it selects all text also gives off a texture typical of websites.
|
||||
- the fact you can press `<kbd>Ctrl</kbd>`{=html} + `<kbd>A</kbd>`{=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 <span style="font-family: 'Lucida Console', RecVar;">Lucida Console</span> rather than <span style="font-family: 'Consolas', RecVar;">Consolas</span>.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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!
|
||||
|
|
|
|||
|
|
@ -3,17 +3,18 @@
|
|||
|
||||
% id = "treehouse"
|
||||
- # liquidex's treehouse
|
||||
<span class="oops-you-seem-to-have-gotten-stuck">
|
||||
<strong>achievement unlocked: <i>I don't want anything to do with this bullshit</i><br></strong>
|
||||
…either that, or you folded the entire tree by accident.<br>
|
||||
feel free to go back any time by clicking here.
|
||||
</span>
|
||||
|
||||
::: 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"
|
||||
- <a class="secret" href="/kuroneko">_"owo, what's this?"_</a>
|
||||
- [_"owo, what's this?"_][page:kuroneko]{.secret}
|
||||
|
||||
% id = "about"
|
||||
content.link = "about"
|
||||
|
|
@ -30,16 +31,19 @@
|
|||
% id = "programming"
|
||||
content.link = "programming"
|
||||
+ ## programming
|
||||
``` =html
|
||||
<svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M8.58579 11L5.29289 7.70711L6.70711 6.29289L11.4142 11L6.70711 15.7071L5.29289 14.2929L8.58579 11Z"
|
||||
fill="currentColor" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 18H12V16H18V18Z" fill="currentColor" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
% id = "design"
|
||||
content.link = "design"
|
||||
+ ## design
|
||||
``` =html
|
||||
<svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 18V16H20V18H22V20H20V22H18V20H16V18H18Z" fill="currentColor" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4H8V6H6V8H4V4Z" fill="currentColor" />
|
||||
|
|
@ -50,20 +54,23 @@
|
|||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 20H10V18H14V20Z" fill="currentColor" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 14V10H20V14H18Z" fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
```
|
||||
|
||||
% id = "music"
|
||||
content.link = "music"
|
||||
+ ## music
|
||||
``` =html
|
||||
<svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M9 7L18 5V5.5V8.20002V15.5C18 16.6046 16.8807 17.5 15.5 17.5C14.1193 17.5 13 16.6046 13 15.5C13 14.3954 14.1193 13.5 15.5 13.5C15.6712 13.5 15.8384 13.5138 16 13.54V8.64446L11 9.75558V17.5C11 18.6046 9.88071 19.5 8.5 19.5C7.11929 19.5 6 18.6046 6 17.5C6 16.3954 7.11929 15.5 8.5 15.5C8.67123 15.5 8.83844 15.5138 9 15.54V10.2V7.5V7Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
% id = "games"
|
||||
content.link = "games"
|
||||
+ ## games
|
||||
``` =html
|
||||
<svg class="background-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M4.76469 9.3788C4.11751 11.8531 3.95139 14.9468 3.93837 17.1997C3.93607 17.5979 4.26468 18 4.81836 18H5.55848L5.87471 17.0513C6.28305 15.8263 7.42947 15 8.72076 15H15.2792C16.5705 15 17.717 15.8263 18.1253 17.0513L18.4415 18H19.1816C19.7353 18 20.0639 17.5978 20.0616 17.1997C20.0486 14.9468 19.8825 11.8531 19.2353 9.3788C18.9094 8.13264 18.5025 7.21029 18.0604 6.63842C17.6618 6.12281 17.335 6 17 6H15.8901C15.7929 6.10179 15.6861 6.20981 15.5815 6.30722C15.5085 6.37519 15.3966 6.47582 15.2656 6.57159C15.2019 6.61812 15.0904 6.69566 14.9457 6.76963C14.8536 6.81671 14.4947 7 14 7H10C9.5053 7 9.14639 6.81671 9.05429 6.76963C8.90956 6.69566 8.79809 6.61812 8.73445 6.57159C8.60345 6.47582 8.49146 6.37519 8.4185 6.30722C8.31391 6.20981 8.20711 6.10179 8.10995 6H7C6.66496 6 6.33822 6.12281 5.93959 6.63842C5.49747 7.21029 5.09064 8.13264 4.76469 9.3788ZM15 4H17C21.3983 4 22.0351 12.5978 22.0616 17.1882C22.0708 18.7723 20.7658 20 19.1816 20H17L16.2279 17.6838C16.0918 17.2754 15.7097 17 15.2792 17H8.72076C8.29033 17 7.90819 17.2754 7.77208 17.6838L7 20H4.81836C3.23417 20 1.92925 18.7723 1.9384 17.1882C1.96494 12.5978 2.6017 4 7 4H9C9 4 9.85285 5 10 5H14C14.1472 5 15 4 15 4Z"
|
||||
|
|
@ -75,6 +82,7 @@
|
|||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 8.5H7V10H5.5V12H7V13.5H9V12H10.5V10H9V8.5Z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
% id = "01HFYZKREWE2AM61ZRW3R501H6"
|
||||
- various thoughts
|
||||
|
|
|
|||
|
|
@ -5,4 +5,6 @@
|
|||
% template = true
|
||||
cast = "chat js"
|
||||
id = "01HSS5TMDD4WSZSXW17ANQN7VK"
|
||||
- {% include_static chat/kuroneko.json %}
|
||||
- ``` =html
|
||||
{% include_static chat/kuroneko.json %}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
<https://twitter.com/bennjordan/status/1756870458358546722>
|
||||
|
||||
> 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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 yyyYyyYYY<kbd>y</kbd>`y`Y`Y`<kbd>Y</kbd>
|
||||
+ the humming intensifies, you see various blinkenlights shining on its faceplate, and soon you become surrounded by yyyYyyYYY`<kbd>y</kbd>`{=html}`y`Y`Y``<kbd>Y</kbd>`{=html}
|
||||
|
||||
% id = "01HA4HJKRJZTC9V7BZVCFFBAXR"
|
||||
- ...you passed out.
|
||||
|
|
|
|||
|
|
@ -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 <span style="cursor: pointer; text-decoration: dotted underline;" title="yeah, *this* cursor you're seeing right now">pointer</span> 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 <span style="cursor: pointer; text-decoration: dotted underline;" title="yeah, _this_ cursor you're seeing right now">pointer</span> 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
% content.link = "programming/blog/tairu"
|
||||
id = "01HPD4XQQ5WM0APCAX014HM43V"
|
||||
+ :page: <span class="badge blue">featured</span> 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"
|
||||
|
|
|
|||
|
|
@ -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! -->
|
||||
{% 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*) */;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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.)
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
<noscript>(…though you will need to enable JavaScript to try it out.
|
||||
{% this could probably be written with some clever generator magic, but I'm too lazy for that %}
|
||||
`<noscript>`{=html}
|
||||
(…though you will need to enable JavaScript to try it out.
|
||||
seriously, pinky promise I won't ever track you!
|
||||
inspect the source code if you wanna.
|
||||
if not, you will have to deal with static pictures.
|
||||
but just keep in mind this was supposed to be an <strong><em>interactive</em></strong> exploration of autotiling techniques.
|
||||
cheers!)</noscript>
|
||||
but just keep in mind this was supposed to be an _*interactive*_ exploration of autotiling techniques.
|
||||
cheers!)
|
||||
`</noscript>`{=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.
|
||||
|
||||
<div class="horizontal-tile-strip">
|
||||
<span class="metal x-0 y-0"></span>
|
||||
<span class="metal x-1 y-0"></span>
|
||||
<span class="metal x-2 y-0"></span>
|
||||
<span class="metal x-3 y-0"></span>
|
||||
<span class="metal x-0 y-1"></span>
|
||||
<span class="metal x-1 y-1"></span>
|
||||
<span class="metal x-2 y-1"></span>
|
||||
<span class="metal x-3 y-1"></span>
|
||||
<span class="metal x-0 y-2"></span>
|
||||
<span class="metal x-1 y-2"></span>
|
||||
<span class="metal x-2 y-2"></span>
|
||||
<span class="metal x-3 y-2"></span>
|
||||
<span class="metal x-0 y-3"></span>
|
||||
<span class="metal x-1 y-3"></span>
|
||||
<span class="metal x-2 y-3"></span>
|
||||
<span class="metal x-3 y-3"></span>
|
||||
</div>
|
||||
::: 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!
|
||||
|
||||
<div class="horizontal-tile-strip">
|
||||
<span class="metal x-0 y-0"><span class="east">E</span><span class="south">S</span></span>
|
||||
<span class="metal x-1 y-0"><span class="east">E</span><span class="south">S</span><span class="west">W</span></span>
|
||||
<span class="metal x-2 y-0"><span class="south">S</span><span class="west">W</span></span>
|
||||
<span class="metal x-3 y-0"><span class="south">S</span></span>
|
||||
<span class="metal x-0 y-1"><span class="east">E</span><span class="south">S</span><span class="north">N</span></span>
|
||||
<span class="metal x-1 y-1"><span class="east">E</span><span class="south">S</span><span class="west">W</span><span class="north">N</span></span>
|
||||
<span class="metal x-2 y-1"><span class="south">S</span><span class="west">W</span><span class="north">N</span></span>
|
||||
<span class="metal x-3 y-1"><span class="south">S</span><span class="north">N</span></span>
|
||||
<span class="metal x-0 y-2"><span class="east">E</span><span class="north">N</span></span>
|
||||
<span class="metal x-1 y-2"><span class="east">E</span><span class="west">W</span><span class="north">N</span></span>
|
||||
<span class="metal x-2 y-2"><span class="west">W</span><span class="north">N</span></span>
|
||||
<span class="metal x-3 y-2"><span class="north">N</span></span>
|
||||
<span class="metal x-0 y-3"><span class="east">E</span></span>
|
||||
<span class="metal x-1 y-3"><span class="east">E</span><span class="west">W</span></span>
|
||||
<span class="metal x-2 y-3"><span class="west">W</span></span>
|
||||
<span class="metal x-3 y-3"></span>
|
||||
</div>
|
||||
::: 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`):
|
||||
|
||||
<div class="horizontal-tile-strip">
|
||||
<span class="metal x-3 y-3"></span>
|
||||
<span class="metal x-0 y-3"><span class="east">E</span></span>
|
||||
<span class="metal x-3 y-0"><span class="south">S</span></span>
|
||||
<span class="metal x-0 y-0"><span class="east">E</span><span class="south">S</span></span>
|
||||
<span class="metal x-2 y-3"><span class="west">W</span></span>
|
||||
<span class="metal x-1 y-3"><span class="east">E</span><span class="west">W</span></span>
|
||||
<span class="metal x-2 y-0"><span class="south">S</span><span class="west">W</span></span>
|
||||
<span class="metal x-1 y-0"><span class="east">E</span><span class="south">S</span><span class="west">W</span></span>
|
||||
<span class="metal x-3 y-2"><span class="north">N</span></span>
|
||||
<span class="metal x-0 y-2"><span class="east">E</span><span class="north">N</span></span>
|
||||
<span class="metal x-3 y-1"><span class="south">S</span><span class="north">N</span></span>
|
||||
<span class="metal x-0 y-1"><span class="east">E</span><span class="south">S</span><span class="north">N</span></span>
|
||||
<span class="metal x-2 y-2"><span class="west">W</span><span class="north">N</span></span>
|
||||
<span class="metal x-1 y-2"><span class="east">E</span><span class="west">W</span><span class="north">N</span></span>
|
||||
<span class="metal x-2 y-1"><span class="south">S</span><span class="west">W</span><span class="north">N</span></span>
|
||||
<span class="metal x-1 y-1"><span class="east">E</span><span class="south">S</span><span class="west">W</span><span class="north">N</span></span>
|
||||
</div>
|
||||
::: 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
|
||||
<ul class="directions-square bend">
|
||||
<li class="east">E</li>
|
||||
<li class="south">S</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
% 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
|
||||
<ul class="directions-square e-s">
|
||||
<li class="east">E</li>
|
||||
<li class="south">S</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
% 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
|
||||
<ul class="directions-square">
|
||||
<li class="east">E</li>
|
||||
<li class="south">S</li>
|
||||
<li class="west">W</li>
|
||||
<li class="north">N</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
into eight *ordinal* directions:
|
||||
into eight _ordinal_ directions:
|
||||
|
||||
``` =html
|
||||
<ul class="directions-square">
|
||||
<li class="east">E</li>
|
||||
<li class="south-east">SE</li>
|
||||
|
|
@ -530,13 +566,14 @@ styles = ["page/tairu.css"]
|
|||
<li class="north">N</li>
|
||||
<li class="north-east"><a href="https://github.com/NoiseStudio/NoiseEngine/" title="NoiseEngine????">NE</a></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
% 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
|
||||
<ul class="directions-square e-s">
|
||||
<li class="east">E</li>
|
||||
<li class="south-east">SE</li>
|
||||
<li class="south">S</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
% id = "01HQ1K39ASQTR054W0VWEAV2FS"
|
||||