In one sentence: I'm still exploring (2D) rewriting - from different angles. This includes keeping track of positions in a Trie ... somewhere else in that tree structure to avoid searching for matches when the path to them can be stored. Ways to visualize the tree structure that also straightforwardly works for rules, ordered information (lists and grids), etc... it's complicated!
I started this website a few days ago (as of December 4th) after not having a 'proper' site for years, only unfinished attempts using all sorts of frameworks or website builders. This time, it's just basic HTML and CSS! I'll be writing about what I work on this december in the spirit of the December Adventure. "The December Adventure is low key. The goal is to write a little bit of code every day in December." ... I lacked motivation the first few days, so this won't be super strict. I'll try to write about what I do, though. Also need to mention Lu Wilson's encouraging mantra "Normalize sharing scrappy fiddles", see also their wonderful talk "What it means to be open" recorded at Heart of Clojure 2024.
After time with family, I spent a decent amount of time making things! I should not have stayed up until, like, 6 AM, but it was fun.
Firstly, I explored a bit of an idea for a line drawing paper puzzle genre that is intended to be nicely extendable through variants, adding extra restrictions or symbols. No actual puzzles yet, but the core idea features a grid you can trace lines on, that clearly have to belong to certain creatures indicated by symbols on the grid, which in turn have certain behaviors. Like not wanting to be next to empty vertices or not including branching segments.
And second, I saw todepond.com/lab/splash, a color format where each digit of a number between 000-999 maps to an RGB component. With only that many colors they can easily go in a lookup table. I thought this would be more convenient to me in HSL or HSV, or the perceptually uniform okhsl in particular, Copyright (c) 2021 Björn Ottosson. It would otherwise involve a decent bit of math that has to be converted to each programming language it's used in. Also added a bit of hue shifting so that lighter colors are warmer and darker colors are cooler, and made the lightness follow an S-curve. Since full black, white, and even complete gray would discard some channels and be repeated, I excluded them and lowered the range, so 0 saturation for example is not quite pure gray.
Here are all the 1000 colors as hex strings, comma separated:
"#171314", "#1c1719", "#2b2527", "#43393c", "#615455", "#827373", "#a39492", "#c0b3b0", "#d6cdca", "#e4dedc", "#191115", "#1f161a", "#302328", "#49363b", "#695053", "#8d6e6e", "#ae8f8b", "#c9b0a9", "#dccbc5", "#e8ddd8", "#1c0f16", "#22141b", "#342028", "#4f333b", "#724b51", "#97696a", "#b98b85", "#d1ada3", "#e2c9c0", "#ecdcd4", "#1f0e16", "#25121b", "#381d28", "#552e3a", "#7a464f", "#a26365", "#c3867e", "#d9aa9d", "#e7c7bb", "#f0dbd1", "#210b17", "#280f1c", "#3c1929", "#5b2a3a", "#82404d", "#ac5c60", "#cd8077", "#e1a697", "#ecc6b7", "#f3dace", "#240918", "#2b0c1d", "#401529", "#61243a", "#8a384a", "#b6545a", "#d67a70", "#e8a391", "#f1c4b2", "#f6d9cb", "#260618", "#2e081d", "#44102a", "#661d39", "#922f48", "#bf4a54", "#e07368", "#ef9f8a", "#f6c2ae", "#f9d8c8", "#290319", "#31041e", "#48082a", "#6c1239", "#992245", "#c93d4e", "#e96b60", "#f59c84", "#fac0aa", "#fcd7c6", "#2a011a", "#33011e", "#4b022a", "#700738", "#9f1343", "#d32b47", "#f36157", "#fb987f", "#fdbfa7", "#fed6c4", "#2b001a", "#34001f", "#4c002a", "#720038", "#a30042", "#dd0040", "#ff534a", "#ff967b", "#ffbea5", "#ffd5c2", "#171312", "#1d1817", "#2c2523", "#433a37", "#605550", "#80746d", "#a1958d", "#bdb5ac", "#d4cec7", "#e2dfda", "#1a1210", "#201614", "#302320", "#493832", "#675248", "#897263", "#a99381", "#c4b3a2", "#d9cdbf", "#e6ded4", "#1d100e", "#231512", "#34211d", "#4e352d", "#6e5041", "#906f5a", "#b19176", "#cbb196", "#deccb7", "#e9dece", "#1f0f0c", "#261310", "#381f19", "#533328", "#744d3a", "#976c50", "#b88e6b", "#d2af8b", "#e3cbae", "#ecddc8", "#220d0a", "#29110d", "#3c1d16", "#583022", "#7a4a32", "#9e6946", "#bf8b5e", "#d9ad7e", "#e8caa4", "#f0ddc1", "#240b08", "#2b0f0b", "#3f1b12", "#5c2d1d", "#7f472a", "#a4663b", "#c68851", "#e0ab71", "#edc89a", "#f4dcba", "#260906", "#2e0d08", "#42180e", "#602a16", "#844321", "#aa632f", "#cc8543", "#e7a862", "#f3c78e", "#f7dbb2", "#280704", "#300b06", "#45150a", "#64270f", "#884016", "#af5f20", "#d38231", "#eda551", "#f8c582", "#fbdaaa", "#2b0502", "#330703", "#481105", "#672307", "#8c3d0a", "#b35c11", "#d87f1d", "#f4a239", "#fdc478", "#fed9a4", "#2e0100", "#360300", "#4b0c00", "#6a2000", "#8e3b00", "#b55b00", "#db7d00", "#fc9e00", "#ffc372", "#ffd9a2", "#161410", "#1b1915", "#292722", "#3f3c35", "#5b574e", "#7b776b", "#9b988b", "#b9b6ab", "#d1cfc7", "#e1e0da", "#17130d", "#1c1812", "#2b261d", "#423b2e", "#5f5745", "#7f7761", "#9f987f", "#bcb7a0", "#d3d0be", "#e2e0d3", "#18130b", "#1e180e", "#2d2619", "#443b28", "#61563d", "#827656", "#a39874", "#c0b794", "#d6d0b4", "#e4e0cc", "#191308", "#1f180b", "#2f2615", "#463b23", "#645635", "#85764c", "#a69767", "#c3b787", "#d9d0a8", "#e6e0c3", "#1a1306", "#201809", "#302511", "#483a1d", "#66552e", "#887542", "#a9975b", "#c6b678", "#dcd09a", "#e8e1b9", "#1b1204", "#211706", "#31250d", "#493a18", "#685526", "#8a7538", "#ac964e", "#cab668", "#e0d08a", "#ebe1ab", "#1b1203", "#211704", "#322509", "#4b3912", "#6a541f", "#8d742e", "#af963f", "#ceb655", "#e4d075", "#efe19b", "#1c1202", "#221703", "#332405", "#4c390c", "#6b5416", "#8f7421", "#b2952e", "#d2b53c", "#e9cf58", "#f3e184", "#1c1201", "#231701", "#342402", "#4d3905", "#6d540b", "#907313", "#b4951a", "#d4b422", "#edcf36", "#f8e163", "#1d1200", "#231600", "#342400", "#4e3800", "#6e5300", "#927300", "#b69400", "#d6b400", "#f0ce00", "#ffe01d", "#131511", "#171a16", "#252823", "#3a3e37", "#555950", "#74796e", "#959a8d", "#b5b8ad", "#ced0c8", "#dfe0da", "#11150f", "#161b14", "#23291f", "#383f32", "#525b49", "#727b64", "#939c83", "#b3baa3", "#cdd2c0", "#dee1d4", "#10160d", "#151b11", "#222a1c", "#35402d", "#505d42", "#6f7d5b", "#919e78", "#b1bc98", "#ccd3b6", "#dee2cd", "#0f160b", "#141c0f", "#202b19", "#344128", "#4e5e3b", "#6d7e52", "#8fa06d", "#b0be8c", "#cbd5ab", "#dde4c4", "#0e1709", "#121c0c", "#1f2b16", "#324223", "#4c5f35", "#6b8049", "#8da162", "#aebf7e", "#cad79d", "#dce5b9", "#0d1707", "#111d0a", "#1d2c12", "#30431f", "#4a602e", "#698140", "#8ba355", "#acc16e", "#c8d98c", "#dbe7aa", "#0c1806", "#101d08", "#1c2c0f", "#2f441a", "#486127", "#678236", "#89a447", "#aac35b", "#c7db75", "#daea96", "#0b1805", "#0f1e06", "#1b2d0c", "#2d4415", "#46621f", "#65832a", "#87a535", "#a9c541", "#c5de52", "#d8ec75", "#0a1803", "#0e1e04", "#192d07", "#2b450e", "#446315", "#64841c", "#86a621", "#a7c624", "#c4df2c", "#d7ef4b", "#081900", "#0b1f00", "#162e00", "#294600", "#426400", "#628500", "#85a700", "#a7c700", "#c3e000", "#d6f000", "#111514", "#151a19", "#222927", "#363e3c", "#4f5a56", "#6e7b74", "#8f9b93", "#b0b9b1", "#cbd1ca", "#dde1dc", "#0e1615", "#121b1a", "#1e2a27", "#30403c", "#485d55", "#667e71", "#879f8e", "#a9bdab", "#c6d4c5", "#dae3d8", "#0b1615", "#0f1c1a", "#1a2b28", "#2b423b", "#415f54", "#5d806e", "#7ea289", "#a1c0a4", "#c1d7bf", "#d6e4d3", "#091715", "#0c1c1a", "#162c28", "#26433b", "#3a6153", "#55836c", "#75a585", "#99c39e", "#badab7", "#d2e7cd", "#071715", "#0a1d1a", "#132c28", "#21443b", "#346252", "#4d856a", "#6ba880", "#8fc796", "#b2ddae", "#cde9c5", "#051816", "#071d1b", "#0f2d28", "#1c453b", "#2d6351", "#448768", "#61aa7c", "#83ca8e", "#a8e1a3", "#c6edbc", "#041816", "#051e1b", "#0c2d28", "#17453b", "#266451", "#3b8866", "#55ad77", "#76ce84", "#9ae694", "#bcf1af", "#031816", "#041e1b", "#082e28", "#11463b", "#1f6550", "#318a64", "#48af72", "#65d27a", "#87eb81", "#aff69d", "#011816", "#021e1b", "#042e28", "#0a473b", "#156650", "#238b62", "#35b26d", "#4cd66c", "#69f264", "#a0fb88", "#001916", "#001e1b", "#002f28", "#00473b", "#00674f", "#008d60", "#00b567", "#00db59", "#00fa12", "#92ff74", "#111516", "#151a1c", "#22282a", "#353e40", "#4e5a5c", "#6c7a7b", "#8c9c9a", "#acbab7", "#c8d2cf", "#dbe1df", "#0e1518", "#121a1e", "#1e292d", "#2f3f44", "#465c5f", "#617d7e", "#819f9c", "#a2bdb7", "#c0d5ce", "#d5e3de", "#0b161a", "#0f1b20", "#192a2f", "#294046", "#3e5e62", "#587f80", "#76a29e", "#97c1b8", "#b7d8cd", "#cfe6dd", "#09161b", "#0c1b21", "#162a31", "#244149", "#375f65", "#4e8183", "#6aa49f", "#8bc4b8", "#acdbcd", "#c7e8dc", "#07161d", "#0a1c23", "#122b33", "#1f424a", "#2f6067", "#448385", "#5ea7a1", "#7dc7b9", "#a0dfcc", "#beecda", "#05161e", "#071c24", "#0e2b34", "#19434c", "#286169", "#3b8486", "#52a9a2", "#6ecab9", "#90e3cb", "#b2efd8", "#03171f", "#051c25", "#0a2b36", "#14434e", "#20626a", "#308588", "#44aba3", "#5ccdba", "#7ce7ca", "#a2f3d7", "#021720", "#031c26", "#062c37", "#0d434f", "#18626c", "#258689", "#34aca5", "#45cfba", "#5febc9", "#8cf8d4", "#011720", "#011c27", "#032c38", "#064450", "#0d636d", "#17878b", "#20aea6", "#2ad2bb", "#3befc8", "#75fcd2", "#001721", "#001d27", "#002c38", "#004451", "#00636e", "#00888c", "#00afa6", "#00d3bb", "#00f1c8", "#62ffd0", "#121417", "#17191d", "#23272c", "#373d43", "#505960", "#6d7980", "#8d9aa0", "#acb9bd", "#c8d1d4", "#dae1e2", "#10141b", "#141921", "#202831", "#323e49", "#495a67", "#647b88", "#829da9", "#a2bbc4", "#c0d3d8", "#d5e3e5", "#0e141e", "#121924", "#1c2836", "#2d3e4f", "#415b6e", "#5a7c90", "#779fb0", "#97beca", "#b7d6dd", "#cfe4e9", "#0b1421", "#0f1928", "#19283a", "#273e54", "#3a5c74", "#517d97", "#6ca0b7", "#8cc0d1", "#aed8e2", "#c8e6ec", "#091424", "#0c192b", "#15283e", "#223f59", "#325c7a", "#477e9d", "#60a2bd", "#80c2d7", "#a4dae7", "#c1e7ef", "#071427", "#0a192e", "#112842", "#1c3f5e", "#2a5d7f", "#3d7fa2", "#54a3c3", "#72c4dd", "#99dcec", "#bae9f3", "#05142a", "#071932", "#0c2846", "#153f62", "#225d84", "#3180a7", "#46a4c9", "#64c6e3", "#8edef1", "#b2ebf6", "#03132d", "#041835", "#072749", "#0d3f66", "#175d88", "#2480ac", "#36a5ce", "#52c7e9", "#80e0f6", "#a9edfa", "#02132f", "#021838", "#03274c", "#053e69", "#0b5d8b", "#1481af", "#22a6d2", "#3ac9ee", "#72e1fb", "#a2eefd", "#001232", "#00173a", "#00274f", "#003e6b", "#005d8d", "#0081b2", "#00a7d5", "#00caf4", "#64e3ff", "#9defff", "#131417", "#18191d", "#25272c", "#3a3c44", "#545762", "#727783", "#9398a4", "#b2b6c0", "#cccfd6", "#dde0e4", "#12131b", "#171821", "#242632", "#383b4c", "#51576c", "#6e768f", "#8e98af", "#adb7c9", "#c8d0dd", "#dbe0e9", "#11131f", "#161826", "#232538", "#353a54", "#4d5677", "#69769b", "#8997ba", "#a9b7d2", "#c5d0e3", "#d9e0ed", "#111223", "#15172a", "#21243e", "#33395d", "#495482", "#6475a7", "#8497c5", "#a5b7da", "#c3d0e8", "#d7e0f0", "#101127", "#14162f", "#202345", "#313766", "#46528e", "#5f73b4", "#7f96d0", "#a2b6e1", "#c0d0ed", "#d5e0f3", "#0f102c", "#141434", "#1f214c", "#2f356f", "#42509a", "#5b71c1", "#7a95da", "#9eb6e8", "#bed0f1", "#d4e0f6", "#0f0e31", "#13123a", "#1e1f53", "#2d3279", "#3f4ca7", "#566fce", "#7694e4", "#9bb6ee", "#bcd0f5", "#d2e0f9", "#0f0c36", "#131040", "#1d1b5b", "#2b2d84", "#3c48b5", "#516cdb", "#7193ee", "#98b6f4", "#bad0f9", "#d1e0fb", "#0f073c", "#130b47", "#1d1466", "#2a2593", "#393ec9", "#4c67eb", "#6d92f7", "#95b5fa", "#b8d0fc", "#d0e0fd", "#100045", "#140052", "#1e0075", "#2c00ad", "#3900f6", "#465fff", "#6990ff", "#93b5ff", "#b7d0ff", "#cfe1ff", "#141317", "#19181d", "#27262c", "#3d3b43", "#595560", "#7a7480", "#9b95a1", "#bab4be", "#d2cdd4", "#e1dee3", "#15121a", "#1a1720", "#282531", "#3f3949", "#5c5369", "#7d718b", "#9f92ab", "#bdb1c5", "#d4cbda", "#e3dde6", "#15121e", "#1a1624", "#292336", "#403751", "#5e5072", "#806e95", "#a38eb5", "#c0aecd", "#d7cadf", "#e5dcea", "#161022", "#1b1529", "#2a213c", "#423458", "#614c7c", "#8469a0", "#a68abf", "#c4abd5", "#d9c8e4", "#e7daed", "#160f25", "#1c132d", "#2b1f42", "#443160", "#634886", "#8864ac", "#ab86c9", "#c7a8dc", "#dcc6e8", "#e8d9f0", "#170d2a", "#1d1132", "#2d1c48", "#462c69", "#674291", "#8c5db9", "#af80d4", "#caa5e4", "#dec4ed", "#ead8f3", "#180a2e", "#1e0e37", "#2e184f", "#482672", "#6a3a9d", "#9154c7", "#b37ae0", "#cea2eb", "#e1c2f2", "#ecd7f6", "#190733", "#1f093c", "#301156", "#4b1e7c", "#6f2eab", "#9648d6", "#b873ec", "#d19ef3", "#e3c0f6", "#edd5f9", "#1a0337", "#200441", "#32095d", "#4e1186", "#721eb7", "#9c36e7", "#bd6bf7", "#d49afa", "#e5befb", "#efd4fc", "#1b003b", "#210046", "#330062", "#50008d", "#7601c1", "#a301fa", "#c065ff", "#d797ff", "#e7bcff", "#f1d3ff", "#151316", "#1b181c", "#2a252a", "#403a40", "#5e545b", "#80737a", "#a29399", "#bfb2b7", "#d6cccf", "#e4dedf", "#171219", "#1d161e", "#2c232e", "#453744", "#655060", "#896e7e", "#ac8e9b", "#c8afb7", "#dccace", "#e8dcde", "#19101b", "#1f1521", "#2f2131", "#493448", "#6b4c64", "#916882", "#b5899d", "#d0abb7", "#e2c7ce", "#ecdade", "#1a0f1e", "#211324", "#321e35", "#4e304d", "#724669", "#9a6285", "#bf82a0", "#d8a6b8", "#e7c5cd", "#f0d9dd", "#1c0d21", "#231127", "#351b39", "#522b51", "#79406e", "#a45a8a", "#ca7ba2", "#e0a2b8", "#ecc2cd", "#f3d7dd", "#1e0a24", "#250e2a", "#38173d", "#572656", "#803873", "#ad518e", "#d473a4", "#e79db8", "#f1c0cd", "#f6d6dc", "#200727", "#270a2e", "#3b1241", "#5c1e5c", "#872e79", "#b74493", "#de69a7", "#ef98b9", "#f6becc", "#f9d5dc", "#22042a", "#290532", "#3f0a46", "#611261", "#8e1d7f", "#c13298", "#e95caa", "#f693b9", "#fabbcc", "#fcd3db", "#23012c", "#2b0234", "#410349", "#640664", "#930c82", "#c91c9c", "#f44bac", "#fc8fb9", "#fdbacc", "#fed3db", "#24002d", "#2c0035", "#42004a", "#650066", "#940084", "#cd009e", "#ff34af", "#ff8cb9", "#ffb9cc", "#ffd2db"
In an array, you can use them like lut[000] to lut[999], where the digits correspond to H, S, L. A single digit number is a (ever so sligthly red-ish) gray value, since hue is 0 and saturation is 0.
I managed to get some fresh 2D rewriting related ideas.
The first step was the idea that I could pay a lot more attention to the regions rules run in and the regions the actual patterns showed up in that get replaced. In fact, this kind of boundary can be considered a core element that shows up even nested in itself - while the actual pixel data is still flat, and be used to limit the range of searches and also keep track of patterns like tiles or bigger cells to perhaps dramatically speed up searching.
Then I went kind of wild with the idea that each individual cell/ pixel could actually be a bag of contents, like vector graphics, words, whatever. Wondering how to make rules that can look into and replace contents of multiple adjacent bags in some 1-3D pattern, I ended up with the realization that graphs could represent both rules themselves and this data pretty well. The rewriting convention of "previous items -> new items" can itself be used to represent an edge in a (hyper)graph, and each item is a node.
Rules like | x0 y1, go right | x1 y1 can in sum represent a 2D grid with all relevant adjacencies (for something like rule 110, relevant adjacencies could be chosen). And | x0 y1, contains | player, button can list all the contents of a cell. So what is usually code can also be the data structure, which implies the gameplay rules modify (and the IO interacts with) rules themselves. To express this more clearly, a structural editor could show actual graphs. If this seems at all confusing, it is to me as well - but also kind of exciting.
...oops.
Well, on a few of these days, I returned to a personal project from a while ago I use almost every week on my tablet: an interactive HTML form for D&D character sheets generated and saved as a JSON format containing both the UI structure and the contents. This time, I'm using my own simple syntax that is easier to edit and read directly, because there is barely any nesting. So I added an input to edit it directly on the site, modifying the fields - and it gets updated the other way round too.
Missing so far, and in my mind pretty crucial, is something like Excel formulas, values referencing other values and doing math on them. If I add that, the project will probably get it's own page on this site. It also has some bugs right now, but can be tried here. The editor tab should show the format pretty well.
Made mockups (using some example snippets from a few other people, written in Vera) of what a structural editor for the language could look like. In particular focusing on 'syntax highlighting' at this point, but going beyond color and font style. Some of the symbols are hidden and words are formatted in blocks, bullet point lists, and so on. It will probably change a decent bit soon and not make sense without a lot of context, so I am not posting it here (yet), but the discord has said context and discussion.
Messed around with spectrograms in a Jupyter notebook a little. Went with the quickest path to some kind of output, but what I'm actually interested in would be using a method for obtaining higher frequencies with increased resolution in the time domain, but low frequencies with increased resolution in the frequency domain. While that would be useful in scientific applications, really the goal here is for it to look nicer. And then instead of displaying a typical plot, use the mic input or generative audio to make some kind of cool real-time visualization. An interesting one might be to wrap the octaves in a spiral and animate it, perhaps so that older parts fade out and slowly leave the screen. What would a drawing of a square or some other shape sound like?
After some searching, this method of generating the spectrogram data seemed helpful: The fast Continuous Wavelet Transform (fCWT). As for the actual visuals, I am inspired by two projects right now. One is oscilloscope music like N-SPHERES by Jerobeam Fenderson, and iOS apps like Spectral Eye and MIDImorphosis 2 by Secret Base Design that feature the wrapping around octaves.
Did not touch any code at all, but read a bunch about ADHD. Also did a bit of practice on my recently modified keyboard layout, which switched to a different default keymap called Enthium (Glove80 Keymap by Sunaku). Also spent a moment looking at some projects that inspired me a few years ago, but I now believe don't actually go as far as I thought then. They are concepts for a new kind of operating system but resemble macOS/ iOS a lot. One is Desktop Neo by Lennart Ziburski, 2016, and the other Mercury OS by Jason Yuan, 2019. Still some interesting ideas in there that I admittedly can't really put into words too well.
Did not get much done today. Was trying side by side display of images, er, SVGs when there is enough space. Also added the first bit of JS which is for a canvas in the background I could use for cool visuals. But then I found most of those rather distracting. I ended up putting in a simple feature where dragging on the canvas draws a low opacity line behind everything. It might be nice to embed the generative type projects maybe as iframes, in an interactive or at the very least animated way. This website aside, I did an ADHD test - more on that in half a year or a year perhaps...
More website changes! Links now look a bit like buttons, I found the underline a bit noisy. I also use code in more places, for emphasis of names and next to "buttons" as additional "UI" showing metadata-ish information like the starting date of a project. The code and link CSS uses the default monospace, which might end up looking too different size wise. Is it a thing to size fonts on the web so their x-height match?
My logo is based on the same initial idea the Multiline type generator is. It ends up featuring spiral-like shapes, which I quite like. So I found one to use as a glyph in my About text in place of an @. It looks like this: ꩜! It comes from the Cham Script and is punctuation that "marks the beginning of a section." Pretty fitting!
Lastly, I also added another game to the games page. It is not on itch.io but directly has its' own page. It was a pretty quick project from last year that some people I know actually ended up playing a lot. Making something other than a puzzle game was pretty interesting, it felt fun to play pretty much right away without having to be as intentional. Ultimately I prefer making puzzle games, though, perhaps for that exact reason. I wanted to expand the idea with powerups or something, but felt unsure what would feel elegant and not be too much work to prototype.
Made some bigger changes to this website! I ... increased the number of pages from just one. Instead of linking to my interactive sites directly, I now write a bit about the various projects. I don't feel that good about the writing, but it will improve over time. There's a bit of an 'about' text introducing the various kinds of work I do, but I'm wondering if I should go even more casual and maybe make it not just about the projects I work on?
One thing fairly obviously absent now is more images or other media. A page about art and music tools should probably feature some... art and music examples. I don't want to extensively document the tools yet since everything is subject to change, and I wonder about uploading lots of images to github. I should maybe be using some other service?