28:null 29:["$","title",null,{"children":"Aquatic Arrays | dduyg | Observable"}] 2e:T16f5,viewof aquaticArrays = { // 1. Load Tracery via ESM const traceryLib = await import("https://cdn.skypack.dev/tracery-grammar"); // Tracery polyfill window.$ = window.$ || {}; window.$.extend = (out, ...args) => { out = out || {}; args.forEach((arg) => { if (arg) Object.keys(arg).forEach((key) => (out[key] = arg[key])); }); return out; }; // 2. Setup the Inputs const form = Inputs.form({ cols: Inputs.range([1, 25], { value: 10, step: 1, label: "🌊 Cols" }), rows: Inputs.range([1, 20], { value: 10, step: 1, label: "🌊 Rows" }), visitors: Inputs.range([0, 50], { value: 12, step: 1, label: "🧜‍♀️ Visitors" }), treasures: Inputs.range([0, 50], { value: 6, step: 1, label: "🐚 Treasures" }) }); // 3. Create the HTML and Styles const container = html`

`; const styles = html` `; // 4. The Render Logic const renderOcean = () => { const { rows, cols, visitors, treasures } = form.value; const world = { v1: ["🐙", "🐠", "🧜🏽‍♀️", "🐬", "🐳", "🧜‍♀️", "🧜‍♂️", "🦑", "🦈", "🧜", "🐋"], v2: [ "🛟", "🏝️", "⚓️", "⚓️", "⚓️", "⚓️", "🛶", "🦀", "🛳", "🐡", "🛟", "💎" ], m: ["🌊", "🌊", "▫️", "▫️", "🪸", "🪼", "🐚", "⛵️", "🪨", "🫧"] }; const grammar = traceryLib.createGrammar(world); let pattern = Array.from({ length: rows }, () => Array(cols).fill("m")); const getRandomInt = (max) => Math.floor(Math.random() * max); const totalCells = rows * cols; const actualVisitors = Math.min(visitors, totalCells / 2); const actualTreasures = Math.min(treasures, totalCells / 2); for (let i = 0; i < actualVisitors; i++) pattern[getRandomInt(rows)][getRandomInt(cols)] = "v1"; for (let i = 0; i < actualTreasures; i++) pattern[getRandomInt(rows)][getRandomInt(cols)] = "v2"; const rawGrid = pattern .map((row) => row.map((char) => `#${char}#`).join("")) .join("\n"); container.querySelector(".ocean-display").innerText = grammar.flatten(rawGrid); }; // 5. Initialize form.addEventListener("input", renderOcean); renderOcean(); return html`${form}${styles}${container}`; }2f:[] 2c:{"id":"abed743ef7667521","slug":"aquatic-arrays","title":"Aquatic Arrays","thumbnail":"e5a5e46d31bf1353f411216c0ed527c0ead545ccc19da70df52c5b49e84f2b7f","access_level":"public","create_time":"$D2026-05-14T18:19:35.642Z","update_time":"$D2026-05-17T17:18:04.453Z","view_time":null,"first_public_time":"$D2026-05-14T18:19:35.642Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":40,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024","role":"editor"},{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Aquatic Arrays","cells":[{"id":0,"value":"# Aquatic Arrays\nA reactive, procedurally generated grid-based \"oceanscape\" that shifts in real-time as you adjust the parameters. This 2D array of aquatic emojis allows you to set the size of your ocean grid using the 🌊 column and row sliders (e.g., 10 x 10), choose how many 🧜‍♀️ \"visitors\" (sea creatures) to include, and decide how many 🐚 \"treasures\" (special objects) are scattered throughout the scene.\n____\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"

\n\n---\n### ⚓️ Technical Details\n- Uses [*Tracery*](https://github.com/galaxykate/tracery) for emoji grammar and procedural generation.\n- Fetches dependencies via Skypack for a faster, more reliable load than standard script tags.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"