2c:null 2d:["$","title",null,{"children":"061 Last 30 seconds | Saneef H. Ansari | Observable"}] 32:T906,function draw({ state, margin, gap, fontSize, width, height, lineWidth = 1.25, debug } = {}) { const canvasWidth = width - 2 * margin; const canvasHeight = height - 2 * margin; const count = state.length; const cellWidth = (canvasWidth - (count - 1) * gap) / count; const cellHeight = canvasHeight; const els = state.map((s, i) => { const { timestamp, label, lines } = s; const displacementScale = 1.25; const filterId = `${timestamp}-filter`; const linePattern = htl.svg` `; const dy = lineWidth / 2; const linesG = htl.svg` ${lines.map(([[u1, v1], [u2, v2]]) => { const x1 = CSMath.lerp(0, cellWidth, u1); const y1 = CSMath.lerp(0, cellHeight, v1); const x2 = CSMath.lerp(0, cellWidth, u2); const y2 = CSMath.lerp(0, cellHeight, v2); return svg``; })} `; return htl.svg` ${linePattern} ${linesG} ${ debug ? htl.svg`` : null } ${label} `; }); return htl.svg` ${els}`; }33:T400,function generateLines({ seed, maxLines = 90, minLines = 21 } = {}) { const sectionWeightsMap = [ { value: 1, weight: 1 }, { value: 2, weight: 19 }, { value: 3, weight: 40 }, { value: 5, weight: 30 } ]; let proportions = [1 / 2, 1 / 3, 1 / 4, 1 / 5].flatMap((r) => [r, 1 - r]); proportions = _.uniq(proportions); const rnd = CSRandom.createRandom(seed); const sections = rnd.weightedSet(sectionWeightsMap); const u1s = Array.from({ length: sections - 1 }) .map(() => rnd.pick(proportions)) .reduce( (us, ratio) => { const u1 = us.at(-1); const u2 = divideSpace(u1, 1, ratio); return [...us, u2]; }, [0] ); const uPairs = pairUp([...u1s, 1]); const lines = uPairs.flatMap(([u1, u2], i) => { const noise = rnd.noise2D(i / 100, u1) * 0.5 + 0.5; const lines = Math.floor(minLines + noise * (maxLines - minLines)); return CSMath.linspace(lines, true).map((v) => [ [u1, v], [u2, v] ]); }); return lines; }34:[] 30:{"id":"338f14acba2c2034","slug":"061-last-30-seconds","title":"061 Last 30 seconds","thumbnail":"5b64920a4feb3aa8455a48b87ae43d1cbf512823a7ec9d8e086d653e29561c76","access_level":"public","create_time":"$D2023-01-21T21:30:31.805Z","update_time":"$D2023-01-27T05:16:03.391Z","view_time":null,"first_public_time":"$D2023-01-26T18:16:52.346Z","fork":{"id":"04de6357c20e543d","slug":"template-svg-sketch","title":"Template / SVG Sketch","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":854,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"061 Last 30 seconds","cells":[{"id":0,"value":"# 061 Last 30 seconds\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"lastThirtySeconds = {\n const svg = htl.svg``;\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"progress = {\n const t = intervalT;\n\n return htl.svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"## Notes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":780,"value":"A few weeks ago, I saw an artwork created solely using lines by\n[u/SvenBjorn_Fi](https://www.reddit.com/r/generative/comments/10hp66a/testing_outputs_for_a_new_series_of_minimal/).\nI was really interested in trying something like that.\n\nMy sketch notebooks on Observable usually come with a _‘Randomize’_ button. This\ntime, I didn't want to. Here, each block is randomly generated based on recent\n[timestamp](https://en.wikipedia.org/wiki/Unix_time) (rounded to 10 seconds).\nThe right most one will be the latest and the left most one will be 30 seconds\nago. Thus, you’ll only see a combination once.\n\nMaybe, _maybe,_ someone else in another part of the world might see the same\ncombination.\n\n\nThe sketch is made using SVG and\n[SVG filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter).\n⚠️ Safari does not have good support for SVG filters. So, give this notebook a try\nin Firefox or Google Chrome.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":662,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":456,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"fontSize = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"margin = 2 * fontSize + Math.min(width, height) / 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":453,"value":"gap = Math.min(width, height) / 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"progressHeight = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"width = 960","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"height = Math.floor((width * 9) / 16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"state = {\n yield generateState(now);\n while (true) {\n yield Promises.delay(duration, generateState(now));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":820,"value":"function generateState(now) {\n const current = roundDown(now, duration);\n const timestamps = d3\n .range(4)\n .slice(1)\n .reverse()\n .map((i) => current - i * duration);\n\n return timestamps.map((timestamp) => {\n const rnd = CSRandom.createRandom(timestamp);\n const lines = generateLines({ seed: timestamp });\n return { timestamp, label: formatTime(new Date(timestamp)), lines };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":708,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":837,"value":"function divideSpace(min, max, ratio) {\n return min + ratio * (max - min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"duration = 10000 // milliseconds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"intervalT = {\n const start = roundDown(now, duration) - duration / 2;\n while (true) {\n const t = (now - start) % duration;\n\n return t / duration;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"function roundDown(num, nearest = 1000) {\n return Math.floor(num / nearest) * nearest;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":713,"value":"function pairUp(arr) {\n return arr.reduce((res, cur, i, arr) => {\n if (i === 0) return res;\n return [...res, [arr[i - 1], cur]];\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"formatTime = new Intl.DateTimeFormat(\n undefined, //...let the browser pick the locale\n {\n timeStyle: \"medium\",\n hourCycle: \"h23\"\n }\n).format","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"palette = ({\n bg: \"hsl(38, 32%, 93%)\",\n fg: \"hsl(28, 87%, 13%)\",\n accent: \"hsl(22, 85%, 55%)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"fontFamily = \"Georgia, Times, Times New Roman, serif\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"import { CSRandom, CSMath } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"import { seedButton } from \"@saneef/seed-button\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"import { getNotebookUrlWithParams, params } from \"@saneef/notebook-url\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"