2a:null 2b:["$","title",null,{"children":"Textual Consciousness Pattern | Bairui Su | Observable"}] 30:T477,# Textual Consciousness Pattern I received an assignment to record my stream of consciousness. There are many ways to represent a stream of consciousness, and I chose a simple one: a stream of text input. The core idea is to record not only the characters I type but also the intervals between keystrokes. In this way, I can capture the temporal qualities of my stream of consciousness. In Donald Hoffman’s TED Talk, [*Do We See Reality as It Is?*](https://www.ted.com/talks/donald_hoffman_do_we_see_reality_as_it_is), he presents an interesting metaphor: the world we see is like a computer desktop, where icons are useful abstractions rather than the reality behind them. So, what is the deeper reality behind characters? One possible answer is their Unicode representations in binary form. Inspired by [Casey Reas’s talk at Eyeo 2012](https://vimeo.com/45851523), I would also like to map the binary digits `1` and `0` to different visual characters, transforming the input into beautiful patterns. Please refer to [Box-Drawing Writing](https://recho.dev/examples/box-drawing-writing) in [Recho](https://recho.dev/) for more details.31:T47f,function app() { const data = []; const textarea = html`

`;
  const radio = html`<div onchange=${onSelect} style="margin-bottom:0.5em;font-family:monospace"><label><input type="radio" name="type" value="╱╲" checked> ╱╲ </label><label><input type="radio" name="type" value="│─"> │─</label><label><input type="radio" name="type" value="▚▞"> ▚▞</label></div>`
  const canvas = html`<span style="display:block;width:${width}px;overflow-wrap: break-word;font-family:monospace;margin-top:10px;padding:10px;background:black;color:white;line-height:1.25em"></span>`;

let lastTime = null;
  let select = "╱╲"

function onSelect(e) {
    select = e.target.value;
    canvas.innerText = render(data, select);
  }

function onInput(e) {
    if (e.inputType !== "insertText") return;
    if (lastTime === null) lastTime = Date.now();
    const currentTime = Date.now();
    const time = currentTime - lastTime;
    lastTime = currentTime;
    data.push({val: e.data, time: time});
    canvas.innerText = render(data, select);
  }

return html`${radio}${textarea}${canvas}`;
}32:[{"id":"65afbf489d0f8c2ed86c270d4ab9397c97a7d3692af37fc0c6e15dc34afa034e9c7082a2a669b04513f849bc839539486be9bbf2c32dacef0c2c50e261a84435","href":"https://static.observableusercontent.com/files/65afbf489d0f8c2ed86c270d4ab9397c97a7d3692af37fc0c6e15dc34afa034e9c7082a2a669b04513f849bc839539486be9bbf2c32dacef0c2c50e261a84435","name":"output1.png","type":"image/png","lastModified":1788914870429,"size":293036},{"id":"6d2625bdd524b2f8b26cca9711ed3025529f94da02444beb5332a9493819319e42137d96c88010fe108e3595298a2c3af7f5dcce7e3f9d16fd4541f51f631399","href":"https://static.observableusercontent.com/files/6d2625bdd524b2f8b26cca9711ed3025529f94da02444beb5332a9493819319e42137d96c88010fe108e3595298a2c3af7f5dcce7e3f9d16fd4541f51f631399","name":"output2.png","type":"image/png","lastModified":1788914884777,"size":86525},{"id":"719656e4523411799fc192fe42383fa0d95530aff73d44890034b58f43e8fa17342aa6fc7efa3c5e4e7b4a11e83ffb7db7fd9e12263abcf22640d23c0fa4220c","href":"https://static.observableusercontent.com/files/719656e4523411799fc192fe42383fa0d95530aff73d44890034b58f43e8fa17342aa6fc7efa3c5e4e7b4a11e83ffb7db7fd9e12263abcf22640d23c0fa4220c","name":"output3.png","type":"image/png","lastModified":1788914898369,"size":95579}]
2e:{"id":"3c8bd44f87dc8c88","slug":"textual-consciousness-pattern","title":"Textual Consciousness Pattern","thumbnail":"78e8804a297228c7734d6c28c559921a801da35af126e017428ed273e2535d1e","access_level":"public","create_time":"$D2026-09-08T23:17:01.571Z","update_time":"$D2026-09-09T03:03:26.175Z","view_time":null,"first_public_time":"$D2026-09-09T00:51:16.430Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024"},"version":432,"publish_version":432,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ec39dbb0bd8e40","login":"pearmini","name":"Bairui SU","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":null}],"members":[{"type":"team","id":"3e931206c18366b5","login":"pearmini","name":"Bairui Su","avatar_url":"https://avatars-next.observableusercontent.com/0c55731913f2096b86eadf187f5e21ae0a951f3c4dd6bbde4bf2a8536c5b6e49","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Textual Consciousness Pattern","cells":[{"id":1,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"viewof button = Inputs.button(\"Clear\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"{\n  button;\n  return app();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"## Examples\n\nHere are some patterns generated by myself.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":41,"value":"FileAttachment(\"output1.png\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":42,"value":"FileAttachment(\"output2.png\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":43,"value":"FileAttachment(\"output3.png\").image()","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"},{"id":33,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"function render(data, select) {\n  let output = \"\";\n  for (let {val, time} of data) {\n    output += \".\".repeat(Math.floor(time / 250) * 8) + char2digits(val, select);\n  }\n  return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"function char2digits(char, select) {\n  return char.codePointAt(0).toString(2).split(\"\").map(d => select[+d]).join(\"\");\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"2","titling":"auto"}}
2f:"$2e:body"
</article></body></html>