2f:T512,## Try It Yourself Write a short paragraph about how you’ve been using AI in your academic life. This is simply a moment to name the practices that already shape your work. It doesn’t need to be polished, defensive, or dramatic, just honest. As you write, use Markdown formatting: bold, italics, lists, headings, anything you want to try. Include one hyperlink using Markdown, so you can practice linking inside a text. The link can be anything—choose whatever is easiest: • the AI tool you use most • a random article you read recently • a YouTube video • a webpage open in your browser • a resource you rely on for other classes The content of the link does not matter. What matters is that you practice turning text into a clickable link using the Markdown pattern: Examples you can try: ### Emphasis - *Italics* → put a word between single asterisks: `*word*` - **Bold** → put a word between double asterisks: `**word**` - ***Bold italics*** → triple asterisks: `***word***` ### Headings - `#` = big title - `##` = smaller title - `###` = even smaller title ### Lists - Use `-` or `*` at the start of each line: - First idea - Second idea - Third idea ### Links Write `[text](https://example.com)` to make a link. Now, write your own paragraph below:30:[] 2d:{"title":"From Language Models to Language Systems ","cells":[{"id":9,"value":"# *From Language Models to Language Systems *\nThis notebook explores the movement from **large language models**, which generate language statistically, to **small poetic systems**, which generate language through explicit structure. \n\nWe’ve spent the semester working with AI as a collaborator. \nToday, we reverse the relation. \nInstead of asking a model to imagine for us, we write the rules by which imagination occurs. \n\nObservable is a live environment for text, code, and visualization. \nEach block you see—a *cell*—can contain JavaScript or Markdown. \nWhen you change something, the system re-evaluates everything connected to it. \nThat is: language becomes a **living dependency**.\n","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"## Why Observable?\nLarge language models operate in the dark: billions of parameters predict what comes next. \nObservable, by contrast, lets you **see** the generative logic. \n\n| Large Language Models | Observable Systems |\n|------------------------|--------------------|\n| Trained on opaque data | Built from explicit rules |\n| Predict correlations | Perform transformations |\n| Text as probability | Text as structure |\n| Feels alive, but unreadable | Readable, but alive |\n\nToday, you’ll create a small, visible language system—something that reorders, mutates, or performs text. \nYou’ll feel what it means to *write a process* instead of a sentence.\n","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"## Language in Motion: Observable and Poetics\n\nToday we are shifting from large language models to a different kind of machine: \na live notebook that lets us see language as data and as motion.\n\nObservable notebooks let us:\n\n- treat text as something we can organize and rearrange,\n- experiment with logic, pattern, repetition, and chance,\n- watch a piece of language change in real time.\n\nThis is not about becoming programmers. \nIt is about understanding that code is another language that can organize other language.","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"# Observable Poetics: Language as Material\n\nWelcome to your first Observable notebook. \nFork this notebook, change its name (click the title above), and make it your own.\n\nYou'll learn two things today:\n1. How to use *Markdown* for writing and formatting text. \n2. How to add **JavaScript cells** that bring your words to life.","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"## Arrays: lists of words as material\n\nIn JavaScript, an array is just a list. \nFor us, it can be a small poem or a word bank.\n\nWe will start with a simple list of words and see how we can transform it in place.","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"words = [\n \"mathematics\",\n \"program\",\n \"hallucination\",\n \"wish\",\n \"syntax\",\n \"code\",\n \"dream\",\n \"simulation\",\n \"structure\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"html`

\n ${words.sort(() => Math.random() - 0.5).join(\" \")}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"### What’s Happening\nThis cell shuffles a list of words into new configurations. \n- `sort(() => Math.random() - 0.5)` randomizes order. \n- `.join(\" \")` tells the system how to glue words together. \n\nChange the joining symbol and the poem’s rhythm changes. \nTry replacing `\" \"` with `\"
\"` or `\"\"`. \nNotice how form emerges from a single structural decision.\n","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"// Join with commas\nwords.join(\", \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"// Join with line breaks\nhtml`${words.join(\"
\")}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"// Join with nothing (language without breath)\nwords.join(\"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"// Join with alternating separators\nhtml`${words.join(Math.random() > 0.5 ? \" \" : \"
\")}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"Changing the *joiner* is not trivial—it’s syntactic choreography. \nIn a large model, these joins are hidden. Here, they are exposed. \nWe begin to see how small adjustments in rule-space alter the world that language inhabits.\n","pinned":true,"hidden":false,"mode":"md"},{"id":34,"value":"{\n let p = html`

${words.join(\" \")}

`;\n let timer = setInterval(() => {\n p.innerHTML = words.sort(() => Math.random() - 0.5).join(\" \");\n }, 600);\n invalidation.then(() => clearInterval(timer));\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"### Time as Structure\nThis adds **temporal behavior**—the poem now rearranges itself every 1.5 seconds. \nYou can think of it as a looped performance of chance. \n\nPlay with the number in `setInterval()`: \n- `200` → chaos \n- `5000` → patience \n\n.\n","pinned":true,"hidden":false,"mode":"md"},{"id":41,"value":"{\n const words = [\"language\", \"is\", \"a\", \"living\", \"system\"];\n\n const mutate = (ws) => ws.map((w) => w.replace(/[aeiou]/g, \"e\"));\n\n const result = mutate(words).join(\" \");\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`Language organizes the world but resists being organized.\nEvery sentence is a temporary structure built out of sound, memory, and air.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"think of this as raw material, not code yet, just text.\n","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"{\n const text =\n \"Language organizes the world but resists being organized. Every sentence is a temporary structure built out of sound, memory, and air.\";\n const words = text.split(\" \");\n return words.length + \" text to be mutated.\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"now the paragraph is an array of words . we have disassembled it to expose its structure. ","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"{\n const text =\n \"Language organizes the world but resists being organized. Every sentence is a temporary structure built out of sound, memory, and air.\";\n\n const mutate = (t) => t.replace(/[LE]/g, \"\"); // removes vowels\n const result = mutate(text);\n\n return md`${result}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"We’ve changed a single pattern — a rule about vowels — and the text now becomes both alien and familiar.\nMeaning is half-present, half-erased.\nThis is what code does to language: it makes its skeleton visible.","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"{\n const text = \"Language organizes the world but resists being organized.\";\n const frames = [];\n\n for (let i = 0; i <= 10; i++) {\n const cutoff = Math.floor((i / 5) * text.length);\n frames.push(text.slice(0, cutoff));\n }\n\n // create a container element to display inside\n const div = html`

`;\n\n // asynchronous animation loop\n (async () => {\n for (const frame of frames) {\n div.textContent = frame;\n await new Promise((r) => setTimeout(r, 300));\n }\n })();\n\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"{\n const text = \"Language organizes the world but resists being organized.\";\n\n // Rule: hide only words longer than 6 characters\n const rule = (w) => (w.length > 4 ? \"███\" : w);\n\n const result = text.split(/\\s+/).map(rule).join(\" \");\n\n // In a block cell, you MUST explicitly return the element you want to see\n return md`${result}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"Use a loop to gradually substitute words rather than type them out:","pinned":false,"hidden":false,"mode":"md"},{"id":76,"value":"{\n const text = \"I remember silence before the machines learned to dream.\";\n const div = html`

`;\n const words = text.split(\" \");\n\n (async () => {\n for (let i = 0; i < words.length; i++) {\n const alt = [...words];\n alt[i] = \"█\".repeat(words[i].length);\n div.textContent = alt.join(\" \");\n await new Promise((r) => setTimeout(r, 400));\n }\n })();\n\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"# Language as Material\n\nFor today’s experiment, you’ll work with **a human text** \nIt can be:\n- a paragraph from a novel \n- a passage of prose or poetry \n- a short piece of your own writing \n\nChoose a text that matters to you — something you want to listen to differently. \nWe’ll take it apart, re-structure it, and animate it, not to destroy its meaning but to **understand how meaning lives in form, rhythm, and relation.**","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"text = `\nwe crucify Gilgamesh on a TANK\nViking II reaches Mars\nImam Ali dances over a nuclear blast\ncursed are the clouds which repel water\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"words2 = text.split(\" \")","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"words2.reverse()","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"viewof speed = Inputs.range([100, 2000], {\n label: \"Speed (ms)\",\n step: 100,\n value: 800\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"display = {\n const div = html`

`;\n let i = 0;\n const interval = setInterval(() => {\n div.textContent = words2.slice(0, i).join(\" \");\n i = (i + 1) % words2.length;\n }, speed);\n invalidation.then(() => clearInterval(interval));\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"text2 = `\nwe crucify Gilgamesh on a TANK\nViking II reaches Mars\nImam Ali dances over a nuclear blast\ncursed are the clouds which repel water\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}