2e:null 2f:["$","title",null,{"children":"5. Rivulet Aesthetics and Strand Layout | Jo Wood | Observable"}] 34:T61a,## 5.1 Strand flex It is useful to acknowledge that different strand types have varying levels of flexibility when it comes to their layout. At the most flexible end are **question strands**. They mark a list row at one end and either a cell to the left or right of its marker column somewhere along the strand. The length and trajectory of the strand is largely unconstrained and so can be used to imply a range of shapes, or to infill gaps within the space of strands. Almost as flexible are **reference strands** as they too are only pinned by two markers – one at each end – with freedom to route the strand anywhere between the markers. The constraints for the two endpoints are a little tighter than for question strands because their horizontal position relative to other strands in the same glyph can have more impact on their effect. Then come **value strands** that don't have the same trajectory flex as reference and question strands because the number and positioning of horizontal lexemes is used to determine their value. Defining a given number, especially for larger values can be tricky as larger consecutive primes have greater gaps between them. For larger numbers like this it can often be easier to build them with action strands (e.g. through multiplication or exponential actions). And probably most constrained of all are the **action strands** because like value strands, the positioning of the strand's (vertical) lexemes determines their value, and additionally the hook must be aligned vertically with a data strand's hook.35:Tab7,

1 ╵ ╭─ ╵ ╭─ ─╮─╮ ╵╵ ╮ 2 ╵│ │ ╰─╯ │ ╷ 3 │╯ ╵ │ ╭ ╯ ╮╭ 5 ╯ ╯ ╯ │ ╷│╷ ╭ ╭ ╭ ╰─ ╭│╰╮ │╴╮ │─╮│ ││ ╷ │ │ │ │╰─ │ │ ╰─╯╷ ╰─╯ ╷ │ ╷

Fig. 5.1: An input list summation function in a programmatic minimalist style

36:T14b8,

1 ╵╭───╮ ╭─╮╵╭───╮ ╭──╮╭───╮╭──╮ ╵╵ ╮ 2 │ ╵ │ │ │ │ │ │ ││ ││╮ │ ╷ 3 ╰─╯ │ ╯ │ │ ╴─╯ ╭─╯│─╮╰╯│╰─╯ ╮ 5 ╯ ╭─╯ ╯ ╯ ╰─╯ ╷╷ 7 ╭ ╰─╮ ╭ ╭───╮╭───╮ ╭╰╮ 11 ╭╶│ ╭─│ │─╮ │╭─ ││ ─╮│ │╭╷ 13 │ │ ╰─╯ │ │ │╰──╯╰──╯│ │││ ╰─╯ ╰─╯ ╰ ╰ ││ ╷ ╷ │ ╷

Fig. 5.2: The input list summation function with the first two glyphs reworked to emphasise symmetry and repetition

37:T22c4,

1 ╵╭───╮ ╭─╮╵╭───╮ ╭──╮╭───╮╭──╮ 2 │ ╵ │ │ │ │ │ │ ││ ││╮ │ 3 ╰─╯ │ ╯ │ │ ╴─╯ ╭─╯│─╮╰╯│╰─╯ 5 ╯ ╭─╯ ╯ ╯ ╰─╯ 7 ╭ ╰─╮ ╭ ╭───╮╭───╮ 11 ╭╶│ ╭─│ │─╮ │╭─ ││ ─╮│ 13 │ │ ╰─╯ │ │ │╰──╯╰──╯│ ╰─╯ ╷ ╰─╯ ╰ ╰ ╷ 1 ╵╵ ╭─╮ ╭─╮╭─╮ ╶╮ 2 │ │ │ ││ │ ╵ │╷ 3 │╯ ╰─╯ ││ ╰─╯ ││ 5 │╵ ╭─╮ ││ ╭─╮ ││ │╰─╯ ╰─╯╰─╯ ╰─╯│ ╭─╯╭─────╮╭─────╮╰─╮ │ ╭─╮│ ││ │╭─╮ ╷ ╰─╯ │╰───╯╰───╯│ ╰─╯ ╰─╮ ╭──╮ ╭─╯ ╰─╯ ╰─╯ ╷

Fig. 5.3: The input list summation function with all glyphs reworked to emphasise symmetry and repetition

38:T6d2,An alternative layout design is to fill as much of a rectangular space as possible. This tends to shift the overall feel of the program from 'calligraphic' to 'maze-like', with echoes of Hilbert and Peano [space-filling curves](https://en.wikipedia.org/wiki/Space-filling_curve). One strategy is to lay out the value strands first, attempting to extend the number representation to larger parts of the overall area. For example rather than representing a 1 with a single `─` on row 1, extend it downwards adding and subtracting larger primes (see the fourth value strand in Figure 5.4 extending down to row 13). With the value strands in place, next work on any paired action stands, including those that may be paired with as yet unplaced reference strands. Action strands are also relatively constrained in their layout but they can be moved vertically without changing their meaning, and they can extend both to the left and right of their hook column giving a little more flexibility why attempting to fill space. When needing to extend an action strand up or down but not wishing to add value-laden `│` lexemes, alternating left and right corner lexemes can be useful (see the third action strand in Figure 5.4). With the two most constrained strand types in place, fit the more flexible reference and question strands to occupy as much of the the remaining space as possible. Figure 5.4 below is a reworking of the same summation function following this strategy with only 10 out of 196 cells unfilled (5%). In contrast, the minimalist summation function in Figure 5.1 had 50 empty cells out of an area of 136 cells (37%). A design challenge is to create a 100% filled space, which is sometimes possible, but usually hard to achieve.39:T1a47,

1 ╵╭─────╮╵╭───╮╭─╮───╮╵╵ ╭────╯ 2 │╭───╮╷ ╰╮ ─╯╰╮│╰──╯ ╴─╯╷╭───╮ 3 │╯╭─╮╰╮ ╵│╭─╮╭╯│╭╰─╮ ╰─╮││╭─╮│ 5 ╯ │ │─╯ ╯╯│ ││╭╯│─╮│ ╭ ╷╰╯│╭╮│ 7 ╭─╯ ╰─╮ ╭─╯─╯│╰╮╰─╯│ │ ╭─╮││╷│ 11 │ ╭───╯ │╭╮╭╮│╭╯╭──│ │ │││││││ 13 ╰╴╰───╶ ╰╰╰╯╰╯╰─╰──╯ ╰─╯╰─╯╰─╯ ╷ ╷ ╷

Fig. 5.4: The input list summation function with glyphs reworked to fill rectangular space

3a:T19c7,

1 ╵╮ ╵╵ ╵╵ ╭─ ╵╵ ╵╵ ╮ ╵╵╵ ╵╮ ╵╵ 2 ╷ ╷╰─╮ ╵╵╵╯ ╭─ ─╮ │ ╭─ ││ ╷ ╮ 3 ╭╯ ─╯ ││╰─╯╮ ╰─ ╯ │ ╰─╯╴╯╴╮ ╵│ │╰╶ ╰╮│ ╵ ╵ 5 ╷ │╰───╯╮ ╭─╮╭─╯ ╭ │ ╷│╯ │╭ ╷│ │ │ ╭╶ 7 │ ╰─────╯ │ │ ╯ ╭╯╯╭ ╯│ │╷ ╯ ╯ ╯ ╷ ╷ ╷ ╷ ─╯ ╷ ╭│ ╭╰─ ╭ ╭ ╭ ╭ ╭ │ │╰─╮│ │ │ │ │ │ │ ││╰─╮ │ ││ │ │ │ │ ╰─╯│ │ ╰─╯│ │ │ ╰─╯╷ ╰╶╷ ╰─╰─╰─╷

Fig. 5.5: A program to calculate a Collatz sequence from any input number

3b:T2cfc,

1 ╵╭─────╯╵╵╭──────╮╵╵ ╭─ ╵╵╭─── ╵╵╰──╮ ╵╵╵╭───╮ ╵╰──╮╵╵ ╭─────────╮ 2 │ ╭──╶ │╷╰──╮ │ ╵╴╮╵╯ │╭─ ─╮│ │ │╭─│ │ ╷ ╮╰──╮ │ 3 │ │ ╭╯ │ │ │ │╰─╯╮ ╯╯ ╰─╯╷ ╴╮ ╰──╶││ │╴──╯ ╰╮│ ╰╶╭╶ ╭╯ 5 │ │ ╷ ─╮│ │ │ │ │╮ ╭╭ │ │ ╷│╯ │╭ ╷│ ╭╶ ╭╯ ╭╯ 7 │ │ │ ╰╯ │ │ │ ││ ││ │ ╭ ╭─╮ ╯ ╭╯╯╭ ╯│ │╷ ╯ ╯ ╯ │ ╰───╮ │ │ │ ╰───╯│ ││ ╰───╮ │ │ │ ╭ ╷ │ ╭╰─ ╭ ╭ ╭ ╭ ╰─────╯ ╰──────╯ ╰──────╯ ╰─────╯ ╰─ │ │ ╰─╮│ │ │ │ │ │ ╷ ╷ ╷ ╷ ╰─╯╷ ││ │ │ │ │╭─╯ ╭─╯ ╭│ │ ╰─╯ ││ │ ││ ╰╶ ╭──╯╰───╰───╮ │ │ ╰────── ────╯ ╰─╯ ╷ ╷

Fig. 5.6: The same Collatz function now laid out to spell C O L L A T Z

3c:[] 32:{"id":"51541e392fd8dd81","slug":"rivulet-aesthetics-layout","title":"5. Rivulet Aesthetics and Strand Layout","thumbnail":"5a2b0570bf2e037db9fd354abbb9c64231d7a32dfba943af3decde975adac8bf","access_level":"public","create_time":"$D2025-06-01T19:46:40.085Z","update_time":"$D2026-09-10T15:41:41.482Z","view_time":null,"first_public_time":"$D2025-06-15T06:17:25.492Z","has_unpublished_edits":null,"fork":{"id":"53f602ba2c5fead2","slug":"rivulet-levels-and-decisions","title":"4. Rivulet Levels and Decisions","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024"},"version":1430,"publish_version":1430,"role":null,"authored":false,"authors":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null}],"members":[{"type":"individual","id":"e2432cc13dc447d3","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":null,"role":"editor"},{"type":"team","id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood","avatar_url":"https://avatars-next.observableusercontent.com/27f72cecd1ac20853a533421fab228ce5f611cbc0986c1e420f7d3b1eb49ef50","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b719155d9d613f18","slug":"rivulet","title":"Rivulet","owner":{"id":"9461f58b209074d5","login":"jwolondon","name":"Jo Wood"}},"type":"notebook","body":{"title":"5. Rivulet Aesthetics and Strand Layout","cells":[{"id":0,"value":"# 5. Rivulet Aesthetics and Strand Layout\n\n[Levels and Decisions](https://observablehq.com/@jwolondon/rivulet-levels-and-decisions)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1241,"value":"We haven't paid much attention to the overall layout of strands and glyphs so far, with most of the examples laid out to demonstrate the function of different strand types. But a significant part of Rivulet 'coding' involves thinking about the layout of strands to create particular visual impressions. It is this aspect of coding design that makes Rivulet such a uniquely interesting language.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1275,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1297,"value":"This variability in flex means if can often be a useful strategy to place the most constrained strand types first, then use the more flexible ones to work around them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1301,"value":"### 5.2 Programmatic Minimalism\n\nAs seen commonly on the previous pages, programmatic minimalism tends to use short strands and lay them out to reflect the algorithmic design of the program. For example, the program below that sums the values in the input `list2` (discussed in Section 4.3) uses a programmatic minimalist style. Strands are generally as short as possible and strands that perform similar tasks are designed to look similar. Glyphs are spaced out to separate different steps of the algorithm.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1282,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1342,"value":"This style may be useful when developing a new algorithm, or learning the language, but it isn't particularly visually pleasing with short broken lines dominating the appearance and not much of a balance across the space of glyphs.\n\nInstead we might seek some different visual design goals...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1314,"value":"### 5.3 Symmetry and repetition\n\nWe can recognise that many strand shapes can be reflected along a vertical axis and retain the same information. For example zero data strands, most reference strands and all action strands.\n\nIf a strand is given some distinctive shape, for example a rectangle, we can use it as a core template shape to repeat across strands, like [counters](https://en.wikipedia.org/wiki/Counter_%28typography%29) in typography. And even when strands are not quite identical, we can exploit gestalt principles of _closure_ and _continuity_ to our advantage.\n\nCombining repetition and symmetry creates a more harmonious and balanced strand layout. For example, here is a reworking of the first two strands in the list summation function seen above following this principle:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1310,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1352,"value":"We may choose to emphasise symmetry in the entire program by using the more flexible strand types (especially question and reference strands) to create broader scale structures or to harmonise with other strand assemblages. Here's one example applied to the third glyph in the refactored summation function. Placing this third glyph below the other two also emphasises that this is a separate loop in the summation algorithm.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1316,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1355,"value":"### 5.4 Filling Space","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1395,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1386,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1277,"value":"### 5.5 Onomatopoeic Design","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1246,"value":"Consider a more complex example, a Rivulet program to construct a [Collatz sequence](https://en.wikipedia.org/wiki/Collatz_conjecture). That is, a sequence such that for any given number ${tex`n_i`} in the sequence, if ${tex`n_i`} is 1, end the sequence; if ${tex`n_i`} is even then ${tex`n_{i+1} = \\frac {n_i} 2`}, otherwise ${tex`n_{i+1} = 3 {n_i} +1`}.\n\nWe could represent this in a programmatic minimalism style:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1262,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1268,"value":"`list1` stores the Collatz sequence starting with the number provided as input (first glyph). We check in case the input is a 1, in which case the program can halt (second glyph). The next two glyphs store the ${tex`3n+1`} and ${tex`\\frac n 2`} modifications of the current input number in `list3` as well as a copy of the input number in `list5`. The next level 2 and level 3 glyphs test whether the copy of the current input in `list5` is even or odd and correspondingly assigns one of ${tex`3n+1`} and ${tex`\\frac n 2`} to the output list. The final glyph resets `list3`, updates the input value with the new value from the sequence before looping back to the second glyph to repeat the process.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1369,"value":"But given the flexibility afforded by strand layout we could strive for some kind of onomatopoeic design, where we would like the shape of the strands to reflect something of the character of the program. In this instance we can recognise the Collatz program happens to comprise 7 glyphs and there are 7 letters in the word 'Collatz':","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1371,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1238,"value":"[Cognitive Schemata](https://observablehq.com/@jwolondon/rivulet-cognitive-schemata)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"---\n\n## Appendices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1165,"value":"_For formatting Rivulet code snippets:_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"import {rivFormat} from \"observable:@jwolondon/rivulet-intro\";","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1162,"value":"rivFormat()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"2","titling":"auto"}} 33:"$32:body"